From af8d948277bcf1e83de7166ac83b305b1c7ad495 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Thu, 11 Jan 2024 15:49:28 -0500 Subject: [PATCH] migrate transparent and export COLORS from top index --- app/src/App/Navbar.tsx | 3 ++- app/src/atoms/Chip/__tests__/Chip.test.tsx | 10 +++++----- app/src/atoms/Chip/index.tsx | 3 ++- app/src/atoms/MenuList/MenuItem.tsx | 9 +++++---- app/src/atoms/MenuList/hooks.tsx | 4 ++-- app/src/atoms/buttons/MediumButton.tsx | 5 +++-- app/src/molecules/JogControls/DirectionControl.tsx | 5 +++-- .../ODDBackButton/__tests__/ODDBackButton.test.tsx | 4 ++-- app/src/organisms/Devices/ModuleInfo.tsx | 3 ++- app/src/organisms/ProtocolsLanding/ProtocolList.tsx | 5 +++-- app/src/organisms/RunPreview/index.tsx | 3 ++- app/src/organisms/TaskList/index.tsx | 3 ++- app/src/pages/Labware/index.tsx | 3 ++- .../pages/RobotSettingsDashboard/RobotSettingsList.tsx | 3 ++- components/src/atoms/buttons/SecondaryButton.tsx | 6 +++--- .../atoms/buttons/__tests__/SecondaryButton.test.tsx | 3 ++- components/src/hardware-sim/BaseDeck/BaseDeck.tsx | 3 ++- components/src/hardware-sim/DeckConfigurator/index.tsx | 3 ++- .../Labware/labwareInternals/StyledWells.tsx | 5 +++-- components/src/hardware-sim/Module/Temperature.tsx | 3 ++- .../src/hardware-sim/Module/Thermocycler/index.tsx | 3 ++- components/src/index.ts | 3 +++ protocol-designer/src/atoms/Slideout.tsx | 3 ++- protocol-designer/src/components/DeckSetup/index.tsx | 3 ++- .../modals/CreateFileWizard/EquipmentOption.tsx | 3 ++- .../src/components/modules/FlexSlotMap.tsx | 3 ++- 26 files changed, 64 insertions(+), 40 deletions(-) diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx index cbc7bfc196b..0bde462370a 100644 --- a/app/src/App/Navbar.tsx +++ b/app/src/App/Navbar.tsx @@ -6,6 +6,7 @@ import { ALIGN_CENTER, ALIGN_FLEX_START, ALIGN_STRETCH, + COLORS, LEGACY_COLORS, DIRECTION_COLUMN, FLEX_NONE, @@ -79,7 +80,7 @@ const NavbarIcon = styled(Icon)` padding: ${SPACING.spacing6}; border-radius: 50%; color: ${LEGACY_COLORS.medGreyEnabled}; - background-color: ${LEGACY_COLORS.transparent}; + background-color: ${COLORS.transparent}; &:hover { background-color: ${LEGACY_COLORS.darkBlackHover}; diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx index 74b1d81705a..d53c03b863a 100644 --- a/app/src/atoms/Chip/__tests__/Chip.test.tsx +++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { BORDERS, LEGACY_COLORS, renderWithProviders } from '@opentrons/components' +import { BORDERS, COLORS, LEGACY_COLORS, renderWithProviders } from '@opentrons/components' import { Chip } from '..' @@ -48,7 +48,7 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_success') const chipText = getByText('mockSuccess') - expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.green1}`) const icon = getByLabelText('icon_mockSuccess') @@ -79,7 +79,7 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_warning') const chipText = getByText('mockWarning') - expect(chip).toHaveStyle(`background-color: ${String(LEGACY_COLORS.transparent)}`) + expect(chip).toHaveStyle(`background-color: ${String(COLORS.transparent)}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) expect(chipText).toHaveStyle(`color: ${String(LEGACY_COLORS.yellow1)}`) const icon = getByLabelText('icon_mockWarning') @@ -110,7 +110,7 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_neutral') const chipText = getByText('mockNeutral') - expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.darkBlack70}`) const icon = getByLabelText('icon_mockNeutral') @@ -141,7 +141,7 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_error') const chipText = getByText('mockError') - expect(chip).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) expect(chipText).toHaveStyle(`color: ${LEGACY_COLORS.red1}`) const icon = getByLabelText('icon_mockError') diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx index 54aef2fb492..981c145e942 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/app/src/atoms/Chip/index.tsx @@ -8,6 +8,7 @@ import { SPACING, TYPOGRAPHY, Icon, + COLORS, LEGACY_COLORS, } from '@opentrons/components' @@ -79,7 +80,7 @@ export function Chip({ }: ChipProps): JSX.Element { const backgroundColor = background === false && type !== 'basic' - ? LEGACY_COLORS.transparent + ? COLORS.transparent : CHIP_PROPS_BY_TYPE[type].backgroundColor const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert' return ( diff --git a/app/src/atoms/MenuList/MenuItem.tsx b/app/src/atoms/MenuList/MenuItem.tsx index e3cf5b40a10..0b73dd48397 100644 --- a/app/src/atoms/MenuList/MenuItem.tsx +++ b/app/src/atoms/MenuList/MenuItem.tsx @@ -1,6 +1,7 @@ import styled from 'styled-components' import { SPACING, + COLORS, LEGACY_COLORS, TYPOGRAPHY, ALIGN_CENTER, @@ -15,7 +16,7 @@ interface ButtonProps extends StyleProps { export const MenuItem = styled.button` text-align: ${TYPOGRAPHY.textAlignLeft}; font-size: ${TYPOGRAPHY.fontSizeP}; - background-color: ${LEGACY_COLORS.transparent}; + background-color: ${COLORS.transparent}; color: ${LEGACY_COLORS.darkBlackEnabled}; padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8} ${SPACING.spacing12}; @@ -26,7 +27,7 @@ export const MenuItem = styled.button` } &:disabled { - background-color: ${LEGACY_COLORS.transparent}; + background-color: ${COLORS.transparent}; color: ${LEGACY_COLORS.black}${LEGACY_COLORS.opacity50HexCode}; } @@ -35,7 +36,7 @@ export const MenuItem = styled.button` text-align: ${TYPOGRAPHY.textAlignCenter}; font-size: ${TYPOGRAPHY.fontSize28}; background-color: ${({ isAlert }) => - isAlert ? LEGACY_COLORS.errorEnabled : LEGACY_COLORS.transparent}; + isAlert ? LEGACY_COLORS.errorEnabled : COLORS.transparent}; color: ${({ isAlert }) => isAlert ? LEGACY_COLORS.white : LEGACY_COLORS.darkBlackEnabled}; padding: ${SPACING.spacing24}; @@ -49,7 +50,7 @@ export const MenuItem = styled.button` &:disabled { background-color: ${({ isAlert }) => - isAlert ? LEGACY_COLORS.errorEnabled : LEGACY_COLORS.transparent}; + isAlert ? LEGACY_COLORS.errorEnabled : COLORS.transparent}; color: ${({ isAlert }) => (isAlert ? LEGACY_COLORS.white : LEGACY_COLORS.darkBlack60)}; } } diff --git a/app/src/atoms/MenuList/hooks.tsx b/app/src/atoms/MenuList/hooks.tsx index 00b87347a51..dde7ef99bf3 100644 --- a/app/src/atoms/MenuList/hooks.tsx +++ b/app/src/atoms/MenuList/hooks.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { LEGACY_COLORS, Overlay } from '@opentrons/components' +import { COLORS, Overlay } from '@opentrons/components' interface MenuHandleClickOutside { menuOverlay: JSX.Element @@ -28,7 +28,7 @@ export function useMenuHandleClickOutside(): MenuHandleClickOutside { {showOverflowMenu ? ( ) : null} diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx index 1b63b000319..1030f3b483a 100644 --- a/app/src/atoms/buttons/MediumButton.tsx +++ b/app/src/atoms/buttons/MediumButton.tsx @@ -4,6 +4,7 @@ import { ALIGN_CENTER, BORDERS, Btn, + COLORS, LEGACY_COLORS, DIRECTION_ROW, Icon, @@ -91,14 +92,14 @@ export function MediumButton(props: MediumButtonProps): JSX.Element { activeBackgroundColor: LEGACY_COLORS.darkBlack20, defaultBackgroundColor: LEGACY_COLORS.white, defaultColor: LEGACY_COLORS.darkBlack100, - disabledBackgroundColor: LEGACY_COLORS.transparent, + disabledBackgroundColor: COLORS.transparent, iconColor: LEGACY_COLORS.darkBlack100, }, tertiaryLowLight: { activeBackgroundColor: LEGACY_COLORS.darkBlack20, defaultBackgroundColor: LEGACY_COLORS.white, defaultColor: LEGACY_COLORS.darkBlack70, - disabledBackgroundColor: LEGACY_COLORS.transparent, + disabledBackgroundColor: COLORS.transparent, iconColor: LEGACY_COLORS.darkBlack70, }, } diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx index f25b8fb0c35..4e6cea8f3fc 100644 --- a/app/src/molecules/JogControls/DirectionControl.tsx +++ b/app/src/molecules/JogControls/DirectionControl.tsx @@ -11,6 +11,7 @@ import { ALIGN_CENTER, JUSTIFY_CENTER, BORDERS, + COLORS, LEGACY_COLORS, SPACING, TYPOGRAPHY, @@ -376,7 +377,7 @@ const ARROW_BUTTON_STYLES = css` &:hover { background-color: ${LEGACY_COLORS.light1Pressed}; color: ${LEGACY_COLORS.darkBlackHover}; - border: 1px ${LEGACY_COLORS.transparent} solid; + border: 1px ${COLORS.transparent} solid; } &:active { @@ -391,7 +392,7 @@ const ARROW_BUTTON_STYLES = css` &:disabled { background-color: ${LEGACY_COLORS.darkBlack20}; color: ${LEGACY_COLORS.darkBlack40}; - border: 1px ${LEGACY_COLORS.transparent} solid; + border: 1px ${COLORS.transparent} solid; } } ` diff --git a/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx b/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx index 608e531be8f..b57ff06f10e 100644 --- a/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx +++ b/app/src/molecules/ODDBackButton/__tests__/ODDBackButton.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders, LEGACY_COLORS } from '@opentrons/components' +import { renderWithProviders, COLORS } from '@opentrons/components' import { ODDBackButton } from '..' const render = (props: React.ComponentProps) => { @@ -26,7 +26,7 @@ describe('ODDBackButton', () => { screen.getByText('button label') expect(screen.getByTestId('back_icon')).toBeInTheDocument() const button = screen.getByRole('button') - expect(button).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`) + expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`) fireEvent.click(button) expect(props.onClick).toHaveBeenCalled() }) diff --git a/app/src/organisms/Devices/ModuleInfo.tsx b/app/src/organisms/Devices/ModuleInfo.tsx index fddd547d29c..bcba2d12e2e 100644 --- a/app/src/organisms/Devices/ModuleInfo.tsx +++ b/app/src/organisms/Devices/ModuleInfo.tsx @@ -5,6 +5,7 @@ import { Icon, RobotCoordsForeignObject, ALIGN_CENTER, + COLORS, LEGACY_COLORS, DIRECTION_COLUMN, DIRECTION_ROW, @@ -64,7 +65,7 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => { backgroundColor: moduleDef.moduleType === THERMOCYCLER_MODULE_TYPE ? LEGACY_COLORS.white - : LEGACY_COLORS.transparent, + : COLORS.transparent, }} > ) : null} setShowImportProtocolSlideout(true)}> diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx index 99b060be8c0..bcc158efac2 100644 --- a/app/src/organisms/RunPreview/index.tsx +++ b/app/src/organisms/RunPreview/index.tsx @@ -13,6 +13,7 @@ import { PrimaryButton, TYPOGRAPHY, BORDERS, + COLORS, LEGACY_COLORS, POSITION_FIXED, } from '@opentrons/components' @@ -93,7 +94,7 @@ export const RunPreviewComponent = ( const isCurrent = index === currentRunCommandIndex const borderColor = isCurrent ? LEGACY_COLORS.blueEnabled - : LEGACY_COLORS.transparent + : COLORS.transparent const backgroundColor = isCurrent ? LEGACY_COLORS.lightBlue : LEGACY_COLORS.fundamentalsBackground diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx index 63ded4d8782..e83a450a0e0 100644 --- a/app/src/organisms/TaskList/index.tsx +++ b/app/src/organisms/TaskList/index.tsx @@ -7,6 +7,7 @@ import { ALIGN_CENTER, ALIGN_FLEX_START, BORDERS, + COLORS, LEGACY_COLORS, DIRECTION_COLUMN, DIRECTION_ROW, @@ -167,7 +168,7 @@ function ProgressTrackerItem({ borderColor={ // do not show the subtask connector if it's the final subtask of the task list isFinalSubTaskOfTaskList - ? LEGACY_COLORS.transparent + ? COLORS.transparent : isTaskListComplete || isPastSubTask ? LEGACY_COLORS.blueEnabled : LEGACY_COLORS.medGreyEnabled diff --git a/app/src/pages/Labware/index.tsx b/app/src/pages/Labware/index.tsx index 769e038a3d7..648e4c03b5a 100644 --- a/app/src/pages/Labware/index.tsx +++ b/app/src/pages/Labware/index.tsx @@ -8,6 +8,7 @@ import { Flex, Link, SPACING, + COLORS, LEGACY_COLORS, BORDERS, TYPOGRAPHY, @@ -64,7 +65,7 @@ const FILTER_OPTIONS: DropdownOption[] = labwareDisplayCategoryFilters.map( ) const SORT_BY_BUTTON_STYLE = css` - background-color: ${LEGACY_COLORS.transparent}; + background-color: ${COLORS.transparent}; cursor: pointer; &:hover { background-color: ${LEGACY_COLORS.medGreyHover}; diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx index 0342395f482..f920ffab543 100644 --- a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx +++ b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx @@ -8,6 +8,7 @@ import { DIRECTION_COLUMN, SPACING, Btn, + COLORS, LEGACY_COLORS, BORDERS, DISPLAY_FLEX, @@ -250,7 +251,7 @@ export function OnOffToggle(props: { isOn: boolean }): JSX.Element { flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing12} alignItems={ALIGN_CENTER} - backgroundColor={LEGACY_COLORS.transparent} + backgroundColor={COLORS.transparent} padding={`${SPACING.spacing12} ${SPACING.spacing4}`} borderRadius={BORDERS.borderRadiusSize4} > diff --git a/components/src/atoms/buttons/SecondaryButton.tsx b/components/src/atoms/buttons/SecondaryButton.tsx index f2622ba9d11..2292ac07763 100644 --- a/components/src/atoms/buttons/SecondaryButton.tsx +++ b/components/src/atoms/buttons/SecondaryButton.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' import { LEGACY_COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants' import { isntStyleProp, styleProps } from '../../primitives' - +import { COLORS } from '../../helix-design-system' import type { StyleProps } from '../../index' interface SecondaryButtonProps extends StyleProps { @@ -10,7 +10,7 @@ interface SecondaryButtonProps extends StyleProps { } export const SecondaryButton = styled.button.withConfig({ shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous', -})` +}) ` appearance: none; cursor: pointer; color: ${props => @@ -21,7 +21,7 @@ export const SecondaryButton = styled.button.withConfig({ border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing8} ${SPACING.spacing16}; text-transform: ${TYPOGRAPHY.textTransformNone}; - background-color: ${LEGACY_COLORS.transparent}; + background-color: ${COLORS.transparent}; ${TYPOGRAPHY.pSemiBold} &:hover, diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx index 43c3e10c617..2e73b09318d 100644 --- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx @@ -7,6 +7,7 @@ import { TYPOGRAPHY, SPACING, } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import { SecondaryButton } from '../SecondaryButton' @@ -26,7 +27,7 @@ describe('SecondaryButton', () => { it('renders primary button with text', () => { const { getByText } = render(props) const button = getByText('secondary button') - expect(button).toHaveStyle(`background-color: ${LEGACY_COLORS.transparent}`) + expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16}` ) diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx index fd4596b95b2..67becda52df 100644 --- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx +++ b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx @@ -22,6 +22,7 @@ import { LabwareRender } from '../Labware' import { FlexTrash } from '../Deck/FlexTrash' import { DeckFromLayers } from '../Deck/DeckFromLayers' import { SlotLabels } from '../Deck' +import { COLORS } from '../../helix-design-system' import { LEGACY_COLORS } from '../../ui-style-constants' import { Svg } from '../../primitives' @@ -172,7 +173,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { diff --git a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx index 51015c9d5a4..624e54bf3ef 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx @@ -1,8 +1,9 @@ import * as React from 'react' import { Well } from './Well' +import { LEGACY_COLORS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { WellGroup } from './types' -import { LEGACY_COLORS } from '../../../ui-style-constants' type WellContents = | 'tipPresent' @@ -36,7 +37,7 @@ export const STYLE_BY_WELL_CONTENTS: { }, selectedWell: { stroke: LEGACY_COLORS.blueEnabled, - fill: LEGACY_COLORS.transparent, + fill: COLORS.transparent, strokeWidth: 1, }, tipMissing: { diff --git a/components/src/hardware-sim/Module/Temperature.tsx b/components/src/hardware-sim/Module/Temperature.tsx index 8b6dd256656..8ada444818a 100644 --- a/components/src/hardware-sim/Module/Temperature.tsx +++ b/components/src/hardware-sim/Module/Temperature.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { LEGACY_COLORS } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' export interface TemperatureVizProps { targetTemperature: number | null @@ -10,7 +11,7 @@ const ROOM_TEMPERATURE_C = 23 export function Temperature(props: TemperatureVizProps): JSX.Element { const { targetTemperature } = props - let ledLightColor = LEGACY_COLORS.transparent + let ledLightColor = COLORS.transparent if (targetTemperature != null) { ledLightColor = targetTemperature <= ROOM_TEMPERATURE_C diff --git a/components/src/hardware-sim/Module/Thermocycler/index.tsx b/components/src/hardware-sim/Module/Thermocycler/index.tsx index 67b2b1469e7..58fb9458934 100644 --- a/components/src/hardware-sim/Module/Thermocycler/index.tsx +++ b/components/src/hardware-sim/Module/Thermocycler/index.tsx @@ -8,6 +8,7 @@ import { import { C_MED_LIGHT_GRAY } from '../../../styles' import { LEGACY_COLORS, BORDERS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import { RobotCoordsForeignDiv } from '../../Deck' import { ThermocyclerGEN1 } from './ThermocyclerGEN1' @@ -40,7 +41,7 @@ export function Thermocycler(props: ThermocyclerVizProps): JSX.Element { ) } - let ledLightColor = LEGACY_COLORS.transparent + let ledLightColor = COLORS.transparent if (blockTargetTemp != null) { ledLightColor = blockTargetTemp <= ROOM_TEMPERATURE_C diff --git a/components/src/index.ts b/components/src/index.ts index fdfd146ed70..e87387d9838 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -28,6 +28,9 @@ export * from './styles' // new ui-overhaul style vars export * from './ui-style-constants' +// helix design system +export * from './helix-design-system' + // Pure Types export * from './robot-types' diff --git a/protocol-designer/src/atoms/Slideout.tsx b/protocol-designer/src/atoms/Slideout.tsx index 3def310969e..d093e977376 100644 --- a/protocol-designer/src/atoms/Slideout.tsx +++ b/protocol-designer/src/atoms/Slideout.tsx @@ -11,6 +11,7 @@ import { JUSTIFY_SPACE_BETWEEN, ALIGN_CENTER, LEGACY_COLORS, + COLORS, Overlay, POSITION_FIXED, TYPOGRAPHY, @@ -138,7 +139,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => { css={` ${isExpanded ?? false ? OVERLAY_IN_STYLE : overlayOutStyle} `} - backgroundColor={LEGACY_COLORS.transparent} + backgroundColor={COLORS.transparent} height="92.5%" marginTop={SPACING.spacing48} /> diff --git a/protocol-designer/src/components/DeckSetup/index.tsx b/protocol-designer/src/components/DeckSetup/index.tsx index 826fe1f052a..94e94463582 100644 --- a/protocol-designer/src/components/DeckSetup/index.tsx +++ b/protocol-designer/src/components/DeckSetup/index.tsx @@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux' import compact from 'lodash/compact' import values from 'lodash/values' import { + COLORS, LEGACY_COLORS, DeckFromLayers, FlexTrash, @@ -611,7 +612,7 @@ export const DeckSetup = (): JSX.Element => { ))}