diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx index a346b951150d..65ee6c35dbd2 100644 --- a/app/src/atoms/Chip/__tests__/Chip.test.tsx +++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx @@ -19,8 +19,8 @@ describe('Chip', () => { const [{ getByTestId, getByText, queryByLabelText }] = render(props) const chip = getByTestId('Chip_basic') const chipText = getByText('mockBasic') - expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.grey35}`) - expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.grey35}`) + expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`) expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument() }) @@ -94,11 +94,11 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_neutral') const chipText = getByText('mockNeutral') - expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.grey35}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.grey35}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`) + expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`) const icon = getByLabelText('icon_mockNeutral') - expect(icon).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`) + expect(icon).toHaveStyle(`color: ${COLORS.grey60}`) }) it('should render text, icon, no bgcolor with neutral colors and bg false', () => { @@ -112,9 +112,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: ${LEGACY_COLORS.grey60}`) + expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`) const icon = getByLabelText('icon_mockNeutral') - expect(icon).toHaveStyle(`color: ${LEGACY_COLORS.grey60}`) + expect(icon).toHaveStyle(`color: ${COLORS.grey60}`) }) it('should render text, icon, bgcolor with error colors', () => { diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx index cdfe2d86421c..f16c53fba240 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/app/src/atoms/Chip/index.tsx @@ -39,9 +39,9 @@ const CHIP_PROPS_BY_TYPE: Record< } > = { basic: { - backgroundColor: LEGACY_COLORS.grey35, + backgroundColor: COLORS.grey35, borderRadius: BORDERS.borderRadiusSize1, - textColor: LEGACY_COLORS.grey60, + textColor: COLORS.grey60, }, error: { backgroundColor: COLORS.red3, @@ -50,10 +50,10 @@ const CHIP_PROPS_BY_TYPE: Record< textColor: COLORS.red1, }, neutral: { - backgroundColor: LEGACY_COLORS.grey35, + backgroundColor: COLORS.grey35, borderRadius: BORDERS.borderRadiusSize5, - iconColor: LEGACY_COLORS.grey60, - textColor: LEGACY_COLORS.grey60, + iconColor: COLORS.grey60, + textColor: COLORS.grey60, }, success: { backgroundColor: COLORS.green3, diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx index 434e63e92270..4180af7998bf 100644 --- a/app/src/atoms/InlineNotification/index.tsx +++ b/app/src/atoms/InlineNotification/index.tsx @@ -46,7 +46,7 @@ const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record< }, neutral: { icon: { name: 'information' }, - backgroundColor: LEGACY_COLORS.grey35, + backgroundColor: COLORS.grey35, color: COLORS.black90, }, success: { diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx index 2ab08e825fcd..d60133802ed8 100644 --- a/app/src/atoms/MenuList/OverflowBtn.tsx +++ b/app/src/atoms/MenuList/OverflowBtn.tsx @@ -22,7 +22,7 @@ export const OverflowBtn = React.forwardRef( &:active, &:focus { - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:active circle, diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx index 27e6d2c94699..b01d9761d17d 100644 --- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx +++ b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx @@ -45,7 +45,7 @@ describe('OverflowBtn', () => { expect(getByRole('button')).toHaveStyleRule( 'background-color', - `${String(LEGACY_COLORS.grey35)}`, + `${String(COLORS.grey35)}`, { modifier: ':active', } diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx index eb1b0888aaf6..6fe080c92dc4 100644 --- a/app/src/atoms/Slideout/index.tsx +++ b/app/src/atoms/Slideout/index.tsx @@ -11,7 +11,6 @@ import { JUSTIFY_SPACE_BETWEEN, ALIGN_CENTER, COLORS, - LEGACY_COLORS, Overlay, POSITION_FIXED, TYPOGRAPHY, @@ -103,7 +102,7 @@ const CLOSE_ICON_STYLE = css` background: ${COLORS.grey30}; } &:active { - background: ${LEGACY_COLORS.grey35}; + background: ${COLORS.grey35}; } ` diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx index b2417c173c19..930269bc1293 100644 --- a/app/src/molecules/GenericWizardTile/index.tsx +++ b/app/src/molecules/GenericWizardTile/index.tsx @@ -40,7 +40,7 @@ const CAPITALIZE_FIRST_LETTER_STYLE = css` ` const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; @@ -59,7 +59,7 @@ const GO_BACK_BUTTON_STYLE = css` ` const GO_BACK_BUTTON_DISABLED_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; ` const Title = styled.h1` ${TYPOGRAPHY.h1Default}; diff --git a/app/src/molecules/InProgressModal/InProgressModal.tsx b/app/src/molecules/InProgressModal/InProgressModal.tsx index 2dca967bee31..8cab57ad88be 100644 --- a/app/src/molecules/InProgressModal/InProgressModal.tsx +++ b/app/src/molecules/InProgressModal/InProgressModal.tsx @@ -49,7 +49,7 @@ const MODAL_STYLE = css` } ` const SPINNER_STYLE = css` - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; opacity: 100%; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { color: ${COLORS.darkBlackEnabled}; diff --git a/app/src/molecules/InfoMessage/index.tsx b/app/src/molecules/InfoMessage/index.tsx index ae60bcf78c7c..c79745bdc3dd 100644 --- a/app/src/molecules/InfoMessage/index.tsx +++ b/app/src/molecules/InfoMessage/index.tsx @@ -23,7 +23,7 @@ export interface InfoMessageProps { export function InfoMessage({ title, body }: InfoMessageProps): JSX.Element { return ( diff --git a/app/src/molecules/JogControls/ControlContainer.tsx b/app/src/molecules/JogControls/ControlContainer.tsx index 3f306703f205..3e60a319f868 100644 --- a/app/src/molecules/JogControls/ControlContainer.tsx +++ b/app/src/molecules/JogControls/ControlContainer.tsx @@ -17,7 +17,7 @@ interface ControlContainerProps extends StyleProps { } const CONTROL_CHILDREN_STYLES = css` - background-color: ${LEGACY_COLORS.grey10}; + background-color: ${COLORS.grey10}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing16}; width: 100%; diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx index abb24592483b..4f1bf08b63c6 100644 --- a/app/src/molecules/JogControls/DirectionControl.tsx +++ b/app/src/molecules/JogControls/DirectionControl.tsx @@ -186,7 +186,7 @@ const DEFAULT_BUTTON_STYLE = css` background-color: ${COLORS.white}; color: ${COLORS.black}; box-shadow: 0 0 0; - border: 1px ${LEGACY_COLORS.grey30} solid; + border: 1px ${COLORS.grey30} solid; } &:active { @@ -266,7 +266,7 @@ export function DirectionControl(props: DirectionControlProps): JSX.Element { {subtitle} @@ -330,7 +330,7 @@ const ARROW_GRID_STYLES = css` } ` const ARROW_BUTTON_STYLES = css` - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; background-color: ${COLORS.white}; border: ${BORDERS.lineBorder}; @@ -342,15 +342,15 @@ const ARROW_BUTTON_STYLES = css` justify-content: ${JUSTIFY_CENTER}; &:hover { background-color: ${COLORS.white}; - color: ${LEGACY_COLORS.grey55}; + color: ${COLORS.grey55}; box-shadow: 0 0 0; - border: 1px ${LEGACY_COLORS.grey30} solid; + border: 1px ${COLORS.grey30} solid; } &:active { background-color: ${COLORS.white}; - color: ${LEGACY_COLORS.grey60}; - border: 1px ${LEGACY_COLORS.grey30} solid; + color: ${COLORS.grey60}; + border: 1px ${COLORS.grey30} solid; } &:focus { @@ -359,7 +359,7 @@ const ARROW_BUTTON_STYLES = css` &:disabled { background-color: ${COLORS.white}; - color: ${LEGACY_COLORS.grey30}; + color: ${COLORS.grey30}; } @media (max-width: 750px) { @@ -369,28 +369,28 @@ const ARROW_BUTTON_STYLES = css` @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { width: 125px; height: 125px; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; color: ${COLORS.black90}; border-radius: ${BORDERS.borderRadiusSize4}; &:hover { - background-color: ${LEGACY_COLORS.grey40}; + background-color: ${COLORS.grey40}; color: ${COLORS.black80}; border: 1px ${COLORS.transparent} solid; } &:active { - background-color: ${LEGACY_COLORS.grey40}; - color: ${LEGACY_COLORS.grey60}; + background-color: ${COLORS.grey40}; + color: ${COLORS.grey60}; } &:focus { - background-color: ${LEGACY_COLORS.grey40}; + background-color: ${COLORS.grey40}; } &:disabled { - background-color: ${LEGACY_COLORS.grey35}; - color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; border: 1px ${COLORS.transparent} solid; } } @@ -457,7 +457,7 @@ export function TouchDirectionControl( - + {JUMP_SIZE_SUBTITLE} @@ -153,7 +150,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element { > {t(stepSizeTranslationKeyByStep[stepSize])} {`${stepSize} mm`} @@ -173,7 +170,7 @@ export function TouchStepSizeControl(props: StepSizeControlProps): JSX.Element { {`${stepSize} mm`} diff --git a/app/src/molecules/LegacyModal/LegacyModalShell.tsx b/app/src/molecules/LegacyModal/LegacyModalShell.tsx index 7ea8e3590884..5640f5655467 100644 --- a/app/src/molecules/LegacyModal/LegacyModalShell.tsx +++ b/app/src/molecules/LegacyModal/LegacyModalShell.tsx @@ -86,7 +86,7 @@ const Overlay = styled.div` cursor: default; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - background-color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey50}; } ` const ContentArea = styled.div<{ zIndex: string | number }>` diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx index d43ca95276a4..55a89a2a6fd1 100644 --- a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx +++ b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx @@ -74,13 +74,9 @@ describe('LegacyModalHeader', () => { expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey30, { modifier: ':hover', }) - expect(closeIcon).toHaveStyleRule( - 'background-color', - LEGACY_COLORS.grey35, - { - modifier: ':active', - } - ) + expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey35, { + modifier: ':active', + }) fireEvent.click(closeIcon) expect(mockClose).toHaveBeenCalled() }) diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx index 235e8df11093..5bfa336ea8e5 100644 --- a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx +++ b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx @@ -29,9 +29,7 @@ describe('MiniCard', () => { const { getByText } = render(props) const miniCard = getByText('mock mini card') expect(miniCard).toHaveStyle(`background-color: ${String(COLORS.white)}`) - expect(miniCard).toHaveStyle( - `border: 1px solid ${String(LEGACY_COLORS.grey30)}` - ) + expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.grey30)}`) expect(miniCard).toHaveStyle( `border-radius: ${String(BORDERS.radiusSoftCorners)}` ) diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx index 263082290aa1..1301353e67ca 100644 --- a/app/src/molecules/MiniCard/index.tsx +++ b/app/src/molecules/MiniCard/index.tsx @@ -12,14 +12,14 @@ interface MiniCardProps extends StyleProps { } const unselectedOptionStyles = css` background-color: ${COLORS.white}; - border: 1px solid ${LEGACY_COLORS.grey30}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing8}; width: 100%; cursor: pointer; &:hover { - border: 1px solid ${LEGACY_COLORS.grey55}; + border: 1px solid ${COLORS.grey55}; } ` const selectedOptionStyles = css` diff --git a/app/src/molecules/Modal/SmallModalChildren.tsx b/app/src/molecules/Modal/SmallModalChildren.tsx index 0dd0c88de9b9..7fcb6314b42e 100644 --- a/app/src/molecules/Modal/SmallModalChildren.tsx +++ b/app/src/molecules/Modal/SmallModalChildren.tsx @@ -40,7 +40,7 @@ export function SmallModalChildren( {header} { it('renders SharedIcon with correct style', () => { const { getByTestId } = render(props) const module = getByTestId('ModuleIcon_ot-temperature-v2') - expect(module).toHaveStyle(`color: ${String(LEGACY_COLORS.grey50)}`) + expect(module).toHaveStyle(`color: ${String(COLORS.grey50)}`) expect(module).toHaveStyle(`height: ${SPACING.spacing16}`) expect(module).toHaveStyle(`width: ${SPACING.spacing16}`) expect(module).toHaveStyle(`margin-left: ${SPACING.spacing2}`) diff --git a/app/src/molecules/ModuleIcon/index.tsx b/app/src/molecules/ModuleIcon/index.tsx index 780466cf47d0..1cd55f127eb5 100644 --- a/app/src/molecules/ModuleIcon/index.tsx +++ b/app/src/molecules/ModuleIcon/index.tsx @@ -33,7 +33,7 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element { moduleType={module.moduleType} size={SPACING.spacing16} marginX={SPACING.spacing2} - color={LEGACY_COLORS.grey50} + color={COLORS.grey50} css={MODULE_ICON_STYLE} /> diff --git a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx index 9100f0d159f5..590ede62201f 100644 --- a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx +++ b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx @@ -44,7 +44,7 @@ describe('NavTab', () => { expect(tab).toHaveStyle( `font-weight: ${String(TYPOGRAPHY.fontWeightSemiBold)}` ) - expect(tab).toHaveStyle(`color: ${String(LEGACY_COLORS.grey50)}`) + expect(tab).toHaveStyle(`color: ${String(COLORS.grey50)}`) fireEvent.click(tab) expect(tab).toHaveStyle(`color: ${String(COLORS.darkBlackEnabled)}`) expect(tab).toHaveStyle(`border-bottom-color: ${String(COLORS.blue50)}`) diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx index 01d0c81ae1dc..b3264b36c796 100644 --- a/app/src/molecules/NavTab/index.tsx +++ b/app/src/molecules/NavTab/index.tsx @@ -13,7 +13,7 @@ interface NavTabProps { const StyledNavLink = styled(NavLink)>` padding: 0 ${SPACING.spacing4} ${SPACING.spacing8}; ${TYPOGRAPHY.labelSemiBold} - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &.active { color: ${COLORS.darkBlackEnabled}; diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx index 1ab9491a2b16..1e911888665c 100644 --- a/app/src/molecules/ToggleGroup/useToggleGroup.tsx +++ b/app/src/molecules/ToggleGroup/useToggleGroup.tsx @@ -29,7 +29,7 @@ const BUTTON_GROUP_STYLES = css` } &:hover { - background-color: ${LEGACY_COLORS.grey10}; + background-color: ${COLORS.grey10}; color: ${LEGACY_COLORS.black}; box-shadow: 0 0 0; } @@ -65,7 +65,7 @@ const ACTIVE_STYLE = css` padding-right: ${SPACING.spacing8}; background-color: ${COLORS.white}; color: ${LEGACY_COLORS.black}; - border: 1px ${LEGACY_COLORS.grey30} solid; + border: 1px ${COLORS.grey30} solid; ` export const useToggleGroup = ( diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx index 554f349779cc..9ec420741867 100644 --- a/app/src/molecules/UploadInput/index.tsx +++ b/app/src/molecules/UploadInput/index.tsx @@ -23,7 +23,7 @@ const StyledLabel = styled.label` align-items: ${ALIGN_CENTER}; width: 100%; padding: ${SPACING.spacing32}; - border: 2px dashed ${LEGACY_COLORS.grey30}; + border: 2px dashed ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; text-align: center; background-color: ${COLORS.white}; @@ -120,7 +120,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null { > diff --git a/app/src/molecules/WizardHeader/index.tsx b/app/src/molecules/WizardHeader/index.tsx index f170a148f57b..a4d48e2db5c2 100644 --- a/app/src/molecules/WizardHeader/index.tsx +++ b/app/src/molecules/WizardHeader/index.tsx @@ -28,7 +28,7 @@ interface WizardHeaderProps { const EXIT_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; text-transform: ${TYPOGRAPHY.textTransformCapitalize}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; @@ -89,7 +89,7 @@ export const WizardHeader = (props: WizardHeaderProps): JSX.Element => { {currentStep != null && totalSteps != null && currentStep > 0 ? ( - + {t('step', { current: currentStep, max: totalSteps })} ) : null} diff --git a/app/src/molecules/WizardRequiredEquipmentList/index.tsx b/app/src/molecules/WizardRequiredEquipmentList/index.tsx index 57fa21eb12a1..97f0caf17275 100644 --- a/app/src/molecules/WizardRequiredEquipmentList/index.tsx +++ b/app/src/molecules/WizardRequiredEquipmentList/index.tsx @@ -98,7 +98,7 @@ export function WizardRequiredEquipmentList( {footer} @@ -160,7 +160,7 @@ function RequiredEquipmentCard(props: RequiredEquipmentCardProps): JSX.Element { > {displayName} {subtitle != null ? ( - + {subtitle} ) : null} diff --git a/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx b/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx index a5eafabd3097..671150cba2ce 100644 --- a/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx +++ b/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx @@ -105,7 +105,7 @@ export function ConnectRobotSlideout({ {t('searching')} @@ -118,7 +118,7 @@ export function ConnectRobotSlideout({ <> {t('discovery_timeout')} diff --git a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx index cecda02c14ac..0c9c7d9ba251 100644 --- a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx +++ b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx @@ -34,12 +34,12 @@ const StyledInput = styled.input` margin: ${SPACING.spacing4} 0; background-color: ${COLORS.white}; border-radius: ${SPACING.spacing4}; - border: 1px ${BORDERS.styleSolid} ${LEGACY_COLORS.grey30}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; height: ${SIZE_2}; font-size: ${TYPOGRAPHY.fontSizeP}; &:active { - border: 1px ${BORDERS.styleSolid} ${LEGACY_COLORS.grey50}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey50}; } &:hover { @@ -51,7 +51,7 @@ const StyledInput = styled.input` } &:disabled { - border: 1px ${BORDERS.styleSolid} ${LEGACY_COLORS.grey30}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; } ` @@ -79,7 +79,7 @@ export function ManualIpHostnameForm({ const ip = values.ip.trim() const inputForm = document.getElementById('ip') if (inputForm != null) - inputForm.style.border = `1px solid ${String(LEGACY_COLORS.grey30)}` + inputForm.style.border = `1px solid ${String(COLORS.grey30)}` addManualIpAndHostname(ip) resetForm() setMostRecentAddition(ip) diff --git a/app/src/organisms/ApplyHistoricOffsets/LabwareOffsetTable.tsx b/app/src/organisms/ApplyHistoricOffsets/LabwareOffsetTable.tsx index 670a413cb71d..c73326031b37 100644 --- a/app/src/organisms/ApplyHistoricOffsets/LabwareOffsetTable.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/LabwareOffsetTable.tsx @@ -21,7 +21,7 @@ const OffsetTableHeader = styled('th')` padding: ${SPACING.spacing4}; ` const OffsetTableRow = styled('tr')` - background-color: ${LEGACY_COLORS.grey10}; + background-color: ${COLORS.grey10}; padding: ${SPACING.spacing8}; ` diff --git a/app/src/organisms/Breadcrumbs/index.tsx b/app/src/organisms/Breadcrumbs/index.tsx index a862e167cb4d..ae223ca36bab 100644 --- a/app/src/organisms/Breadcrumbs/index.tsx +++ b/app/src/organisms/Breadcrumbs/index.tsx @@ -40,7 +40,7 @@ function CrumbName({ crumbName, isLastCrumb }: CrumbNameProps): JSX.Element { return ( - + {t('calibration_on_opentrons_tips_is_important')} diff --git a/app/src/organisms/CalibrationPanels/LoadingState.tsx b/app/src/organisms/CalibrationPanels/LoadingState.tsx index 197089df2a31..0bc24a1e9bed 100644 --- a/app/src/organisms/CalibrationPanels/LoadingState.tsx +++ b/app/src/organisms/CalibrationPanels/LoadingState.tsx @@ -24,7 +24,7 @@ export function LoadingState(props: LoadingStateProps): JSX.Element { alignItems={ALIGN_CENTER} minHeight="32rem" > - + {header != null ? {header} : null} {body != null ? {body} : null} diff --git a/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx b/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx index 99b78af31ca2..01dac649b39c 100644 --- a/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx +++ b/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx @@ -23,7 +23,7 @@ export function NeedHelpLink(props: NeedHelpLinkProps): JSX.Element { return ( {`${mount} MOUNT`} {pipette != null ? ( diff --git a/app/src/organisms/ChildNavigation/index.tsx b/app/src/organisms/ChildNavigation/index.tsx index b6768a732e15..4fa64b2e405b 100644 --- a/app/src/organisms/ChildNavigation/index.tsx +++ b/app/src/organisms/ChildNavigation/index.tsx @@ -108,7 +108,7 @@ const IconButton = styled('button')` &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:disabled { background-color: transparent; diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx index b846f60956e7..1100ad0d6504 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -294,11 +294,11 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { css={css` ${BORDERS.cardOutlineBorder} &:hover { - border-color: ${LEGACY_COLORS.grey30}; + border-color: ${COLORS.grey30}; } `} > - + {t('app_settings:searching')} @@ -193,7 +193,7 @@ export function ChooseRobotSlideout( name="ot-spinner" spin size="1.25rem" - color={LEGACY_COLORS.grey50} + color={COLORS.grey50} /> ) : ( @@ -212,7 +212,7 @@ export function ChooseRobotSlideout( css={css` ${BORDERS.cardOutlineBorder} &:hover { - border-color: ${LEGACY_COLORS.grey30}; + border-color: ${COLORS.grey30}; } `} flexDirection={DIRECTION_COLUMN} @@ -289,7 +289,7 @@ export function ChooseRobotSlideout( textAlign={TYPOGRAPHY.textAlignCenter} marginTop={SPACING.spacing24} > - + {showIdleOnly ? t('unavailable_or_busy_robot_not_listed', { count: unavailableCount + reducerBusyCount, diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx index 8a21d84f7d71..3b80b1dc57f8 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx @@ -215,7 +215,7 @@ export function AddFixtureModal({ alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN} padding={`${SPACING.spacing8} ${SPACING.spacing16}`} - backgroundColor={LEGACY_COLORS.grey30} + backgroundColor={COLORS.grey30} borderRadius={BORDERS.borderRadiusSize1} > @@ -251,39 +251,39 @@ export function AddFixtureModal({ } const FIXTURE_BUTTON_STYLE = css` - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; cursor: default; border-radius: ${BORDERS.borderRadiusSize3}; box-shadow: none; &:focus { - background-color: ${LEGACY_COLORS.grey40}; + background-color: ${COLORS.grey40}; box-shadow: none; } &:hover { border: none; box-shadow: none; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:active { - background-color: ${LEGACY_COLORS.grey40}; + background-color: ${COLORS.grey40}; } &:disabled { - background-color: ${LEGACY_COLORS.grey35}; - color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; } ` const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx index 06606e116052..3c6de071a102 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx @@ -197,7 +197,7 @@ export function DeviceDetailsDeckConfiguration({ fixtureDisplayList.map(fixture => ( {getModuleDisplayName(module.moduleModel)} diff --git a/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx b/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx index 79c26fab73e0..659e29c87844 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx @@ -59,7 +59,7 @@ export function HistoricalProtocolRunOffsetDrawer( if (uniqueLabwareOffsets == null || uniqueLabwareOffsets.length === 0) { return ( @@ -82,7 +82,7 @@ export function HistoricalProtocolRunOffsetDrawer( return ( diff --git a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx index f8ababa06839..e57e621c77af 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx @@ -189,7 +189,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element { diff --git a/app/src/organisms/Devices/ModuleInfo.tsx b/app/src/organisms/Devices/ModuleInfo.tsx index ae1027e95a0f..0b3d2a053309 100644 --- a/app/src/organisms/Devices/ModuleInfo.tsx +++ b/app/src/organisms/Devices/ModuleInfo.tsx @@ -83,7 +83,7 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => { /> {!isAttached ? t('module_not_connected') : t('module_connected')} @@ -92,13 +92,13 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => { ) : null} {getModuleDisplayName(moduleModel)} {i18n.format(t('current_version'), 'upperCase')} @@ -73,7 +73,7 @@ export const AboutPipetteSlideout = ( {i18n.format(t('serial_number'), 'upperCase')} diff --git a/app/src/organisms/Devices/PipetteCard/index.tsx b/app/src/organisms/Devices/PipetteCard/index.tsx index 97586f145129..f49c59eff97b 100644 --- a/app/src/organisms/Devices/PipetteCard/index.tsx +++ b/app/src/organisms/Devices/PipetteCard/index.tsx @@ -182,7 +182,7 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { } return ( { ) : null} {runStatus != null ? ( - + {t('connect_modules_to_see_controls')} diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx index 20a41a250315..e3ce77bca661 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx +++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx @@ -252,7 +252,7 @@ export function ProtocolRunSetup({ ) : null} {analysisErrors != null && analysisErrors?.length > 0 ? ( - + {t('protocol_analysis_failed')} ) : ( @@ -313,7 +313,7 @@ export function ProtocolRunSetup({ )} ) : ( - + {t('loading_data')} )} diff --git a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx index bf0e3f6d029b..de542573ca29 100644 --- a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx @@ -86,7 +86,7 @@ export function RunFailedModal({ marginTop={SPACING.spacing8} marginBottom={SPACING.spacing16} padding={`${SPACING.spacing8} ${SPACING.spacing12}`} - backgroundColor={LEGACY_COLORS.grey10} + backgroundColor={COLORS.grey10} borderRadius={BORDERS.borderRadiusSize1} overflowWrap="anywhere" border={BORDERS.lineBorder} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx index 3e95a02956f6..b7a238db291c 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx @@ -54,7 +54,7 @@ export function SetupCalibrationItem({ ) : null return ( {label != null && ( )} - + {calibrationDataNotAvailableText ?? subText ?? calibratedText} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx index 5b374e6cb147..f7a1112fd041 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx @@ -48,7 +48,7 @@ const OffsetTableHeader = styled('th')` padding: ${SPACING.spacing4}; ` const OffsetTableRow = styled('tr')` - background-color: ${LEGACY_COLORS.grey10}; + background-color: ${COLORS.grey10}; padding: ${SPACING.spacing8}; ` diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx index cac6a37c8b65..437d38c28f8f 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx @@ -56,7 +56,7 @@ const LabwareRow = styled.div` grid-template-columns: 1fr 6fr 5.9fr; border-style: ${BORDERS.styleSolid}; border-width: 1px; - border-color: ${LEGACY_COLORS.grey30}; + border-color: ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing16}; ` @@ -161,7 +161,7 @@ export function LabwareListItem( extraAttentionText = ( + {t('heater_shaker_labware_list_view')} ) @@ -271,7 +271,7 @@ export function LabwareListItem( {labwareDisplayName} - + {nickName} @@ -293,7 +293,7 @@ export function LabwareListItem( {nestedLabwareInfo.nestedLabwareDisplayName} - + {nestedLabwareInfo.nestedLabwareNickName} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx index a0bb24c73844..bf638d5ee101 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx @@ -45,7 +45,7 @@ const OffsetTableHeader = styled('th')` padding: ${SPACING.spacing4}; ` const OffsetTableRow = styled('tr')` - background-color: ${LEGACY_COLORS.grey10}; + background-color: ${COLORS.grey10}; padding: ${SPACING.spacing8}; ` diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx index 98553d239044..86615f0454be 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx @@ -99,7 +99,7 @@ export function SetupLabwarePositionCheck( diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx index fa35699b4eab..5c5dc73f6d62 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx @@ -30,13 +30,13 @@ import { getWellRangeForLiquidLabwarePair } from './utils' const LIQUID_CARD_STYLE = css` ${BORDERS.cardOutlineBorder} &:hover { - border: 1px solid ${LEGACY_COLORS.grey55}; + border: 1px solid ${COLORS.grey55}; cursor: pointer; } ` const LIQUID_CARD_ODD_STYLE = css` - border-color: ${LEGACY_COLORS.grey30}; - border: ${SPACING.spacing4} solid ${LEGACY_COLORS.grey30}; + border-color: ${COLORS.grey30}; + border: ${SPACING.spacing4} solid ${COLORS.grey30}; border-radius: ${BORDERS.borderRadiusSize3}; ` interface LiquidDetailCardProps { @@ -116,12 +116,12 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { {description != null ? description : null} {selectedValue === liquidId ? ( <> - + {well.wellName} {well.volume} {MICRO_LITERS} @@ -207,7 +207,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { > {displayName} - + {description != null ? description : null} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx index a7498dc8532a..7d40afe592c8 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx @@ -167,7 +167,7 @@ export const LiquidsLabwareDetailsModal = ( @@ -193,7 +193,7 @@ export const LiquidsLabwareDetailsModal = ( {t('slot_number')} @@ -212,7 +212,7 @@ export const LiquidsLabwareDetailsModal = ( {t('labware_name')} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx index 8c0556525135..36d8c74a1419 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx @@ -52,7 +52,7 @@ const HIDE_SCROLLBAR = css` const LIQUID_BORDER_STYLE = css` border-style: ${BORDERS.styleSolid}; border-width: 1px; - border-color: ${LEGACY_COLORS.grey30}; + border-color: ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; ` @@ -113,7 +113,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element { &:hover { cursor: pointer; - border: 1px solid ${LEGACY_COLORS.grey55}; + border: 1px solid ${COLORS.grey55}; } ` const LIQUID_CARD_ITEM_STYLE = css` @@ -132,7 +132,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element { css={LIQUID_CARD_STYLE} padding={SPACING.spacing16} onClick={handleSetOpenItem} - backgroundColor={openItem ? LEGACY_COLORS.grey10 : COLORS.white} + backgroundColor={openItem ? COLORS.grey10 : COLORS.white} data-testid="LiquidsListItem_Row" > {moduleModel != null ? t('on_adapter_in_mod', { @@ -311,7 +311,7 @@ export const LiquidsListItemDetails = ( {description != null ? description : null} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx index d4bb54bc8488..8290a9d42a4b 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx @@ -93,7 +93,7 @@ describe('LiquidDetailCard', () => { getAllByText(nestedTextMatcher('100 µL')) getAllByText(nestedTextMatcher('total volume')) expect(getByLabelText('liquidBox_odd')).toHaveStyle( - `border: ${SPACING.spacing4} solid ${LEGACY_COLORS.grey30}` + `border: ${SPACING.spacing4} solid ${COLORS.grey30}` ) }) }) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx index 0e55b9116b58..ce9d144b90f9 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx @@ -150,7 +150,7 @@ export const LocationConflictModal = ( > + {t('no_usb_connection_required')} ) @@ -383,7 +379,7 @@ export function ModulesListItem({ ) : null} {t('modules')} @@ -185,7 +185,7 @@ function AttachedInstruments(props: { robotName: string }): JSX.Element { gridGap={SPACING.spacing4} minWidth="24rem" > - + {t('shared:instruments')} diff --git a/app/src/organisms/Devices/RobotOverview.tsx b/app/src/organisms/Devices/RobotOverview.tsx index 5cfbc28f1093..5684a06650c6 100644 --- a/app/src/organisms/Devices/RobotOverview.tsx +++ b/app/src/organisms/Devices/RobotOverview.tsx @@ -126,7 +126,7 @@ export function RobotOverview({ > - + {t('characters_max')} {formik.errors.newRobotName && ( diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx index b40646ed19a4..d93d0dbc3389 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx @@ -54,7 +54,7 @@ export function DisplayRobotName({ > {t('robot_name')} - + {robotName} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx index 26cbde420487..800185b6117b 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx @@ -82,7 +82,7 @@ export function RobotServerVersion({ {t('up_to_date')} diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx index 5144953f332e..f45991f65289 100644 --- a/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx +++ b/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx @@ -154,7 +154,7 @@ export function RobotSettingsNetworking({ {t('wireless_ip')} - + {wifi?.ipAddress} @@ -165,7 +165,7 @@ export function RobotSettingsNetworking({ {t('wireless_subnet_mask')} - + {wifi?.subnetMask} @@ -177,7 +177,7 @@ export function RobotSettingsNetworking({ {t('wireless_mac_address')} - + {wifi?.macAddress} @@ -223,7 +223,7 @@ export function RobotSettingsNetworking({ {t('wired_ip')} - + {ethernet?.ipAddress} @@ -234,7 +234,7 @@ export function RobotSettingsNetworking({ {t('wired_subnet_mask')} - + {ethernet?.subnetMask} @@ -245,13 +245,13 @@ export function RobotSettingsNetworking({ {t('wired_mac_address')} - + {ethernet?.macAddress} ) : ( - + {isFlex ? t('not_connected_via_ethernet') : t('not_connected_via_wired_usb')} @@ -305,7 +305,7 @@ export function RobotSettingsNetworking({ - + {isFlexConnectedViaUSB ? t('directly_connected_to_this_computer') : t('not_connected_via_usb')} diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx index fcfb34f38595..4137633e28c0 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx @@ -37,11 +37,11 @@ const UPDATE_PROGRESS_BAR_STYLE = css` margin-top: ${SPACING.spacing24}; margin-bottom: ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize3}; - background: ${LEGACY_COLORS.grey30}; + background: ${COLORS.grey30}; width: 17.12rem; ` const UPDATE_TEXT_STYLE = css` - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; font-size: 0.8rem; ` const HIDDEN_CSS = css` diff --git a/app/src/organisms/Devices/RobotStatusHeader.tsx b/app/src/organisms/Devices/RobotStatusHeader.tsx index f5f63d4d7bd6..360af8448b5b 100644 --- a/app/src/organisms/Devices/RobotStatusHeader.tsx +++ b/app/src/organisms/Devices/RobotStatusHeader.tsx @@ -153,7 +153,7 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element { diff --git a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx index d0072691c07a..fcb054e61d1f 100644 --- a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx +++ b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx @@ -186,7 +186,7 @@ export const BeforeBeginning = ( const UNSELECTED_OPTIONS_STYLE = css` background-color: ${COLORS.white}; - border: 1px solid ${LEGACY_COLORS.grey30}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; height: 12.5625rem; width: 14.5625rem; @@ -197,7 +197,7 @@ const UNSELECTED_OPTIONS_STYLE = css` grid-gap: ${SPACING.spacing8} &:hover { - border: 1px solid ${LEGACY_COLORS.grey55}; + border: 1px solid ${COLORS.grey55}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { diff --git a/app/src/organisms/DropTipWizard/ChooseLocation.tsx b/app/src/organisms/DropTipWizard/ChooseLocation.tsx index 6a96cf811ef2..566ce5d9040c 100644 --- a/app/src/organisms/DropTipWizard/ChooseLocation.tsx +++ b/app/src/organisms/DropTipWizard/ChooseLocation.tsx @@ -171,7 +171,7 @@ const TILE_CONTAINER_STYLE = css` ` const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx index 90b82416e434..a850cc5a9a92 100644 --- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx @@ -169,7 +169,7 @@ function DesktopModal({ {isEngaged ? t('estop_engaged') : t('estop_disengaged')} - + {t('estop_pressed_description')} diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx index 2766606d87b1..e04ef1b4f9d0 100644 --- a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx +++ b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx @@ -21,7 +21,7 @@ interface UpdateInProgressModalProps { } const OUTER_STYLES = css` - background: ${LEGACY_COLORS.grey30}; + background: ${COLORS.grey30}; width: 100%; ` @@ -36,7 +36,7 @@ export function UpdateInProgressModal( diff --git a/app/src/organisms/FirmwareUpdateModal/index.tsx b/app/src/organisms/FirmwareUpdateModal/index.tsx index e5c059a212a4..4032dddb628b 100644 --- a/app/src/organisms/FirmwareUpdateModal/index.tsx +++ b/app/src/organisms/FirmwareUpdateModal/index.tsx @@ -57,12 +57,12 @@ const MODAL_STYLE = css` ` const OUTER_STYLES = css` border-radius: ${BORDERS.borderRadiusSize4}; - background: ${LEGACY_COLORS.grey30}; + background: ${COLORS.grey30}; width: 13.374rem; ` const SPINNER_STYLE = css` - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; opacity: 100%; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { color: ${COLORS.darkBlackEnabled}; diff --git a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx index 68ba821c8704..f184f68c274b 100644 --- a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx +++ b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx @@ -45,7 +45,7 @@ export const AboutGripperSlideout = ( {i18n.format(t('current_version'), 'upperCase')} @@ -61,7 +61,7 @@ export const AboutGripperSlideout = ( {i18n.format(t('serial_number'), 'upperCase')} diff --git a/app/src/organisms/GripperWizardFlows/MountGripper.tsx b/app/src/organisms/GripperWizardFlows/MountGripper.tsx index 857d1ea51dbc..9b98b834e5ee 100644 --- a/app/src/organisms/GripperWizardFlows/MountGripper.tsx +++ b/app/src/organisms/GripperWizardFlows/MountGripper.tsx @@ -28,7 +28,7 @@ import type { BadGripper, GripperData } from '@opentrons/api-client' const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; padding-left: ${SPACING.spacing32}; &:hover { diff --git a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx index af799ad63f70..4b01577ebb7c 100644 --- a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx +++ b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx @@ -28,7 +28,7 @@ import type { GripperData } from '@opentrons/api-client' const GO_BACK_BUTTON_TEXT_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/InstrumentInfo/index.tsx b/app/src/organisms/InstrumentInfo/index.tsx index 477e9998abe5..e09b2926ac50 100644 --- a/app/src/organisms/InstrumentInfo/index.tsx +++ b/app/src/organisms/InstrumentInfo/index.tsx @@ -186,7 +186,7 @@ function InfoItem(props: InfoItemProps): JSX.Element { return ( ` padding: ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize3}; background-color: ${({ isAttached }) => - isAttached ? COLORS.green35 : LEGACY_COLORS.grey35}; + isAttached ? COLORS.green35 : COLORS.grey35}; &:active { background-color: ${({ isAttached }) => - isAttached ? COLORS.green40 : LEGACY_COLORS.grey40}; + isAttached ? COLORS.green40 : COLORS.grey40}; } ` interface LabeledMountProps { @@ -69,7 +69,7 @@ export function LabeledMount(props: LabeledMountProps): JSX.Element { {t('custom_def')} @@ -104,7 +104,7 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element { {t('api_name')} @@ -131,14 +131,14 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element { {t('date_added')} {format(new Date(modified), 'MM/dd/yyyy')} diff --git a/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx b/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx index d107acd0e39e..09bb752ffc97 100644 --- a/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx +++ b/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx @@ -28,7 +28,7 @@ export function ManufacturerDetails( brandName === 'all' || brandName === 'generic' ? t(brandName) : brandName return ( - + - + {label} {value} diff --git a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx index 43fc0db1d2c6..0d91ead8b835 100644 --- a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx +++ b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx @@ -144,5 +144,5 @@ const ConfirmationBodyODD = styled.h1` @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { ${TYPOGRAPHY.level4HeaderRegular} } - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; ` diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx index f458286a1857..081ec9bb7e8d 100644 --- a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx +++ b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx @@ -144,8 +144,8 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => { wellStroke={wellStroke} wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE} highlightedWellLabels={{ wells: wellsToHighlight }} - labwareStroke={LEGACY_COLORS.grey30} - wellLabelColor={LEGACY_COLORS.grey30} + labwareStroke={COLORS.grey30} + wellLabelColor={COLORS.grey30} /> - + {header != null ? {header} : null} {body != null ? {body} : null} diff --git a/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx b/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx index 178c4e640fa9..45b8a5e7c630 100644 --- a/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx @@ -101,7 +101,7 @@ export const AboutModuleSlideout = ( {i18n.format(t('current_version'), 'upperCase')} @@ -117,7 +117,7 @@ export const AboutModuleSlideout = ( { const StatusLabelProps = { - backgroundColor: LEGACY_COLORS.grey30, - iconColor: LEGACY_COLORS.grey50, + backgroundColor: COLORS.grey30, + iconColor: COLORS.grey50, textColor: LEGACY_COLORS.bluePressed, pulse: false, } switch (status) { case 'idle': { - StatusLabelProps.backgroundColor = LEGACY_COLORS.grey30 - StatusLabelProps.iconColor = LEGACY_COLORS.grey50 + StatusLabelProps.backgroundColor = COLORS.grey30 + StatusLabelProps.iconColor = COLORS.grey50 StatusLabelProps.textColor = COLORS.black90 break } @@ -114,7 +114,7 @@ export const HeaterShakerModuleData = ( > {t('set_block_temp')} diff --git a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx index c7e8b294108f..17e05710cbbe 100644 --- a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx @@ -154,7 +154,7 @@ export const MagneticModuleSlideout = ( {t('set_engage_height')} diff --git a/app/src/organisms/ModuleCard/TemperatureModuleData.tsx b/app/src/organisms/ModuleCard/TemperatureModuleData.tsx index 0bdbae739fee..7f76daaa6b0c 100644 --- a/app/src/organisms/ModuleCard/TemperatureModuleData.tsx +++ b/app/src/organisms/ModuleCard/TemperatureModuleData.tsx @@ -23,14 +23,14 @@ export const TemperatureModuleData = ( const { moduleStatus, targetTemp, currentTemp } = props const { t } = useTranslation('device_details') - let backgroundColor: string = LEGACY_COLORS.grey30 - let iconColor: string = LEGACY_COLORS.grey50 + let backgroundColor: string = COLORS.grey30 + let iconColor: string = COLORS.grey50 let textColor let pulse switch (moduleStatus) { case 'idle': { - backgroundColor = LEGACY_COLORS.grey30 - iconColor = LEGACY_COLORS.grey50 + backgroundColor = COLORS.grey30 + iconColor = COLORS.grey50 textColor = COLORS.black90 break } diff --git a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx index 4fc45b37c9a7..28e870c79a3c 100644 --- a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx +++ b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx @@ -168,14 +168,14 @@ export const TestShakeSlideout = ( - + ) : null} - + diff --git a/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx b/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx index b29f0795f4ff..b6e255e2968e 100644 --- a/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx +++ b/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx @@ -34,16 +34,16 @@ export const ThermocyclerModuleData = ( textColor: string } => { const StatusLabelProps = { - backgroundColor: LEGACY_COLORS.grey30, - iconColor: LEGACY_COLORS.grey50, + backgroundColor: COLORS.grey30, + iconColor: COLORS.grey50, textColor: LEGACY_COLORS.bluePressed, pulse: false, } switch (status) { case 'idle': { - StatusLabelProps.backgroundColor = LEGACY_COLORS.grey30 - StatusLabelProps.iconColor = LEGACY_COLORS.grey50 + StatusLabelProps.backgroundColor = COLORS.grey30 + StatusLabelProps.iconColor = COLORS.grey50 StatusLabelProps.textColor = COLORS.black90 break } @@ -55,7 +55,7 @@ export const ThermocyclerModuleData = ( case 'cooling': case 'heating': { StatusLabelProps.backgroundColor = LEGACY_COLORS.medBlue - StatusLabelProps.iconColor = LEGACY_COLORS.grey50 + StatusLabelProps.iconColor = COLORS.grey50 StatusLabelProps.pulse = true break } @@ -77,7 +77,7 @@ export const ThermocyclerModuleData = ( > @@ -88,7 +88,7 @@ export const ThermocyclerModuleData = ( {t(isSecondaryTemp ? 'set_lid_temperature' : 'set_block_temperature')} diff --git a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx index c531ce0ba378..8e322fe43151 100644 --- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx @@ -39,7 +39,7 @@ describe('HeaterShakerModuleData', () => { it('renders an idle status', () => { const { getByText } = render(props) expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: LEGACY_COLORS.grey30' + 'backgroundColor: COLORS.grey30' ) }) @@ -123,7 +123,7 @@ describe('HeaterShakerModuleData', () => { getByText('Target: N/A') getByText('Current: 0 rpm') expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: LEGACY_COLORS.grey30' + 'backgroundColor: COLORS.grey30' ) }) @@ -167,7 +167,7 @@ describe('HeaterShakerModuleData', () => { getByText('Target: N/A') getByText('Current: 0 rpm') expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: LEGACY_COLORS.grey30' + 'backgroundColor: COLORS.grey30' ) }) diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx index 8bdc08da5426..98e4260346e9 100644 --- a/app/src/organisms/ModuleCard/index.tsx +++ b/app/src/organisms/ModuleCard/index.tsx @@ -245,7 +245,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { return ( { <> { moduleType={module.moduleType} size="1rem" marginRight={SPACING.spacing2} - color={LEGACY_COLORS.grey50} + color={COLORS.grey50} /> {getModuleDisplayName(module.moduleModel)} diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx index 704828cf4ea2..ebdb61162316 100644 --- a/app/src/organisms/Navigation/index.tsx +++ b/app/src/organisms/Navigation/index.tsx @@ -105,7 +105,7 @@ export function Navigation(props: NavigationProps): JSX.Element { aria-label="network icon" name={icon} size="2.5rem" - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} /> )} @@ -122,7 +122,7 @@ export function Navigation(props: NavigationProps): JSX.Element { name="overflow-btn-touchscreen" height="3.75rem" width="3rem" - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} /> @@ -147,7 +147,7 @@ const NavigationLink = (props: { to: string; name: string }): JSX.Element => ( const TouchNavLink = styled(NavLink)` ${TYPOGRAPHY.level3HeaderSemiBold} - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; height: 3.5rem; display: flex; flex-direction: ${DIRECTION_COLUMN}; @@ -171,11 +171,11 @@ const IconButton = styled('button')` background-color: ${COLORS.white}; &:active { - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:disabled { background-color: transparent; diff --git a/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx b/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx index bb1a1d913a30..027a233c8b1d 100644 --- a/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx +++ b/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx @@ -56,7 +56,7 @@ export function AlternativeSecurityTypeModal({ {t('alternative_security_types_description')} diff --git a/app/src/organisms/NetworkSettings/ConnectingNetwork.tsx b/app/src/organisms/NetworkSettings/ConnectingNetwork.tsx index 58167192cbce..b376826b2aa7 100644 --- a/app/src/organisms/NetworkSettings/ConnectingNetwork.tsx +++ b/app/src/organisms/NetworkSettings/ConnectingNetwork.tsx @@ -25,7 +25,7 @@ export function ConnectingNetwork({ return ( diff --git a/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx b/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx index ae458691a7b5..27acb5f95c03 100644 --- a/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx +++ b/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx @@ -32,7 +32,7 @@ export function DisplaySearchNetwork(): JSX.Element { > diff --git a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx index bb064699a7c5..0585f7466dbb 100644 --- a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx +++ b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx @@ -31,31 +31,31 @@ const NETWORK_ROW_STYLE = css` align-items: ${ALIGN_CENTER}; grid-gap: ${SPACING.spacing16}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; margin-bottom: ${SPACING.spacing8}; border-radius: ${BORDERS.borderRadiusSize4}; &:hover { border: none; box-shadow: none; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; color: ${COLORS.black90}; } &:focus { - background-color: ${LEGACY_COLORS.grey40}; + background-color: ${COLORS.grey40}; color: ${COLORS.black90}; box-shadow: none; } &:active { - background-color: ${LEGACY_COLORS.grey40}; + background-color: ${COLORS.grey40}; color: ${COLORS.black90}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; } &:disabled { - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; } ` @@ -106,7 +106,7 @@ export function DisplayWifiList({ display="flex" onClick={handleJoinAnotherNetwork} height="5rem" - backgroundColor={LEGACY_COLORS.grey35} + backgroundColor={COLORS.grey35} borderRadius={BORDERS.borderRadiusSize4} color={COLORS.black} css={NETWORK_ROW_STYLE} diff --git a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx index dde7911c218e..e14a4a3b410b 100644 --- a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx +++ b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx @@ -105,7 +105,7 @@ export function SelectAuthenticationType({ {t('your_mac_address_is', { macAddress: wifi?.macAddress })} @@ -121,7 +121,7 @@ export function SelectAuthenticationType({ {t('need_another_security_type')} diff --git a/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx b/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx index 016f8ada6608..b8a7123603fe 100644 --- a/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx +++ b/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx @@ -61,7 +61,7 @@ export function ConfirmRobotName({ fontWeight={TYPOGRAPHY.fontWeightRegular} marginTop={SPACING.spacing12} marginBottom={SPACING.spacing40} - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} > {t('your_robot_is_ready_to_go')} diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx index b7d0db713474..8f07093e973f 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx @@ -21,7 +21,7 @@ export function EmptyRecentRun(): JSX.Element { return ( {t('no_recent_runs_description')} diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx index 7b8b2cfab7af..06c2eb006473 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx @@ -194,7 +194,7 @@ export function ProtocolWithLastRun({ fontSize={TYPOGRAPHY.fontSize22} fontWeight={TYPOGRAPHY.fontWeightRegular} lineHeight={TYPOGRAPHY.lineHeight28} - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} > {i18n.format( `${terminationTypeMap[runData.status] ?? ''} ${formattedLastRunTime}`, diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx index 2c2552b565a7..4f66f4f756ea 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx @@ -20,18 +20,18 @@ export function ServerInitializing(): JSX.Element { return ( - + {t('robot_initializing')} diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx index 4cf3ac190af8..ee164472ef07 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx @@ -24,7 +24,7 @@ export function CancelingRunModal(): JSX.Element { flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER} - backgroundColor={LEGACY_COLORS.grey35} + backgroundColor={COLORS.grey35} borderRadius={BORDERS.borderRadiusSize3} width="41.625rem" height="17.25rem" @@ -34,7 +34,7 @@ export function CancelingRunModal(): JSX.Element { name="ot-spinner" spin size="3.75rem" - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} aria-label="CancelingRunModal_icon" /> diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx index 65c05e66d8e7..a55b9ce75a8b 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx @@ -55,7 +55,7 @@ to { ` const TITLE_TEXT_STYLE = css` - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; font-size: 1.75rem; font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; line-height: 2.25rem; diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/PlayPauseButton.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/PlayPauseButton.tsx index f5096cfdef7b..5e1331516cb5 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/PlayPauseButton.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/PlayPauseButton.tsx @@ -38,8 +38,8 @@ const PLAY_PAUSE_BUTTON_STYLE = css` background-color: ${COLORS.blue60}; } &:disabled { - background-color: ${LEGACY_COLORS.grey35}; - color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; } ` diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx index 50e9e5af06cc..15a32b6256fc 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx @@ -89,7 +89,7 @@ export function RunFailedModal({ flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8} maxHeight="11rem" - backgroundColor={LEGACY_COLORS.grey35} + backgroundColor={COLORS.grey35} borderRadius={BORDERS.borderRadiusSize3} padding={`${SPACING.spacing16} ${SPACING.spacing20}`} > @@ -126,7 +126,7 @@ const SCROLL_BAR_STYLE = css` &::-webkit-scrollbar { width: 0.75rem; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &::-webkit-scrollbar-track { @@ -135,7 +135,7 @@ const SCROLL_BAR_STYLE = css` } &::-webkit-scrollbar-thumb { - background: ${LEGACY_COLORS.grey50}; + background: ${COLORS.grey50}; border-radius: 11px; } ` diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx index 362af1b81d42..210b77e2cc5d 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx @@ -39,7 +39,7 @@ import type { TrackProtocolRunEvent } from '../../Devices/hooks' import type { RobotAnalyticsData } from '../../../redux/analytics/types' const TITLE_TEXT_STYLE = css` - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; font-size: ${TYPOGRAPHY.fontSize28}; font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; line-height: ${TYPOGRAPHY.lineHeight36}; @@ -218,7 +218,7 @@ export function RunningProtocolCommandList({ const backgroundColor = index === currentRunCommandIndex ? LEGACY_COLORS.mediumBlueEnabled - : LEGACY_COLORS.grey35 + : COLORS.grey35 return ( {t('close_door_to_resume')} diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx index d13d3a8b3284..eb6d2a58fd4b 100644 --- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx @@ -49,7 +49,7 @@ import type { SelectablePipettes } from './types' const UNSELECTED_OPTIONS_STYLE = css` background-color: ${COLORS.white}; - border: 1px solid ${LEGACY_COLORS.grey30}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; height: 14.5625rem; width: 14.5625rem; @@ -60,7 +60,7 @@ const UNSELECTED_OPTIONS_STYLE = css` grid-gap: ${SPACING.spacing8} &:hover { - border: 1px solid ${LEGACY_COLORS.grey55}; + border: 1px solid ${COLORS.grey55}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { diff --git a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx index e0e58e31f8de..c0cc14ec3f0c 100644 --- a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx @@ -36,7 +36,7 @@ const BACKGROUND_SIZE = '47rem' const GO_BACK_BUTTON_TEXT_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx index 94b4afb02516..41f81d3bbd7b 100644 --- a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx +++ b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx @@ -80,7 +80,7 @@ const ALIGN_BUTTONS = css` ` const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; padding-left: ${SPACING.spacing32}; &:hover { diff --git a/app/src/organisms/PipetteWizardFlows/Results.tsx b/app/src/organisms/PipetteWizardFlows/Results.tsx index 910edcf4f6c7..560d93a2b382 100644 --- a/app/src/organisms/PipetteWizardFlows/Results.tsx +++ b/app/src/organisms/PipetteWizardFlows/Results.tsx @@ -248,7 +248,7 @@ export const Results = (props: ResultsProps): JSX.Element => { ) { const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx index d0b43d199b91..d467ca90c0a9 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx @@ -74,7 +74,7 @@ export const ProtocolLiquidsDetails = ( flexDirection={DIRECTION_COLUMN} > { {description} diff --git a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx index 86ccb914ca9f..43de374260f5 100644 --- a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx +++ b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx @@ -155,7 +155,7 @@ export const RobotConfigurationDetails = ( moduleType={getModuleType(module.params.model)} marginRight={SPACING.spacing4} alignSelf={ALIGN_CENTER} - color={LEGACY_COLORS.grey50} + color={COLORS.grey50} height={SIZE_1} minWidth={SIZE_1} minHeight={SIZE_1} @@ -208,7 +208,7 @@ export const RobotConfigurationDetailsItem = ( flex="0 0 auto" fontWeight={TYPOGRAPHY.fontWeightSemiBold} marginRight={SPACING.spacing16} - color={LEGACY_COLORS.grey50} + color={COLORS.grey50} textTransform={TYPOGRAPHY.textTransformCapitalize} width="4.625rem" > diff --git a/app/src/organisms/ProtocolSetupInstruments/index.tsx b/app/src/organisms/ProtocolSetupInstruments/index.tsx index d643a11b62be..7b4c50cd1f88 100644 --- a/app/src/organisms/ProtocolSetupInstruments/index.tsx +++ b/app/src/organisms/ProtocolSetupInstruments/index.tsx @@ -106,5 +106,5 @@ const ColumnLabel = styled.p` font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; font-size: ${TYPOGRAPHY.fontSize22}; line-height: ${TYPOGRAPHY.lineHeight28}; - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; ` diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index 5bf6c3d37763..2bb5fa1d9335 100644 --- a/app/src/organisms/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ProtocolSetupLabware/index.tsx @@ -247,7 +247,7 @@ export function ProtocolSetupLabware({ > {getLabwareDisplayName(selectedLabware)} - + {selectedLabware.nickName} {selectedLabwareLocation != null && selectedLabwareLocation !== 'offDeck' && @@ -275,7 +275,7 @@ export function ProtocolSetupLabware({ > {getLabwareDisplayName(definition)} - + {nickName} {nestedLabwareInfo != null ? ( @@ -586,7 +586,7 @@ function RowLabware({ {nestedLabwareInfo.nestedLabwareDisplayName} - + {nestedLabwareInfo.nestedLabwareNickName} diff --git a/app/src/organisms/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ProtocolSetupLiquids/index.tsx index 8d1e16243621..69b722795a85 100644 --- a/app/src/organisms/ProtocolSetupLiquids/index.tsx +++ b/app/src/organisms/ProtocolSetupLiquids/index.tsx @@ -77,7 +77,7 @@ export function LiquidsList(props: LiquidsListProps): JSX.Element { return ( 0 ? ( {t('setup_instructions_description')} diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx index 835574533248..7ff72c9683d7 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx @@ -169,12 +169,12 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { { missing: , loading: , - error: , + error: , complete: mostRecentAnalysis != null ? ( ) : ( - + ), }[analysisStatus] } @@ -203,7 +203,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { {/* data section */} {analysisStatus === 'loading' ? ( - + {t('loading_data')} ) : ( @@ -216,7 +216,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + {t('robot')} @@ -230,7 +230,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { data-testid={`ProtocolCard_instruments_${protocolDisplayName}`} minWidth="10.625rem" > - + {t('shared:instruments')} { @@ -275,14 +275,14 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { > {requiredModuleTypes.length > 0 ? ( <> - + {t('modules')} {requiredModuleTypes.map((moduleType, index) => ( - + {`${t('updated')} ${format( new Date(modified), 'M/d/yy HH:mm' diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx index 893b9b817dff..37eb341a1666 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx @@ -42,11 +42,11 @@ const SORT_BY_BUTTON_STYLE = css` background-color: ${COLORS.transparent}; cursor: pointer; &:hover { - background-color: ${LEGACY_COLORS.grey55}; + background-color: ${COLORS.grey55}; } &:active, &:focus { - background-color: ${LEGACY_COLORS.grey30}; + background-color: ${COLORS.grey30}; } ` const FLEX = 'Flex' @@ -161,7 +161,7 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { {t('shared:sort_by')} diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx index 5b81e4d97daf..b110fc9546a6 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx @@ -100,6 +100,6 @@ const StyledTableCell = styled.td` ` const BODY_STYLE = css` - box-shadow: 0 0 0 1px ${LEGACY_COLORS.grey30}; + box-shadow: 0 0 0 1px ${COLORS.grey30}; border-radius: 3px; ` diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/PipetteOffsetCalibrationItems.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/PipetteOffsetCalibrationItems.tsx index 682f7e54f452..db4f321230ae 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/PipetteOffsetCalibrationItems.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/PipetteOffsetCalibrationItems.tsx @@ -45,7 +45,7 @@ const StyledTableCell = styled.td` ` const BODY_STYLE = css` - box-shadow: 0 0 0 1px ${LEGACY_COLORS.grey30}; + box-shadow: 0 0 0 1px ${COLORS.grey30}; border-radius: 3px; ` interface PipetteOffsetCalibrationItemsProps { diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx index 45082e6ce4b5..c3bb87c09dd7 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx @@ -40,7 +40,7 @@ const StyledTableCell = styled.td` ` const BODY_STYLE = css` - box-shadow: 0 0 0 1px ${LEGACY_COLORS.grey30}; + box-shadow: 0 0 0 1px ${COLORS.grey30}; border-radius: 3px; ` interface TipLengthCalibrationItemsProps { diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx index 0548b167538f..865556535ec5 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx @@ -62,7 +62,7 @@ export function RobotSettingsDeckCalibration({ {t('deck_calibration_title')} {t('deck_calibration_description')} - + {deckLastModified} diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx index 90b676b4c964..30ce9ee06a16 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx @@ -41,7 +41,7 @@ const StyledTableCell = styled.td` ` const BODY_STYLE = css` - box-shadow: 0 0 0 1px ${LEGACY_COLORS.grey30}; + box-shadow: 0 0 0 1px ${COLORS.grey30}; border-radius: 3px; ` diff --git a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx index 6edecc2e4b1a..97e0ccb68344 100644 --- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx +++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx @@ -232,7 +232,7 @@ export function DeviceReset({ color={ resetOptions[option.id] ?? false ? COLORS.white - : LEGACY_COLORS.grey60 + : COLORS.grey60 } > {subText} @@ -284,7 +284,7 @@ export function DeviceReset({ (resetOptions.onDeviceDisplay ?? false)) || isEveryOptionSelected(resetOptions) ? COLORS.white - : LEGACY_COLORS.grey60 + : COLORS.grey60 } > {t('clear_all_stored_data_description')} diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx index 467db1fc62c4..fcae6ce79373 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx @@ -24,7 +24,7 @@ import type { State } from '../../../redux/types' const STRETCH_LIST_STYLE = css` width: 100%; padding: ${SPACING.spacing16}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; border-radius: ${BORDERS.borderRadiusSize3}; ` @@ -82,7 +82,7 @@ export function EthernetConnectionDetails( {ethernet?.ipAddress === null || ethernet?.macAddress === null ? ( {t('connected_network')} @@ -138,7 +138,7 @@ export function WifiConnectionDetails({ diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx index 5cf072d27068..08f61fbfcb8b 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx @@ -43,7 +43,7 @@ export function NetworkSettings({ } const handleButtonBackgroundColor = (isConnected: boolean): string => - isConnected ? COLORS.green35 : LEGACY_COLORS.grey35 + isConnected ? COLORS.green35 : COLORS.grey35 const handleChipText = (isConnected: boolean): string => isConnected ? t('connected') : t('not_connected') @@ -103,7 +103,7 @@ function NetworkSettingButton({ &:active { background-color: ${chipType === 'success' ? COLORS.green40 - : LEGACY_COLORS.grey50}; + : COLORS.grey50}; } ` @@ -135,7 +135,7 @@ function NetworkSettingButton({ fontSize={TYPOGRAPHY.fontSize28} lineHeight={TYPOGRAPHY.lineHeight36} fontWeight={TYPOGRAPHY.fontWeightRegular} - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} > {networkName} diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx index 8f55afc28a79..50d69fc7ffcb 100644 --- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx +++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx @@ -79,7 +79,7 @@ export function RobotSystemVersion({ {t('view_latest_release_notes_at', { url: GITHUB_URL })} - props.isActive - ? LEGACY_COLORS.purple50 - : LEGACY_COLORS.purple35}; + props.isActive ? LEGACY_COLORS.purple50 : LEGACY_COLORS.purple35}; ` interface TextSizeProps { @@ -64,7 +62,7 @@ export function TextSize({ setCurrentOption }: TextSizeProps): JSX.Element { textSize="1.375rem" lineHeight="1.75rem" fontWeight={TYPOGRAPHY.fontWeightRegular} - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} textAlign={TYPOGRAPHY.textAlignCenter} > {t('text_size_description')} diff --git a/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx b/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx index 578014622dd5..f16f2273a335 100644 --- a/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx +++ b/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx @@ -125,11 +125,11 @@ const IconButton = styled('button')` background-color: ${COLORS.white}; &:active { - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:disabled { background-color: transparent; diff --git a/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx b/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx index f30ac430d515..36b6628f6973 100644 --- a/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx +++ b/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx @@ -112,9 +112,7 @@ export function UpdateChannel({ lineHeight={TYPOGRAPHY.lineHeight36} fontWeight={TYPOGRAPHY.fontWeightRegular} color={ - radio.value === channel - ? COLORS.white - : LEGACY_COLORS.grey60 + radio.value === channel ? COLORS.white : COLORS.grey60 } > {t('alpha_description')} diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx index 2d2e168c174a..6ff92dc48a6f 100644 --- a/app/src/organisms/RunPreview/index.tsx +++ b/app/src/organisms/RunPreview/index.tsx @@ -64,7 +64,7 @@ export const RunPreviewComponent = ( {t('run_preview')} - + {t('steps_total', { count: robotSideAnalysis.commands.length })} @@ -96,8 +96,8 @@ export const RunPreviewComponent = ( : COLORS.transparent const backgroundColor = isCurrent ? LEGACY_COLORS.lightBlue - : LEGACY_COLORS.grey10 - const contentColor = isCurrent ? COLORS.black90 : LEGACY_COLORS.grey50 + : COLORS.grey10 + const contentColor = isCurrent ? COLORS.black90 : COLORS.grey50 return ( diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx index f920a608f78e..86f2889af3fe 100644 --- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx +++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx @@ -76,10 +76,10 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { > diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx index fd0997a39bbf..c2ef79f8fbe1 100644 --- a/app/src/organisms/TaskList/index.tsx +++ b/app/src/organisms/TaskList/index.tsx @@ -83,7 +83,7 @@ function ProgressTrackerItem({ color={ isTaskListComplete || isPastTask ? LEGACY_COLORS.blueEnabled - : LEGACY_COLORS.grey55 + : COLORS.grey55 } /> ) : ( @@ -92,7 +92,7 @@ function ProgressTrackerItem({ alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} backgroundColor={ - isFutureTask ? LEGACY_COLORS.grey55 : LEGACY_COLORS.blueEnabled + isFutureTask ? COLORS.grey55 : LEGACY_COLORS.blueEnabled } color={LEGACY_COLORS.white} margin={SPACING.spacing16} @@ -150,13 +150,13 @@ function ProgressTrackerItem({ isTaskListComplete || isPastSubTask ? COLORS.blue50 : subTask.isComplete === true - ? LEGACY_COLORS.grey55 + ? COLORS.grey55 : 'initial' } border={BORDERS.lineBorder} borderColor={ isFutureSubTask - ? LEGACY_COLORS.grey55 + ? COLORS.grey55 : LEGACY_COLORS.blueEnabled } borderWidth={SPACING.spacing2} @@ -176,7 +176,7 @@ function ProgressTrackerItem({ ? COLORS.transparent : isTaskListComplete || isPastSubTask ? LEGACY_COLORS.blueEnabled - : LEGACY_COLORS.grey30 + : COLORS.grey30 } marginTop={`-${SPACING.spacing8}`} marginBottom={ @@ -249,7 +249,7 @@ function SubTask({ {description} {footer != null ? ( - + {description} {footer != null ? ( - + - + {t('checking_for_updates')} diff --git a/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx index 800d573a9ac3..d115eb24fb23 100644 --- a/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx +++ b/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx @@ -28,7 +28,7 @@ export function CompleteUpdateSoftware({ {renderText()} diff --git a/app/src/pages/AppSettings/AdvancedSettings.tsx b/app/src/pages/AppSettings/AdvancedSettings.tsx index c7835a7df071..aa5587bbb558 100644 --- a/app/src/pages/AppSettings/AdvancedSettings.tsx +++ b/app/src/pages/AppSettings/AdvancedSettings.tsx @@ -275,7 +275,7 @@ export function AdvancedSettings(): JSX.Element { {t('additional_folder_location')} @@ -435,7 +435,7 @@ export function AdvancedSettings(): JSX.Element { {t('override_path')} diff --git a/app/src/pages/AppSettings/GeneralSettings.tsx b/app/src/pages/AppSettings/GeneralSettings.tsx index 604d0ee37fb4..3a164df898cf 100644 --- a/app/src/pages/AppSettings/GeneralSettings.tsx +++ b/app/src/pages/AppSettings/GeneralSettings.tsx @@ -174,7 +174,7 @@ export function GeneralSettings(): JSX.Element { {t('up_to_date')} diff --git a/app/src/pages/AppSettings/index.tsx b/app/src/pages/AppSettings/index.tsx index 9cf0a77395b9..a516ef93a25f 100644 --- a/app/src/pages/AppSettings/index.tsx +++ b/app/src/pages/AppSettings/index.tsx @@ -50,7 +50,7 @@ export function AppSettings(): JSX.Element { backgroundColor={COLORS.white} height="100%" width="100%" - border={`1px ${BORDERS.styleSolid} ${LEGACY_COLORS.grey30}`} + border={`1px ${BORDERS.styleSolid} ${COLORS.grey30}`} borderRadius={BORDERS.radiusSoftCorners} minHeight="95%" > diff --git a/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx b/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx index 9ab22e16a104..f416a65d1417 100644 --- a/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx +++ b/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx @@ -34,7 +34,7 @@ export function DisplayConnectionStatus({ {t('ethernet_connection_description')} diff --git a/app/src/pages/ConnectViaUSB/index.tsx b/app/src/pages/ConnectViaUSB/index.tsx index b9409865d4aa..45fbcd10797e 100644 --- a/app/src/pages/ConnectViaUSB/index.tsx +++ b/app/src/pages/ConnectViaUSB/index.tsx @@ -89,7 +89,7 @@ export function ConnectViaUSB(): JSX.Element { {t('find_your_robot')} @@ -104,7 +104,7 @@ export function ConnectViaUSB(): JSX.Element { ) : ( - + {t('connect_via_usb_description_1')} - + {t('connect_via_usb_description_2')} - + {t('connect_via_usb_description_3')} diff --git a/app/src/pages/Devices/DeviceDetails/DeviceDetailsComponent.tsx b/app/src/pages/Devices/DeviceDetails/DeviceDetailsComponent.tsx index 972c4cd3f602..ae445a1d2acb 100644 --- a/app/src/pages/Devices/DeviceDetails/DeviceDetailsComponent.tsx +++ b/app/src/pages/Devices/DeviceDetails/DeviceDetailsComponent.tsx @@ -49,7 +49,7 @@ export function DeviceDetailsComponent({ @@ -87,7 +85,7 @@ export function EmergencyStop(): JSX.Element { {t('e_stop_not_connected')} diff --git a/app/src/pages/InitialLoadingScreen/index.tsx b/app/src/pages/InitialLoadingScreen/index.tsx index 05328963be62..3a200a78b248 100644 --- a/app/src/pages/InitialLoadingScreen/index.tsx +++ b/app/src/pages/InitialLoadingScreen/index.tsx @@ -35,7 +35,7 @@ export function InitialLoadingScreen(): JSX.Element { return ( {targetPath != null && } diff --git a/app/src/pages/InstrumentDetail/index.tsx b/app/src/pages/InstrumentDetail/index.tsx index c9bf51322a91..55b463b72ea0 100644 --- a/app/src/pages/InstrumentDetail/index.tsx +++ b/app/src/pages/InstrumentDetail/index.tsx @@ -63,7 +63,7 @@ export const InstrumentDetail = (): JSX.Element => { name="overflow-btn-touchscreen" height="3.75rem" width="3rem" - color={LEGACY_COLORS.grey60} + color={COLORS.grey60} /> @@ -81,11 +81,11 @@ const IconButton = styled('button')` background-color: ${COLORS.white}; &:active { - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; } &:disabled { background-color: transparent; diff --git a/app/src/pages/Labware/index.tsx b/app/src/pages/Labware/index.tsx index 18cd037fec57..162de514fe5e 100644 --- a/app/src/pages/Labware/index.tsx +++ b/app/src/pages/Labware/index.tsx @@ -67,12 +67,12 @@ const SORT_BY_BUTTON_STYLE = css` background-color: ${COLORS.transparent}; cursor: pointer; &:hover { - background-color: ${LEGACY_COLORS.grey55}; + background-color: ${COLORS.grey55}; } &:active, &:focus { - background-color: ${LEGACY_COLORS.grey30}; + background-color: ${COLORS.grey30}; } ` @@ -155,7 +155,7 @@ export function Labware(): JSX.Element { /> - + {t('shared:sort_by')} {t('name_your_robot_description')} @@ -243,7 +243,7 @@ export function NameRobot(): JSX.Element { {t('name_rule_description')} diff --git a/app/src/pages/NetworkSetupMenu/index.tsx b/app/src/pages/NetworkSetupMenu/index.tsx index bffeabe6fa4d..24fbb656262b 100644 --- a/app/src/pages/NetworkSetupMenu/index.tsx +++ b/app/src/pages/NetworkSetupMenu/index.tsx @@ -70,7 +70,7 @@ export function NetworkSetupMenu(): JSX.Element { {t('network_setup_menu_description')} diff --git a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx index 727a752f73d0..631771390424 100644 --- a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx +++ b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx @@ -128,11 +128,11 @@ const ProtocolNameText = styled.span` font-weight: ${TYPOGRAPHY.fontWeightBold}; font-size: ${TYPOGRAPHY.fontSize22}; line-height: ${TYPOGRAPHY.lineHeight28}; - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; ` const AdditionalText = styled.span` font-weight: ${TYPOGRAPHY.fontWeightRegular}; font-size: ${TYPOGRAPHY.fontSize22}; line-height: ${TYPOGRAPHY.lineHeight28}; - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; ` diff --git a/app/src/pages/ProtocolDashboard/NoProtocols.tsx b/app/src/pages/ProtocolDashboard/NoProtocols.tsx index dcd495b769c5..85bc5f7cb52e 100644 --- a/app/src/pages/ProtocolDashboard/NoProtocols.tsx +++ b/app/src/pages/ProtocolDashboard/NoProtocols.tsx @@ -21,7 +21,7 @@ export function NoProtocols(): JSX.Element { return ( {t('nothing_here_yet')} - + {t('send_a_protocol_to_store')} diff --git a/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx b/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx index 345e70c42c2c..ea0d27ba1ef3 100644 --- a/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx +++ b/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx @@ -95,14 +95,14 @@ export function PinnedProtocol(props: { const PUSHED_STATE_STYLE = css` &:active { - background-color: ${longpress.isLongPressed ? '' : LEGACY_COLORS.grey50}; + background-color: ${longpress.isLongPressed ? '' : COLORS.grey50}; } ` return ( {lastRun !== undefined diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx index fbfbeb4e3f4a..a4b1f8691929 100644 --- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx +++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx @@ -147,16 +147,14 @@ export function ProtocolCard(props: { ? '' : isFailedAnalysis ? LEGACY_COLORS.red3Pressed - : LEGACY_COLORS.grey50}; + : COLORS.grey50}; } ` return ( - + {lastRun != null ? formatDistance(new Date(lastRun), new Date(), { addSuffix: true, @@ -215,7 +213,7 @@ export function ProtocolCard(props: { - + {formatTimeWithUtcLabel(protocol.createdAt)} {longpress.isLongPressed && !isFailedAnalysis && ( diff --git a/app/src/pages/ProtocolDashboard/index.tsx b/app/src/pages/ProtocolDashboard/index.tsx index fbcbd7a94191..7c0e7219d491 100644 --- a/app/src/pages/ProtocolDashboard/index.tsx +++ b/app/src/pages/ProtocolDashboard/index.tsx @@ -161,7 +161,7 @@ export function ProtocolDashboard(): JSX.Element { {t('pinned_protocols')} diff --git a/app/src/pages/ProtocolDetails/EmptySection.tsx b/app/src/pages/ProtocolDetails/EmptySection.tsx index 18cc140e95c6..6386ad731e4e 100644 --- a/app/src/pages/ProtocolDetails/EmptySection.tsx +++ b/app/src/pages/ProtocolDetails/EmptySection.tsx @@ -23,7 +23,7 @@ export const EmptySection = (props: EmptySectionProps): JSX.Element => { return ( { diff --git a/app/src/pages/ProtocolDetails/Hardware.tsx b/app/src/pages/ProtocolDetails/Hardware.tsx index 40f7a27f102a..2b7d535255ca 100644 --- a/app/src/pages/ProtocolDetails/Hardware.tsx +++ b/app/src/pages/ProtocolDetails/Hardware.tsx @@ -41,7 +41,7 @@ const TableHeader = styled('th')` ` const TableRow = styled('tr')` - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; border: 1px ${COLORS.white} solid; height: 4.75rem; ` @@ -102,7 +102,7 @@ export const Hardware = (props: { protocolId: string }): JSX.Element => { @@ -112,7 +112,7 @@ export const Hardware = (props: { protocolId: string }): JSX.Element => { diff --git a/app/src/pages/ProtocolDetails/Labware.tsx b/app/src/pages/ProtocolDetails/Labware.tsx index d8df2f09b3da..ab7dddcb6dc4 100644 --- a/app/src/pages/ProtocolDetails/Labware.tsx +++ b/app/src/pages/ProtocolDetails/Labware.tsx @@ -32,7 +32,7 @@ const TableHeader = styled('th')` ` const TableRow = styled('tr')` - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; border: 1px ${COLORS.white} solid; height: 4.75rem; ` @@ -77,7 +77,7 @@ export const Labware = (props: { protocolId: string }): JSX.Element => { { { {i18n.format(liquid.displayName, 'titleCase')} - + {i18n.format(liquid.description, 'titleCase')} @@ -132,7 +132,7 @@ export const Liquids = (props: { protocolId: string }): JSX.Element => { { {description ?? i18n.format(t('no_summary'), 'capitalize')} @@ -139,7 +137,7 @@ const CLOSE_BUTTON_STYLE = css` } &:disabled { - background-color: ${LEGACY_COLORS.grey35}; - color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; } ` diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx index de5263417c30..fcaa77a3854a 100644 --- a/app/src/pages/ProtocolSetup/index.tsx +++ b/app/src/pages/ProtocolSetup/index.tsx @@ -120,7 +120,7 @@ export function ProtocolSetupStep({ const backgroundColorByStepStatus = { ready: COLORS.green35, 'not ready': LEGACY_COLORS.yellow3, - general: LEGACY_COLORS.grey35, + general: COLORS.grey35, } const { makeSnackbar } = useToaster() @@ -134,7 +134,7 @@ export function ProtocolSetupStep({ if (!disabled) { switch (status) { case 'general': - backgroundColor = LEGACY_COLORS.grey50 + backgroundColor = COLORS.grey50 break case 'ready': backgroundColor = COLORS.green3Pressed @@ -160,7 +160,7 @@ export function ProtocolSetupStep({ {title} @@ -185,7 +185,7 @@ export function ProtocolSetupStep({ {detail} {subDetail != null && detail != null ?
: null} @@ -607,7 +607,7 @@ function PrepareToRun({ diff --git a/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx b/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx index 7b6a4b23f593..ae3d6a112f5a 100644 --- a/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx +++ b/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx @@ -64,7 +64,7 @@ export function AnalyticsOptInModal({ gridGap={SPACING.spacing12} paddingBottom={SPACING.spacing32} > - + {t('opt_in_description')} diff --git a/app/src/pages/RobotDashboard/WelcomeModal.tsx b/app/src/pages/RobotDashboard/WelcomeModal.tsx index 8d024a16e0a9..23777645a810 100644 --- a/app/src/pages/RobotDashboard/WelcomeModal.tsx +++ b/app/src/pages/RobotDashboard/WelcomeModal.tsx @@ -77,7 +77,7 @@ export function WelcomeModal({ {t('welcome_modal_description')} diff --git a/app/src/pages/RobotDashboard/index.tsx b/app/src/pages/RobotDashboard/index.tsx index bd227948ee2f..0cec39929e2a 100644 --- a/app/src/pages/RobotDashboard/index.tsx +++ b/app/src/pages/RobotDashboard/index.tsx @@ -66,7 +66,7 @@ export function RobotDashboard(): JSX.Element { {t('run_again')} diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx index 930bcfc13cf5..56164b047246 100644 --- a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx +++ b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx @@ -25,12 +25,12 @@ import type { IconName } from '@opentrons/components' const SETTING_BUTTON_STYLE = css` width: 100%; margin-bottom: ${SPACING.spacing8}; - background-color: ${LEGACY_COLORS.grey35}; + background-color: ${COLORS.grey35}; padding: ${SPACING.spacing20} ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize4}; &:active { - background-color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey50}; } ` @@ -82,7 +82,7 @@ export function RobotSettingButton({ {settingInfo != null ? ( - props.isActive ? LEGACY_COLORS.grey50 : LEGACY_COLORS.grey50}; + props.isActive ? COLORS.grey50 : COLORS.grey50}; transform: ${(props: BulletProps) => props.isActive ? 'scale(2)' : 'scale(1)'}; ` diff --git a/app/src/pages/Welcome/index.tsx b/app/src/pages/Welcome/index.tsx index fb588b29fab9..dd374bd1a976 100644 --- a/app/src/pages/Welcome/index.tsx +++ b/app/src/pages/Welcome/index.tsx @@ -36,7 +36,7 @@ export function Welcome(): JSX.Element { diff --git a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx index d851be3b6047..f9b3d6ac48b8 100644 --- a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx +++ b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx @@ -40,7 +40,7 @@ describe('CheckboxField', () => { // INNER_STYLE_NO_VALUE expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`) expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`) - expect(checkBoxIcon).toHaveStyle(`color: ${String(LEGACY_COLORS.grey50)}`) + expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) expect(checkBoxIcon).toHaveStyle( @@ -50,32 +50,20 @@ describe('CheckboxField', () => { expect(checkBoxIcon).toHaveStyleRule('cursor', 'pointer', { modifier: ':hover', }) - expect(checkBoxIcon).toHaveStyleRule( - 'color', - `${String(LEGACY_COLORS.grey55)}`, - { - modifier: ':hover', - } - ) - expect(checkBoxIcon).toHaveStyleRule( - 'color', - `${String(LEGACY_COLORS.grey60)}`, - { - modifier: ':active', - } - ) + expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey55)}`, { + modifier: ':hover', + }) + expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, { + modifier: ':active', + }) expect(checkBoxIcon).toHaveStyleRule( 'box-shadow', `0 0 0 3px ${String(COLORS.fundamentalsFocus)}`, { modifier: ':focus' } ) - expect(checkBoxIcon).toHaveStyleRule( - 'color', - `${String(LEGACY_COLORS.grey60)}`, - { - modifier: ':disabled', - } - ) + expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, { + modifier: ':disabled', + }) // TODO: kj 09/15/2022 This part will be update later OUTER_STYLE // const checkBoxLabel = getByTestId('CheckboxField_label') @@ -139,7 +127,7 @@ describe('CheckboxField', () => { const checkBoxIcon = getByTestId('CheckboxField_icon') expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`) expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`) - expect(checkBoxIcon).toHaveStyle(`color: ${String(LEGACY_COLORS.grey50)}`) + expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) expect(checkBoxIcon).toHaveStyle( diff --git a/components/src/atoms/CheckboxField/index.tsx b/components/src/atoms/CheckboxField/index.tsx index 470f90229954..23d59cad6387 100644 --- a/components/src/atoms/CheckboxField/index.tsx +++ b/components/src/atoms/CheckboxField/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { css } from 'styled-components' -import { COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '@opentrons/components' +import { SPACING, TYPOGRAPHY } from '../../ui-style-constants' import { Flex, Box } from '../../primitives' import { Icon } from '../../icons' import { ALIGN_CENTER, JUSTIFY_CENTER, SIZE_1 } from '../../styles' @@ -71,7 +72,7 @@ const INNER_STYLE_VALUE = css` const INNER_STYLE_NO_VALUE = css` width: ${SPACING.spacing20}; min-width: ${SPACING.spacing20}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; display: flex; border-radius: 1px; justify-content: ${JUSTIFY_CENTER}; @@ -79,11 +80,11 @@ const INNER_STYLE_NO_VALUE = css` &:hover { cursor: pointer; - color: ${LEGACY_COLORS.grey55}; + color: ${COLORS.grey55}; } &:active { - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; } &:focus { @@ -91,7 +92,7 @@ const INNER_STYLE_NO_VALUE = css` } &:disabled { - color: ${LEGACY_COLORS.grey60}; + color: ${COLORS.grey60}; } ` @@ -126,13 +127,13 @@ export function CheckboxField(props: CheckboxFieldProps): JSX.Element { alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} borderRadius="2px" - backgroundColor={LEGACY_COLORS.grey30} + backgroundColor={COLORS.grey30} size={SIZE_1} > ) : ( diff --git a/components/src/atoms/StepMeter/index.tsx b/components/src/atoms/StepMeter/index.tsx index 764577f15c3d..b481f90a1cfc 100644 --- a/components/src/atoms/StepMeter/index.tsx +++ b/components/src/atoms/StepMeter/index.tsx @@ -1,11 +1,8 @@ import * as React from 'react' import { css } from 'styled-components' +import { COLORS } from '@opentrons/components' import { Box } from '../../primitives' -import { - LEGACY_COLORS, - RESPONSIVENESS, - SPACING, -} from '../../ui-style-constants' +import { RESPONSIVENESS, SPACING } from '../../ui-style-constants' import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles' interface StepMeterProps { @@ -26,7 +23,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => { const StepMeterContainer = css` position: ${POSITION_RELATIVE}; height: ${SPACING.spacing4}; - background-color: ${LEGACY_COLORS.grey30}; + background-color: ${COLORS.grey30}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { height: ${SPACING.spacing12}; } diff --git a/components/src/atoms/buttons/AlertPrimaryButton.tsx b/components/src/atoms/buttons/AlertPrimaryButton.tsx index ba654d733836..91538798fb93 100644 --- a/components/src/atoms/buttons/AlertPrimaryButton.tsx +++ b/components/src/atoms/buttons/AlertPrimaryButton.tsx @@ -23,7 +23,7 @@ export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)` } &:disabled { - background-color: ${LEGACY_COLORS.grey30}; + background-color: ${COLORS.grey30}; color: ${LEGACY_COLORS.errorDisabled}; } ` diff --git a/components/src/atoms/buttons/PrimaryButton.tsx b/components/src/atoms/buttons/PrimaryButton.tsx index 37eba028dd1a..58cda3c8b6df 100644 --- a/components/src/atoms/buttons/PrimaryButton.tsx +++ b/components/src/atoms/buttons/PrimaryButton.tsx @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { COLORS } from '@opentrons/components' import { - LEGACY_COLORS, BORDERS, TYPOGRAPHY, SPACING, + LEGACY_COLORS, } from '../../ui-style-constants' import { NewPrimaryBtn, styleProps } from '../../primitives' @@ -34,7 +35,7 @@ export const PrimaryButton = styled(NewPrimaryBtn)` } &:disabled { - background-color: ${LEGACY_COLORS.grey30}; + background-color: ${COLORS.grey30}; color: ${LEGACY_COLORS.errorDisabled}; } ` diff --git a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx index a4380d8204d5..6bab1406f089 100644 --- a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx @@ -45,7 +45,7 @@ describe('PrimaryButton', () => { const { getByText } = render(props) const button = getByText('primary button') expect(button).toBeDisabled() - expect(button).toHaveStyle(`background-color: ${LEGACY_COLORS.grey30}`) + expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`) expect(button).toHaveStyle(`color: ${LEGACY_COLORS.errorDisabled}`) }) diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx index 4321cbfacd2c..967bbb97500d 100644 --- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx +++ b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx @@ -15,6 +15,7 @@ import { WASTE_CHUTE_ONLY_FIXTURES, WASTE_CHUTE_STAGING_AREA_FIXTURES, } from '@opentrons/shared-data' +import { COLORS } from '@opentrons/components' import { RobotCoordinateSpace } from '../RobotCoordinateSpace' import { Module } from '../Module' @@ -22,7 +23,6 @@ import { LabwareRender } from '../Labware' import { FlexTrash } from '../Deck/FlexTrash' import { DeckFromLayers } from '../Deck/DeckFromLayers' import { SlotLabels } from '../Deck' -import { COLORS } from '../../ui-style-constants' import { Svg } from '../../primitives' import { SingleSlotFixture } from './SingleSlotFixture' @@ -84,9 +84,9 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { robotType, modulesOnDeck = [], labwareOnDeck = [], - lightFill = LEGACY_COLORS.grey35, - mediumFill = LEGACY_COLORS.grey50, - darkFill = LEGACY_COLORS.grey60, + lightFill = COLORS.grey35, + mediumFill = COLORS.grey50, + darkFill = COLORS.grey60, deckLayerBlocklist = [], deckConfig, showExpansion = true, diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx index 4d92ba3774ea..8b4872738e17 100644 --- a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx +++ b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx @@ -10,7 +10,8 @@ import { JUSTIFY_CENTER, TEXT_ALIGN_CENTER, } from '../../styles' -import { COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '@opentrons/components' +import { SPACING, TYPOGRAPHY } from '../../ui-style-constants' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { SlotBase } from './SlotBase' @@ -31,8 +32,8 @@ export function WasteChuteFixture( const { cutoutId, deckDefinition, - fixtureBaseColor = LEGACY_COLORS.grey35, - wasteChuteColor = LEGACY_COLORS.grey50, + fixtureBaseColor = COLORS.grey35, + wasteChuteColor = COLORS.grey50, ...restProps } = props diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx index e17ce1d0ca2b..6b9afa142936 100644 --- a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx +++ b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx @@ -1,8 +1,8 @@ import * as React from 'react' import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data' +import { COLORS } from '@opentrons/components' -import { COLORS } from '../../ui-style-constants' import { SlotBase } from './SlotBase' import { SlotClip } from './SlotClip' import { WasteChute } from './WasteChuteFixture' @@ -26,9 +26,9 @@ export function WasteChuteStagingAreaFixture( const { cutoutId, deckDefinition, - fixtureBaseColor = LEGACY_COLORS.grey35, - slotClipColor = LEGACY_COLORS.grey60, - wasteChuteColor = LEGACY_COLORS.grey50, + fixtureBaseColor = COLORS.grey35, + slotClipColor = COLORS.grey60, + wasteChuteColor = COLORS.grey50, ...restProps } = props diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx index 8275698a49bb..8ca85a9c24f2 100644 --- a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx @@ -77,7 +77,7 @@ export function StagingAreaConfigFixture( const STAGING_AREA_CONFIG_STYLE_READ_ONLY = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; - background-color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey50}; border-radius: ${BORDERS.borderRadiusSize1}; color: ${COLORS.white}; grid-gap: ${SPACING.spacing8}; @@ -89,7 +89,7 @@ const STAGING_AREA_CONFIG_STYLE_EDITABLE = css` ${STAGING_AREA_CONFIG_STYLE_READ_ONLY} &:active { - background-color: ${LEGACY_COLORS.grey60}; + background-color: ${COLORS.grey60}; } &:hover { diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx index c0921bbcf13a..29bb085de459 100644 --- a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx @@ -82,7 +82,7 @@ export function TrashBinConfigFixture( const TRASH_BIN_CONFIG_STYLE_READ_ONLY = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; - background-color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey50}; border-radius: ${BORDERS.borderRadiusSize1}; color: ${COLORS.white}; justify-content: ${JUSTIFY_CENTER}; @@ -94,7 +94,7 @@ const TRASH_BIN_CONFIG_STYLE_EDTIABLE = css` ${TRASH_BIN_CONFIG_STYLE_READ_ONLY} &:active { - background-color: ${LEGACY_COLORS.grey60}; + background-color: ${COLORS.grey60}; } &:hover { diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx index 556d311a7035..895530c7737e 100644 --- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx @@ -86,7 +86,7 @@ export function WasteChuteConfigFixture( const WASTE_CHUTE_CONFIG_STYLE_READ_ONLY = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; - background-color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey50}; border-radius: ${BORDERS.borderRadiusSize1}; color: ${COLORS.white}; justify-content: ${JUSTIFY_CENTER}; @@ -98,7 +98,7 @@ const WASTE_CHUTE_CONFIG_STYLE_EDITABLE = css` ${WASTE_CHUTE_CONFIG_STYLE_READ_ONLY} &:active { - background-color: ${LEGACY_COLORS.grey60}; + background-color: ${COLORS.grey60}; } &:hover { diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx index 050306216d7d..01aac516e5ec 100644 --- a/components/src/hardware-sim/DeckConfigurator/index.tsx +++ b/components/src/hardware-sim/DeckConfigurator/index.tsx @@ -37,7 +37,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element { deckConfig, handleClickAdd, handleClickRemove, - lightFill = LEGACY_COLORS.grey35, + lightFill = COLORS.grey35, darkFill = COLORS.black90, readOnly = false, showExpansion = true, diff --git a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx index 3f6147057b5d..ed4079cdaa15 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx @@ -4,7 +4,7 @@ import { RobotCoordsText } from '../../Deck' import { WellLabelOption, WELL_LABEL_OPTIONS } from '../LabwareRender' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { HighlightedWellLabels } from './types' -import { COLORS } from '../../../ui-style-constants' +import { COLORS } from '@opentrons/components' // magic layout numbers to make the letters close to the edges of the labware const LETTER_COLUMN_X_INSIDE = 4 @@ -61,7 +61,7 @@ const Labels = (props: { NUMBER_COLUMN_Y_FROM_TOP } style={{ - color: LEGACY_COLORS.grey50, // LEGACY --c-font-dark + color: COLORS.grey50, // LEGACY --c-font-dark fontSize: '0.2rem', // LEGACY --fs-micro textAnchor: 'middle', dominantBaseline: diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx index 5c2afbba6b5e..5a56c310d0ff 100644 --- a/components/src/modals/ModalShell.tsx +++ b/components/src/modals/ModalShell.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { BORDERS, COLORS, RESPONSIVENESS, SPACING } from '../ui-style-constants' +import { COLORS } from '@opentrons/components' +import { BORDERS, RESPONSIVENESS, SPACING } from '../ui-style-constants' import { StyleProps, styleProps } from '../primitives' import { POSITION_FIXED, @@ -81,7 +82,7 @@ const Overlay = styled.div` cursor: default; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - background-color: ${LEGACY_COLORS.grey50}; + background-color: ${COLORS.grey50}; } ` const ContentArea = styled.div<{ zIndex: string | number }>` diff --git a/components/src/ui-style-constants/colors.ts b/components/src/ui-style-constants/colors.ts index c6fe3ec6ec34..1cea8822d764 100644 --- a/components/src/ui-style-constants/colors.ts +++ b/components/src/ui-style-constants/colors.ts @@ -44,13 +44,16 @@ export const dandelionYellowHover = '#eca20f' export const dandelionYellowPressed = '#eca20f' // colors grey -export const grey35 = `${darkBlackEnabled}${opacity17HexCode}` +export const lightGreyPressed = `${darkBlackEnabled}${opacity17HexCode}` export const lightGreyHover = `${darkBlackEnabled}${opacity10HexCode}` export const medGreyEnabled = '#e3e3e3' export const medGreyHover = '#b8b8b8' +export const medGreyPressed = '#5a5a5e' +export const medGreySelected = '#5a5a5e' export const darkGreyEnabled = '#707075' export const darkGreyHover = '#646468' export const darkGreyPressed = '#5a5a5e' +export const darkGreySelected = '#5a5a5e' export const darkGreyDisabled = '#eaeaeb' // colors success diff --git a/components/src/ui-style-constants/typography.ts b/components/src/ui-style-constants/typography.ts index 90437406a4f2..df6ab961e467 100644 --- a/components/src/ui-style-constants/typography.ts +++ b/components/src/ui-style-constants/typography.ts @@ -233,7 +233,7 @@ export const darkLinkH4SemiBold = css` font-size: ${fontSizeH4}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.darkGreyEnabled}; &:hover { color: ${COLORS.darkBlackEnabled}; } @@ -243,7 +243,7 @@ export const darkLinkLabelSemiBold = css` font-size: ${fontSizeLabel}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.darkGreyEnabled}; &:hover { color: ${COLORS.darkBlackEnabled}; } @@ -253,6 +253,6 @@ export const darkLinkLabelSemiBoldDisabled = css` font-size: ${fontSizeLabel}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${LEGACY_COLORS.grey55}; + color: ${COLORS.medGreyHover}; cursor: not-allowed; ` diff --git a/protocol-designer/src/atoms/Slideout.tsx b/protocol-designer/src/atoms/Slideout.tsx index 8b0d7310614f..596691da3c28 100644 --- a/protocol-designer/src/atoms/Slideout.tsx +++ b/protocol-designer/src/atoms/Slideout.tsx @@ -96,7 +96,7 @@ const CLOSE_ICON_STYLE = css` background: ${COLORS.grey30}; } &:active { - background: ${LEGACY_COLORS.grey35}; + background: ${COLORS.grey35}; } ` diff --git a/protocol-designer/src/components/DeckSetup/FlexModuleTag.tsx b/protocol-designer/src/components/DeckSetup/FlexModuleTag.tsx index a03bca04422a..729b8d63145f 100644 --- a/protocol-designer/src/components/DeckSetup/FlexModuleTag.tsx +++ b/protocol-designer/src/components/DeckSetup/FlexModuleTag.tsx @@ -21,11 +21,11 @@ export function FlexModuleTag(props: FlexModuleTagProps): JSX.Element { height={20} y={-22} innerDivProps={{ - backgroundColor: LEGACY_COLORS.grey50, + backgroundColor: COLORS.grey50, padding: SPACING.spacing4, height: '100%', color: COLORS.white, - border: `1px solid ${LEGACY_COLORS.grey50}`, + border: `1px solid ${COLORS.grey50}`, }} > diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabwareOffDeck.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabwareOffDeck.tsx index cacc7d487cfc..50c190c6dc6e 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabwareOffDeck.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabwareOffDeck.tsx @@ -40,7 +40,7 @@ const NAME_LABWARE_OVERLAY_STYLE = css` const REGULAR_OVERLAY_STYLE = css` z-index: 1; padding: ${SPACING.spacing8}; - background-color: ${LEGACY_COLORS.grey60}; + background-color: ${COLORS.grey60}; flex-direction: ${DIRECTION_COLUMN}; color: ${COLORS.white}; display: flex; diff --git a/protocol-designer/src/components/DeckSetup/Ot2ModuleTag.tsx b/protocol-designer/src/components/DeckSetup/Ot2ModuleTag.tsx index c06b4d519022..5809ed12b6a8 100644 --- a/protocol-designer/src/components/DeckSetup/Ot2ModuleTag.tsx +++ b/protocol-designer/src/components/DeckSetup/Ot2ModuleTag.tsx @@ -43,7 +43,7 @@ export function Ot2ModuleTag(props: Ot2ModuleTagProps): JSX.Element { y={isThermocyclerModel ? -22 : 0} x={isThermocyclerModel ? 0 : xCoordinateForOtherMods} innerDivProps={{ - backgroundColor: LEGACY_COLORS.grey50, + backgroundColor: COLORS.grey50, padding: SPACING.spacing4, height: '100%', color: COLORS.white, diff --git a/protocol-designer/src/components/DeckSetup/index.tsx b/protocol-designer/src/components/DeckSetup/index.tsx index d7ebf2064445..8044c8380505 100644 --- a/protocol-designer/src/components/DeckSetup/index.tsx +++ b/protocol-designer/src/components/DeckSetup/index.tsx @@ -112,8 +112,8 @@ interface ContentsProps { trashSlot: string | null } -const lightFill = LEGACY_COLORS.grey35 -const darkFill = LEGACY_COLORS.grey60 +const lightFill = COLORS.grey35 +const darkFill = COLORS.grey60 export const DeckSetupContents = (props: ContentsProps): JSX.Element => { const { @@ -618,7 +618,7 @@ export const DeckSetup = (): JSX.Element => { robotType={robotType} trashIconColor={lightFill} trashCutoutId={cutoutId as TrashCutoutId} - backgroundColor={LEGACY_COLORS.grey50} + backgroundColor={COLORS.grey50} /> ) : null diff --git a/protocol-designer/src/components/OffDeckLabwareSlideout.tsx b/protocol-designer/src/components/OffDeckLabwareSlideout.tsx index 019a09429bd7..f16bfbda5aaf 100644 --- a/protocol-designer/src/components/OffDeckLabwareSlideout.tsx +++ b/protocol-designer/src/components/OffDeckLabwareSlideout.tsx @@ -93,7 +93,7 @@ export const OffDeckLabwareSlideout = ( {i18n.t('deck.off_deck.slideout_empty_state')} diff --git a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx index 6c2417035388..85e0d8d8e400 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx @@ -50,7 +50,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element { } borderRadius={BORDERS.borderRadiusSize2} cursor={disabled ? 'auto' : 'pointer'} - backgroundColor={disabled ? LEGACY_COLORS.grey30 : COLORS.transparent} + backgroundColor={disabled ? COLORS.grey30 : COLORS.transparent} onClick={disabled ? undefined : onClick} {...styleProps} {...targetProps} @@ -60,9 +60,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element { aria-label={`EquipmentOption_${ isSelected ? 'checkbox-marked' : 'checkbox-blank-outline' }`} - color={ - isSelected ? LEGACY_COLORS.blueEnabled : LEGACY_COLORS.grey50 - } + color={isSelected ? LEGACY_COLORS.blueEnabled : COLORS.grey50} size="1.5rem" name={isSelected ? 'checkbox-marked' : 'checkbox-blank-outline'} /> diff --git a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx index 6eef6987e5fa..bc5ffdcdbc53 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx @@ -91,7 +91,7 @@ function Input(props: InputFieldProps): JSX.Element { border-radius: ${SPACING.spacing4}; padding: ${SPACING.spacing8}; border: 1px ${BORDERS.styleSolid} - ${error ? LEGACY_COLORS.errorEnabled : LEGACY_COLORS.grey30}; + ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey30}; font-size: ${TYPOGRAPHY.fontSizeP}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { @@ -99,7 +99,7 @@ function Input(props: InputFieldProps): JSX.Element { } &:active { - border: 1px ${BORDERS.styleSolid} ${LEGACY_COLORS.grey50}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey50}; } & input { @@ -116,13 +116,13 @@ function Input(props: InputFieldProps): JSX.Element { &:hover { border: 1px ${BORDERS.styleSolid} - ${error ? LEGACY_COLORS.errorEnabled : LEGACY_COLORS.grey55}; + ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey55}; } &:focus { border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; } &:disabled { - border: 1px ${BORDERS.styleSolid} ${LEGACY_COLORS.grey30}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { @@ -145,7 +145,7 @@ function Input(props: InputFieldProps): JSX.Element { display={DISPLAY_INLINE_BLOCK} textAlign={TEXT_ALIGN_RIGHT} alignSelf={ALIGN_CENTER} - color={LEGACY_COLORS.grey50} + color={COLORS.grey50} fontSize={TYPOGRAPHY.fontSizeLabel} > {props.units} @@ -153,7 +153,7 @@ function Input(props: InputFieldProps): JSX.Element { )} { @@ -276,7 +276,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null { alignItems={ALIGN_CENTER} width="100%" height="8.5rem" - backgroundColor={LEGACY_COLORS.grey35} + backgroundColor={COLORS.grey35} padding={SPACING.spacing8} border={BORDERS.lineBorder} borderRadius={BORDERS.borderRadiusSize2} @@ -284,7 +284,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null { {i18n.t('modal.create_file_wizard.upload_tiprack')} diff --git a/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx index 0e265f426422..df8ce12aa7b7 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx @@ -120,7 +120,7 @@ function RobotTypeOption(props: RobotTypeOptionProps): JSX.Element { const UNSELECTED_OPTIONS_STYLE = css` background-color: ${COLORS.white}; - border: 1px solid ${LEGACY_COLORS.grey30}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; height: 14.5625rem; width: 14.5625rem; @@ -131,7 +131,7 @@ const UNSELECTED_OPTIONS_STYLE = css` grid-gap: ${SPACING.spacing8} &:hover { - border: 1px solid ${LEGACY_COLORS.grey55}; + border: 1px solid ${COLORS.grey55}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { diff --git a/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx b/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx index c1ba68a344d7..ad7b5413dd3b 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx @@ -26,7 +26,7 @@ interface WizardHeaderProps { const EXIT_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; text-transform: ${TYPOGRAPHY.textTransformCapitalize}; - color: ${LEGACY_COLORS.grey50}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; @@ -74,7 +74,7 @@ export const WizardHeader = (props: WizardHeaderProps): JSX.Element => { {currentStep != null && totalSteps != null && currentStep > 0 ? ( - + {i18n.t('shared.step', { current: currentStep, max: totalSteps })} ) : null} diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx index af7bc2fcbb02..1f1776b29ad5 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx @@ -31,7 +31,7 @@ describe('EquipmentOption', () => { } const { getByLabelText } = render(props) expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle( - `background-color: ${LEGACY_COLORS.grey30}` + `background-color: ${COLORS.grey30}` ) }) it('renders the equipment option without check not selected and image', () => { @@ -45,7 +45,7 @@ describe('EquipmentOption', () => { getByRole('img') expect( getByLabelText('EquipmentOption_checkbox-blank-outline') - ).toHaveStyle(`color: ${LEGACY_COLORS.grey50}`) + ).toHaveStyle(`color: ${COLORS.grey50}`) expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle( `border: ${BORDERS.lineBorder}` ) diff --git a/protocol-designer/src/components/modules/FlexSlotMap.tsx b/protocol-designer/src/components/modules/FlexSlotMap.tsx index cbc902daf98f..d03e068bd527 100644 --- a/protocol-designer/src/components/modules/FlexSlotMap.tsx +++ b/protocol-designer/src/components/modules/FlexSlotMap.tsx @@ -31,7 +31,7 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element { const slotFill = ( ))} {selectedSlots.map((selectedSlot, index) => {