From 847042b5f7a1106a9265c84d0e04b22ecc140959 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 12 Jan 2024 17:15:21 -0500 Subject: [PATCH] removed last Legacy Colors outside of components, do the same for components in CL --- app/src/DesignTokens/Colors/Colors.stories.tsx | 6 +++--- app/src/atoms/MenuList/OverflowBtn.tsx | 2 +- app/src/atoms/buttons/SmallButton.tsx | 10 +++++----- app/src/molecules/Modal/ModalHeader.stories.tsx | 2 +- .../SetupModuleAndDeck/SetupFixtureList.tsx | 2 +- .../SetupModuleAndDeck/SetupModulesList.tsx | 2 +- .../NetworkSettings/NetworkDetailsModal.tsx | 4 ++-- app/src/organisms/RunPreview/index.tsx | 3 +-- 8 files changed, 15 insertions(+), 16 deletions(-) diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx index 1c65b4e38eb..643d45dbbcd 100644 --- a/app/src/DesignTokens/Colors/Colors.stories.tsx +++ b/app/src/DesignTokens/Colors/Colors.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Flex, - LEGACY_COLORS, + COLORS, DIRECTION_COLUMN, DIRECTION_ROW, SPACING, @@ -51,7 +51,7 @@ const Template: Story = args => { } const handleClick = (colorName: string): void => { - navigator.clipboard.writeText(`LEGACY_COLORS.${colorName}`) + navigator.clipboard.writeText(`COLORS.${colorName}`) setCopiedColor(colorName) setTimeout(() => { setCopiedColor(null) @@ -109,7 +109,7 @@ const Template: Story = args => { } export const AllColors = Template.bind({}) -const allColors = Object.entries(LEGACY_COLORS) +const allColors = Object.entries(COLORS) AllColors.args = { colors: allColors, } diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx index 9bfd644daad..41d0d7f3d18 100644 --- a/app/src/atoms/MenuList/OverflowBtn.tsx +++ b/app/src/atoms/MenuList/OverflowBtn.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { css } from 'styled-components' -import { Btn, LEGACY_COLORS, SPACING } from '@opentrons/components' +import { Btn, COLORS, SPACING } from '@opentrons/components' export const OverflowBtn = React.forwardRef( ( diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx index 84e2b030108..84de030e8e8 100644 --- a/app/src/atoms/buttons/SmallButton.tsx +++ b/app/src/atoms/buttons/SmallButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { css } from 'styled-components' import { TYPOGRAPHY, - LEGACY_COLORS, + COLORS, SPACING, BORDERS, Btn, @@ -80,16 +80,16 @@ export function SmallButton(props: SmallButtonProps): JSX.Element { }, tertiaryHighLight: { defaultColor: COLORS.black90, - defaultBackgroundColor: `${COLORS.blue50}${LEGACY_COLORS.opacity0HexCode}`, + defaultBackgroundColor: `${COLORS.blue50}00`, activeBackgroundColor: `${COLORS.grey35}`, - disabledBackgroundColor: `${COLORS.blue50}${LEGACY_COLORS.opacity0HexCode}`, + disabledBackgroundColor: `${COLORS.blue50}00`, disabledColor: `${COLORS.grey50}`, }, tertiaryLowLight: { defaultColor: `${COLORS.grey60}`, - defaultBackgroundColor: ` ${COLORS.blue50}${LEGACY_COLORS.opacity0HexCode}`, + defaultBackgroundColor: ` ${COLORS.blue50}00`, activeBackgroundColor: `${COLORS.grey35}`, - disabledBackgroundColor: `${COLORS.blue50}${LEGACY_COLORS.opacity0HexCode}`, + disabledBackgroundColor: `${COLORS.blue50}00`, disabledColor: `${COLORS.grey50}`, }, } diff --git a/app/src/molecules/Modal/ModalHeader.stories.tsx b/app/src/molecules/Modal/ModalHeader.stories.tsx index bd1a9ea6622..93b6451dec2 100644 --- a/app/src/molecules/Modal/ModalHeader.stories.tsx +++ b/app/src/molecules/Modal/ModalHeader.stories.tsx @@ -18,7 +18,7 @@ export default { COLORS.black90, COLORS.blue50, COLORS.red50, - LEGACY_COLORS.successText, + COLORS.green60, ], }, }, diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupFixtureList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupFixtureList.tsx index 5d9dea65647..fe0b50dae85 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupFixtureList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupFixtureList.tsx @@ -124,7 +124,7 @@ export function FixtureListItem({ status={t('configured')} backgroundColor={COLORS.green20} iconColor={COLORS.green50} - textColor={LEGACY_COLORS.successText} + textColor={COLORS.green60} /> ) } diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx index e4fc77532b3..9f673910a75 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx @@ -322,7 +322,7 @@ export function ModulesListItem({ status={moduleConnectionStatus} backgroundColor={COLORS.green20} iconColor={COLORS.green50} - textColor={LEGACY_COLORS.successText} + textColor={COLORS.green60} /> ) diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx index 333ff90783b..fd515306a4d 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx @@ -5,7 +5,7 @@ import { Flex, SPACING, TYPOGRAPHY, - LEGACY_COLORS, + COLORS, DIRECTION_COLUMN, DIRECTION_ROW, ALIGN_CENTER, @@ -76,7 +76,7 @@ function ListItem({ itemName, itemValue }: ListItemProps): JSX.Element { flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER} padding={`${SPACING.spacing16} ${SPACING.spacing24}`} - backgroundColor={LEGACY_COLORS.grey3} + backgroundColor={COLORS.grey40} justifyContent={JUSTIFY_SPACE_BETWEEN} borderRadius={BORDERS.borderRadiusSize3} > diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx index 29e4fc98ef0..0d21b5bf150 100644 --- a/app/src/organisms/RunPreview/index.tsx +++ b/app/src/organisms/RunPreview/index.tsx @@ -14,7 +14,6 @@ import { TYPOGRAPHY, BORDERS, COLORS, - LEGACY_COLORS, POSITION_FIXED, } from '@opentrons/components' @@ -119,7 +118,7 @@ export const RunPreviewComponent = ( width="100%" border={`solid 1px ${ index === jumpedIndex - ? LEGACY_COLORS.electricPurple + ? COLORS.purple40 : borderColor }`} backgroundColor={