diff --git a/api-client/src/protocols/utils.ts b/api-client/src/protocols/utils.ts index 76f120b6c07..5b7eef86be9 100644 --- a/api-client/src/protocols/utils.ts +++ b/api-client/src/protocols/utils.ts @@ -1,8 +1,7 @@ // set of functions that parse details out of a protocol record and it's internals import reduce from 'lodash/reduce' -import { COLORS } from '@opentrons/components/src/ui-style-constants' -import { getLabwareDefURI } from '@opentrons/shared-data' +import { getLabwareDefURI, DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data' import type { Liquid, LoadedLabware, @@ -254,7 +253,7 @@ export function parseLiquidsInLoadOrder( ...liquid, displayColor: liquid.displayColor ?? - COLORS.liquidColors[index % COLORS.liquidColors.length], + DEFAULT_LIQUID_COLORS[index % DEFAULT_LIQUID_COLORS.length], } }) diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx index 05da8bdb524..86e81abcfd9 100644 --- a/app/src/App/DesktopApp.tsx +++ b/app/src/App/DesktopApp.tsx @@ -118,7 +118,7 @@ export const DesktopApp = (): JSX.Element => { position={POSITION_RELATIVE} width="100%" height="100%" - backgroundColor={COLORS.fundamentalsBackground} + backgroundColor={COLORS.grey10} overflow={OVERFLOW_AUTO} > diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx index 3af5d5461cd..14ed93c1412 100644 --- a/app/src/App/Navbar.tsx +++ b/app/src/App/Navbar.tsx @@ -32,16 +32,16 @@ const SALESFORCE_HELP_LINK = 'https://support.opentrons.com/s/' const NavbarLink = styled(NavLink)` color: ${COLORS.white}; align-self: ${ALIGN_STRETCH}; - background-color: ${COLORS.darkBlackEnabled}; + background-color: ${COLORS.black90}; &:hover { - background-color: ${COLORS.darkBlackHover}; + background-color: ${COLORS.black80}; } &:focus-visible { - box-shadow: inset 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: inset 0 0 0 3px ${COLORS.blue50}; outline: none; - background-color: ${COLORS.darkGreyHover}; + background-color: ${COLORS.grey60}; } &:focus-visible.active { @@ -50,26 +50,26 @@ const NavbarLink = styled(NavLink)` } &:active { - background-color: ${COLORS.darkBlackEnabled}; + background-color: ${COLORS.black90}; } &.active { - background-color: ${COLORS.darkBlackSelected}; + background-color: ${COLORS.black70}; } &.active:has(svg) { - background-color: ${COLORS.darkBlackEnabled}; + background-color: ${COLORS.black90}; } ` const NavIconLink = styled(NavLink)` &.active > svg { - color: ${COLORS.medGreyEnabled}; - background-color: ${COLORS.darkBlackSelected}; + color: ${COLORS.grey30}; + background-color: ${COLORS.black70}; } ` const IconLink = styled(Link)` &.active > svg { - color: ${COLORS.medGreyEnabled}; - background-color: ${COLORS.darkBlackSelected}; + color: ${COLORS.grey30}; + background-color: ${COLORS.black70}; } ` @@ -78,27 +78,27 @@ const NavbarIcon = styled(Icon)` height: ${SIZE_2}; padding: ${SPACING.spacing6}; border-radius: 50%; - color: ${COLORS.medGreyEnabled}; + color: ${COLORS.grey30}; background-color: ${COLORS.transparent}; &:hover { - background-color: ${COLORS.darkBlackHover}; + background-color: ${COLORS.black80}; } &:focus-visible { - box-shadow: inset 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: inset 0 0 0 3px ${COLORS.blue50}; outline: none; - background-color: ${COLORS.darkGreyHover}; + background-color: ${COLORS.grey60}; } &:active { - color: ${COLORS.medGreyEnabled}; - background-color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.grey30}; + background-color: ${COLORS.black90}; } &.active { - color: ${COLORS.medGreyEnabled}; - background-color: ${COLORS.darkBlackSelected}; + color: ${COLORS.grey30}; + background-color: ${COLORS.black70}; } ` @@ -113,7 +113,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element { ) return ( { } &::-webkit-scrollbar-thumb { - background: ${COLORS.darkBlack40}; + background: ${COLORS.grey50}; border-radius: 11px; } ` diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx index c822b189193..9c3b082f1c3 100644 --- a/app/src/App/OnDeviceDisplayAppFallback.tsx +++ b/app/src/App/OnDeviceDisplayAppFallback.tsx @@ -39,7 +39,7 @@ export function OnDeviceDisplayAppFallback({ const modalHeader: ModalHeaderBaseProps = { title: t('error_boundary_title'), iconName: 'ot-alert', - iconColor: COLORS.red2, + iconColor: COLORS.red50, } // immediately report to robot logs that something fatal happened diff --git a/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx b/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx index da7f396ede8..f985048cd13 100644 --- a/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx +++ b/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx @@ -48,7 +48,7 @@ const Template: Story = args => { diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx index 431375bc82c..643d45dbbcd 100644 --- a/app/src/DesignTokens/Colors/Colors.stories.tsx +++ b/app/src/DesignTokens/Colors/Colors.stories.tsx @@ -79,7 +79,7 @@ const Template: Story = args => { borderRadius={BORDERS.borderRadiusSize2} onClick={() => handleClick(color[0])} style={{ cursor: 'pointer' }} - border={`2px solid ${COLORS.darkBlackEnabled}`} + border={`2px solid ${COLORS.black90}`} > = args => { ))} diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx index b042f2dcb3d..48e41bdb60c 100644 --- a/app/src/atoms/Banner/index.tsx +++ b/app/src/atoms/Banner/index.tsx @@ -49,28 +49,28 @@ const BANNER_PROPS_BY_TYPE: Record< > = { success: { icon: { name: 'check-circle' }, - backgroundColor: COLORS.successBackgroundLight, - color: COLORS.successEnabled, + backgroundColor: COLORS.green20, + color: COLORS.green50, }, error: { icon: { name: 'alert-circle' }, - backgroundColor: COLORS.errorBackgroundLight, - color: COLORS.errorEnabled, + backgroundColor: COLORS.red20, + color: COLORS.red50, }, warning: { icon: { name: 'alert-circle' }, - backgroundColor: COLORS.warningBackgroundLight, - color: COLORS.warningEnabled, + backgroundColor: COLORS.yellow20, + color: COLORS.yellow50, }, updating: { icon: { name: 'ot-spinner' }, - backgroundColor: COLORS.darkGreyDisabled, - color: COLORS.darkGreyEnabled, + backgroundColor: COLORS.grey30, + color: COLORS.grey50, }, informing: { icon: { name: 'information' }, - backgroundColor: COLORS.fundamentalsBackground, - color: COLORS.darkGreyEnabled, + backgroundColor: COLORS.grey10, + color: COLORS.grey50, }, } @@ -106,7 +106,7 @@ export function Banner(props: BannerProps): JSX.Element { font-size: 1.25rem; font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; border: none; - background-color: ${COLORS.yellow3}; + background-color: ${COLORS.yellow35}; border-radius: ${BORDERS.borderRadiusSize3}; line-height: 1.5rem; } diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx index 1ac28f769a4..5b2c5704585 100644 --- a/app/src/atoms/Chip/Chip.stories.tsx +++ b/app/src/atoms/Chip/Chip.stories.tsx @@ -18,7 +18,7 @@ interface ChipStorybookProps extends React.ComponentProps { const Template: Story = ({ ...args }) => ( diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx index e2d635ce238..4a9c7e4b5a7 100644 --- a/app/src/atoms/Chip/__tests__/Chip.test.tsx +++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx @@ -19,8 +19,10 @@ describe('Chip', () => { const [{ getByTestId, getByText, queryByLabelText }] = render(props) const chip = getByTestId('Chip_basic') const chipText = getByText('mockBasic') - expect(chip).toHaveStyle(`background-color: ${COLORS.darkBlack20}`) - expect(chipText).toHaveStyle(`color: ${COLORS.darkBlack90}`) + expect(chip).toHaveStyle( + `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}` + ) + expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`) expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument() }) @@ -32,11 +34,11 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_success') const chipText = getByText('mockSuccess') - expect(chip).toHaveStyle(`background-color: ${COLORS.green3}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${COLORS.green1}`) + expect(chipText).toHaveStyle(`color: ${COLORS.green60}`) const icon = getByLabelText('icon_mockSuccess') - expect(icon).toHaveStyle(`color: ${COLORS.green1}`) + expect(icon).toHaveStyle(`color: ${COLORS.green60}`) }) it('should render text, icon, no bgcolor with success colors and bg false', () => { @@ -50,9 +52,9 @@ describe('Chip', () => { const chipText = getByText('mockSuccess') expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${COLORS.green1}`) + expect(chipText).toHaveStyle(`color: ${COLORS.green60}`) const icon = getByLabelText('icon_mockSuccess') - expect(icon).toHaveStyle(`color: ${COLORS.green1}`) + expect(icon).toHaveStyle(`color: ${COLORS.green60}`) }) it('should render text, icon, bgcolor with warning colors', () => { @@ -63,11 +65,11 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_warning') const chipText = getByText('mockWarning') - expect(chip).toHaveStyle(`background-color: ${COLORS.yellow3}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${COLORS.yellow1}`) + expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`) const icon = getByLabelText('icon_mockWarning') - expect(icon).toHaveStyle(`color: ${COLORS.yellow1}`) + expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`) }) it('should render text, icon, no bgcolor with warning colors and bg false', () => { @@ -81,9 +83,9 @@ describe('Chip', () => { const chipText = getByText('mockWarning') expect(chip).toHaveStyle(`background-color: ${String(COLORS.transparent)}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${String(COLORS.yellow1)}`) + expect(chipText).toHaveStyle(`color: ${String(COLORS.yellow60)}`) const icon = getByLabelText('icon_mockWarning') - expect(icon).toHaveStyle(`color: ${String(COLORS.yellow1)}`) + expect(icon).toHaveStyle(`color: ${String(COLORS.yellow60)}`) }) it('should render text, icon, bgcolor with neutral colors', () => { @@ -94,11 +96,13 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_neutral') const chipText = getByText('mockNeutral') - expect(chip).toHaveStyle(`background-color: ${COLORS.darkBlack20}`) + expect(chip).toHaveStyle( + `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}` + ) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${COLORS.darkBlack70}`) + expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`) const icon = getByLabelText('icon_mockNeutral') - expect(icon).toHaveStyle(`color: ${COLORS.darkBlack90}`) + expect(icon).toHaveStyle(`color: ${COLORS.grey60}`) }) it('should render text, icon, no bgcolor with neutral colors and bg false', () => { @@ -112,9 +116,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: ${COLORS.darkBlack70}`) + expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`) const icon = getByLabelText('icon_mockNeutral') - expect(icon).toHaveStyle(`color: ${COLORS.darkBlack90}`) + expect(icon).toHaveStyle(`color: ${COLORS.grey60}`) }) it('should render text, icon, bgcolor with error colors', () => { @@ -125,11 +129,11 @@ describe('Chip', () => { const [{ getByTestId, getByText, getByLabelText }] = render(props) const chip = getByTestId('Chip_error') const chipText = getByText('mockError') - expect(chip).toHaveStyle(`background-color: ${COLORS.red3}`) + expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${COLORS.red1}`) + expect(chipText).toHaveStyle(`color: ${COLORS.red60}`) const icon = getByLabelText('icon_mockError') - expect(icon).toHaveStyle(`color: ${COLORS.red1}`) + expect(icon).toHaveStyle(`color: ${COLORS.red60}`) }) it('should render text, icon, no bgcolor with error colors and bg false', () => { @@ -143,8 +147,8 @@ describe('Chip', () => { const chipText = getByText('mockError') expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`) - expect(chipText).toHaveStyle(`color: ${COLORS.red1}`) + expect(chipText).toHaveStyle(`color: ${COLORS.red60}`) const icon = getByLabelText('icon_mockError') - expect(icon).toHaveStyle(`color: ${COLORS.red1}`) + expect(icon).toHaveStyle(`color: ${COLORS.red60}`) }) }) diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx index 2b5523649b9..5a6f16a0418 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/app/src/atoms/Chip/index.tsx @@ -39,34 +39,34 @@ const CHIP_PROPS_BY_TYPE: Record< } > = { basic: { - backgroundColor: COLORS.darkBlack20, + backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`, borderRadius: BORDERS.borderRadiusSize1, - textColor: COLORS.darkBlack90, + textColor: COLORS.grey60, }, error: { - backgroundColor: COLORS.red3, + backgroundColor: COLORS.red35, borderRadius: BORDERS.borderRadiusSize5, - iconColor: COLORS.red1, - textColor: COLORS.red1, + iconColor: COLORS.red60, + textColor: COLORS.red60, }, neutral: { - backgroundColor: COLORS.darkBlack20, + backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`, borderRadius: BORDERS.borderRadiusSize5, - iconColor: COLORS.darkBlack90, - textColor: COLORS.darkBlack70, + iconColor: COLORS.grey60, + textColor: COLORS.grey60, }, success: { - backgroundColor: COLORS.green3, + backgroundColor: COLORS.green35, borderRadius: BORDERS.borderRadiusSize5, - iconColor: COLORS.green1, + iconColor: COLORS.green60, iconName: 'ot-check', - textColor: COLORS.green1, + textColor: COLORS.green60, }, warning: { - backgroundColor: COLORS.yellow3, + backgroundColor: COLORS.yellow35, borderRadius: BORDERS.borderRadiusSize5, - iconColor: COLORS.yellow1, - textColor: COLORS.yellow1, + iconColor: COLORS.yellow60, + textColor: COLORS.yellow60, }, } diff --git a/app/src/atoms/GlobalStyle/index.ts b/app/src/atoms/GlobalStyle/index.ts index e39c351fbe6..9d9abf9882b 100644 --- a/app/src/atoms/GlobalStyle/index.ts +++ b/app/src/atoms/GlobalStyle/index.ts @@ -25,7 +25,7 @@ export const GlobalStyle = createGlobalStyle<{ isOnDevice?: boolean }>` body { width: 100%; height: 100%; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; } a { diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx index 3367104392b..f148f2dc165 100644 --- a/app/src/atoms/InlineNotification/index.tsx +++ b/app/src/atoms/InlineNotification/index.tsx @@ -36,23 +36,23 @@ const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record< > = { alert: { icon: { name: 'ot-alert' }, - backgroundColor: COLORS.yellow3, - color: COLORS.yellow2, + backgroundColor: COLORS.yellow35, + color: COLORS.yellow50, }, error: { icon: { name: 'ot-alert' }, - backgroundColor: COLORS.red3, - color: COLORS.red2, + backgroundColor: COLORS.red35, + color: COLORS.red50, }, neutral: { icon: { name: 'information' }, - backgroundColor: COLORS.darkBlack20, - color: COLORS.darkBlackEnabled, + backgroundColor: COLORS.grey35, + color: COLORS.black90, }, success: { icon: { name: 'ot-check' }, - backgroundColor: COLORS.green3, - color: COLORS.green2, + backgroundColor: COLORS.green35, + color: COLORS.green50, }, } diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index 58eb8945db3..1672b857a87 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/app/src/atoms/InputField/index.tsx @@ -71,7 +71,7 @@ export function InputField(props: InputFieldProps): JSX.Element { lineHeight={1} fontSize={TYPOGRAPHY.fontSizeP} fontWeight={TYPOGRAPHY.fontWeightRegular} - color={props.error != null ? COLOR_WARNING_DARK : COLORS.darkBlackEnabled} + color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90} opacity={props.disabled ?? false ? 0.5 : ''} > @@ -89,17 +89,16 @@ function Input(props: InputFieldProps): JSX.Element { background-color: ${COLORS.white}; border-radius: ${SPACING.spacing4}; padding: ${SPACING.spacing8}; - border: 1px ${BORDERS.styleSolid} - ${error ? COLORS.errorEnabled : COLORS.medGreyEnabled}; + border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.grey30}; font-size: ${TYPOGRAPHY.fontSizeP}; &:active { - border: 1px ${BORDERS.styleSolid} ${COLORS.darkGreyEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey50}; } & input { border-radius: inherit; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; border: none; flex: 1 1 auto; width: 100%; @@ -110,14 +109,13 @@ function Input(props: InputFieldProps): JSX.Element { } &:hover { - border: 1px ${BORDERS.styleSolid} - ${error ? COLORS.errorEnabled : COLORS.medGreyHover}; + border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.grey60}; } &:focus { - border: 1px ${BORDERS.styleSolid} ${COLORS.blueEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; } &:disabled { - border: 1px ${BORDERS.styleSolid} ${COLORS.darkGreyDisabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { @@ -134,10 +132,10 @@ function Input(props: InputFieldProps): JSX.Element { ` const ERROR_TEXT_STYLE = css` - color: ${COLORS.errorEnabled}; + color: ${COLORS.red50}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { font-size: ${TYPOGRAPHY.fontSize22}; - color: ${COLORS.red2}; + color: ${COLORS.red50}; } ` @@ -155,7 +153,7 @@ function Input(props: InputFieldProps): JSX.Element { display={DISPLAY_INLINE_BLOCK} textAlign={TEXT_ALIGN_RIGHT} alignSelf={ALIGN_CENTER} - color={COLORS.darkGreyEnabled} + color={COLORS.grey50} fontSize={TYPOGRAPHY.fontSizeLabel} > {props.units} @@ -163,7 +161,7 @@ function Input(props: InputFieldProps): JSX.Element { )} > = args => ( - + ) diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx index a4bbd1ab0e8..7f158e2826b 100644 --- a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx +++ b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx @@ -25,7 +25,7 @@ describe('ExternalLink', () => { const link = getByText('Test Link') expect(link).toHaveAttribute('href', 'https://opentrons.com') expect(link).toHaveAttribute('target', '_blank') - expect(link).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`) + expect(link).toHaveStyle(`color: ${String(COLORS.blue50)}`) }) it('renders open-in-new icon', () => { diff --git a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx b/app/src/atoms/ListItem/__tests__/ListItem.test.tsx index 0f17babdf1b..8f1d1a0ea69 100644 --- a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx +++ b/app/src/atoms/ListItem/__tests__/ListItem.test.tsx @@ -26,7 +26,7 @@ describe('ListItem', () => { const [{ getByText, getByTestId }] = render(props) getByText('mock listitem content') const listItem = getByTestId('ListItem_error') - expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red3}`) + expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red35}`) expect(listItem).toHaveStyle( `padding: ${SPACING.spacing16} ${SPACING.spacing24}` ) @@ -37,7 +37,7 @@ describe('ListItem', () => { const [{ getByText, getByTestId }] = render(props) getByText('mock listitem content') const listItem = getByTestId('ListItem_noActive') - expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.light1}`) + expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey35}`) expect(listItem).toHaveStyle( `padding: ${SPACING.spacing16} ${SPACING.spacing24}` ) @@ -48,7 +48,7 @@ describe('ListItem', () => { const [{ getByText, getByTestId }] = render(props) getByText('mock listitem content') const listItem = getByTestId('ListItem_success') - expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green3}`) + expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green35}`) expect(listItem).toHaveStyle( `padding: ${SPACING.spacing16} ${SPACING.spacing24}` ) @@ -59,7 +59,7 @@ describe('ListItem', () => { const [{ getByText, getByTestId }] = render(props) getByText('mock listitem content') const listItem = getByTestId('ListItem_warning') - expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow3}`) + expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow35}`) expect(listItem).toHaveStyle( `padding: ${SPACING.spacing16} ${SPACING.spacing24}` ) diff --git a/app/src/atoms/ListItem/index.tsx b/app/src/atoms/ListItem/index.tsx index 1ce33bb9cb2..741ce9233c1 100644 --- a/app/src/atoms/ListItem/index.tsx +++ b/app/src/atoms/ListItem/index.tsx @@ -18,16 +18,16 @@ const LISTITEM_PROPS_BY_TYPE: Record< { backgroundColor: string } > = { error: { - backgroundColor: COLORS.red3, + backgroundColor: COLORS.red35, }, noActive: { - backgroundColor: COLORS.light1, + backgroundColor: COLORS.grey35, }, success: { - backgroundColor: COLORS.green3, + backgroundColor: COLORS.green35, }, warning: { - backgroundColor: COLORS.yellow3, + backgroundColor: COLORS.yellow35, }, } diff --git a/app/src/atoms/MenuList/MenuItem.tsx b/app/src/atoms/MenuList/MenuItem.tsx index 603be766a31..bf9e4a80df7 100644 --- a/app/src/atoms/MenuList/MenuItem.tsx +++ b/app/src/atoms/MenuList/MenuItem.tsx @@ -16,18 +16,18 @@ export const MenuItem = styled.button` text-align: ${TYPOGRAPHY.textAlignLeft}; font-size: ${TYPOGRAPHY.fontSizeP}; background-color: ${COLORS.transparent}; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8} ${SPACING.spacing12}; &:hover, &:active { - background-color: ${COLORS.lightBlue}; + background-color: ${COLORS.blue10}; } &:disabled { background-color: ${COLORS.transparent}; - color: ${COLORS.black}${COLORS.opacity50HexCode}; + color: ${COLORS.grey40}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { @@ -35,22 +35,21 @@ export const MenuItem = styled.button` text-align: ${TYPOGRAPHY.textAlignCenter}; font-size: ${TYPOGRAPHY.fontSize28}; background-color: ${({ isAlert }) => - isAlert ? COLORS.errorEnabled : COLORS.transparent}; - color: ${({ isAlert }) => - isAlert ? COLORS.white : COLORS.darkBlackEnabled}; + isAlert ? COLORS.red50 : COLORS.transparent}; + color: ${({ isAlert }) => (isAlert ? COLORS.white : COLORS.black90)}; padding: ${SPACING.spacing24}; height: 5.5rem; line-height: ${TYPOGRAPHY.lineHeight36}; &:hover, &:active { background-color: ${({ isAlert }) => - isAlert ? COLORS.errorEnabled : COLORS.darkBlack20}; + isAlert ? COLORS.red50 : COLORS.grey35}; } &:disabled { background-color: ${({ isAlert }) => - isAlert ? COLORS.errorEnabled : COLORS.transparent}; - color: ${({ isAlert }) => (isAlert ? COLORS.white : COLORS.darkBlack60)}; + isAlert ? COLORS.red50 : COLORS.transparent}; + color: ${({ isAlert }) => (isAlert ? COLORS.white : COLORS.grey50)}; } } ` diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx index c1acb16d2be..a6be9e28ca8 100644 --- a/app/src/atoms/MenuList/OverflowBtn.tsx +++ b/app/src/atoms/MenuList/OverflowBtn.tsx @@ -14,33 +14,33 @@ export const OverflowBtn = React.forwardRef( max-height: ${SPACING.spacing32}; &:hover { - background-color: ${COLORS.lightGreyHover}; + background-color: ${COLORS.grey30}; } &:hover circle { - fill: ${COLORS.darkBlackEnabled}; + fill: ${COLORS.black90}; } &:active, &:focus { - background-color: ${COLORS.lightGreyPressed}; + background-color: ${COLORS.grey35}; } &:active circle, &:focus circle { - fill: ${COLORS.darkGreyPressed}; + fill: ${COLORS.grey60}; } &:focus-visible { - box-shadow: ${`0 0 0 3px ${COLORS.warningEnabled}`}; + box-shadow: ${`0 0 0 3px ${COLORS.blue50}`}; background-color: ${'transparent'}; } &:focus-visible circle { - fill: ${COLORS.darkGreyHover}; + fill: ${COLORS.grey60}; } &:disabled circle { - fill: ${COLORS.successDisabled}; + fill: ${COLORS.grey40}; } &:disabled { background-color: transparent; @@ -53,7 +53,7 @@ export const OverflowBtn = React.forwardRef( width="19" height="31" viewBox="0 0 19 31" - fill={COLORS.darkGreyEnabled} + fill={COLORS.grey50} xmlns="http://www.w3.org/2000/svg" > diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx index 0ca1c115d33..a4066b29700 100644 --- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx +++ b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx @@ -27,7 +27,7 @@ describe('OverflowBtn', () => { expect(getByRole('button')).toHaveStyleRule( 'background-color', - `${String(COLORS.lightGreyHover)}`, + `${String(COLORS.grey30)}`, { modifier: ':hover', } @@ -41,7 +41,7 @@ describe('OverflowBtn', () => { expect(getByRole('button')).toHaveStyleRule( 'background-color', - `${String(COLORS.lightGreyPressed)}`, + `${String(COLORS.grey35)}`, { modifier: ':active', } @@ -55,7 +55,7 @@ describe('OverflowBtn', () => { expect(getByRole('button')).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.fundamentalsFocus)}`, + `0 0 0 3px ${String(COLORS.blue50)}`, { modifier: ':focus-visible', } @@ -69,7 +69,7 @@ describe('OverflowBtn', () => { expect(getByRole('button')).toHaveStyleRule( 'fill', - `${String(COLORS.successDisabled)}`, + `${String(COLORS.grey40)}`, { modifier: ':disabled circle', } diff --git a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx index 3982c6a5b21..8c3c0116ba0 100644 --- a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx +++ b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx @@ -33,7 +33,7 @@ const Template: Story> = args => { {'Add 5% to the current progress every 0.2 sec'} diff --git a/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx b/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx index a02a016d04c..9554d3d27a4 100644 --- a/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx +++ b/app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx @@ -32,7 +32,7 @@ describe('ProgressBar', () => { props.percentComplete = 50 const [{ getByTestId }] = render(props) const bar = getByTestId('ProgressBar_Bar') - expect(bar).toHaveStyle(`background: ${COLORS.blueEnabled}`) + expect(bar).toHaveStyle(`background: ${COLORS.blue50}`) expect(bar).toHaveStyle('width: 50%') }) @@ -40,19 +40,19 @@ describe('ProgressBar', () => { props.percentComplete = 100 const [{ getByTestId }] = render(props) const bar = getByTestId('ProgressBar_Bar') - expect(bar).toHaveStyle(`background: ${COLORS.blueEnabled}`) + expect(bar).toHaveStyle(`background: ${COLORS.blue50}`) expect(bar).toHaveStyle('width: 100%') }) it('renders LinerProgress Bar at 50% + red width', () => { props.percentComplete = 50 props.innerStyles = css` - background: ${COLORS.errorEnabled}; + background: ${COLORS.red50}; ` const [{ getByTestId }] = render(props) const bar = getByTestId('ProgressBar_Bar') - expect(bar).not.toHaveStyle(`background: ${COLORS.blueEnabled}`) - expect(bar).toHaveStyle(`background: ${COLORS.errorEnabled}`) + expect(bar).not.toHaveStyle(`background: ${COLORS.blue50}`) + expect(bar).toHaveStyle(`background: ${COLORS.red50}`) expect(bar).toHaveStyle('width: 50%') }) }) diff --git a/app/src/atoms/ProgressBar/index.tsx b/app/src/atoms/ProgressBar/index.tsx index 6450d602612..01054384094 100644 --- a/app/src/atoms/ProgressBar/index.tsx +++ b/app/src/atoms/ProgressBar/index.tsx @@ -38,7 +38,7 @@ export function ProgressBar({ const LINER_PROGRESS_FILLER_STYLE = css` height: 0.5rem; width: ${progress}; - background: ${COLORS.blueEnabled}; + background: ${COLORS.blue50}; transition: width 0.5s ease-in-out; webkit-transition: width 0.5s ease-in-out; moz-transition: width 0.5s ease-in-out; diff --git a/app/src/atoms/SelectField/Select.tsx b/app/src/atoms/SelectField/Select.tsx index c24729f3d25..670fcc5be34 100644 --- a/app/src/atoms/SelectField/Select.tsx +++ b/app/src/atoms/SelectField/Select.tsx @@ -43,15 +43,15 @@ export function Select(props: SelectComponentProps): JSX.Element { border: BORDERS.lineBorder, width: props.width != null ? props.width : 'auto', height: SPACING.spacing16, - borderColor: COLORS.medGreyEnabled, + borderColor: COLORS.grey30, boxShadow: 'none', padding: SPACING.spacing6, flexDirection: DIRECTION_ROW, '&:hover': { - borderColor: COLORS.medGreyHover, + borderColor: COLORS.grey60, }, '&:active': { - borderColor: COLORS.medGreyHover, + borderColor: COLORS.grey60, }, }), container: (styles: CSSObjectWithLabel) => ({ @@ -62,7 +62,7 @@ export function Select(props: SelectComponentProps): JSX.Element { group: NO_STYLE_FN, groupHeading: (styles: CSSObjectWithLabel) => ({ ...styles, - color: COLORS.darkBlackEnabled, + color: COLORS.black90, fontWeight: TYPOGRAPHY.fontWeightSemiBold, fontSize: TYPOGRAPHY.fontSizeP, }), @@ -102,27 +102,23 @@ export function Select(props: SelectComponentProps): JSX.Element { noOptionsMessage: (styles: CSSObjectWithLabel) => ({ ...styles, padding: SPACING.spacing6, - color: COLORS.darkBlackEnabled, + color: COLORS.black90, }), option: (styles: CSSObjectWithLabel, state: OptionProps) => ({ ...styles, - color: Boolean(state.isDisabled) - ? COLORS.darkGreyDisabled - : COLORS.darkBlackEnabled, - backgroundColor: Boolean(state.isSelected) - ? COLORS.lightBlue - : COLORS.white, + color: Boolean(state.isDisabled) ? COLORS.grey30 : COLORS.black90, + backgroundColor: Boolean(state.isSelected) ? COLORS.blue10 : COLORS.white, '&:hover': { - backgroundColor: COLORS.lightBlue, + backgroundColor: COLORS.blue10, }, '&:active': { - backgroundColor: COLORS.lightBlue, + backgroundColor: COLORS.blue10, }, }), placeholder: (styles: CSSObjectWithLabel) => ({ ...styles, marginLeft: SPACING.spacing8, - color: COLORS.darkBlackEnabled, + color: COLORS.black90, fontSize: TYPOGRAPHY.fontSizeP, marginTop: '0.2rem', }), diff --git a/app/src/atoms/SelectField/index.tsx b/app/src/atoms/SelectField/index.tsx index 1ec659acbe5..646ecd60378 100644 --- a/app/src/atoms/SelectField/index.tsx +++ b/app/src/atoms/SelectField/index.tsx @@ -45,7 +45,7 @@ export interface SelectFieldProps { const CAPTION_STYLE = css` font-size: ${TYPOGRAPHY.fontSizeCaption}; &.error { - color: ${COLORS.errorEnabled}; + color: ${COLORS.red50}; font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; } ` diff --git a/app/src/atoms/Skeleton/index.tsx b/app/src/atoms/Skeleton/index.tsx index 2513d21e1a0..69890ee621f 100644 --- a/app/src/atoms/Skeleton/index.tsx +++ b/app/src/atoms/Skeleton/index.tsx @@ -16,9 +16,9 @@ export const Skeleton = (props: SkeletonProps): JSX.Element => { animation: shimmer 2s infinite linear; background: linear-gradient( to right, - ${COLORS.medGreyEnabled} 1%, + ${COLORS.grey30} 1%, #e3e3e366 25%, - ${COLORS.medGreyEnabled} 40% + ${COLORS.grey30} 40% ); background-size: ${backgroundSize}; width: ${width}; diff --git a/app/src/atoms/SleepScreen/__tests__/SleepScreen.test.tsx b/app/src/atoms/SleepScreen/__tests__/SleepScreen.test.tsx index 08ceb7a2c1c..ed29909fc9c 100644 --- a/app/src/atoms/SleepScreen/__tests__/SleepScreen.test.tsx +++ b/app/src/atoms/SleepScreen/__tests__/SleepScreen.test.tsx @@ -14,6 +14,6 @@ describe('SleepScreen', () => { const touchScreen = getByTestId('Touchscreen_SleepScreen') expect(touchScreen).toHaveStyle('width: 100vw') expect(touchScreen).toHaveStyle('height: 100vh') - expect(touchScreen).toHaveStyle(`background-color: ${COLORS.black}`) + expect(touchScreen).toHaveStyle(`background-color: ${COLORS.black90}`) }) }) diff --git a/app/src/atoms/SleepScreen/index.tsx b/app/src/atoms/SleepScreen/index.tsx index c1e4ba0a96c..2600f9d2de9 100644 --- a/app/src/atoms/SleepScreen/index.tsx +++ b/app/src/atoms/SleepScreen/index.tsx @@ -7,7 +7,7 @@ export function SleepScreen(): JSX.Element { ) diff --git a/app/src/atoms/Slideout/Slideout.stories.tsx b/app/src/atoms/Slideout/Slideout.stories.tsx index 5d0823c2577..63cdf2adae4 100644 --- a/app/src/atoms/Slideout/Slideout.stories.tsx +++ b/app/src/atoms/Slideout/Slideout.stories.tsx @@ -26,7 +26,7 @@ const Children = ( diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx index 2db12659541..8bce9937f5b 100644 --- a/app/src/atoms/Slideout/index.tsx +++ b/app/src/atoms/Slideout/index.tsx @@ -99,10 +99,10 @@ const CLOSE_ICON_STYLE = css` border-radius: 50%; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } ` @@ -145,7 +145,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => { css={` ${isExpanded ?? false ? OVERLAY_IN_STYLE : overlayOutStyle} `} - backgroundColor={COLORS.darkBlackEnabled} + backgroundColor={COLORS.black90} /> { ) : ( <>{title} )} - + > = args => ( export const Active = Template.bind({}) Active.args = { status: 'Heating', - backgroundColor: COLORS.medBlue, - iconColor: COLORS.blueEnabled, + backgroundColor: COLORS.blue30, + iconColor: COLORS.blue50, pulse: true, } export const Holding = Template.bind({}) Holding.args = { status: 'Holding at target', - backgroundColor: COLORS.medBlue, - iconColor: COLORS.blueEnabled, + backgroundColor: COLORS.blue30, + iconColor: COLORS.blue50, pulse: false, } export const Idle = Template.bind({}) Idle.args = { status: 'Idle', - backgroundColor: COLORS.medGreyEnabled, - iconColor: COLORS.darkGreyEnabled, + backgroundColor: COLORS.grey30, + iconColor: COLORS.grey50, pulse: true, } export const Error = Template.bind({}) Error.args = { status: 'Error', - backgroundColor: COLORS.warningBackgroundLight, - iconColor: COLORS.warningEnabled, + backgroundColor: COLORS.yellow20, + iconColor: COLORS.yellow50, pulse: true, } diff --git a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx index f9752e876b0..0b34f921a9d 100644 --- a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx +++ b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx @@ -13,7 +13,7 @@ describe('StatusLabel', () => { props = { status: 'Engaged', backgroundColor: C_SKY_BLUE, - iconColor: COLORS.blueEnabled, + iconColor: COLORS.blue50, id: 'engaged_status', showIcon: true, } @@ -26,7 +26,7 @@ describe('StatusLabel', () => { props = { status: 'Disengaged', backgroundColor: C_SKY_BLUE, - iconColor: COLORS.blueEnabled, + iconColor: COLORS.blue50, } const { getByText } = render(props) expect(getByText('Disengaged')).toHaveStyle('backgroundColor: C_SKY_BLUE') @@ -35,9 +35,9 @@ describe('StatusLabel', () => { it('renders an idle status label with a gray background and text', () => { props = { status: 'Idle', - backgroundColor: COLORS.medGreyEnabled, - iconColor: COLORS.darkGrey, - textColor: COLORS.darkBlackEnabled, + backgroundColor: COLORS.grey30, + iconColor: COLORS.grey50, + textColor: COLORS.black90, showIcon: false, } const { getByText } = render(props) @@ -49,7 +49,7 @@ describe('StatusLabel', () => { props = { status: 'holding at target', backgroundColor: C_SKY_BLUE, - iconColor: COLORS.blueEnabled, + iconColor: COLORS.blue50, } const { getByText } = render(props) expect(getByText('Holding at target')).toHaveStyle( @@ -61,7 +61,7 @@ describe('StatusLabel', () => { props = { status: 'cooling', backgroundColor: C_SKY_BLUE, - iconColor: COLORS.blueEnabled, + iconColor: COLORS.blue50, } const { getByText } = render(props) expect(getByText('Cooling')).toHaveStyle('backgroundColor: C_SKY_BLUE') @@ -71,7 +71,7 @@ describe('StatusLabel', () => { props = { status: 'heating', backgroundColor: C_SKY_BLUE, - iconColor: COLORS.blueEnabled, + iconColor: COLORS.blue50, } const { getByText } = render(props) expect(getByText('Heating')).toHaveStyle('backgroundColor: C_SKY_BLUE') @@ -81,7 +81,7 @@ describe('StatusLabel', () => { props = { status: 'Engaged', backgroundColor: C_SKY_BLUE, - iconColor: COLORS.blueEnabled, + iconColor: COLORS.blue50, pulse: true, } const { getByTestId } = render(props) diff --git a/app/src/atoms/StatusLabel/index.tsx b/app/src/atoms/StatusLabel/index.tsx index e35cbcaac4c..2a4612f88fb 100644 --- a/app/src/atoms/StatusLabel/index.tsx +++ b/app/src/atoms/StatusLabel/index.tsx @@ -74,7 +74,7 @@ export const StatusLabel = (props: StatusLabelProps): JSX.Element | null => { {capitalize(status)} diff --git a/app/src/atoms/StepMeter/index.tsx b/app/src/atoms/StepMeter/index.tsx index 0d9774bd363..2c2854dc4d6 100644 --- a/app/src/atoms/StepMeter/index.tsx +++ b/app/src/atoms/StepMeter/index.tsx @@ -27,7 +27,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => { const StepMeterContainer = css` position: ${POSITION_RELATIVE}; height: ${SPACING.spacing4}; - background-color: ${COLORS.medGreyEnabled}; + background-color: ${COLORS.grey30}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { height: ${SPACING.spacing12}; } @@ -44,7 +44,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => { position: ${POSITION_ABSOLUTE}; top: 0; height: 100%; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; width: ${percentComplete}%; transform: translateX(0); transition: ${prevPercentComplete.current <= percentComplete diff --git a/app/src/atoms/Toast/index.tsx b/app/src/atoms/Toast/index.tsx index 7787f1cfe1d..460d34128d2 100644 --- a/app/src/atoms/Toast/index.tsx +++ b/app/src/atoms/Toast/index.tsx @@ -189,7 +189,7 @@ export function Toast(props: ToastProps): JSX.Element { const ODD_ANIMATION_NONE = css`` const TEXT_STYLE = css` - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; font-size: ${showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP}; font-weight: ${showODDStyle ? TYPOGRAPHY.fontWeightSemiBold @@ -227,31 +227,23 @@ export function Toast(props: ToastProps): JSX.Element { } = { [ERROR_TOAST]: { iconName: 'ot-alert', - color: `${showODDStyle ? COLORS.red2 : COLORS.errorEnabled}`, - backgroundColor: `${ - showODDStyle ? COLORS.red4 : COLORS.errorBackgroundLight - }`, + color: `${showODDStyle ? COLORS.red50 : COLORS.red50}`, + backgroundColor: `${showODDStyle ? COLORS.red30 : COLORS.red20}`, }, [INFO_TOAST]: { iconName: 'information', - color: `${showODDStyle ? COLORS.grey2 : COLORS.darkGreyEnabled}`, - backgroundColor: `${ - showODDStyle ? COLORS.grey4 : COLORS.darkGreyDisabled - }`, + color: `${showODDStyle ? COLORS.grey50 : COLORS.grey50}`, + backgroundColor: `${showODDStyle ? COLORS.grey30 : COLORS.grey30}`, }, [SUCCESS_TOAST]: { iconName: 'ot-check', - color: `${showODDStyle ? COLORS.green2 : COLORS.successEnabled}`, - backgroundColor: `${ - showODDStyle ? COLORS.green4 : COLORS.successBackgroundLight - }`, + color: `${showODDStyle ? COLORS.green50 : COLORS.green50}`, + backgroundColor: `${showODDStyle ? COLORS.green30 : COLORS.green20}`, }, [WARNING_TOAST]: { iconName: 'ot-alert', - color: `${showODDStyle ? COLORS.yellow2 : COLORS.warningEnabled}`, - backgroundColor: `${ - showODDStyle ? COLORS.yellow4 : COLORS.warningBackgroundLight - }`, + color: `${COLORS.yellow50}`, + backgroundColor: `${showODDStyle ? COLORS.yellow30 : COLORS.yellow20}`, }, } @@ -358,7 +350,7 @@ export function Toast(props: ToastProps): JSX.Element { > {headingText.length > 0 ? ( onCloseHandler()}> diff --git a/app/src/atoms/Tooltip/__tests__/Tooltip.test.tsx b/app/src/atoms/Tooltip/__tests__/Tooltip.test.tsx index 889e969ec82..754ca6d9e2d 100644 --- a/app/src/atoms/Tooltip/__tests__/Tooltip.test.tsx +++ b/app/src/atoms/Tooltip/__tests__/Tooltip.test.tsx @@ -56,9 +56,7 @@ describe('Tooltip', () => { expect(tooltip).toBeInTheDocument() expect(tooltip).toHaveStyle('position: absolute') expect(tooltip).toHaveStyle('left: 0.25rem') - expect(tooltip).toHaveStyle( - `background: ${String(COLORS.darkBlackEnabled)}` - ) + expect(tooltip).toHaveStyle(`background: ${String(COLORS.black90)}`) expect(tooltip).toHaveStyle(`color: ${String(COLORS.white)}`) expect(tooltip).toHaveStyle('width: 8.75rem') expect(tooltip).toHaveStyle('font-size: 0.625rem') diff --git a/app/src/atoms/Tooltip/index.tsx b/app/src/atoms/Tooltip/index.tsx index 7de7c1a6da7..5c72542e268 100644 --- a/app/src/atoms/Tooltip/index.tsx +++ b/app/src/atoms/Tooltip/index.tsx @@ -21,7 +21,7 @@ export function Tooltip(props: TooltipProps): JSX.Element { return ( = { secondary: { - defaultColor: COLORS.darkBlackEnabled, - defaultBackgroundColor: COLORS.mediumBlueEnabled, - activeBackgroundColor: COLORS.mediumBluePressed, - iconColor: COLORS.blueEnabled, + defaultColor: COLORS.black90, + defaultBackgroundColor: COLORS.blue35, + activeBackgroundColor: COLORS.blue40, + iconColor: COLORS.blue50, }, alert: { - defaultColor: COLORS.red1, - defaultBackgroundColor: COLORS.red3, - activeBackgroundColor: COLORS.red3Pressed, - iconColor: COLORS.red1, + defaultColor: COLORS.red60, + defaultBackgroundColor: COLORS.red35, + activeBackgroundColor: COLORS.red40, + iconColor: COLORS.red60, }, primary: { defaultColor: COLORS.white, - defaultBackgroundColor: COLORS.blueEnabled, - activeBackgroundColor: COLORS.bluePressed, + defaultBackgroundColor: COLORS.blue50, + activeBackgroundColor: COLORS.blue60, iconColor: COLORS.white, }, } @@ -97,8 +97,8 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { } &:disabled { - background-color: ${COLORS.darkBlack20}; - color: ${COLORS.darkBlack60}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; } ` return ( @@ -122,7 +122,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { aria-label={`${iconName} icon`} color={ disabled - ? COLORS.darkBlack60 + ? COLORS.grey50 : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor } size="5rem" diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx index f29f17df636..79e504d7457 100644 --- a/app/src/atoms/buttons/MediumButton.tsx +++ b/app/src/atoms/buttons/MediumButton.tsx @@ -58,48 +58,48 @@ export function MediumButton(props: MediumButtonProps): JSX.Element { alert: { // TODO(ew, 3/22/23): replaces these hex codes with the color constants activeBackgroundColor: '#b91f20', - defaultBackgroundColor: COLORS.red2, + defaultBackgroundColor: COLORS.red50, defaultColor: COLORS.white, - disabledBackgroundColor: COLORS.darkBlack20, + disabledBackgroundColor: COLORS.grey35, iconColor: COLORS.white, }, alertSecondary: { // TODO(ew, 3/22/23): replaces these hex codes with the color constants activeBackgroundColor: '#ccabac', - defaultBackgroundColor: COLORS.red3, - defaultColor: COLORS.red1, - disabledBackgroundColor: COLORS.darkBlack20, - iconColor: COLORS.red1, + defaultBackgroundColor: COLORS.red35, + defaultColor: COLORS.red60, + disabledBackgroundColor: COLORS.grey35, + iconColor: COLORS.red60, }, primary: { // TODO(ew, 3/22/23): replaces these hex codes with the color constants activeBackgroundColor: '#045dd0', - defaultBackgroundColor: COLORS.blueEnabled, + defaultBackgroundColor: COLORS.blue50, defaultColor: COLORS.white, - disabledBackgroundColor: COLORS.darkBlack20, + disabledBackgroundColor: COLORS.grey35, iconColor: COLORS.white, }, secondary: { // TODO(ew, 3/22/23): replaces these hex codes with the color constants activeBackgroundColor: '#94afd4', - defaultBackgroundColor: COLORS.mediumBlueEnabled, - defaultColor: COLORS.darkBlackEnabled, - disabledBackgroundColor: COLORS.darkBlack20, - iconColor: COLORS.blueEnabled, + defaultBackgroundColor: COLORS.blue35, + defaultColor: COLORS.black90, + disabledBackgroundColor: COLORS.grey35, + iconColor: COLORS.blue50, }, tertiaryHigh: { - activeBackgroundColor: COLORS.darkBlack20, + activeBackgroundColor: COLORS.grey35, defaultBackgroundColor: COLORS.white, - defaultColor: COLORS.darkBlack100, + defaultColor: COLORS.black90, disabledBackgroundColor: COLORS.transparent, - iconColor: COLORS.darkBlack100, + iconColor: COLORS.black90, }, tertiaryLowLight: { - activeBackgroundColor: COLORS.darkBlack20, + activeBackgroundColor: COLORS.grey35, defaultBackgroundColor: COLORS.white, - defaultColor: COLORS.darkBlack70, + defaultColor: COLORS.grey60, disabledBackgroundColor: COLORS.transparent, - iconColor: COLORS.darkBlack70, + iconColor: COLORS.grey60, }, } @@ -137,7 +137,7 @@ export function MediumButton(props: MediumButtonProps): JSX.Element { &:disabled { background-color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType] .disabledBackgroundColor}; - color: ${COLORS.darkBlack60}; + color: ${COLORS.grey50}; } ` return ( @@ -162,7 +162,7 @@ export function MediumButton(props: MediumButtonProps): JSX.Element { aria-label={`${iconName ?? 'play'} icon`} color={ disabled - ? COLORS.darkBlack60 + ? COLORS.grey50 : MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType].iconColor } size={SPACING.spacing40} diff --git a/app/src/atoms/buttons/QuaternaryButton.tsx b/app/src/atoms/buttons/QuaternaryButton.tsx index a5ebdd1bc80..3e8d5d0c5d3 100644 --- a/app/src/atoms/buttons/QuaternaryButton.tsx +++ b/app/src/atoms/buttons/QuaternaryButton.tsx @@ -12,7 +12,7 @@ export const QuaternaryButton = styled(NewSecondaryBtn)` background-color: ${COLORS.white}; border-radius: ${BORDERS.radiusRoundEdge}; box-shadow: none; - color: ${COLORS.blueEnabled}; + color: ${COLORS.blue50}; overflow: no-wrap; padding-left: ${SPACING.spacing16}; padding-right: ${SPACING.spacing16}; @@ -27,7 +27,7 @@ export const QuaternaryButton = styled(NewSecondaryBtn)` box-shadow: 0 0 0; } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.warningEnabled}; + box-shadow: 0 0 0 3px ${COLORS.yellow50}; } &:disabled { diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx index b2751dd7fa1..60d65d020ef 100644 --- a/app/src/atoms/buttons/RadioButton.tsx +++ b/app/src/atoms/buttons/RadioButton.tsx @@ -40,25 +40,25 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { ` const AVAILABLE_BUTTON_STYLE = css` - background: ${COLORS.mediumBlueEnabled}; + background: ${COLORS.blue35}; &:active { - background-color: ${COLORS.mediumBluePressed}; + background-color: ${COLORS.blue40}; } ` const SELECTED_BUTTON_STYLE = css` - background: ${COLORS.blueEnabled}; + background: ${COLORS.blue50}; color: ${COLORS.white}; &:active { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } ` const DISABLED_BUTTON_STYLE = css` - background-color: ${COLORS.darkBlack20}; - color: ${COLORS.darkBlack60}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; cursor: not-allowed; ` diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx index c40ff4df4bd..84de030e8e8 100644 --- a/app/src/atoms/buttons/SmallButton.tsx +++ b/app/src/atoms/buttons/SmallButton.tsx @@ -58,39 +58,39 @@ export function SmallButton(props: SmallButtonProps): JSX.Element { } > = { secondary: { - defaultColor: COLORS.darkBlackEnabled, - defaultBackgroundColor: COLORS.mediumBlueEnabled, - activeBackgroundColor: COLORS.mediumBluePressed, - disabledBackgroundColor: `${COLORS.darkBlack20}`, - disabledColor: `${COLORS.darkBlack60}`, + defaultColor: COLORS.black90, + defaultBackgroundColor: COLORS.blue35, + activeBackgroundColor: COLORS.blue40, + disabledBackgroundColor: `${COLORS.grey35}`, + disabledColor: `${COLORS.grey50}`, }, alert: { defaultColor: COLORS.white, - defaultBackgroundColor: COLORS.red2, - activeBackgroundColor: COLORS.red2Pressed, - disabledBackgroundColor: `${COLORS.darkBlack20}`, - disabledColor: `${COLORS.darkBlack60}`, + defaultBackgroundColor: COLORS.red50, + activeBackgroundColor: COLORS.red55, + disabledBackgroundColor: `${COLORS.grey35}`, + disabledColor: `${COLORS.grey50}`, }, primary: { defaultColor: COLORS.white, - defaultBackgroundColor: COLORS.blueEnabled, - activeBackgroundColor: COLORS.bluePressed, - disabledBackgroundColor: `${COLORS.darkBlack20}`, - disabledColor: `${COLORS.darkBlack60}`, + defaultBackgroundColor: COLORS.blue50, + activeBackgroundColor: COLORS.blue60, + disabledBackgroundColor: `${COLORS.grey35}`, + disabledColor: `${COLORS.grey50}`, }, tertiaryHighLight: { - defaultColor: COLORS.darkBlackEnabled, - defaultBackgroundColor: `${COLORS.blueEnabled}${COLORS.opacity0HexCode}`, - activeBackgroundColor: `${COLORS.darkBlack20}`, - disabledBackgroundColor: `${COLORS.blueEnabled}${COLORS.opacity0HexCode}`, - disabledColor: `${COLORS.darkBlack60}`, + defaultColor: COLORS.black90, + defaultBackgroundColor: `${COLORS.blue50}00`, + activeBackgroundColor: `${COLORS.grey35}`, + disabledBackgroundColor: `${COLORS.blue50}00`, + disabledColor: `${COLORS.grey50}`, }, tertiaryLowLight: { - defaultColor: `${COLORS.darkBlack70}`, - defaultBackgroundColor: ` ${COLORS.blueEnabled}${COLORS.opacity0HexCode}`, - activeBackgroundColor: `${COLORS.darkBlack20}`, - disabledBackgroundColor: `${COLORS.blueEnabled}${COLORS.opacity0HexCode}`, - disabledColor: `${COLORS.darkBlack60}`, + defaultColor: `${COLORS.grey60}`, + defaultBackgroundColor: ` ${COLORS.blue50}00`, + activeBackgroundColor: `${COLORS.grey35}`, + disabledBackgroundColor: `${COLORS.blue50}00`, + disabledColor: `${COLORS.grey50}`, }, } diff --git a/app/src/atoms/buttons/SubmitPrimaryButton.tsx b/app/src/atoms/buttons/SubmitPrimaryButton.tsx index 191bad8cd17..13c930f2606 100644 --- a/app/src/atoms/buttons/SubmitPrimaryButton.tsx +++ b/app/src/atoms/buttons/SubmitPrimaryButton.tsx @@ -18,7 +18,7 @@ export const SubmitPrimaryButton = ( props: SubmitPrimaryButtonProps ): JSX.Element => { const SUBMIT_INPUT_STYLE = css` - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing8} ${SPACING.spacing16}; color: ${COLORS.white}; @@ -29,21 +29,21 @@ export const SubmitPrimaryButton = ( ${styleProps} &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.warningEnabled}; + box-shadow: 0 0 0 3px ${COLORS.yellow50}; } &:hover { - background-color: ${COLORS.blueHover}; + background-color: ${COLORS.blue55}; box-shadow: 0 0 0; } &:active { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } &:disabled { - background-color: ${COLORS.darkGreyDisabled}; - color: ${COLORS.successDisabled}; + background-color: ${COLORS.grey30}; + color: ${COLORS.grey40}; } ` return diff --git a/app/src/atoms/buttons/TabbedButton.tsx b/app/src/atoms/buttons/TabbedButton.tsx index 6ad4fec5035..224f0f52e2a 100644 --- a/app/src/atoms/buttons/TabbedButton.tsx +++ b/app/src/atoms/buttons/TabbedButton.tsx @@ -9,32 +9,32 @@ import { } from '@opentrons/components' const SELECTED_STYLE = css` - background-color: ${COLORS.highlightPurple1}; + background-color: ${COLORS.purple50}; color: ${COLORS.white}; &:focus, &:hover { - background-color: ${COLORS.highlightPurple1}; + background-color: ${COLORS.purple50}; box-shadow: none; } &:active { - background-color: ${COLORS.highlightPurple1Pressed}; + background-color: ${COLORS.purple55}; } ` const UNSELECTED_STYLE = css` - background-color: ${COLORS.highlightPurple2}; - color: ${COLORS.darkBlack100}; + background-color: ${COLORS.purple35}; + color: ${COLORS.black90}; &:focus, &:hover { - background-color: ${COLORS.highlightPurple2}; + background-color: ${COLORS.purple35}; box-shadow: none; } &:active { - background-color: ${COLORS.highlightPurple2Pressed}; + background-color: ${COLORS.purple40}; } ` @@ -58,11 +58,11 @@ export const TabbedButton = styled(Btn)` ${styleProps} &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: 0 0 0 3px ${COLORS.blue50}; } &:disabled { - background-color: ${COLORS.darkBlack20}; - color: ${COLORS.darkBlack60}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; } `} ` diff --git a/app/src/atoms/buttons/TertiaryButton.tsx b/app/src/atoms/buttons/TertiaryButton.tsx index 04704261b77..d768066caee 100644 --- a/app/src/atoms/buttons/TertiaryButton.tsx +++ b/app/src/atoms/buttons/TertiaryButton.tsx @@ -9,10 +9,10 @@ import { } from '@opentrons/components' export const TertiaryButton = styled(NewPrimaryBtn)` - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; border-radius: ${BORDERS.radiusRoundEdge}; box-shadow: none; - color: ${COLORS.fundamentalsBackground}; + color: ${COLORS.grey10}; overflow: no-wrap; padding-left: ${SPACING.spacing16}; padding-right: ${SPACING.spacing16}; @@ -23,20 +23,20 @@ export const TertiaryButton = styled(NewPrimaryBtn)` ${styleProps} &:hover { - background-color: ${COLORS.blueHover}; + background-color: ${COLORS.blue55}; box-shadow: none; } &:active { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: 0 0 0 3px ${COLORS.yellow50}; } &:disabled { - background-color: ${COLORS.darkGreyDisabled}; - color: ${COLORS.errorDisabled}; + background-color: ${COLORS.grey30}; + color: ${COLORS.grey40}; } ` diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx index c72346bb001..c4a7df3afd0 100644 --- a/app/src/atoms/buttons/ToggleButton.tsx +++ b/app/src/atoms/buttons/ToggleButton.tsx @@ -6,34 +6,34 @@ import { Btn, Icon, COLORS, SIZE_1, SIZE_2 } from '@opentrons/components' import type { StyleProps } from '@opentrons/components' const TOGGLE_DISABLED_STYLES = css` - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { - color: ${COLORS.darkGreyHover}; + color: ${COLORS.grey60}; } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.warningEnabled}; + box-shadow: 0 0 0 3px ${COLORS.yellow50}; } &:disabled { - color: ${COLORS.darkGreyDisabled}; + color: ${COLORS.grey30}; } ` const TOGGLE_ENABLED_STYLES = css` - color: ${COLORS.blueEnabled}; + color: ${COLORS.blue50}; &:hover { - color: ${COLORS.blueHover}; + color: ${COLORS.blue55}; } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.warningEnabled}; + box-shadow: 0 0 0 3px ${COLORS.yellow50}; } &:disabled { - color: ${COLORS.darkGreyDisabled}; + color: ${COLORS.grey30}; } ` diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx index 55e04d8bfea..ebb241233ed 100644 --- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx @@ -33,7 +33,7 @@ describe('FloatingActionButton', () => { expect(button).toHaveStyle( `padding: ${SPACING.spacing12} ${SPACING.spacing24}` ) - expect(button).toHaveStyle(`background-color: ${COLORS.highlightPurple1}`) + expect(button).toHaveStyle(`background-color: ${COLORS.purple50}`) expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSize28}`) expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`) expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight36}`) @@ -50,31 +50,23 @@ describe('FloatingActionButton', () => { const { getByRole } = render(props) const button = getByRole('button') expect(button).toBeDisabled() - expect(button).toHaveStyle(`background-color: #16212d33`) - expect(button).toHaveStyle(`color: #16212d99`) + expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`) + expect(button).toHaveStyle(`color: ${COLORS.grey50}`) }) it('applies the correct states to the unselected floating action button - active', () => { const { getByRole } = render(props) const button = getByRole('button') - expect(button).toHaveStyleRule( - 'background-color', - `${COLORS.highlightPurple1Pressed}`, - { - modifier: ':active', - } - ) + expect(button).toHaveStyleRule('background-color', `${COLORS.purple55}`, { + modifier: ':active', + }) }) it('applies the correct states to the unselected floating action button - focus-visible', () => { const { getByRole } = render(props) const button = getByRole('button') - expect(button).toHaveStyleRule( - 'border-color', - `${COLORS.fundamentalsFocus}`, - { - modifier: ':focus-visible', - } - ) + expect(button).toHaveStyleRule('border-color', `${COLORS.blue50}`, { + modifier: ':focus-visible', + }) }) }) diff --git a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx index 058a12886c8..2889f722ab5 100644 --- a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx @@ -22,7 +22,7 @@ describe('LargeButton', () => { fireEvent.click(screen.getByText('large button')) expect(props.onClick).toHaveBeenCalled() expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.blueEnabled}` + `background-color: ${COLORS.blue50}` ) }) it('renders the alert button', () => { @@ -32,7 +32,7 @@ describe('LargeButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.red3}` + `background-color: ${COLORS.red35}` ) }) it('renders the secondary button', () => { @@ -42,7 +42,7 @@ describe('LargeButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.mediumBlueEnabled}` + `background-color: ${COLORS.blue35}` ) }) it('renders the button as disabled', () => { diff --git a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx index af83fdbb4f5..ae7c685f498 100644 --- a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx @@ -22,7 +22,7 @@ describe('MediumButton', () => { fireEvent.click(screen.getByText('Medium button')) expect(props.onClick).toHaveBeenCalled() expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.blueEnabled}` + `background-color: ${COLORS.blue50}` ) }) it('renders the alert button', () => { @@ -32,7 +32,7 @@ describe('MediumButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.red2}` + `background-color: ${COLORS.red50}` ) }) it('renders the secondary button', () => { @@ -42,7 +42,7 @@ describe('MediumButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.mediumBlueEnabled}` + `background-color: ${COLORS.blue35}` ) }) it('renders the secondary alert button', () => { @@ -52,7 +52,7 @@ describe('MediumButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.red3}` + `background-color: ${COLORS.red35}` ) }) it('renders the tertiary high button', () => { diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx index 91a93db092a..3d3f951644f 100644 --- a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx @@ -31,7 +31,7 @@ describe('QuaternaryButton', () => { `border-radius: ${String(BORDERS.radiusRoundEdge)}` ) expect(button).toHaveStyle('box-shadow: none') - expect(button).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.blue50)}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}` ) @@ -72,7 +72,7 @@ describe('QuaternaryButton', () => { const button = getByText('secondary tertiary button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.warningEnabled)}`, + `0 0 0 3px ${String(COLORS.yellow50)}`, { modifier: ':focus-visible', } @@ -80,10 +80,10 @@ describe('QuaternaryButton', () => { }) it('renders secondary tertiary button with text and different background color', () => { - props.color = COLORS.errorEnabled + props.color = COLORS.red50 const { getByText } = render(props) const button = getByText('secondary tertiary button') expect(button).toHaveStyle(`background-color: ${String(COLORS.white)}`) - expect(button).toHaveStyle(`color: ${String(COLORS.errorEnabled)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.red50)}`) }) }) diff --git a/app/src/atoms/buttons/__tests__/RadioButton.test.tsx b/app/src/atoms/buttons/__tests__/RadioButton.test.tsx index b03dd301c78..a4b893c35aa 100644 --- a/app/src/atoms/buttons/__tests__/RadioButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/RadioButton.test.tsx @@ -23,7 +23,7 @@ describe('RadioButton', () => { } const { getByRole } = render(props) const label = getByRole('label') - expect(label).toHaveStyle(`background-color: ${COLORS.mediumBlueEnabled}`) + expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`) expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`) }) it('renders the large selected button', () => { @@ -34,7 +34,7 @@ describe('RadioButton', () => { } const { getByRole } = render(props) const label = getByRole('label') - expect(label).toHaveStyle(`background-color: ${COLORS.blueEnabled}`) + expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`) expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`) }) it('renders the small button', () => { @@ -44,7 +44,7 @@ describe('RadioButton', () => { } const { getByRole } = render(props) const label = getByRole('label') - expect(label).toHaveStyle(`background-color: ${COLORS.mediumBlueEnabled}`) + expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`) expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`) }) it('renders the small selected button', () => { @@ -55,7 +55,7 @@ describe('RadioButton', () => { } const { getByRole } = render(props) const label = getByRole('label') - expect(label).toHaveStyle(`background-color: ${COLORS.blueEnabled}`) + expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`) expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`) }) }) diff --git a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx index 1e0d5fdf9f6..62bd04ec3bc 100644 --- a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx @@ -22,7 +22,7 @@ describe('SmallButton', () => { fireEvent.click(screen.getByText('small button')) expect(props.onClick).toHaveBeenCalled() expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.blueEnabled}` + `background-color: ${COLORS.blue50}` ) expect(screen.getByRole('button')).toHaveStyle( `border-radius: ${BORDERS.borderRadiusSize4}` @@ -35,7 +35,7 @@ describe('SmallButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.red2}` + `background-color: ${COLORS.red50}` ) }) it('renders the secondary button', () => { @@ -45,7 +45,7 @@ describe('SmallButton', () => { } render(props) expect(screen.getByRole('button')).toHaveStyle( - `background-color: ${COLORS.mediumBlueEnabled}` + `background-color: ${COLORS.blue35}` ) }) it('renders the tertiary high light button', () => { @@ -54,9 +54,7 @@ describe('SmallButton', () => { buttonType: 'tertiaryHighLight', } render(props) - expect(screen.getByRole('button')).toHaveStyle( - `color: ${COLORS.darkBlackEnabled}` - ) + expect(screen.getByRole('button')).toHaveStyle(`color: ${COLORS.black90}`) }) it('renders the tertiary low light', () => { props = { @@ -64,9 +62,7 @@ describe('SmallButton', () => { buttonType: 'tertiaryLowLight', } render(props) - expect(screen.getByRole('button')).toHaveStyle( - `color: ${COLORS.darkBlackEnabled}${COLORS.opacity70HexCode}` - ) + expect(screen.getByRole('button')).toHaveStyle(`color: ${COLORS.grey60}`) }) it('renders the button as disabled', () => { props = { diff --git a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx index 5ceffe87b28..f6b3ca3b09c 100644 --- a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx @@ -32,9 +32,7 @@ describe('SubmitPrimaryButton', () => { it('renders submit primary button with text', () => { const { getByText } = render(props) const button = getByText('submit primary button') - expect(button).toHaveStyle( - `background-color: ${String(COLORS.blueEnabled)}` - ) + expect(button).toHaveStyle(`background-color: ${String(COLORS.blue50)}`) expect(button).toHaveStyle( `border-radius: ${String(BORDERS.radiusSoftCorners)}` ) @@ -63,10 +61,8 @@ describe('SubmitPrimaryButton', () => { const { getByText } = render(props) const button = getByText('submit primary button') expect(button).toBeDisabled() - expect(button).toHaveStyle( - `background-color: ${String(COLORS.darkGreyDisabled)}` - ) - expect(button).toHaveStyle(`color: ${String(COLORS.successDisabled)}`) + expect(button).toHaveStyle(`background-color: ${String(COLORS.grey30)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.grey40)}`) }) it('calls mock function when clicking the button', () => { @@ -81,7 +77,7 @@ describe('SubmitPrimaryButton', () => { const button = getByText('submit primary button') expect(button).toHaveStyleRule( 'background-color', - `${String(COLORS.blueHover)}`, + `${String(COLORS.blue55)}`, { modifier: ':hover', } @@ -96,7 +92,7 @@ describe('SubmitPrimaryButton', () => { const button = getByText('submit primary button') expect(button).toHaveStyleRule( 'background-color', - `${String(COLORS.bluePressed)}`, + `${String(COLORS.blue60)}`, { modifier: ':active', } @@ -108,7 +104,7 @@ describe('SubmitPrimaryButton', () => { const button = getByText('submit primary button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.warningEnabled)}`, + `0 0 0 3px ${String(COLORS.yellow50)}`, { modifier: ':focus-visible', } diff --git a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx index 74e7b169cbd..439c4227518 100644 --- a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx @@ -26,9 +26,7 @@ describe('Unselected TabbedButton', () => { it('renders unselected tabbed button with text', () => { const { getByText } = render(props) const button = getByText('tabbed button') - expect(button).toHaveStyle( - `background-color: ${String(COLORS.highlightPurple2)}` - ) + expect(button).toHaveStyle(`background-color: ${String(COLORS.purple35)}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing16} ${SPACING.spacing24}` ) @@ -46,7 +44,7 @@ describe('Unselected TabbedButton', () => { `text-transform: ${String(TYPOGRAPHY.textTransformNone)}` ) expect(button).toHaveStyle(`box-shadow: none`) - expect(button).toHaveStyle(`color: ${String(COLORS.darkBlack100)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.black90)}`) }) it('renders unselected tabbed button with text and disabled', () => { @@ -54,8 +52,8 @@ describe('Unselected TabbedButton', () => { const { getByText } = render(props) const button = getByText('tabbed button') expect(button).toBeDisabled() - expect(button).toHaveStyle(`background-color: #16212d33`) - expect(button).toHaveStyle(`color: #16212d99`) + expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`) + expect(button).toHaveStyle(`color: ${COLORS.grey50}`) }) it('applies the correct states to the unselected tabbed button - active', () => { @@ -63,7 +61,7 @@ describe('Unselected TabbedButton', () => { const button = getByText('tabbed button') expect(button).toHaveStyleRule( 'background-color', - `${String(COLORS.highlightPurple2Pressed)}`, + `${String(COLORS.purple40)}`, { modifier: ':active', } @@ -83,7 +81,7 @@ describe('Unselected TabbedButton', () => { const button = getByText('tabbed button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.fundamentalsFocus)}`, + `0 0 0 3px ${String(COLORS.blue50)}`, { modifier: ':focus-visible', } @@ -104,9 +102,7 @@ describe('Selected TabbedButton', () => { it('renders selected tabbed button with text', () => { const { getByText } = render(props) const button = getByText('tabbed button') - expect(button).toHaveStyle( - `background-color: ${String(COLORS.highlightPurple1)}` - ) + expect(button).toHaveStyle(`background-color: ${String(COLORS.purple50)}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing16} ${SPACING.spacing24}` ) @@ -132,8 +128,8 @@ describe('Selected TabbedButton', () => { const { getByText } = render(props) const button = getByText('tabbed button') expect(button).toBeDisabled() - expect(button).toHaveStyle(`background-color: #16212d33`) - expect(button).toHaveStyle(`color: #16212d99`) + expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`) + expect(button).toHaveStyle(`color: ${COLORS.grey50}`) }) it('applies the correct states to the selected tabbed button - active', () => { @@ -141,7 +137,7 @@ describe('Selected TabbedButton', () => { const button = getByText('tabbed button') expect(button).toHaveStyleRule( 'background-color', - `${String(COLORS.highlightPurple1Pressed)}`, + `${String(COLORS.purple55)}`, { modifier: ':active', } @@ -161,7 +157,7 @@ describe('Selected TabbedButton', () => { const button = getByText('tabbed button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.fundamentalsFocus)}`, + `0 0 0 3px ${String(COLORS.blue50)}`, { modifier: ':focus-visible', } diff --git a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx index d7ac4dd6dc0..266dfc06a2d 100644 --- a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx @@ -25,9 +25,7 @@ describe('TertiaryButton', () => { it('renders tertiary button with text', () => { const { getByText } = render(props) const button = getByText('tertiary button') - expect(button).toHaveStyle( - `background-color: ${String(COLORS.blueEnabled)}` - ) + expect(button).toHaveStyle(`background-color: ${String(COLORS.blue50)}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}` ) @@ -47,9 +45,7 @@ describe('TertiaryButton', () => { expect(button).toHaveStyle('box-shadow: none') expect(button).toHaveStyle('overflow: no-wrap') expect(button).toHaveStyle('white-space: nowrap') - expect(button).toHaveStyle( - `color: ${String(COLORS.fundamentalsBackground)}` - ) + expect(button).toHaveStyle(`color: ${String(COLORS.grey10)}`) }) it('renders tertiary button with text and disabled', () => { @@ -57,10 +53,8 @@ describe('TertiaryButton', () => { const { getByText } = render(props) const button = getByText('tertiary button') expect(button).toBeDisabled() - expect(button).toHaveStyle( - `background-color: ${String(COLORS.darkGreyDisabled)}` - ) - expect(button).toHaveStyle(`color: ${String(COLORS.errorDisabled)}`) + expect(button).toHaveStyle(`background-color: ${String(COLORS.grey30)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.grey40)}`) }) it('applies the correct states to the button - hover', () => { @@ -68,7 +62,7 @@ describe('TertiaryButton', () => { const button = getByText('tertiary button') expect(button).toHaveStyleRule( 'background-color', - `${String(COLORS.blueHover)}`, + `${String(COLORS.blue55)}`, { modifier: ':hover', } @@ -83,7 +77,7 @@ describe('TertiaryButton', () => { const button = getByText('tertiary button') expect(button).toHaveStyleRule( 'background-color', - `${String(COLORS.bluePressed)}`, + `${String(COLORS.blue60)}`, { modifier: ':active', } @@ -95,7 +89,7 @@ describe('TertiaryButton', () => { const button = getByText('tertiary button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.warningEnabled)}`, + `0 0 0 3px ${String(COLORS.yellow50)}`, { modifier: ':focus-visible', } @@ -103,14 +97,10 @@ describe('TertiaryButton', () => { }) it('renders tertiary button with text and different background color', () => { - props.backgroundColor = COLORS.errorEnabled + props.backgroundColor = COLORS.red50 const { getByText } = render(props) const button = getByText('tertiary button') - expect(button).toHaveStyle( - `background-color: ${String(COLORS.errorEnabled)}` - ) - expect(button).toHaveStyle( - `color: ${String(COLORS.fundamentalsBackground)}` - ) + expect(button).toHaveStyle(`background-color: ${String(COLORS.red50)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.grey10)}`) }) }) diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx index 88410aa8747..e86cc7d70dd 100644 --- a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx @@ -27,7 +27,7 @@ describe('ToggleButton', () => { it('renders toggle button - on', () => { const { getByLabelText } = render(props) const button = getByLabelText('toggle button') - expect(button).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.blue50)}`) expect(button).toHaveStyle(`height: ${String(SIZE_2)}`) expect(button).toHaveStyle(`width: ${String(SIZE_2)}`) expect(button).toHaveAttribute('aria-checked', 'true') @@ -36,7 +36,7 @@ describe('ToggleButton', () => { it('applies the correct states to the toggle on- hover', () => { const { getByLabelText } = render(props) const button = getByLabelText('toggle button') - expect(button).toHaveStyleRule('color', `${String(COLORS.blueHover)}`, { + expect(button).toHaveStyleRule('color', `${String(COLORS.blue55)}`, { modifier: ':hover', }) }) @@ -46,7 +46,7 @@ describe('ToggleButton', () => { const button = getByLabelText('toggle button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.warningEnabled)}`, + `0 0 0 3px ${String(COLORS.yellow50)}`, { modifier: ':focus-visible', } @@ -57,13 +57,9 @@ describe('ToggleButton', () => { props.disabled = true const { getByLabelText } = render(props) const button = getByLabelText('toggle button') - expect(button).toHaveStyleRule( - 'color', - `${String(COLORS.darkGreyDisabled)}`, - { - modifier: ':disabled', - } - ) + expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, { + modifier: ':disabled', + }) }) it('calls mock function when clicking the toggle button - on', () => { @@ -77,7 +73,7 @@ describe('ToggleButton', () => { props.toggledOn = false const { getByLabelText } = render(props) const button = getByLabelText('toggle button') - expect(button).toHaveStyle(`color: ${String(COLORS.darkGreyEnabled)}`) + expect(button).toHaveStyle(`color: ${String(COLORS.grey50)}`) expect(button).toHaveStyle(`height: ${String(SIZE_2)}`) expect(button).toHaveStyle(`width: ${String(SIZE_2)}`) expect(button).toHaveAttribute('aria-checked', 'false') @@ -87,7 +83,7 @@ describe('ToggleButton', () => { props.toggledOn = false const { getByLabelText } = render(props) const button = getByLabelText('toggle button') - expect(button).toHaveStyleRule('color', `${String(COLORS.darkGreyHover)}`, { + expect(button).toHaveStyleRule('color', `${String(COLORS.grey60)}`, { modifier: ':hover', }) }) @@ -98,7 +94,7 @@ describe('ToggleButton', () => { const button = getByLabelText('toggle button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.warningEnabled)}`, + `0 0 0 3px ${String(COLORS.yellow50)}`, { modifier: ':focus-visible', } @@ -110,13 +106,9 @@ describe('ToggleButton', () => { props.disabled = true const { getByLabelText } = render(props) const button = getByLabelText('toggle button') - expect(button).toHaveStyleRule( - 'color', - `${String(COLORS.darkGreyDisabled)}`, - { - modifier: ':disabled', - } - ) + expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, { + modifier: ':disabled', + }) }) it('calls mock function when clicking the toggle button - off', () => { diff --git a/app/src/atoms/buttons/constants.ts b/app/src/atoms/buttons/constants.ts index fb4bf596435..d49080863a7 100644 --- a/app/src/atoms/buttons/constants.ts +++ b/app/src/atoms/buttons/constants.ts @@ -1,3 +1,3 @@ import { SPACING, COLORS } from '@opentrons/components' -export const ODD_FOCUS_VISIBLE = `0 0 0 ${SPACING.spacing4} ${COLORS.fundamentalsFocus}` +export const ODD_FOCUS_VISIBLE = `0 0 0 ${SPACING.spacing4} ${COLORS.blue50}` diff --git a/app/src/atoms/structure/Divider.tsx b/app/src/atoms/structure/Divider.tsx index babca8b86b9..2f8eef69cfc 100644 --- a/app/src/atoms/structure/Divider.tsx +++ b/app/src/atoms/structure/Divider.tsx @@ -6,7 +6,7 @@ type Props = React.ComponentProps export function Divider(props: Props): JSX.Element { return ( { const { getByTestId } = render(props) const divider = getByTestId('divider') expect(divider).toHaveStyle( - `borderBottom: 1px solid ${String(COLORS.medGreyEnabled)}` + `borderBottom: 1px solid ${String(COLORS.grey30)}` ) expect(divider).toHaveStyle('width: 80%') expect(divider).toHaveStyle(`margin-top: ${SPACING.spacing4}`) @@ -30,13 +30,13 @@ describe('Divider', () => { props = { ...props, width: '100%', - color: COLORS.blueEnabled, + color: COLORS.blue50, marginY: 0, paddingX: SPACING.spacing4, } const { getByTestId } = render(props) const divider = getByTestId('divider') - expect(divider).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`) + expect(divider).toHaveStyle(`color: ${String(COLORS.blue50)}`) expect(divider).toHaveStyle('width: 100%') expect(divider).toHaveStyle('margin-top: 0') expect(divider).toHaveStyle('margin-bottom: 0') diff --git a/app/src/atoms/structure/__tests__/Line.test.tsx b/app/src/atoms/structure/__tests__/Line.test.tsx index 4e007d66a81..083cb5645ac 100644 --- a/app/src/atoms/structure/__tests__/Line.test.tsx +++ b/app/src/atoms/structure/__tests__/Line.test.tsx @@ -19,22 +19,20 @@ describe('Line', () => { const { getByTestId } = render(props) const line = getByTestId('line') expect(line).toHaveStyle('width: 100%') - expect(line).toHaveStyle( - `borderBottom: 1px solid ${String(COLORS.medGreyEnabled)}` - ) + expect(line).toHaveStyle(`borderBottom: 1px solid ${String(COLORS.grey30)}`) }) it('renders line with additional props', () => { props = { ...props, width: '80%', - color: COLORS.blueEnabled, + color: COLORS.blue50, marginY: 0, paddingX: SPACING.spacing4, } const { getByTestId } = render(props) const line = getByTestId('line') - expect(line).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`) + expect(line).toHaveStyle(`color: ${String(COLORS.blue50)}`) expect(line).toHaveStyle('width: 80%') expect(line).toHaveStyle('margin-top: 0') expect(line).toHaveStyle('margin-bottom: 0') diff --git a/app/src/molecules/BackgroundOverlay/index.tsx b/app/src/molecules/BackgroundOverlay/index.tsx index b60c20f0738..5c820c9e27f 100644 --- a/app/src/molecules/BackgroundOverlay/index.tsx +++ b/app/src/molecules/BackgroundOverlay/index.tsx @@ -19,7 +19,7 @@ export function BackgroundOverlay(props: BackgroundOverlayProps): JSX.Element { top="0" bottom="0" zIndex="3" - backgroundColor={COLORS.darkBlack60} + backgroundColor={COLORS.grey50} onClick={onClick} {...flexProps} /> diff --git a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx index 53174b54c11..f9df36aa625 100644 --- a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx +++ b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx @@ -49,7 +49,7 @@ describe('CardButton', () => { getByText('Find a network in your lab or enter your own.') expect(getByTestId('cardButton_icon_wifi')).toBeInTheDocument() const button = getByRole('button') - expect(button).toHaveStyle(`background-color: ${COLORS.mediumBlueEnabled}`) + expect(button).toHaveStyle(`background-color: ${COLORS.blue35}`) }) it('renders the button as disabled', () => { diff --git a/app/src/molecules/CardButton/index.tsx b/app/src/molecules/CardButton/index.tsx index 847eceacf6b..ece8c803f8a 100644 --- a/app/src/molecules/CardButton/index.tsx +++ b/app/src/molecules/CardButton/index.tsx @@ -27,29 +27,29 @@ const CARD_BUTTON_STYLE = css` box-shadow: none; &:focus { - background-color: ${COLORS.mediumBluePressed}; + background-color: ${COLORS.blue40}; box-shadow: none; } &:hover { border: none; box-shadow: none; - background-color: ${COLORS.mediumBlueEnabled}; - color: ${COLORS.darkBlackEnabled}; + background-color: ${COLORS.blue35}; + color: ${COLORS.black90}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${COLORS.mediumBlueEnabled}; + background-color: ${COLORS.blue35}; } &:active { - background-color: ${COLORS.mediumBluePressed}; + background-color: ${COLORS.blue40}; } &:disabled { - background-color: ${COLORS.darkBlack20}; - color: ${COLORS.darkBlack70}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey60}; } ` @@ -83,20 +83,20 @@ export function CardButton(props: CardButtonProps): JSX.Element { onClick={() => history.push(destinationPath)} width="100%" css={CARD_BUTTON_STYLE} - backgroundColor={disabled ? COLORS.darkBlack20 : COLORS.mediumBlueEnabled} + backgroundColor={disabled ? COLORS.grey35 : COLORS.blue35} disabled={disabled} > {title} @@ -110,7 +110,7 @@ export function CardButton(props: CardButtonProps): JSX.Element { {description} diff --git a/app/src/molecules/CollapsibleSection/index.tsx b/app/src/molecules/CollapsibleSection/index.tsx index cec85f2e734..9210e81127d 100644 --- a/app/src/molecules/CollapsibleSection/index.tsx +++ b/app/src/molecules/CollapsibleSection/index.tsx @@ -16,10 +16,10 @@ import { StyledText } from '../../atoms/text' const ACCORDION_STYLE = css` border-radius: 50%; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } ` diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx index 17ebc46a595..930269bc129 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: ${COLORS.darkGreyEnabled}; + 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: ${COLORS.darkBlack70}; + 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 54e4e5ebb13..9bf300398e8 100644 --- a/app/src/molecules/InProgressModal/InProgressModal.tsx +++ b/app/src/molecules/InProgressModal/InProgressModal.tsx @@ -49,10 +49,10 @@ const MODAL_STYLE = css` } ` const SPINNER_STYLE = css` - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; opacity: 100%; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; opacity: 70%; } ` diff --git a/app/src/molecules/InfoMessage/index.tsx b/app/src/molecules/InfoMessage/index.tsx index c85d33c179f..0d389915677 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 ( {title} diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx index 10ed74c8fa1..a978c74114d 100644 --- a/app/src/molecules/InstrumentCard/index.tsx +++ b/app/src/molecules/InstrumentCard/index.tsx @@ -61,7 +61,7 @@ export function InstrumentCard(props: InstrumentCardProps): JSX.Element { return ( diff --git a/app/src/molecules/JogControls/ControlContainer.tsx b/app/src/molecules/JogControls/ControlContainer.tsx index daa0bc0a7af..3e60a319f86 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: ${COLORS.fundamentalsBackground}; + 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 720cc11323c..86fb7c09d8c 100644 --- a/app/src/molecules/JogControls/DirectionControl.tsx +++ b/app/src/molecules/JogControls/DirectionControl.tsx @@ -174,7 +174,7 @@ const DEFAULT_BUTTON_STYLE = css` justify-content: ${JUSTIFY_FLEX_START}; align-items: ${ALIGN_CENTER}; background-color: ${COLORS.white}; - color: ${COLORS.black}; + color: ${COLORS.black90}; grid-gap: ${SPACING.spacing8}; padding: ${SPACING.spacing8}; @@ -184,31 +184,31 @@ const DEFAULT_BUTTON_STYLE = css` &:hover { background-color: ${COLORS.white}; - color: ${COLORS.black}; + color: ${COLORS.black90}; box-shadow: 0 0 0; - border: 1px ${COLORS.lightGreyHover} solid; + border: 1px ${COLORS.grey30} solid; } &:active { background-color: ${COLORS.white}; - color: ${COLORS.blueEnabled}; - border: 1px ${COLORS.blueEnabled} solid; + color: ${COLORS.blue50}; + border: 1px ${COLORS.blue50} solid; } &:disabled { background-color: ${COLORS.white}; - color: ${COLORS.errorDisabled}; + color: ${COLORS.grey40}; } ` const ACTIVE_BUTTON_STYLE = css` ${DEFAULT_BUTTON_STYLE} - color: ${COLORS.blueEnabled}; - border: 1px ${COLORS.blueEnabled} solid; + color: ${COLORS.blue50}; + border: 1px ${COLORS.blue50} solid; &:hover { - color: ${COLORS.bluePressed}; - border: 1px ${COLORS.bluePressed} solid; + color: ${COLORS.blue60}; + border: 1px ${COLORS.blue60} solid; } ` @@ -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: ${COLORS.darkGreyEnabled}; + 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: ${COLORS.darkGreyHover}; + color: ${COLORS.grey60}; box-shadow: 0 0 0; - border: 1px ${COLORS.lightGreyHover} solid; + border: 1px ${COLORS.grey30} solid; } &:active { background-color: ${COLORS.white}; - color: ${COLORS.darkGreyPressed}; - border: 1px ${COLORS.lightGreyHover} 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: ${COLORS.darkGreyDisabled}; + 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: ${COLORS.light1}; - color: ${COLORS.darkBlackEnabled}; + background-color: ${COLORS.grey35}; + color: ${COLORS.black90}; border-radius: ${BORDERS.borderRadiusSize4}; &:hover { - background-color: ${COLORS.light1Pressed}; - color: ${COLORS.darkBlackHover}; + background-color: ${COLORS.grey40}; + color: ${COLORS.black80}; border: 1px ${COLORS.transparent} solid; } &:active { - background-color: ${COLORS.light1Pressed}; - color: ${COLORS.darkGreyPressed}; + background-color: ${COLORS.grey40}; + color: ${COLORS.grey60}; } &:focus { - background-color: ${COLORS.light1Pressed}; + background-color: ${COLORS.grey40}; } &:disabled { - background-color: ${COLORS.darkBlack20}; - color: ${COLORS.darkBlack40}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; border: 1px ${COLORS.transparent} solid; } } @@ -457,7 +457,7 @@ export function TouchDirectionControl( {CONTROLS_CONTENTS_BY_PLANE[plane].title} diff --git a/app/src/molecules/JogControls/StepSizeControl.tsx b/app/src/molecules/JogControls/StepSizeControl.tsx index 09db9e8215c..a4c2e48e5be 100644 --- a/app/src/molecules/JogControls/StepSizeControl.tsx +++ b/app/src/molecules/JogControls/StepSizeControl.tsx @@ -50,7 +50,7 @@ const DEFAULT_BUTTON_STYLE = css` background-color: ${COLORS.white}; border: 1px ${COLORS.white} solid; height: 3.62rem; - color: ${COLORS.black}; + color: ${COLORS.black90}; &:focus { background-color: ${COLORS.white}; @@ -58,30 +58,30 @@ const DEFAULT_BUTTON_STYLE = css` &:hover { background-color: ${COLORS.white}; - color: ${COLORS.black}; + color: ${COLORS.black90}; box-shadow: 0 0 0; - border: 1px ${COLORS.lightGreyHover} solid; + border: 1px ${COLORS.grey30} solid; } &:active { background-color: ${COLORS.white}; - color: ${COLORS.blueEnabled}; - border: 1px ${COLORS.blueEnabled} solid; + color: ${COLORS.blue50}; + border: 1px ${COLORS.blue50} solid; } &:disabled { background-color: inherit; - color: ${COLORS.errorDisabled}; + color: ${COLORS.grey40}; } ` const ACTIVE_BUTTON_STYLE = css` ${DEFAULT_BUTTON_STYLE} - color: ${COLORS.blueEnabled}; - border: 1px ${COLORS.blueEnabled} solid; + color: ${COLORS.blue50}; + border: 1px ${COLORS.blue50} solid; &:hover { - color: ${COLORS.blueHover}; - border: 1px ${COLORS.blueHover} solid; + color: ${COLORS.blue55}; + border: 1px ${COLORS.blue55} solid; } ` interface StepSizeControlProps { @@ -132,10 +132,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element { {t('jump_size')} - + {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 { {t(stepSizeTranslationKeyByStep[stepSize])} {`${stepSize} mm`} diff --git a/app/src/molecules/JogControls/TouchControlButton.tsx b/app/src/molecules/JogControls/TouchControlButton.tsx index c1490726c5a..10422172381 100644 --- a/app/src/molecules/JogControls/TouchControlButton.tsx +++ b/app/src/molecules/JogControls/TouchControlButton.tsx @@ -5,7 +5,7 @@ import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants' export const TouchControlButton = styled.button<{ selected: boolean }>` background-color: ${({ selected }) => - selected ? COLORS.blueEnabled : COLORS.mediumBlueEnabled}; + selected ? COLORS.blue50 : COLORS.blue35}; cursor: default; border-radius: ${BORDERS.borderRadiusSize4}; box-shadow: none; @@ -13,23 +13,23 @@ export const TouchControlButton = styled.button<{ selected: boolean }>` &:focus { background-color: ${({ selected }) => - selected ? COLORS.bluePressed : COLORS.mediumBluePressed}; + selected ? COLORS.blue60 : COLORS.blue40}; box-shadow: none; } &:hover { border: none; box-shadow: none; background-color: ${({ selected }) => - selected ? COLORS.blueEnabled : COLORS.mediumBlueEnabled}; + selected ? COLORS.blue50 : COLORS.blue35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; background-color: ${({ selected }) => - selected ? COLORS.blueEnabled : COLORS.mediumBlueEnabled}; + selected ? COLORS.blue50 : COLORS.blue35}; } &:active { background-color: ${({ selected }) => - selected ? COLORS.bluePressed : COLORS.mediumBluePressed}; + selected ? COLORS.blue60 : COLORS.blue40}; } ` diff --git a/app/src/molecules/LegacyModal/LegacyModal.stories.tsx b/app/src/molecules/LegacyModal/LegacyModal.stories.tsx index b10c032e852..8f63710c94b 100644 --- a/app/src/molecules/LegacyModal/LegacyModal.stories.tsx +++ b/app/src/molecules/LegacyModal/LegacyModal.stories.tsx @@ -26,7 +26,7 @@ const Children = ( diff --git a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx index b1ef7f5d680..7269d33ed6e 100644 --- a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx +++ b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx @@ -33,11 +33,11 @@ const closeIconStyles = css` width: 1.625rem; height: 1.625rem; &:hover { - background-color: ${COLORS.lightGreyHover}; + background-color: ${COLORS.grey30}; } &:active { - background-color: ${COLORS.lightGreyPressed}; + background-color: ${COLORS.grey35}; } ` diff --git a/app/src/molecules/LegacyModal/LegacyModalShell.tsx b/app/src/molecules/LegacyModal/LegacyModalShell.tsx index ae14f8dcc82..715817814e9 100644 --- a/app/src/molecules/LegacyModal/LegacyModalShell.tsx +++ b/app/src/molecules/LegacyModal/LegacyModalShell.tsx @@ -82,11 +82,11 @@ const Overlay = styled.div` top: 0; bottom: 0; z-index: 1; - background-color: ${COLORS.backgroundOverlay}; + background-color: ${COLORS.black90}${COLORS.opacity40HexCode}; cursor: default; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - background-color: ${COLORS.darkBlack60}; + background-color: ${COLORS.grey50}; } ` const ContentArea = styled.div<{ zIndex: string | number }>` diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx index aea194c8c5c..c7808ec38fc 100644 --- a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx +++ b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx @@ -33,7 +33,7 @@ describe('LegacyModal', () => { const [{ getByTestId }] = render(props) const headerIcon = getByTestId('Modal_header_icon') expect(headerIcon).toBeInTheDocument() - expect(headerIcon).toHaveStyle(`color: ${COLORS.warningEnabled}`) + expect(headerIcon).toHaveStyle(`color: ${COLORS.yellow50}`) expect(getByTestId('Modal_header')).toHaveStyle( `background-color: ${COLORS.white}` ) @@ -44,7 +44,7 @@ describe('LegacyModal', () => { const [{ getByTestId }] = render(props) const headerIcon = getByTestId('Modal_header_icon') expect(headerIcon).toBeInTheDocument() - expect(headerIcon).toHaveStyle(`color: ${COLORS.errorEnabled}`) + expect(headerIcon).toHaveStyle(`color: ${COLORS.red50}`) expect(getByTestId('Modal_header')).toHaveStyle( `background-color: ${COLORS.white}` ) diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx index cfdcd9b28ab..81fdd5b8351 100644 --- a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx +++ b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx @@ -26,27 +26,27 @@ describe('LegacyModalHeader', () => { onClose: mockClose, title: 'mock modal header title', backgroundColor: COLORS.white, - color: COLORS.darkBlackEnabled, + color: COLORS.black90, } }) it('should render text and close icon', () => { render(props) const title = screen.getByText('mock modal header title') - expect(title).toHaveStyle(`color: ${COLORS.darkBlackEnabled}`) + expect(title).toHaveStyle(`color: ${COLORS.black90}`) screen.getByTestId('ModalHeader_icon_close_mock modal header title') }) it('should render text, icon, and close icon', () => { props.icon = { name: 'ot-alert', - color: COLORS.darkBlackEnabled, + color: COLORS.black90, size: '1.25rem', marginRight: SPACING.spacing8, } render(props) expect(screen.getByTestId('Modal_header_icon')).toHaveStyle( - `color: ${COLORS.darkBlackEnabled}` + `color: ${COLORS.black90}` ) expect(screen.getByTestId('Modal_header_icon')).toHaveStyle( `width: 1.25rem` @@ -70,20 +70,12 @@ describe('LegacyModalHeader', () => { expect(closeIcon).toHaveStyle(`justify-content: ${JUSTIFY_CENTER}`) expect(closeIcon).toHaveStyle(`align-items: ${ALIGN_CENTER}`) expect(closeIcon).toHaveStyle('border-radius: 0.875rem') - expect(closeIcon).toHaveStyleRule( - 'background-color', - COLORS.lightGreyHover, - { - modifier: ':hover', - } - ) - expect(closeIcon).toHaveStyleRule( - 'background-color', - COLORS.lightGreyPressed, - { - modifier: ':active', - } - ) + expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey30, { + modifier: ':hover', + }) + expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey35, { + modifier: ':active', + }) fireEvent.click(closeIcon) expect(mockClose).toHaveBeenCalled() }) diff --git a/app/src/molecules/LegacyModal/index.tsx b/app/src/molecules/LegacyModal/index.tsx index 3a49ced1e0d..189abd4b700 100644 --- a/app/src/molecules/LegacyModal/index.tsx +++ b/app/src/molecules/LegacyModal/index.tsx @@ -35,10 +35,10 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => { let iconColor: string = '' switch (type) { case 'warning': - iconColor = COLORS.warningEnabled + iconColor = COLORS.yellow50 break case 'error': - iconColor = COLORS.errorEnabled + iconColor = COLORS.red50 break } return iconColor @@ -56,7 +56,7 @@ export const LegacyModal = (props: LegacyModalProps): JSX.Element => { onClose={onClose} title={title} icon={['error', 'warning'].includes(type) ? modalIcon : undefined} - color={COLORS.darkBlackEnabled} + color={COLORS.black90} backgroundColor={COLORS.white} /> ) diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx index 0defbd4cc7e..001cd249ee7 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(COLORS.medGreyEnabled)}` - ) + expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.grey30)}`) expect(miniCard).toHaveStyle( `border-radius: ${String(BORDERS.radiusSoftCorners)}` ) @@ -44,12 +42,8 @@ describe('MiniCard', () => { props.isSelected = true const { getByText } = render(props) const miniCard = getByText('mock mini card') - expect(miniCard).toHaveStyle( - `background-color: ${String(COLORS.lightBlue)}` - ) - expect(miniCard).toHaveStyle( - `border: 1px solid ${String(COLORS.blueEnabled)}` - ) + expect(miniCard).toHaveStyle(`background-color: ${String(COLORS.blue10)}`) + expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.blue50)}`) expect(miniCard).toHaveStyle( `border-radius: ${String(BORDERS.radiusSoftCorners)}` ) @@ -58,14 +52,14 @@ describe('MiniCard', () => { expect(miniCard).toHaveStyle(`cursor: pointer`) expect(miniCard).toHaveStyleRule( 'border', - `1px solid ${String(COLORS.blueEnabled)}`, + `1px solid ${String(COLORS.blue50)}`, { modifier: ':hover', } ) expect(miniCard).toHaveStyleRule( 'background-color', - `${String(COLORS.lightBlue)}`, + `${String(COLORS.blue10)}`, { modifier: ':hover', } @@ -77,12 +71,8 @@ describe('MiniCard', () => { props.isSelected = true const { getByText } = render(props) const miniCard = getByText('mock mini card') - expect(miniCard).toHaveStyle( - `background-color: ${String(COLORS.errorBackgroundLight)}` - ) - expect(miniCard).toHaveStyle( - `border: 1px solid ${String(COLORS.errorEnabled)}` - ) + expect(miniCard).toHaveStyle(`background-color: ${String(COLORS.red20)}`) + expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.red50)}`) expect(miniCard).toHaveStyle( `border-radius: ${String(BORDERS.radiusSoftCorners)}` ) @@ -91,14 +81,14 @@ describe('MiniCard', () => { expect(miniCard).toHaveStyle(`cursor: pointer`) expect(miniCard).toHaveStyleRule( 'border', - `1px solid ${String(COLORS.errorEnabled)}`, + `1px solid ${String(COLORS.red50)}`, { modifier: ':hover', } ) expect(miniCard).toHaveStyleRule( 'background-color', - `${String(COLORS.errorBackgroundLight)}`, + `${String(COLORS.red20)}`, { modifier: ':hover', } diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx index e2fb7777dd1..c006e9f5009 100644 --- a/app/src/molecules/MiniCard/index.tsx +++ b/app/src/molecules/MiniCard/index.tsx @@ -12,35 +12,35 @@ interface MiniCardProps extends StyleProps { } const unselectedOptionStyles = css` background-color: ${COLORS.white}; - border: 1px solid ${COLORS.medGreyEnabled}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing8}; width: 100%; cursor: pointer; &:hover { - border: 1px solid ${COLORS.medGreyHover}; + border: 1px solid ${COLORS.grey60}; } ` const selectedOptionStyles = css` ${unselectedOptionStyles} - border: 1px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.lightBlue}; + border: 1px solid ${COLORS.blue50}; + background-color: ${COLORS.blue10}; &:hover { - border: 1px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.lightBlue}; + border: 1px solid ${COLORS.blue50}; + background-color: ${COLORS.blue10}; } ` const errorOptionStyles = css` ${selectedOptionStyles} - border: 1px solid ${COLORS.errorEnabled}; - background-color: ${COLORS.errorBackgroundLight}; + border: 1px solid ${COLORS.red50}; + background-color: ${COLORS.red20}; &:hover { - border: 1px solid ${COLORS.errorEnabled}; - background-color: ${COLORS.errorBackgroundLight}; + border: 1px solid ${COLORS.red50}; + background-color: ${COLORS.red20}; } ` diff --git a/app/src/molecules/Modal/Modal.stories.tsx b/app/src/molecules/Modal/Modal.stories.tsx index 5295090666f..7060d710fdb 100644 --- a/app/src/molecules/Modal/Modal.stories.tsx +++ b/app/src/molecules/Modal/Modal.stories.tsx @@ -26,7 +26,7 @@ Default.args = { title: 'Header', hasExitIcon: true, iconName: 'information', - iconColor: COLORS.black, + iconColor: COLORS.black90, }, children: ( { ...props, hasExitIcon: true, iconName: 'information', - iconColor: COLORS.black, + iconColor: COLORS.black90, onClick: jest.fn(), } render(props) expect(screen.getByLabelText('icon_information')).toHaveStyle( - `color: ${COLORS.black}` + `color: ${COLORS.black90}` ) fireEvent.click(screen.getByLabelText('closeIcon')) expect(props.onClick).toHaveBeenCalled() diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx index 8c7dd92763b..4e40740ef88 100644 --- a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx +++ b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx @@ -55,18 +55,14 @@ describe('ModuleIcon', () => { it('renders SharedIcon with correct style', () => { const { getByTestId } = render(props) const module = getByTestId('ModuleIcon_ot-temperature-v2') - expect(module).toHaveStyle(`color: ${String(COLORS.darkGreyEnabled)}`) + 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}`) expect(module).toHaveStyle(`margin-right: ${SPACING.spacing2}`) - expect(module).toHaveStyleRule( - 'color', - `${String(COLORS.darkBlackEnabled)}`, - { - modifier: ':hover', - } - ) + expect(module).toHaveStyleRule('color', `${String(COLORS.black90)}`, { + modifier: ':hover', + }) }) it('renders magnetic module icon', () => { diff --git a/app/src/molecules/ModuleIcon/index.tsx b/app/src/molecules/ModuleIcon/index.tsx index eb6de984104..f2deda2aa65 100644 --- a/app/src/molecules/ModuleIcon/index.tsx +++ b/app/src/molecules/ModuleIcon/index.tsx @@ -14,7 +14,7 @@ import type { AttachedModule } from '../../redux/modules/types' const MODULE_ICON_STYLE = css` &:hover { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; } ` interface ModuleIconProps { @@ -33,7 +33,7 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element { moduleType={module.moduleType} size={SPACING.spacing16} marginX={SPACING.spacing2} - color={COLORS.darkGreyEnabled} + 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 9fad7a4f89e..45610e0b514 100644 --- a/app/src/molecules/NavTab/__tests__/NavTab.test.tsx +++ b/app/src/molecules/NavTab/__tests__/NavTab.test.tsx @@ -44,12 +44,10 @@ describe('NavTab', () => { expect(tab).toHaveStyle( `font-weight: ${String(TYPOGRAPHY.fontWeightSemiBold)}` ) - expect(tab).toHaveStyle(`color: ${String(COLORS.darkGreyEnabled)}`) + 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.blueEnabled)}` - ) + expect(tab).toHaveStyle(`color: ${String(COLORS.black90)}`) + expect(tab).toHaveStyle(`border-bottom-color: ${String(COLORS.blue50)}`) expect(tab).toHaveStyle(`border-bottom-width: 2px`) expect(tab).toHaveStyle( `border-bottom-style: ${String(BORDERS.styleSolid)}` @@ -68,7 +66,7 @@ describe('NavTab', () => { expect(tab).toHaveStyle( `font-weight: ${String(TYPOGRAPHY.fontWeightSemiBold)}` ) - expect(tab).toHaveStyle(`color: ${String(COLORS.errorDisabled)}`) + expect(tab).toHaveStyle(`color: ${String(COLORS.grey40)}`) }) it('renders navtab when pass to / as to', () => { diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx index 4508165ea1c..75dea82b9c1 100644 --- a/app/src/molecules/NavTab/index.tsx +++ b/app/src/molecules/NavTab/index.tsx @@ -13,17 +13,17 @@ interface NavTabProps { const StyledNavLink = styled(NavLink)>` padding: 0 ${SPACING.spacing4} ${SPACING.spacing8}; ${TYPOGRAPHY.labelSemiBold} - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &.active { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; ${BORDERS.tabBorder} } ` const DisabledNavLink = styled.span` padding: 0 ${SPACING.spacing4} ${SPACING.spacing8}; ${TYPOGRAPHY.labelSemiBold} - color: ${COLORS.errorDisabled}; + color: ${COLORS.grey40}; ` export function NavTab({ diff --git a/app/src/molecules/ODDBackButton/index.tsx b/app/src/molecules/ODDBackButton/index.tsx index 2ae66c94768..f3c81ea9232 100644 --- a/app/src/molecules/ODDBackButton/index.tsx +++ b/app/src/molecules/ODDBackButton/index.tsx @@ -21,7 +21,7 @@ export function ODDBackButton( > = args => ( export const AlertIcon = Template.bind({}) AlertIcon.args = { - iconColor: COLORS.errorEnabled, + iconColor: COLORS.red50, header: 'Pipette still detected', subHeader: 'Are you sure you want to exit before detaching your pipette?', isSuccess: false, @@ -43,7 +43,7 @@ AlertIcon.args = { export const SuccessIcon = Template.bind({}) SuccessIcon.args = { - iconColor: COLORS.successEnabled, + iconColor: COLORS.green50, header: 'Pipette still detected', subHeader: 'Are you sure you want to exit before detaching your pipette?', isSuccess: true, diff --git a/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx b/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx index 27f0bef3357..8c59bdb69e6 100644 --- a/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx +++ b/app/src/molecules/SimpleWizardBody/__tests__/SimpleWizardBody.test.tsx @@ -19,7 +19,7 @@ describe('SimpleWizardBody', () => { let props: React.ComponentProps beforeEach(() => { props = { - iconColor: COLORS.errorText, + iconColor: COLORS.red60, children:
children
, header: 'header', subHeader: 'subheader', diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx index 6e2f349df11..ce94a6cdad3 100644 --- a/app/src/molecules/ToggleGroup/useToggleGroup.tsx +++ b/app/src/molecules/ToggleGroup/useToggleGroup.tsx @@ -29,19 +29,19 @@ const BUTTON_GROUP_STYLES = css` } &:hover { - background-color: ${COLORS.fundamentalsBackground}; - color: ${COLORS.black}; + background-color: ${COLORS.grey10}; + color: ${COLORS.black90}; box-shadow: 0 0 0; } &.active { - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; color: ${COLORS.white}; } &:disabled { background-color: inherit; - color: ${COLORS.errorDisabled}; + color: ${COLORS.grey40}; } } @@ -59,7 +59,7 @@ const BUTTON_GROUP_STYLES = css` const ACTIVE_STYLE = css` padding-left: ${SPACING.spacing8}; padding-right: ${SPACING.spacing8}; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; color: ${COLORS.white}; pointer-events: none; ` @@ -68,8 +68,8 @@ const DEFAULT_STYLE = css` padding-left: ${SPACING.spacing8}; padding-right: ${SPACING.spacing8}; background-color: ${COLORS.white}; - color: ${COLORS.black}; - border: 1px ${COLORS.medGreyEnabled} solid; + color: ${COLORS.black90}; + 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 d3fe7571d93..9ec42074186 100644 --- a/app/src/molecules/UploadInput/index.tsx +++ b/app/src/molecules/UploadInput/index.tsx @@ -23,20 +23,20 @@ const StyledLabel = styled.label` align-items: ${ALIGN_CENTER}; width: 100%; padding: ${SPACING.spacing32}; - border: 2px dashed ${COLORS.medGreyEnabled}; + border: 2px dashed ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; text-align: center; background-color: ${COLORS.white}; &:hover, &:focus-within { - background-color: ${COLORS.lightBlue}; - border: 2px dashed ${COLORS.blueEnabled}; + background-color: ${COLORS.blue10}; + border: 2px dashed ${COLORS.blue50}; } ` const DRAG_OVER_STYLES = css` - background-color: ${COLORS.lightBlue}; - border: 2px dashed ${COLORS.blueEnabled}; + background-color: ${COLORS.blue10}; + border: 2px dashed ${COLORS.blue50}; ` const StyledInput = styled.input` @@ -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 146b3c85932..a4d48e2db5c 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: ${COLORS.darkGreyEnabled}; + 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 8d7bdac460c..744f9312581 100644 --- a/app/src/molecules/WizardRequiredEquipmentList/index.tsx +++ b/app/src/molecules/WizardRequiredEquipmentList/index.tsx @@ -71,7 +71,7 @@ export function WizardRequiredEquipmentList( {/* do not show divider after the last equipment in the list */} {index + 1 === Object.keys(equipmentList).length ? null : ( )} @@ -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/AddCustomLabwareSlideout/index.tsx b/app/src/organisms/AddCustomLabwareSlideout/index.tsx index da7f363c175..43778af840b 100644 --- a/app/src/organisms/AddCustomLabwareSlideout/index.tsx +++ b/app/src/organisms/AddCustomLabwareSlideout/index.tsx @@ -65,7 +65,7 @@ export function AddCustomLabwareSlideout( components={{ a: ( dispatch(addCustomLabware())} role="button" /> diff --git a/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx b/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx index dd49d17f28a..671150cba2c 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 5abfd633962..105eb188c94 100644 --- a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx +++ b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx @@ -34,16 +34,16 @@ const StyledInput = styled.input` margin: ${SPACING.spacing4} 0; background-color: ${COLORS.white}; border-radius: ${SPACING.spacing4}; - border: 1px ${BORDERS.styleSolid} ${COLORS.medGreyEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; height: ${SIZE_2}; font-size: ${TYPOGRAPHY.fontSizeP}; &:active { - border: 1px ${BORDERS.styleSolid} ${COLORS.darkGreyEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey50}; } &:hover { - border: 1px ${BORDERS.styleSolid} ${COLORS.blueEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; } &:focus-visible { @@ -51,7 +51,7 @@ const StyledInput = styled.input` } &:disabled { - border: 1px ${BORDERS.styleSolid} ${COLORS.darkGreyDisabled}; + 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(COLORS.medGreyEnabled)}` + inputForm.style.border = `1px solid ${String(COLORS.grey30)}` addManualIpAndHostname(ip) resetForm() setMostRecentAddition(ip) @@ -92,7 +92,7 @@ export function ManualIpHostnameForm({ errors.ip = t('add_ip_error') const inputForm = document.getElementById('ip') if (inputForm != null) - inputForm.style.border = `1px solid ${String(COLORS.errorEnabled)}` + inputForm.style.border = `1px solid ${String(COLORS.red50)}` } return errors }, @@ -128,7 +128,7 @@ export function ManualIpHostnameForm({ {formik.errors.ip} diff --git a/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx b/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx index 2f5e2aba108..f5e8f00b77f 100644 --- a/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx +++ b/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx @@ -28,10 +28,10 @@ const CLOSE_ICON_STYLE = css` border-radius: 50%; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } ` interface IpHostnameItemProps { @@ -83,16 +83,14 @@ export function ManualIpHostnameItem({ {candidate} - + {t('calibration_on_opentrons_tips_is_important')} diff --git a/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx b/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx index 18a35bcc6c7..6a8c6531ed0 100644 --- a/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx +++ b/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx @@ -44,7 +44,7 @@ export function CompleteConfirmation( {visualAid != null ? ( visualAid ) : ( - + )} {t('flow_complete', { flowName })} diff --git a/app/src/organisms/CalibrationPanels/ConfirmExit.tsx b/app/src/organisms/CalibrationPanels/ConfirmExit.tsx index abff685f924..700cb8b826a 100644 --- a/app/src/organisms/CalibrationPanels/ConfirmExit.tsx +++ b/app/src/organisms/CalibrationPanels/ConfirmExit.tsx @@ -43,7 +43,7 @@ export function ConfirmExit(props: ConfirmExitProps): JSX.Element { {heading != null ? ( diff --git a/app/src/organisms/CalibrationPanels/LoadingState.tsx b/app/src/organisms/CalibrationPanels/LoadingState.tsx index 8f6ed2e913e..0bc24a1e9be 100644 --- a/app/src/organisms/CalibrationPanels/LoadingState.tsx +++ b/app/src/organisms/CalibrationPanels/LoadingState.tsx @@ -24,12 +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 cff91296dd4..01dac649b39 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 ( diff --git a/app/src/organisms/CalibrationTaskList/index.tsx b/app/src/organisms/CalibrationTaskList/index.tsx index fad79643dea..0bc71ec01d7 100644 --- a/app/src/organisms/CalibrationTaskList/index.tsx +++ b/app/src/organisms/CalibrationTaskList/index.tsx @@ -90,20 +90,20 @@ export function CalibrationTaskList({ }, [activeIndex, hasLaunchedWizard]) // start off assuming we are missing calibrations - let statusLabelBackgroundColor: string = COLORS.errorEnabled - let statusLabelIconColor: string = COLORS.errorEnabled + let statusLabelBackgroundColor: string = COLORS.red30 + let statusLabelIconColor: string = COLORS.red50 let statusLabelText = t('missing_calibration_data') // if the tasklist is empty, though, all calibrations are good if (taskListStatus === 'complete') { - statusLabelBackgroundColor = COLORS.successEnabled - statusLabelIconColor = COLORS.successEnabled + statusLabelBackgroundColor = COLORS.green30 + statusLabelIconColor = COLORS.green50 statusLabelText = t('calibration_complete') // if we have tasks and they are all marked bad, then we should // strongly suggest they re-do those calibrations } else if (taskListStatus === 'bad') { - statusLabelBackgroundColor = COLORS.warningEnabled - statusLabelIconColor = COLORS.warningEnabled + statusLabelBackgroundColor = COLORS.yellow30 + statusLabelIconColor = COLORS.yellow50 statusLabelText = t('calibration_recommended') } @@ -114,7 +114,7 @@ export function CalibrationTaskList({ history.push(`/devices/${robotName}/robot-settings/calibration`) } fullPage - backgroundColor={COLORS.fundamentalsBackground} + backgroundColor={COLORS.grey10} childrenPadding={`${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24} ${SPACING.spacing4}`} css={css` width: 50rem; @@ -133,9 +133,9 @@ export function CalibrationTaskList({ alignItems={ALIGN_CENTER} > {exitBeforeDeckConfigCompletion ? ( - + ) : ( - + )} {exitBeforeDeckConfigCompletion @@ -165,11 +165,9 @@ export function CalibrationTaskList({ diff --git a/app/src/organisms/ChangePipette/ConfirmPipette.tsx b/app/src/organisms/ChangePipette/ConfirmPipette.tsx index 0e6e46211a1..2b7b75da8da 100644 --- a/app/src/organisms/ChangePipette/ConfirmPipette.tsx +++ b/app/src/organisms/ChangePipette/ConfirmPipette.tsx @@ -125,8 +125,8 @@ export function ConfirmPipette(props: ConfirmPipetteProps): JSX.Element { diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/CalibrationResult.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/CalibrationResult.tsx index d22c452cfc3..f0bd59b1652 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/CalibrationResult.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/CalibrationResult.tsx @@ -16,7 +16,7 @@ import { StyledText } from '../../../atoms/text' import { RenderResult } from './RenderResult' export const RESULT_SUMMARY_STYLE = css` - border: 1px solid ${COLORS.medGreyEnabled}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; ` diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/RenderMountInformation.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/RenderMountInformation.tsx index 56f979d7af3..55473d04003 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/RenderMountInformation.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/RenderMountInformation.tsx @@ -32,7 +32,7 @@ export const RenderMountInformation = ({ {`${mount} MOUNT`} {pipette != null ? ( diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/RenderResult.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/RenderResult.tsx index 44e891c5ab9..b07545a25dd 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/RenderResult.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/RenderResult.tsx @@ -20,7 +20,7 @@ export const RenderResult = ({ isBadCal }: RenderResultProps): JSX.Element => { return ( {isBadCal ? t('recalibration_recommended') : t('good_calibration')} @@ -28,7 +28,7 @@ export const RenderResult = ({ isBadCal }: RenderResultProps): JSX.Element => { diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx index f2746a7c439..4e72d2fb78e 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/CalibrationHealthCheckResults.test.tsx @@ -23,12 +23,12 @@ describe('CalibrationHealthCheckResults', () => { const { getByText, getByTestId } = render(props) getByText('Calibration Health Check Results') const statusLabel = getByText('Calibration complete') - expect(statusLabel).toHaveStyle(`color: ${String(COLORS.darkBlackEnabled)}`) + expect(statusLabel).toHaveStyle(`color: ${String(COLORS.black90)}`) expect(statusLabel).toHaveStyle( `font-weight: ${String(TYPOGRAPHY.fontWeightSemiBold)}` ) expect(getByTestId('status_circle')).toHaveStyle( - `color: ${String(COLORS.successEnabled)}` + `color: ${String(COLORS.green50)}` ) expect(getByTestId('status_circle')).toHaveStyle(`height: 0.3125rem`) expect(getByTestId('status_circle')).toHaveStyle(`width: 0.3125rem`) @@ -39,7 +39,7 @@ describe('CalibrationHealthCheckResults', () => { const { getByText, getByTestId } = render(props) getByText('Calibration recommended') expect(getByTestId('status_circle')).toHaveStyle( - `color: ${String(COLORS.warningEnabled)}` + `color: ${String(COLORS.yellow50)}` ) }) }) diff --git a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx index 36b8e3ff04c..c2f463b5c6d 100644 --- a/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx +++ b/app/src/organisms/CheckCalibration/ResultsSummary/__tests__/RenderResult.test.tsx @@ -23,7 +23,7 @@ describe('RenderResult', () => { const { getByText, getByTestId } = render(props) getByText('Good calibration') const icon = getByTestId('RenderResult_icon') - expect(icon).toHaveStyle(`color: ${String(COLORS.successEnabled)}`) + expect(icon).toHaveStyle(`color: ${String(COLORS.green50)}`) expect(icon).toHaveStyle(`height: ${String(SIZE_1)}`) expect(icon).toHaveStyle(`width: ${String(SIZE_1)}`) }) @@ -33,7 +33,7 @@ describe('RenderResult', () => { const { getByText, getByTestId } = render(props) getByText('Recalibration recommended') const icon = getByTestId('RenderResult_icon') - expect(icon).toHaveStyle(`color: ${String(COLORS.warningEnabled)}`) + expect(icon).toHaveStyle(`color: ${String(COLORS.yellow50)}`) expect(icon).toHaveStyle(`height: ${String(SIZE_1)}`) expect(icon).toHaveStyle(`width: ${String(SIZE_1)}`) }) diff --git a/app/src/organisms/ChildNavigation/index.tsx b/app/src/organisms/ChildNavigation/index.tsx index 09dcd3b2fa9..e50a4e8bbe7 100644 --- a/app/src/organisms/ChildNavigation/index.tsx +++ b/app/src/organisms/ChildNavigation/index.tsx @@ -68,7 +68,7 @@ export function ChildNavigation({ onClick={onClickBack} data-testid="ChildNavigation_Back_Button" > - + {header} @@ -108,7 +108,7 @@ const IconButton = styled('button')` &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${COLORS.darkBlack20}; + 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 db6a00c9345..4a4eb48b430 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -243,7 +243,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { ) : null} @@ -252,7 +252,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { {runCreationError != null && isSelected ? ( - + - + ) : null} @@ -152,11 +148,11 @@ export function AvailableRobotOption( {isSelectedRobotOnDifferentSoftwareVersion && isSelected ? ( a { - color: ${COLORS.errorText}; + color: ${COLORS.red60}; text-decoration: ${TYPOGRAPHY.textDecorationUnderline}; } `} diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx index 763730ec8c1..95ba9fc3148 100644 --- a/app/src/organisms/ChooseRobotSlideout/index.tsx +++ b/app/src/organisms/ChooseRobotSlideout/index.tsx @@ -184,7 +184,7 @@ export function ChooseRobotSlideout( {t('app_settings:searching')} @@ -193,7 +193,7 @@ export function ChooseRobotSlideout( name="ot-spinner" spin size="1.25rem" - color={COLORS.darkGreyEnabled} + color={COLORS.grey50} /> ) : ( @@ -212,7 +212,7 @@ export function ChooseRobotSlideout( css={css` ${BORDERS.cardOutlineBorder} &:hover { - border-color: ${COLORS.medGreyEnabled}; + border-color: ${COLORS.grey30}; } `} flexDirection={DIRECTION_COLUMN} @@ -251,7 +251,7 @@ export function ChooseRobotSlideout( {runCreationError != null && isSelected && ( - + {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 8ffb8c4e5b2..3b80b1dc57f 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={COLORS.medGreyEnabled} + backgroundColor={COLORS.grey30} borderRadius={BORDERS.borderRadiusSize1} > @@ -251,39 +251,39 @@ export function AddFixtureModal({ } const FIXTURE_BUTTON_STYLE = css` - background-color: ${COLORS.light1}; + background-color: ${COLORS.grey35}; cursor: default; border-radius: ${BORDERS.borderRadiusSize3}; box-shadow: none; &:focus { - background-color: ${COLORS.light1Pressed}; + background-color: ${COLORS.grey40}; box-shadow: none; } &:hover { border: none; box-shadow: none; - background-color: ${COLORS.light1}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${COLORS.light1}; + background-color: ${COLORS.grey35}; } &:active { - background-color: ${COLORS.light1Pressed}; + background-color: ${COLORS.grey40}; } &:disabled { - background-color: ${COLORS.light1}; - color: ${COLORS.darkBlack60}; + background-color: ${COLORS.grey35}; + color: ${COLORS.grey50}; } ` const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx index a68690f1bdc..6decd45012f 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx @@ -36,7 +36,7 @@ export function DeckFixtureSetupInstructionsModal({ const modalHeader: ModalHeaderBaseProps = { title: t('deck_fixture_setup_instructions'), iconName: 'information', - iconColor: COLORS.darkBlack100, + iconColor: COLORS.black90, hasExitIcon: true, onClick: () => setShowSetupInstructionsModal(false), } diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx index 79736e1afa2..3c6de071a10 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 => ( {t('heater_shaker_is_shaking')} diff --git a/app/src/organisms/Devices/HeaterShakerWizard/HeaterShakerModuleCard.tsx b/app/src/organisms/Devices/HeaterShakerWizard/HeaterShakerModuleCard.tsx index ede66bcdfcb..43b7b40222f 100644 --- a/app/src/organisms/Devices/HeaterShakerWizard/HeaterShakerModuleCard.tsx +++ b/app/src/organisms/Devices/HeaterShakerWizard/HeaterShakerModuleCard.tsx @@ -30,7 +30,7 @@ export const HeaterShakerModuleCard = ( return ( {getModuleDisplayName(module.moduleModel)} diff --git a/app/src/organisms/Devices/HistoricalProtocolRun.tsx b/app/src/organisms/Devices/HistoricalProtocolRun.tsx index 2d86cce40df..25589cfec12 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRun.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRun.tsx @@ -68,7 +68,7 @@ export function HistoricalProtocolRun( padding={SPACING.spacing8} borderTop={BORDERS.lineBorder} backgroundColor={ - run.status === 'running' ? COLORS.lightBlue : COLORS.white + run.status === 'running' ? COLORS.blue10 : COLORS.white } width="100%" > @@ -129,7 +129,7 @@ export function HistoricalProtocolRun( {runStatus === 'running' && ( @@ -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 9c44ef4511f..e57e621c77a 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/InstrumentsAndModules.tsx b/app/src/organisms/Devices/InstrumentsAndModules.tsx index 25007ca3d87..6f07d2c489d 100644 --- a/app/src/organisms/Devices/InstrumentsAndModules.tsx +++ b/app/src/organisms/Devices/InstrumentsAndModules.tsx @@ -302,7 +302,7 @@ export function InstrumentsAndModules({ {/* TODO(bh, 2022-10-20): insert "offline" image when provided by illustrator */} {t('offline_instruments_and_modules')} diff --git a/app/src/organisms/Devices/ModuleInfo.tsx b/app/src/organisms/Devices/ModuleInfo.tsx index 2c84f16afff..49aefd3ab3f 100644 --- a/app/src/organisms/Devices/ModuleInfo.tsx +++ b/app/src/organisms/Devices/ModuleInfo.tsx @@ -76,14 +76,14 @@ 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 22291f7f903..f49c59eff97 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} + {label} diff --git a/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx b/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx index 3f8bd38d635..41fd2d81c55 100644 --- a/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx +++ b/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx @@ -47,7 +47,7 @@ const LabwareInfo = (props: LabwareInfoProps): JSX.Element | null => { return ( {displayName} @@ -412,7 +412,7 @@ export function ProtocolRunHeader({ {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 2734b4ee6e9..2d53aafb4bf 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')} )} @@ -370,17 +370,13 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null { @@ -78,7 +74,7 @@ export function SetupCalibrationItem({ {label != null && ( )} {title != null && ( - + {title} )} - + {calibrationDataNotAvailableText ?? subText ?? calibratedText} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx b/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx index 73d2d2c3ad6..099312f6b4a 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx @@ -47,7 +47,7 @@ export function SetupDeckCalibration({ justifyContent={JUSTIFY_SPACE_BETWEEN} > diff --git a/app/src/organisms/Devices/ProtocolRun/SetupInstrumentCalibration.tsx b/app/src/organisms/Devices/ProtocolRun/SetupInstrumentCalibration.tsx index f83fed73fe6..a55256627fc 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupInstrumentCalibration.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupInstrumentCalibration.tsx @@ -63,7 +63,7 @@ export function SetupInstrumentCalibration({ )} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx index 6abbbbc23a8..f7a1112fd04 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: ${COLORS.fundamentalsBackground}; + 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 b82c3d7b302..b83c47d70f8 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: ${COLORS.medGreyEnabled}; + border-color: ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing16}; ` @@ -161,10 +161,10 @@ export function LabwareListItem( extraAttentionText = ( setSecureLabwareModalType(moduleType)} @@ -190,7 +190,7 @@ export function LabwareListItem( case HEATERSHAKER_MODULE_TYPE: isHeaterShakerInProtocol = true 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 c78d3b0b154..bf638d5ee10 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: ${COLORS.fundamentalsBackground}; + 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 71d0e55f4a3..86615f0454b 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 30ead6fc1aa..efd1635f1be 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 ${COLORS.medGreyHover}; + border: 1px solid ${COLORS.grey60}; cursor: pointer; } ` const LIQUID_CARD_ODD_STYLE = css` - border-color: ${COLORS.medGreyEnabled}; - border: ${SPACING.spacing4} solid ${COLORS.medGreyEnabled}; + border-color: ${COLORS.grey30}; + border: ${SPACING.spacing4} solid ${COLORS.grey30}; border-radius: ${BORDERS.borderRadiusSize3}; ` interface LiquidDetailCardProps { @@ -66,8 +66,8 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { const { t } = useTranslation('protocol_setup') const ACTIVE_STYLE = css` - background-color: ${isOnDevice ? COLORS.medBlue : COLORS.lightBlue}; - border: ${isOnDevice ? SPACING.spacing4 : `1px`} solid ${COLORS.blueEnabled}; + background-color: ${isOnDevice ? COLORS.blue30 : COLORS.blue10}; + border: ${isOnDevice ? SPACING.spacing4 : `1px`} solid ${COLORS.blue50}; border-radius: ${isOnDevice ? BORDERS.borderRadiusSize3 : 0}; ` const volumePerWellRange = getWellRangeForLiquidLabwarePair( @@ -116,12 +116,12 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { {description != null ? description : null} {selectedValue === liquidId ? ( <> - + {well.wellName} {well.volume} {MICRO_LITERS} @@ -207,12 +207,12 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { > {displayName} - + {description != null ? description : null} @@ -193,14 +193,14 @@ export const LiquidsLabwareDetailsModal = ( {t('slot_number')} {slotName} @@ -212,14 +212,14 @@ export const LiquidsLabwareDetailsModal = ( {t('labware_name')} {labwareName} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx index 8538ec7ae10..c93e3727352 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: ${COLORS.medGreyEnabled}; + 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 ${COLORS.medGreyHover}; + border: 1px solid ${COLORS.grey60}; } ` 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 ? COLORS.fundamentalsBackground : COLORS.white} + backgroundColor={openItem ? COLORS.grey10 : COLORS.white} data-testid="LiquidsListItem_Row" > {moduleModel != null ? t('on_adapter_in_mod', { @@ -311,14 +311,14 @@ export const LiquidsListItemDetails = ( {description != null ? description : null} { getAllByText(nestedTextMatcher('100 µL')) getAllByText(nestedTextMatcher('total volume')) expect(getByLabelText('liquidBox_odd')).toHaveStyle( - `border: ${SPACING.spacing4} solid ${COLORS.medGreyEnabled}` + `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 be6b12b1d90..733653cc273 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx @@ -117,7 +117,7 @@ export const LocationConflictModal = ( hasExitIcon: true, onClick: onCloseClick, iconName: 'ot-alert', - iconColor: COLORS.warningEnabled, + iconColor: COLORS.yellow50, }} > @@ -150,7 +150,7 @@ export const LocationConflictModal = ( > - + {t('deck_conflict')} @@ -243,7 +243,7 @@ export const LocationConflictModal = ( > ) } else { statusLabel = ( ) } @@ -166,7 +166,7 @@ export function FixtureListItem({ ) : null} + {t('no_usb_connection_required')} ) @@ -319,9 +315,9 @@ export function ModulesListItem({ let renderModuleStatus: JSX.Element = ( ) @@ -351,9 +347,9 @@ export function ModulesListItem({ renderModuleStatus = ( ) } @@ -383,7 +379,7 @@ export function ModulesListItem({ ) : null} {description} @@ -105,7 +105,7 @@ export function SetupStep({ {rightElement} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibrationButton.tsx b/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibrationButton.tsx index 765456d9c5f..66a36bb8752 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibrationButton.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibrationButton.tsx @@ -89,7 +89,7 @@ export function SetupTipLengthCalibrationButton({ const recalibrateLink = disableRecalibrate ? ( <> diff --git a/app/src/organisms/Devices/RecentProtocolRuns.tsx b/app/src/organisms/Devices/RecentProtocolRuns.tsx index b2bbfafc71c..2d56966a9ac 100644 --- a/app/src/organisms/Devices/RecentProtocolRuns.tsx +++ b/app/src/organisms/Devices/RecentProtocolRuns.tsx @@ -146,7 +146,7 @@ export function RecentProtocolRuns({ {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 0b03bb8a43e..868d9e4ecbe 100644 --- a/app/src/organisms/Devices/RobotOverview.tsx +++ b/app/src/organisms/Devices/RobotOverview.tsx @@ -126,7 +126,7 @@ export function RobotOverview({ > {t('lights')} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx index 94b06376f56..16beaacf3f1 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx @@ -168,17 +168,17 @@ export function DeviceResetSlideout({ {t('resets_cannot_be_undone')} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx index 8d9ef166665..504f2eee46e 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx @@ -170,13 +170,13 @@ export function RenameRobotSlideout({ value={formik.values.newRobotName} error={formik.errors.newRobotName && ' '} /> - + {t('characters_max')} {formik.errors.newRobotName && ( {formik.errors.newRobotName} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx index c254407690d..d93d0dbc338 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 4ab2fa7d979..800185b6117 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 beb960ac507..756dbdde914 100644 --- a/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx +++ b/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx @@ -110,7 +110,7 @@ export function RobotSettingsNetworking({ @@ -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} @@ -195,7 +195,7 @@ export function RobotSettingsNetworking({ @@ -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')} @@ -287,7 +287,7 @@ export function RobotSettingsNetworking({ @@ -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 1c0333a508d..42c32964967 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: ${COLORS.medGreyEnabled}; + background: ${COLORS.grey30}; width: 17.12rem; ` const UPDATE_TEXT_STYLE = css` - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; font-size: 0.8rem; ` const HIDDEN_CSS = css` @@ -217,7 +217,7 @@ function SuccessOrError({ errorMessage }: SuccessOrErrorProps): JSX.Element { ) diff --git a/app/src/organisms/Devices/RobotStatusHeader.tsx b/app/src/organisms/Devices/RobotStatusHeader.tsx index e2223fc33c1..360af8448b5 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/Devices/hooks/__tests__/useAttachedPipettes.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx index c4fe96474cb..e94721a957e 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx @@ -3,13 +3,14 @@ import { when, resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' import { renderHook } from '@testing-library/react' import { usePipettesQuery } from '@opentrons/react-api-client' -import { getPipetteModelSpecs, PipetteModelSpecs } from '@opentrons/shared-data' +import { getPipetteModelSpecs } from '@opentrons/shared-data' import { useAttachedPipettes } from '../useAttachedPipettes' import { pipetteResponseFixtureLeft, pipetteResponseFixtureRight, } from '@opentrons/api-client' import type { FetchPipettesResponseBody } from '@opentrons/api-client' +import type { PipetteModelSpecs } from '@opentrons/shared-data' jest.mock('@opentrons/react-api-client') jest.mock('@opentrons/shared-data') diff --git a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx index c850e9c696c..d192a5a0945 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx @@ -27,7 +27,6 @@ import { import type { Protocol, Run } from '@opentrons/api-client' -jest.mock('@opentrons/shared-data') jest.mock('@opentrons/api-client') jest.mock('@opentrons/react-api-client') jest.mock('../../../../redux/protocol-storage/selectors') diff --git a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx index b5e2a6b00ca..aec456bd028 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 ${COLORS.medGreyEnabled}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; height: 12.5625rem; width: 14.5625rem; @@ -197,14 +197,14 @@ const UNSELECTED_OPTIONS_STYLE = css` grid-gap: ${SPACING.spacing8} &:hover { - border: 1px solid ${COLORS.medGreyHover}; + border: 1px solid ${COLORS.grey60}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { flex-direction: ${DIRECTION_ROW}; justify-content: ${JUSTIFY_FLEX_START}; - background-color: ${COLORS.mediumBlueEnabled}; - border-width: 0; + background-color: ${COLORS.blue35}; + border-width: 0; border-radius: ${BORDERS.borderRadiusSize4}; padding: ${SPACING.spacing24}; height: 5.25rem; @@ -217,20 +217,20 @@ const UNSELECTED_OPTIONS_STYLE = css` ` const SELECTED_OPTIONS_STYLE = css` ${UNSELECTED_OPTIONS_STYLE} - border: 1px solid ${COLORS.blueEnabled}; + border: 1px solid ${COLORS.blue50}; &:hover { - border: 1px solid ${COLORS.blueEnabled}; + border: 1px solid ${COLORS.blue50}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { border-width: 0px; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; color: ${COLORS.white}; &:hover { border-width: 0px; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; } } ` diff --git a/app/src/organisms/DropTipWizard/ChooseLocation.tsx b/app/src/organisms/DropTipWizard/ChooseLocation.tsx index d4919f803d4..566ce5d9040 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: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; diff --git a/app/src/organisms/DropTipWizard/ExitConfirmation.tsx b/app/src/organisms/DropTipWizard/ExitConfirmation.tsx index 42f1a6f2d7d..805457d876c 100644 --- a/app/src/organisms/DropTipWizard/ExitConfirmation.tsx +++ b/app/src/organisms/DropTipWizard/ExitConfirmation.tsx @@ -33,7 +33,7 @@ export function ExitConfirmation(props: ExitConfirmationProps): JSX.Element { return ( diff --git a/app/src/organisms/DropTipWizard/JogToPosition.tsx b/app/src/organisms/DropTipWizard/JogToPosition.tsx index a7814aff5d2..45f6628e934 100644 --- a/app/src/organisms/DropTipWizard/JogToPosition.tsx +++ b/app/src/organisms/DropTipWizard/JogToPosition.tsx @@ -71,7 +71,7 @@ const ConfirmPosition = (props: ConfirmPositionProps): JSX.Element | null => { @@ -108,7 +108,7 @@ const ConfirmPosition = (props: ConfirmPositionProps): JSX.Element | null => { } else { return ( { return ( diff --git a/app/src/organisms/DropTipWizard/TipsAttachedModal.tsx b/app/src/organisms/DropTipWizard/TipsAttachedModal.tsx index e23aa9eb80d..1d18ec1b02b 100644 --- a/app/src/organisms/DropTipWizard/TipsAttachedModal.tsx +++ b/app/src/organisms/DropTipWizard/TipsAttachedModal.tsx @@ -48,7 +48,7 @@ const TipsAttachedModal = NiceModal.create( const tipsAttachedHeader: ModalHeaderBaseProps = { title: t('tips_are_attached'), iconName: 'ot-alert', - iconColor: COLORS.yellow2, + iconColor: COLORS.yellow50, } const is96Channel = instrumentModelSpecs.channels === 96 diff --git a/app/src/organisms/DropTipWizard/index.tsx b/app/src/organisms/DropTipWizard/index.tsx index e2829b40a61..e063d264093 100644 --- a/app/src/organisms/DropTipWizard/index.tsx +++ b/app/src/organisms/DropTipWizard/index.tsx @@ -351,7 +351,7 @@ export const DropTipWizardComponent = ( modalContent = ( diff --git a/app/src/organisms/EmergencyStop/EstopMissingModal.tsx b/app/src/organisms/EmergencyStop/EstopMissingModal.tsx index 9b7d1c00977..cc86608899b 100644 --- a/app/src/organisms/EmergencyStop/EstopMissingModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopMissingModal.tsx @@ -69,7 +69,7 @@ function TouchscreenModal({ const modalHeader: ModalHeaderBaseProps = { title: t('estop_missing'), iconName: 'ot-alert', - iconColor: COLORS.red2, + iconColor: COLORS.red50, } const modalProps = { header: { ...modalHeader }, diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx index 4c573d4aa6a..4b1831a6661 100644 --- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx @@ -78,7 +78,7 @@ function TouchscreenModal({ const modalHeader: ModalHeaderBaseProps = { title: t('estop_pressed'), iconName: 'ot-alert', - iconColor: COLORS.red2, + iconColor: COLORS.red50, } const modalProps = { header: { ...modalHeader }, @@ -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 c0cfee1e3ca..e04ef1b4f9d 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: ${COLORS.medGreyEnabled}; + 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 1fb98a7901a..0dfe6b1e5f0 100644 --- a/app/src/organisms/FirmwareUpdateModal/index.tsx +++ b/app/src/organisms/FirmwareUpdateModal/index.tsx @@ -57,15 +57,15 @@ const MODAL_STYLE = css` ` const OUTER_STYLES = css` border-radius: ${BORDERS.borderRadiusSize4}; - background: ${COLORS.medGreyEnabled}; + background: ${COLORS.grey30}; width: 13.374rem; ` const SPINNER_STYLE = css` - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; opacity: 100%; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; opacity: 70%; } ` diff --git a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx index 17691324083..f184f68c274 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/BeforeBeginning.tsx b/app/src/organisms/GripperWizardFlows/BeforeBeginning.tsx index 60702fc724c..5ed2300c8d5 100644 --- a/app/src/organisms/GripperWizardFlows/BeforeBeginning.tsx +++ b/app/src/organisms/GripperWizardFlows/BeforeBeginning.tsx @@ -126,7 +126,7 @@ export const BeforeBeginning = ( return errorMessage != null ? ( diff --git a/app/src/organisms/GripperWizardFlows/ExitConfirmation.tsx b/app/src/organisms/GripperWizardFlows/ExitConfirmation.tsx index 7c2d08fae14..9439612e7fc 100644 --- a/app/src/organisms/GripperWizardFlows/ExitConfirmation.tsx +++ b/app/src/organisms/GripperWizardFlows/ExitConfirmation.tsx @@ -44,7 +44,7 @@ export function ExitConfirmation(props: ExitConfirmationProps): JSX.Element { return ( { return errorMessage != null ? ( diff --git a/app/src/organisms/InstrumentInfo/index.tsx b/app/src/organisms/InstrumentInfo/index.tsx index 386a0d492c4..b850c9bd341 100644 --- a/app/src/organisms/InstrumentInfo/index.tsx +++ b/app/src/organisms/InstrumentInfo/index.tsx @@ -185,7 +185,7 @@ function InfoItem(props: InfoItemProps): JSX.Element { return ( diff --git a/app/src/organisms/InstrumentMountItem/LabeledMount.tsx b/app/src/organisms/InstrumentMountItem/LabeledMount.tsx index b148e751cc7..b0ea51d29dc 100644 --- a/app/src/organisms/InstrumentMountItem/LabeledMount.tsx +++ b/app/src/organisms/InstrumentMountItem/LabeledMount.tsx @@ -25,10 +25,10 @@ const MountButton = styled.button<{ isAttached: boolean }>` padding: ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize3}; background-color: ${({ isAttached }) => - isAttached ? COLORS.green3 : COLORS.light1}; + isAttached ? COLORS.green35 : COLORS.grey35}; &:active { background-color: ${({ isAttached }) => - isAttached ? COLORS.green3Pressed : COLORS.light1Pressed}; + isAttached ? COLORS.green40 : COLORS.grey40}; } ` interface LabeledMountProps { @@ -69,7 +69,7 @@ export function LabeledMount(props: LabeledMountProps): JSX.Element { ` padding: ${SPACING.spacing16} ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize3}; background-color: ${({ isReady }) => - isReady ? COLORS.green3 : COLORS.yellow3}; + isReady ? COLORS.green35 : COLORS.yellow35}; &:active { background-color: ${({ isReady }) => - isReady ? COLORS.green3Pressed : COLORS.yellow3Pressed}; + isReady ? COLORS.green40 : COLORS.yellow40}; } ` interface ProtocolInstrumentMountItemProps { @@ -130,10 +130,10 @@ export function ProtocolInstrumentMountItem( {i18n.format( t(isAttachedWithCal ? 'calibrated' : 'no_data'), diff --git a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx index 36582eb2524..b158673e0ae 100644 --- a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx +++ b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx @@ -24,11 +24,11 @@ const INTERVENTION_COMMAND_STYLE = css` const INTERVENTION_COMMAND_NOTES_STYLE = css` ${TYPOGRAPHY.h6Default} - color: ${COLORS.errorDisabled}; + color: ${COLORS.grey40}; text-transform: ${TEXT_TRANSFORM_UPPERCASE}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { ${TYPOGRAPHY.smallBodyTextBold} - color: ${COLORS.darkBlack100}; + color: ${COLORS.black90}; text-transform: ${TEXT_TRANSFORM_CAPITALIZE}; } ` diff --git a/app/src/organisms/InterventionModal/LabwareDisabledOverlay.tsx b/app/src/organisms/InterventionModal/LabwareDisabledOverlay.tsx index c9a2ad6ef9d..f301571f4f5 100644 --- a/app/src/organisms/InterventionModal/LabwareDisabledOverlay.tsx +++ b/app/src/organisms/InterventionModal/LabwareDisabledOverlay.tsx @@ -30,7 +30,7 @@ export function LabwareDisabledOverlay({ definition.dimensions.yDimension / 2 - 22.25 }) rotate(90, 22.25, 22.25) scale(2)`} d="M3.79834 19.46C1.87784 17.5093 0.692857 14.8323 0.692857 11.8785C0.692857 5.90992 5.53138 1.0714 11.5 1.0714C17.4686 1.0714 22.3071 5.90992 22.3071 11.8785C22.3071 17.8472 17.4686 22.6857 11.5 22.6857C8.71384 22.6857 6.17393 21.6314 4.25749 19.8999L19.5123 4.64514L19.0627 4.19562L3.79834 19.46Z" - stroke={COLORS.errorEnabled} + stroke={COLORS.red50} strokeWidth="0.635714" fill="none" /> diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx index 958a296d657..65ac277402e 100644 --- a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx +++ b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx @@ -54,10 +54,10 @@ const LABWARE_DESCRIPTION_STYLE = css` flex-direction: ${DIRECTION_COLUMN}; grid-gap: ${SPACING.spacing8}; padding: ${SPACING.spacing16}; - background-color: ${COLORS.fundamentalsBackground}; + background-color: ${COLORS.grey10}; border-radius: ${BORDERS.radiusSoftCorners}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - background-color: ${COLORS.light1}; + background-color: ${COLORS.grey35}; border-radius: ${BORDERS.borderRadiusSize3}; } ` @@ -70,10 +70,10 @@ const LABWARE_NAME_TITLE_STYLE = css` ` const LABWARE_NAME_STYLE = css` - color: ${COLORS.errorDisabled}; + color: ${COLORS.grey40}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { ${TYPOGRAPHY.bodyTextBold} - color: ${COLORS.darkBlack100}; + color: ${COLORS.black90}; } ` @@ -192,7 +192,7 @@ export function MoveLabwareInterventionContent({ { expect(overlayBg).toHaveAttribute('width', '84') expect(overlayBg).toHaveAttribute('height', '42') - expect(overlayBg).toHaveAttribute('fill', '#ffffff') + expect(overlayBg).toHaveAttribute('fill', '#FFFFFF') expect(overlayBg).toHaveAttribute('fill-opacity', '0.9') - expect(overlayIcon).toHaveAttribute('stroke', '#bf0000') + expect(overlayIcon).toHaveAttribute('stroke', COLORS.red50) }) }) diff --git a/app/src/organisms/InterventionModal/index.tsx b/app/src/organisms/InterventionModal/index.tsx index 39c6c3cb4d7..1bdb11949d2 100644 --- a/app/src/organisms/InterventionModal/index.tsx +++ b/app/src/organisms/InterventionModal/index.tsx @@ -58,7 +58,7 @@ const MODAL_STYLE = { overflowY: OVERFLOW_AUTO, maxHeight: '100%', width: '47rem', - border: `6px ${BORDERS.styleSolid} ${COLORS.blueEnabled}`, + border: `6px ${BORDERS.styleSolid} ${COLORS.blue50}`, borderRadius: BORDERS.radiusSoftCorners, boxShadow: BORDERS.smallDropShadow, } as const @@ -68,7 +68,7 @@ const HEADER_STYLE = { gridGap: SPACING.spacing12, padding: `${SPACING.spacing20} ${SPACING.spacing32}`, color: COLORS.white, - backgroundColor: COLORS.blueEnabled, + backgroundColor: COLORS.blue50, position: POSITION_STICKY, top: 0, } as const @@ -158,10 +158,10 @@ export function InterventionModal({ // reimplement when design system shares a modal component between desktop/ODD return isOnDevice ? ( diff --git a/app/src/organisms/LabwareCard/index.tsx b/app/src/organisms/LabwareCard/index.tsx index dbc90285ecc..f9b99f41ce1 100644 --- a/app/src/organisms/LabwareCard/index.tsx +++ b/app/src/organisms/LabwareCard/index.tsx @@ -39,7 +39,7 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element { {t('custom_def')} @@ -86,7 +86,7 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element { ) : ( @@ -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 acb59d4438e..09bb752ffc9 100644 --- a/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx +++ b/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx @@ -28,10 +28,7 @@ export function ManufacturerDetails( brandName === 'all' || brandName === 'generic' ? t(brandName) : brandName return ( - + - + {label} {value} diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx index 2005c1b8a62..bcfb9bbe850 100644 --- a/app/src/organisms/LabwareDetails/index.tsx +++ b/app/src/organisms/LabwareDetails/index.tsx @@ -40,21 +40,21 @@ const CLOSE_ICON_STYLE = css` border-radius: 50%; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } ` const COPY_ICON_STYLE = css` transform: translateY(${SPACING.spacing4}); &:hover { - color: ${COLORS.blueEnabled}; + color: ${COLORS.blue50}; } &:active, &:focus { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; } ` @@ -122,11 +122,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { {!isCustomDefinition && ( - {' '} + {' '} {t('last_updated')} {format(new Date(modified), 'MM/dd/yyyy')} @@ -163,7 +159,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { @@ -175,7 +171,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { aria-label="copy" > - + {apiName} diff --git a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx index 7934e1f61b8..2f336b66a62 100644 --- a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx +++ b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx @@ -45,7 +45,7 @@ export const ExitConfirmation = (props: ExitConfirmationProps): JSX.Element => { alignItems={ALIGN_CENTER} paddingX={SPACING.spacing32} > - + {isOnDevice ? ( <> @@ -140,5 +140,5 @@ const ConfirmationBodyODD = styled.h1` @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { ${TYPOGRAPHY.level4HeaderRegular} } - color: ${COLORS.darkBlack70}; + color: ${COLORS.grey60}; ` diff --git a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx index 6989dca48c9..55193ca1b91 100644 --- a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx +++ b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx @@ -52,7 +52,7 @@ export function FatalErrorModal(props: FatalErrorModalProps): JSX.Element { diff --git a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx index d5cf8dc0ee6..68cbaa890f5 100644 --- a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx +++ b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx @@ -139,7 +139,7 @@ export const IntroScreen = (props: { const VIEW_OFFSETS_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; font-size: ${TYPOGRAPHY.fontSize22}; &:hover { opacity: 100%; @@ -167,7 +167,7 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element { css={VIEW_OFFSETS_BUTTON_STYLE} aria-label="show labware offsets" > - + {i18n.format(t('view_current_offsets'), 'capitalize')} diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx index 4e91343b85a..081ec9bb7e8 100644 --- a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx +++ b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx @@ -104,7 +104,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => { } const wellStroke: WellStroke = wellsToHighlight.reduce( - (acc, wellName) => ({ ...acc, [wellName]: COLORS.blueEnabled }), + (acc, wellName) => ({ ...acc, [wellName]: COLORS.blue50 }), {} ) @@ -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={COLORS.medGreyEnabled} - wellLabelColor={COLORS.medGreyEnabled} + labwareStroke={COLORS.grey30} + wellLabelColor={COLORS.grey30} /> - + {header != null ? {header} : null} {body != null ? {body} : null} diff --git a/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx index 16a00fa61de..68bd7c66e1e 100644 --- a/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx +++ b/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx @@ -35,7 +35,7 @@ export function TipConfirmation(props: TipConfirmationProps): JSX.Element { return isOnDevice ? ( {i18n.format(t('current_version'), 'upperCase')} @@ -117,7 +117,7 @@ export const AboutModuleSlideout = ( diff --git a/app/src/organisms/ModuleCard/HeaterShakerModuleData.tsx b/app/src/organisms/ModuleCard/HeaterShakerModuleData.tsx index a62755ccf79..d2615315d31 100644 --- a/app/src/organisms/ModuleCard/HeaterShakerModuleData.tsx +++ b/app/src/organisms/ModuleCard/HeaterShakerModuleData.tsx @@ -36,35 +36,35 @@ export const HeaterShakerModuleData = ( status: SpeedStatus | TemperatureStatus ): { backgroundColor: string; iconColor: string; textColor: string } => { const StatusLabelProps = { - backgroundColor: COLORS.medGreyEnabled, - iconColor: COLORS.darkGreyEnabled, - textColor: COLORS.bluePressed, + backgroundColor: COLORS.grey30, + iconColor: COLORS.grey50, + textColor: COLORS.blue60, pulse: false, } switch (status) { case 'idle': { - StatusLabelProps.backgroundColor = COLORS.medGreyEnabled - StatusLabelProps.iconColor = COLORS.darkGreyEnabled - StatusLabelProps.textColor = COLORS.darkBlackEnabled + StatusLabelProps.backgroundColor = COLORS.grey30 + StatusLabelProps.iconColor = COLORS.grey50 + StatusLabelProps.textColor = COLORS.black90 break } case 'holding at target': { - StatusLabelProps.backgroundColor = COLORS.medBlue - StatusLabelProps.iconColor = COLORS.blueEnabled + StatusLabelProps.backgroundColor = COLORS.blue30 + StatusLabelProps.iconColor = COLORS.blue50 break } case 'error': { - StatusLabelProps.backgroundColor = COLORS.warningBackgroundLight - StatusLabelProps.iconColor = COLORS.warningEnabled - StatusLabelProps.textColor = COLORS.warningText + StatusLabelProps.backgroundColor = COLORS.yellow20 + StatusLabelProps.iconColor = COLORS.yellow50 + StatusLabelProps.textColor = COLORS.yellow60 break } case 'heating': case 'cooling': case 'slowing down': case 'speeding up': { - StatusLabelProps.backgroundColor = COLORS.blueEnabled + '1A' + StatusLabelProps.backgroundColor = COLORS.blue50 + '1A' StatusLabelProps.pulse = true break } @@ -114,7 +114,7 @@ export const HeaterShakerModuleData = ( > {t('set_block_temp')} diff --git a/app/src/organisms/ModuleCard/MagneticModuleData.tsx b/app/src/organisms/ModuleCard/MagneticModuleData.tsx index a2fc7178d19..0f13583b91c 100644 --- a/app/src/organisms/ModuleCard/MagneticModuleData.tsx +++ b/app/src/organisms/ModuleCard/MagneticModuleData.tsx @@ -25,8 +25,8 @@ export const MagneticModuleData = ( <> {t('set_engage_height')} diff --git a/app/src/organisms/ModuleCard/TemperatureModuleData.tsx b/app/src/organisms/ModuleCard/TemperatureModuleData.tsx index 6cafe0a4b1e..5257dc6bf24 100644 --- a/app/src/organisms/ModuleCard/TemperatureModuleData.tsx +++ b/app/src/organisms/ModuleCard/TemperatureModuleData.tsx @@ -23,25 +23,25 @@ export const TemperatureModuleData = ( const { moduleStatus, targetTemp, currentTemp } = props const { t } = useTranslation('device_details') - let backgroundColor: string = COLORS.medGreyEnabled - let iconColor: string = COLORS.darkGreyEnabled + let backgroundColor: string = COLORS.grey30 + let iconColor: string = COLORS.grey50 let textColor let pulse switch (moduleStatus) { case 'idle': { - backgroundColor = COLORS.medGreyEnabled - iconColor = COLORS.darkGreyEnabled - textColor = COLORS.darkBlackEnabled + backgroundColor = COLORS.grey30 + iconColor = COLORS.grey50 + textColor = COLORS.black90 break } case 'holding at target': { - backgroundColor = COLORS.medBlue - iconColor = COLORS.blueEnabled + backgroundColor = COLORS.blue30 + iconColor = COLORS.blue50 break } case 'cooling': case 'heating': { - backgroundColor = COLORS.medBlue + backgroundColor = COLORS.blue30 pulse = true break } diff --git a/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx b/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx index 0b02270c931..0764a84bec0 100644 --- a/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx @@ -95,7 +95,7 @@ export const TemperatureModuleSlideout = ( {t('set_temperature')} diff --git a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx index 62343841bce..28e870c79a3 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 1117b509b01..d3d44e2a9db 100644 --- a/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx +++ b/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx @@ -34,35 +34,35 @@ export const ThermocyclerModuleData = ( textColor: string } => { const StatusLabelProps = { - backgroundColor: COLORS.medGreyEnabled, - iconColor: COLORS.darkGreyEnabled, - textColor: COLORS.bluePressed, + backgroundColor: COLORS.grey30, + iconColor: COLORS.grey50, + textColor: COLORS.blue60, pulse: false, } switch (status) { case 'idle': { - StatusLabelProps.backgroundColor = COLORS.medGreyEnabled - StatusLabelProps.iconColor = COLORS.darkGreyEnabled - StatusLabelProps.textColor = COLORS.darkBlackEnabled + StatusLabelProps.backgroundColor = COLORS.grey30 + StatusLabelProps.iconColor = COLORS.grey50 + StatusLabelProps.textColor = COLORS.black90 break } case 'holding at target': { - StatusLabelProps.backgroundColor = COLORS.medBlue - StatusLabelProps.iconColor = COLORS.blueEnabled + StatusLabelProps.backgroundColor = COLORS.blue30 + StatusLabelProps.iconColor = COLORS.blue50 break } case 'cooling': case 'heating': { - StatusLabelProps.backgroundColor = COLORS.medBlue - StatusLabelProps.iconColor = COLORS.darkGreyEnabled + StatusLabelProps.backgroundColor = COLORS.blue30 + StatusLabelProps.iconColor = COLORS.grey50 StatusLabelProps.pulse = true break } case 'error': { - StatusLabelProps.backgroundColor = COLORS.warningBackgroundLight - StatusLabelProps.iconColor = COLORS.warningEnabled - StatusLabelProps.textColor = COLORS.warningText + StatusLabelProps.backgroundColor = COLORS.yellow20 + StatusLabelProps.iconColor = COLORS.yellow50 + StatusLabelProps.textColor = COLORS.yellow60 } } return StatusLabelProps @@ -77,7 +77,7 @@ export const ThermocyclerModuleData = ( > @@ -88,8 +88,8 @@ 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 cca89a616a4..8e322fe4315 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: COLORS.medGreyEnabled' + 'backgroundColor: COLORS.grey30' ) }) @@ -79,7 +79,7 @@ describe('HeaterShakerModuleData', () => { } const { getByText } = render(props) expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: COLORS.blueEnabled' + 'backgroundColor: COLORS.blue50' ) }) @@ -101,7 +101,7 @@ describe('HeaterShakerModuleData', () => { getByText('Target: 200 rpm') getByText('Current: 200 rpm') expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: COLORS.blueEnabled' + 'backgroundColor: COLORS.blue50' ) }) @@ -123,7 +123,7 @@ describe('HeaterShakerModuleData', () => { getByText('Target: N/A') getByText('Current: 0 rpm') expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: COLORS.medGreyEnabled' + 'backgroundColor: COLORS.grey30' ) }) @@ -145,7 +145,7 @@ describe('HeaterShakerModuleData', () => { getByText('Target: 200 rpm') getByText('Current: 200 rpm') expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: COLORS.warningBackgroundLight' + 'backgroundColor: COLORS.yellow20' ) }) @@ -167,7 +167,7 @@ describe('HeaterShakerModuleData', () => { getByText('Target: N/A') getByText('Current: 0 rpm') expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: COLORS.medGreyEnabled' + 'backgroundColor: COLORS.grey30' ) }) @@ -187,7 +187,7 @@ describe('HeaterShakerModuleData', () => { } const { getByText } = render(props) expect(getByText('Mock StatusLabel')).toHaveStyle( - 'backgroundColor: COLORS.blueEnabled' + 'backgroundColor: COLORS.blue50' ) }) diff --git a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx index 9c760fc47e1..fc1acfe1033 100644 --- a/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ThermocyclerModuleData.test.tsx @@ -105,7 +105,7 @@ describe('ThermocyclerModuleData', () => { const { getByTestId } = render(props) expect(getByTestId('status_label_heating_blockStatus')).toHaveStyle( - 'backgroundColor: COLORS.warningBackgroundLight' + 'backgroundColor: COLORS.yellow20' ) }) diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx index 230ca1cb9ee..98e4260346e 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={COLORS.darkGreyEnabled} + color={COLORS.grey50} /> {getModuleDisplayName(module.moduleModel)} diff --git a/app/src/organisms/ModuleWizardFlows/Success.tsx b/app/src/organisms/ModuleWizardFlows/Success.tsx index 16b8273214f..86f4f044fec 100644 --- a/app/src/organisms/ModuleWizardFlows/Success.tsx +++ b/app/src/organisms/ModuleWizardFlows/Success.tsx @@ -44,7 +44,7 @@ export const Success = ( diff --git a/app/src/organisms/ModuleWizardFlows/index.tsx b/app/src/organisms/ModuleWizardFlows/index.tsx index 98c4e3941b7..9f1168d229c 100644 --- a/app/src/organisms/ModuleWizardFlows/index.tsx +++ b/app/src/organisms/ModuleWizardFlows/index.tsx @@ -235,7 +235,7 @@ export const ModuleWizardFlows = ( modalContent = ( () diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx index 2c1bbe9b414..38ae2dde76d 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={COLORS.darkBlack70} + color={COLORS.grey60} /> )} @@ -122,7 +122,7 @@ export function Navigation(props: NavigationProps): JSX.Element { name="overflow-btn-touchscreen" height="3.75rem" width="3rem" - color={COLORS.darkBlack70} + color={COLORS.grey60} /> @@ -147,17 +147,17 @@ const NavigationLink = (props: { to: string; name: string }): JSX.Element => ( const TouchNavLink = styled(NavLink)` ${TYPOGRAPHY.level3HeaderSemiBold} - color: ${COLORS.darkBlack70}; + color: ${COLORS.grey60}; height: 3.5rem; display: flex; flex-direction: ${DIRECTION_COLUMN}; align-items: ${ALIGN_CENTER}; white-space: nowrap; &.active { - color: ${COLORS.black}; + color: ${COLORS.black90}; } &.active > div { - background-color: ${COLORS.highlightPurple1}; + background-color: ${COLORS.purple50}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { @@ -171,11 +171,11 @@ const IconButton = styled('button')` background-color: ${COLORS.white}; &:active { - background-color: ${COLORS.darkBlack20}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${COLORS.darkBlack20}; + 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 e0d226c76ac..027a233c8b1 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 31491e399de..b376826b2aa 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 85f3722e138..27acb5f95c0 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 43714fad3bf..1ccb4729935 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: ${COLORS.light1}; + background-color: ${COLORS.grey35}; margin-bottom: ${SPACING.spacing8}; border-radius: ${BORDERS.borderRadiusSize4}; &:hover { border: none; box-shadow: none; - background-color: ${COLORS.light1}; - color: ${COLORS.darkBlack100}; + background-color: ${COLORS.grey35}; + color: ${COLORS.black90}; } &:focus { - background-color: ${COLORS.light1Pressed}; - color: ${COLORS.darkBlack100}; + background-color: ${COLORS.grey40}; + color: ${COLORS.black90}; box-shadow: none; } &:active { - background-color: ${COLORS.light1Pressed}; - color: ${COLORS.darkBlack100}; + background-color: ${COLORS.grey40}; + color: ${COLORS.black90}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; } &:disabled { - color: ${COLORS.darkBlack60}; + color: ${COLORS.grey50}; } ` @@ -106,16 +106,16 @@ export function DisplayWifiList({ display="flex" onClick={handleJoinAnotherNetwork} height="5rem" - backgroundColor={COLORS.light1} + backgroundColor={COLORS.grey35} borderRadius={BORDERS.borderRadiusSize4} - color={COLORS.black} + color={COLORS.black90} css={NETWORK_ROW_STYLE} padding={`${SPACING.spacing20} ${SPACING.spacing32}`} flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4} > - + {t('join_other_network')} {list != null && list.length > 0 ? null : } diff --git a/app/src/organisms/NetworkSettings/FailedToConnect.tsx b/app/src/organisms/NetworkSettings/FailedToConnect.tsx index 85726031f3d..a220b4eaecc 100644 --- a/app/src/organisms/NetworkSettings/FailedToConnect.tsx +++ b/app/src/organisms/NetworkSettings/FailedToConnect.tsx @@ -39,7 +39,7 @@ export function FailedToConnect({ @@ -51,7 +51,7 @@ export function FailedToConnect({ {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/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index abd2d935492..522b9c60bac 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -30,14 +30,14 @@ const SSID_INPUT_FIELD_STYLE = css` font-size: ${TYPOGRAPHY.fontSize28}; line-height: ${TYPOGRAPHY.lineHeight36}; font-weight: ${TYPOGRAPHY.fontWeightRegular}; - color: ${COLORS.darkBlack100}; + color: ${COLORS.black90}; padding-left: ${SPACING.spacing24}; box-sizing: border-box; width: 42.625rem; &:focus { - border: 3px solid ${COLORS.blueEnabled}; - filter: drop-shadow(0px 0px 10px ${COLORS.blueEnabled}); + border: 3px solid ${COLORS.blue50}; + filter: drop-shadow(0px 0px 10px ${COLORS.blue50}); border-radius: ${BORDERS.borderRadiusSize1}; } ` diff --git a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx index 857a8b34483..4a7e6f6dc8a 100644 --- a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx @@ -24,13 +24,13 @@ const SSID_INPUT_FIELD_STYLE = css` font-size: ${TYPOGRAPHY.fontSize28}; line-height: ${TYPOGRAPHY.lineHeight36}; font-weight: ${TYPOGRAPHY.fontWeightRegular}; - color: ${COLORS.darkBlack100}; + color: ${COLORS.black90}; padding-left: ${SPACING.spacing24}; box-sizing: border-box; &:focus { - border: 3px solid ${COLORS.blueEnabled}; - filter: drop-shadow(0px 0px 10px ${COLORS.blueEnabled}); + border: 3px solid ${COLORS.blue50}; + filter: drop-shadow(0px 0px 10px ${COLORS.blue50}); border-radius: ${BORDERS.borderRadiusSize1}; } ` @@ -61,7 +61,7 @@ export function SetWifiSsid({ {t('enter_network_name')} diff --git a/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx index 27e6c0ebcae..5487f7635a3 100644 --- a/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx +++ b/app/src/organisms/NetworkSettings/WifiConnectionDetails.tsx @@ -116,12 +116,12 @@ const DisplayConnectionStatus = ({ flex="1" flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32} - backgroundColor={COLORS.green3} + backgroundColor={COLORS.green35} borderRadius={BORDERS.borderRadiusSize3} alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} > - + {t('successfully_connected_to_network', { ssid })} diff --git a/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx b/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx index 22562bf09ac..b8a7123603f 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={COLORS.darkBlack70} + 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 6f644092d64..8f07093e973 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 0d9390886b1..c4a9199806f 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx @@ -90,9 +90,7 @@ export function ProtocolWithLastRun({ const PROTOCOL_CARD_STYLE = css` flex: 1 0 0; &:active { - background-color: ${isReadyToBeReRun - ? COLORS.green3Pressed - : COLORS.yellow3Pressed}; + background-color: ${isReadyToBeReRun ? COLORS.green40 : COLORS.yellow40}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; @@ -101,9 +99,7 @@ export function ProtocolWithLastRun({ const PROTOCOL_CARD_CLICKED_STYLE = css` flex: 1 0 0; - background-color: ${isReadyToBeReRun - ? COLORS.green3Pressed - : COLORS.yellow3Pressed}; + background-color: ${isReadyToBeReRun ? COLORS.green40 : COLORS.yellow40}; &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; } @@ -157,7 +153,7 @@ export function ProtocolWithLastRun({ flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing24} gridGap={SPACING.spacing24} - backgroundColor={isReadyToBeReRun ? COLORS.green3 : COLORS.yellow3} + backgroundColor={isReadyToBeReRun ? COLORS.green35 : COLORS.yellow35} width="25.8125rem" height="24.5rem" borderRadius={BORDERS.borderRadiusSize4} @@ -176,7 +172,7 @@ export function ProtocolWithLastRun({ aria-label="icon_ot-spinner" spin={true} size="2.5rem" - color={COLORS.darkBlack100} + color={COLORS.black90} /> )} @@ -194,7 +190,7 @@ export function ProtocolWithLastRun({ fontSize={TYPOGRAPHY.fontSize22} fontWeight={TYPOGRAPHY.fontWeightRegular} lineHeight={TYPOGRAPHY.lineHeight28} - color={COLORS.darkBlack70} + 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 dc38804d42b..4f66f4f756e 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/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx index 111573f954a..e86294a0e08 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx @@ -209,7 +209,7 @@ describe('RecentRunProtocolCard', () => { it('when tapping a card, mock functions is called and loading state is activated', () => { const [{ getByLabelText }] = render(props) const button = getByLabelText('RecentRunProtocolCard') - expect(button).toHaveStyle(`background-color: ${COLORS.green3}`) + expect(button).toHaveStyle(`background-color: ${COLORS.green35}`) fireEvent.click(button) expect(mockTrackEvent).toHaveBeenCalledWith({ name: 'proceedToRun', @@ -218,7 +218,7 @@ describe('RecentRunProtocolCard', () => { // TODO(BC, 08/30/23): reintroduce check for tracking when tracking is reintroduced lazily // expect(mockTrackProtocolRunEvent).toBeCalledWith({ name: 'runAgain' }) getByLabelText('icon_ot-spinner') - expect(button).toHaveStyle(`background-color: ${COLORS.green3Pressed}`) + expect(button).toHaveStyle(`background-color: ${COLORS.green40}`) }) it('should render the skeleton when react query is loading', () => { diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx index 3efc1890237..ee164472ef0 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={COLORS.darkBlack20} + 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={COLORS.darkBlack70} + color={COLORS.grey60} aria-label="CancelingRunModal_icon" /> diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx index 1b6996ba885..6f1c103df0f 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx @@ -53,7 +53,7 @@ export function ConfirmCancelRunModal({ title: t('cancel_run_modal_heading'), hasExitIcon: false, iconName: 'ot-alert', - iconColor: COLORS.yellow2, + iconColor: COLORS.yellow50, } const handleCancelRun = (): void => { diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx index 39af6821128..3bcfcc96f2f 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: ${COLORS.darkBlack70}; + color: ${COLORS.grey60}; font-size: 1.75rem; font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; line-height: 2.25rem; @@ -71,7 +71,7 @@ const RUN_TIMER_STYLE = css` font-size: 2rem; font-weight: ${TYPOGRAPHY.fontWeightBold}; line-height: 2.625rem; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; ` const COMMAND_ROW_STYLE_ANIMATED = css` @@ -225,7 +225,7 @@ export function CurrentRunningProtocolCommand({ @@ -126,7 +126,7 @@ const SCROLL_BAR_STYLE = css` &::-webkit-scrollbar { width: 0.75rem; - background-color: ${COLORS.light1}; + background-color: ${COLORS.grey35}; } &::-webkit-scrollbar-track { @@ -135,7 +135,7 @@ const SCROLL_BAR_STYLE = css` } &::-webkit-scrollbar-thumb { - background: ${COLORS.darkBlack40}; + 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 90f1e2f2261..c1cfa3a7c51 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: ${COLORS.darkBlack70}; + color: ${COLORS.grey60}; font-size: ${TYPOGRAPHY.fontSize28}; font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; line-height: ${TYPOGRAPHY.lineHeight36}; @@ -216,9 +216,7 @@ export function RunningProtocolCommandList({ > {(command, index) => { const backgroundColor = - index === currentRunCommandIndex - ? COLORS.mediumBlueEnabled - : COLORS.light1 + index === currentRunCommandIndex ? COLORS.blue35 : COLORS.grey35 return ( {t('close_door_to_resume')} diff --git a/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx b/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx index 22ac3b36217..68ddb3098d0 100644 --- a/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx +++ b/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx @@ -186,7 +186,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { return errorMessage != null ? ( diff --git a/app/src/organisms/PipetteWizardFlows/Carriage.tsx b/app/src/organisms/PipetteWizardFlows/Carriage.tsx index cf3e1f50eb2..618f6ff0f8b 100644 --- a/app/src/organisms/PipetteWizardFlows/Carriage.tsx +++ b/app/src/organisms/PipetteWizardFlows/Carriage.tsx @@ -46,7 +46,7 @@ export const Carriage = (props: PipetteWizardStepProps): JSX.Element | null => { return errorMessage != null ? ( diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx index 12ef48c2d3f..f18b652b60b 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 ${COLORS.medGreyEnabled}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; height: 14.5625rem; width: 14.5625rem; @@ -60,14 +60,14 @@ const UNSELECTED_OPTIONS_STYLE = css` grid-gap: ${SPACING.spacing8} &:hover { - border: 1px solid ${COLORS.medGreyHover}; + border: 1px solid ${COLORS.grey60}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { flex-direction: ${DIRECTION_ROW}; justify-content: ${JUSTIFY_FLEX_START}; - background-color: ${COLORS.mediumBlueEnabled}; - border-width: 0; + background-color: ${COLORS.blue35}; + border-width: 0; border-radius: ${BORDERS.borderRadiusSize4}; padding: ${SPACING.spacing24}; height: 5.25rem; @@ -80,22 +80,22 @@ const UNSELECTED_OPTIONS_STYLE = css` ` const SELECTED_OPTIONS_STYLE = css` ${UNSELECTED_OPTIONS_STYLE} - border: 1px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.lightBlue}; + border: 1px solid ${COLORS.blue50}; + background-color: ${COLORS.blue10}; &:hover { - border: 1px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.lightBlue}; + border: 1px solid ${COLORS.blue50}; + background-color: ${COLORS.blue10}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { border-width: 0px; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; color: ${COLORS.white}; &:hover { border-width: 0px; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; } } ` diff --git a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx index cafdb55c0b0..d2a59d4ae89 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: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; @@ -177,7 +177,7 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => { if (showPipetteStillAttached) { return ( @@ -213,7 +213,7 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => { return errorMessage != null ? ( diff --git a/app/src/organisms/PipetteWizardFlows/ExitModal.tsx b/app/src/organisms/PipetteWizardFlows/ExitModal.tsx index 54a95b95c1a..e385471b2c1 100644 --- a/app/src/organisms/PipetteWizardFlows/ExitModal.tsx +++ b/app/src/organisms/PipetteWizardFlows/ExitModal.tsx @@ -42,7 +42,7 @@ export function ExitModal(props: ExitModalProps): JSX.Element { return ( 2 ? t('something_seems_wrong') : undefined} - iconColor={COLORS.errorEnabled} + iconColor={COLORS.red50} isSuccess={false} > { : null const [numberOfTryAgains, setNumberOfTryAgains] = React.useState(0) let header: string = 'unknown results screen' - let iconColor: string = COLORS.successEnabled + let iconColor: string = COLORS.green50 let isSuccess: boolean = true let buttonText: string = i18n.format(t('shared:exit'), 'capitalize') let subHeader @@ -99,12 +99,12 @@ export const Results = (props: ResultsProps): JSX.Element => { ) { header = i18n.format(t('wrong_pip'), 'capitalize') buttonText = i18n.format(t('detach_and_retry'), 'capitalize') - iconColor = COLORS.errorEnabled + iconColor = COLORS.red50 isSuccess = false } else { // attachment flow fail header = i18n.format(t('pipette_failed_to_attach'), 'capitalize') - iconColor = COLORS.errorEnabled + iconColor = COLORS.red50 isSuccess = false } break @@ -112,7 +112,7 @@ export const Results = (props: ResultsProps): JSX.Element => { case FLOWS.DETACH: { if (attachedPipettes[mount] != null) { header = t('pipette_failed_to_detach', { pipetteName: pipetteName }) - iconColor = COLORS.errorEnabled + iconColor = COLORS.red50 isSuccess = false } else { header = i18n.format(t('pipette_detached'), 'capitalize') @@ -248,7 +248,7 @@ export const Results = (props: ResultsProps): JSX.Element => { ) { const GO_BACK_BUTTON_STYLE = css` ${TYPOGRAPHY.pSemiBold}; - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { opacity: 70%; @@ -301,7 +301,7 @@ export const Results = (props: ResultsProps): JSX.Element => { return ( diff --git a/app/src/organisms/PipetteWizardFlows/UnskippableModal.tsx b/app/src/organisms/PipetteWizardFlows/UnskippableModal.tsx index 84a0ebc0c21..5355349b656 100644 --- a/app/src/organisms/PipetteWizardFlows/UnskippableModal.tsx +++ b/app/src/organisms/PipetteWizardFlows/UnskippableModal.tsx @@ -22,7 +22,7 @@ export function UnskippableModal(props: UnskippableModalProps): JSX.Element { const { t, i18n } = useTranslation(['pipette_wizard_flows', 'shared']) return ( { // Single and 8-Channel pipettes are selected first by default expect(singleMountPipettes).toHaveStyle( - `background-color: ${COLORS.lightBlue}` + `background-color: ${COLORS.blue10}` ) expect(ninetySixPipette).toHaveStyle(`background-color: ${COLORS.white}`) @@ -139,9 +139,7 @@ describe('ChoosePipette', () => { name: '96-Channel pipette 96-Channel pipette', }) expect(singleMountPipettes).toHaveStyle(`background-color: ${COLORS.white}`) - expect(ninetySixPipette).toHaveStyle( - `background-color: ${COLORS.lightBlue}` - ) + expect(ninetySixPipette).toHaveStyle(`background-color: ${COLORS.blue10}`) }) it('renders the correct text for the 96 channel button when there is a left pipette attached', () => { mockGetIsGantryEmpty.mockReturnValue(false) diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx index 6ea5b608af5..3edeb0b3487 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx @@ -150,7 +150,7 @@ describe('Results', () => { render(props) screen.getByText('Unable to detect pipette') expect(screen.getByLabelText('ot-alert')).toHaveStyle( - `color: ${String(COLORS.errorEnabled)}` + `color: ${String(COLORS.red50)}` ) fireEvent.click(screen.getByRole('button', { name: 'Try again' })) await act(() => pipettePromise) @@ -180,7 +180,7 @@ describe('Results', () => { render(props) screen.getByText('Flex 1-Channel 1000 μL still attached') expect(screen.getByLabelText('ot-alert')).toHaveStyle( - `color: ${String(COLORS.errorEnabled)}` + `color: ${String(COLORS.red50)}` ) screen.getByRole('button', { name: 'Try again' }) }) @@ -215,7 +215,7 @@ describe('Results', () => { render(props) screen.getByText('Flex 1-Channel 1000 μL still attached') expect(screen.getByLabelText('ot-alert')).toHaveStyle( - `color: ${String(COLORS.errorEnabled)}` + `color: ${String(COLORS.red50)}` ) fireEvent.click(screen.getByRole('button', { name: 'Try again' })) await act(() => pipettePromise) @@ -304,7 +304,7 @@ describe('Results', () => { render(props) screen.getByText('Unable to detect pipette') expect(screen.getByLabelText('ot-alert')).toHaveStyle( - `color: ${String(COLORS.errorEnabled)}` + `color: ${String(COLORS.red50)}` ) fireEvent.click(screen.getByRole('button', { name: 'Try again' })) await act(() => pipettePromise) diff --git a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx index 13459af3cbf..8531c7277fa 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx @@ -118,7 +118,7 @@ export const ProtocolLabwareDetailItem = ( > {namespace === 'opentrons' ? ( { {description} diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx index 4e21f6dd283..fa2aaad72c0 100644 --- a/app/src/organisms/ProtocolDetails/index.tsx +++ b/app/src/organisms/ProtocolDetails/index.tsx @@ -84,16 +84,16 @@ const GRID_STYLE = css` const ZOOM_ICON_STYLE = css` border-radius: ${BORDERS.radiusSoftCorners}; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } &:disabled { background: ${COLORS.white}; } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: 0 0 0 3px ${COLORS.blue50}; } ` @@ -327,9 +327,9 @@ export function ProtocolDetails( const deckMap = const deckViewByAnalysisStatus = { - missing: , - loading: , - error: , + missing: , + loading: , + error: , complete: ( {deckMap} @@ -345,8 +345,8 @@ export function ProtocolDetails( setShowChooseRobotToRunProtocolSlideout(true) } - const UNKNOWN_ATTACHMENT_ERROR = `${protocolDisplayName} protocol uses - instruments or modules from a future version of Opentrons software. Please update + const UNKNOWN_ATTACHMENT_ERROR = `${protocolDisplayName} protocol uses + instruments or modules from a future version of Opentrons software. Please update the app to the most recent version to run this protocol.` const UnknownAttachmentError = ( @@ -387,7 +387,7 @@ export function ProtocolDetails( - + {t('creation_method')} @@ -434,7 +434,7 @@ export function ProtocolDetails( flexDirection={DIRECTION_COLUMN} data-testid="ProtocolDetails_lastUpdated" > - + {t('last_updated')} @@ -447,7 +447,7 @@ export function ProtocolDetails( flexDirection={DIRECTION_COLUMN} data-testid="ProtocolDetails_lastAnalyzed" > - + {t('last_analyzed')} @@ -477,7 +477,7 @@ export function ProtocolDetails( flexDirection={DIRECTION_COLUMN} data-testid="ProtocolDetails_author" > - + {t('org_or_author')} - + {t('description')} {analysisStatus === 'loading' ? ( @@ -535,7 +535,7 @@ export function ProtocolDetails( flex={`0 0 ${String(SIZE_5)}`} flexDirection={DIRECTION_COLUMN} backgroundColor={COLORS.white} - border={`1px solid ${String(COLORS.medGreyEnabled)}`} + border={`1px solid ${String(COLORS.grey30)}`} borderRadius={BORDERS.radiusSoftCorners} height="100%" data-testid="ProtocolDetails_deckMap" diff --git a/app/src/organisms/ProtocolSetupInstruments/index.tsx b/app/src/organisms/ProtocolSetupInstruments/index.tsx index e35564d0eaa..7b4c50cd1f8 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: ${COLORS.darkBlack70}; + color: ${COLORS.grey60}; ` diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index 760ce24a30c..b301231a89b 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({ > @@ -546,7 +542,7 @@ function RowLabware({ return ( {getLabwareDisplayName(definition)} - + {nickName} {nestedLabwareInfo != null ? ( @@ -586,7 +582,7 @@ function RowLabware({ {nestedLabwareInfo.nestedLabwareDisplayName} - + {nestedLabwareInfo.nestedLabwareNickName} diff --git a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx index aa0e45555b1..15185a46308 100644 --- a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx +++ b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx @@ -25,7 +25,7 @@ const Table = styled('table')` width: 100%; border-spacing: 0 ${BORDERS.borderRadiusSize2}; text-align: ${TYPOGRAPHY.textAlignLeft}; - color: ${COLORS.darkBlack90}; + color: ${COLORS.grey60}; ` const TableHeader = styled('th')` text-transform: ${TYPOGRAPHY.textTransformCapitalize}; @@ -41,7 +41,7 @@ const TableRow = styled('tr')` const TableDatum = styled('td')` z-index: 2; padding: ${SPACING.spacing8} ${SPACING.spacing20}; - background-color: ${COLORS.light2}; + background-color: ${COLORS.grey30}; font-size: ${TYPOGRAPHY.fontSize22}; white-space: break-spaces; text-overflow: ${WRAP}; diff --git a/app/src/organisms/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ProtocolSetupLiquids/index.tsx index 7386ea69045..69b722795a8 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/ConfirmDeleteProtocolModal.tsx b/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx index a31d8a28f6b..b0c02649fad 100644 --- a/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx +++ b/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx @@ -44,7 +44,7 @@ export function ConfirmDeleteProtocolModal( {t('shared:cancel')} {t('yes_delete_this_protocol')} diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx index 384a12521ad..0c63f4351d7 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx @@ -78,8 +78,8 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element | null { mostRecentAnalysis ) - const UNKNOWN_ATTACHMENT_ERROR = `${protocolDisplayName} protocol uses - instruments or modules from a future version of Opentrons software. Please update + const UNKNOWN_ATTACHMENT_ERROR = `${protocolDisplayName} protocol uses + instruments or modules from a future version of Opentrons software. Please update the app to the most recent version to run this protocol.` const UnknownAttachmentError = ( @@ -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 0ca88e3093c..86291ed60b2 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: ${COLORS.medGreyHover}; + background-color: ${COLORS.grey60}; } &:active, &:focus { - background-color: ${COLORS.medGreyEnabled}; + 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/ProtocolsLanding/ProtocolUploadInput.tsx b/app/src/organisms/ProtocolsLanding/ProtocolUploadInput.tsx index 181da16300f..1501a181a48 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolUploadInput.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolUploadInput.tsx @@ -59,7 +59,7 @@ export function ProtocolUploadInput( t={t} i18nKey="shared:drag_and_drop" components={{ - a: , + a: , }} /> diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx index a25fc72ae73..34879a8cbb0 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx @@ -95,6 +95,6 @@ const StyledTableCell = styled.td` ` const BODY_STYLE = css` - box-shadow: 0 0 0 1px ${COLORS.medGreyEnabled}; + 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 2c66040d1ed..db4f321230a 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 ${COLORS.medGreyEnabled}; + 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 70e64d7c4db..3fd19e8cb29 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx @@ -35,7 +35,7 @@ const StyledTableCell = styled.td` ` const BODY_STYLE = css` - box-shadow: 0 0 0 1px ${COLORS.medGreyEnabled}; + box-shadow: 0 0 0 1px ${COLORS.grey30}; border-radius: 3px; ` interface TipLengthCalibrationItemsProps { diff --git a/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx b/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx index beb3457a714..baf84d0302c 100644 --- a/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx +++ b/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx @@ -48,14 +48,14 @@ export function DeckCalibrationConfirmModal({ onClick={cancel} textTransform={TYPOGRAPHY.textTransformCapitalize} marginRight={SPACING.spacing24} - color={COLORS.blueEnabled} + color={COLORS.blue50} css={TYPOGRAPHY.fontSizeP} fontWeight={TYPOGRAPHY.fontWeightSemiBold} > {t('shared:cancel')} {t('deck_calibration_description')} - + {deckLastModified} diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx index 4787e6851fa..30ce9ee06a1 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 ${COLORS.medGreyEnabled}; + 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 032d5bd9343..ebe9772241a 100644 --- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx +++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx @@ -42,9 +42,9 @@ const OptionLabel = styled.label` padding: ${SPACING.spacing16} ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize4}; color: ${({ isSelected }) => - isSelected === true ? COLORS.white : COLORS.darkBlack100}; + isSelected === true ? COLORS.white : COLORS.black90}; background: ${({ isSelected }) => - isSelected === true ? COLORS.blueEnabled : COLORS.mediumBlueEnabled}; + isSelected === true ? COLORS.blue50 : COLORS.blue35}; ` interface DeviceResetProps { @@ -232,7 +232,7 @@ export function DeviceReset({ color={ resetOptions[option.id] ?? false ? COLORS.white - : COLORS.darkBlack70 + : COLORS.grey60 } > {subText} @@ -284,7 +284,7 @@ export function DeviceReset({ (resetOptions.onDeviceDisplay ?? false)) || isEveryOptionSelected(resetOptions) ? COLORS.white - : COLORS.darkBlack70 + : COLORS.grey60 } > {t('clear_all_stored_data_description')} @@ -325,7 +325,7 @@ export const ConfirmClearDataModal = ({ title: t('confirm_device_reset_heading'), hasExitIcon: false, iconName: 'ot-alert', - iconColor: COLORS.yellow2, + iconColor: COLORS.yellow50, } return ( diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx index 10e686403b6..82423db475e 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx @@ -79,7 +79,7 @@ export function WifiConnectionDetails({ {t('connected_network')} @@ -87,7 +87,7 @@ export function WifiConnectionDetails({ display={DISPLAY_FLEX} width="100%" padding={SPACING.spacing24} - backgroundColor={COLORS.green3} + backgroundColor={COLORS.green35} borderRadius={BORDERS.borderRadiusSize3} onClick={() => setShowNetworkDetailModal(true)} alignItems={ALIGN_CENTER} @@ -124,7 +124,7 @@ export function WifiConnectionDetails({ size="2.5rem" name="info" aria-label={`${activeSsid}_info_icon`} - color={COLORS.darkBlack100} + color={COLORS.black90} /> {t('view_details')} @@ -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 ba6912a08d2..08f61fbfcb8 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.green3 : COLORS.light1 + isConnected ? COLORS.green35 : COLORS.grey35 const handleChipText = (isConnected: boolean): string => isConnected ? t('connected') : t('not_connected') @@ -102,8 +102,8 @@ function NetworkSettingButton({ const PUSHED_STATE_STYLE = css` &:active { background-color: ${chipType === 'success' - ? COLORS.green3Pressed - : COLORS.darkBlack40}; + ? COLORS.green40 + : COLORS.grey50}; } ` @@ -135,7 +135,7 @@ function NetworkSettingButton({ fontSize={TYPOGRAPHY.fontSize28} lineHeight={TYPOGRAPHY.lineHeight36} fontWeight={TYPOGRAPHY.fontWeightRegular} - color={COLORS.darkBlack70} + color={COLORS.grey60} > {networkName} diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx index 955179bc069..50d69fc7ffc 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 ? COLORS.highlightPurple1 : COLORS.highlightPurple2}; + props.isActive ? COLORS.purple50 : COLORS.purple35}; ` interface TextSizeProps { @@ -62,7 +62,7 @@ export function TextSize({ setCurrentOption }: TextSizeProps): JSX.Element { textSize="1.375rem" lineHeight="1.75rem" fontWeight={TYPOGRAPHY.fontWeightRegular} - color={COLORS.darkBlack70} + 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 1f86e05c4b3..f16f2273a33 100644 --- a/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx +++ b/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx @@ -37,7 +37,7 @@ const BrightnessTile = styled(Box)` height: 8.75rem; border-radius: ${BORDERS.borderRadiusSize2}; background: ${(props: BrightnessTileProps) => - props.isActive ? COLORS.blueEnabled : COLORS.mediumBlueEnabled}; + props.isActive ? COLORS.blue50 : COLORS.blue35}; ` // Note The actual brightness is Bright 1 <---> 6 Dark which is opposite to the UI @@ -125,11 +125,11 @@ const IconButton = styled('button')` background-color: ${COLORS.white}; &:active { - background-color: ${COLORS.darkBlack20}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${COLORS.darkBlack20}; + 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 11cc7b06553..36b6628f697 100644 --- a/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx +++ b/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx @@ -36,7 +36,7 @@ const SettingButtonLabel = styled.label` border-radius: ${BORDERS.borderRadiusSize4}; cursor: pointer; background: ${({ isSelected }) => - isSelected === true ? COLORS.blueEnabled : COLORS.mediumBlueEnabled}; + isSelected === true ? COLORS.blue50 : COLORS.blue35}; color: ${({ isSelected }) => isSelected === true && COLORS.white}; ` @@ -112,9 +112,7 @@ export function UpdateChannel({ lineHeight={TYPOGRAPHY.lineHeight36} fontWeight={TYPOGRAPHY.fontWeightRegular} color={ - radio.value === channel - ? COLORS.white - : COLORS.darkBlack70 + radio.value === channel ? COLORS.white : COLORS.grey60 } > {t('alpha_description')} diff --git a/app/src/organisms/RobotSetupHeader/index.tsx b/app/src/organisms/RobotSetupHeader/index.tsx index f0961407c87..82961b953a8 100644 --- a/app/src/organisms/RobotSetupHeader/index.tsx +++ b/app/src/organisms/RobotSetupHeader/index.tsx @@ -49,7 +49,7 @@ export function RobotSetupHeader({ position={POSITION_ABSOLUTE} left="0" > - + ) : null} diff --git a/app/src/organisms/RunDetails/ConfirmCancelModal.tsx b/app/src/organisms/RunDetails/ConfirmCancelModal.tsx index 46f2dcd1e1e..5bd04903937 100644 --- a/app/src/organisms/RunDetails/ConfirmCancelModal.tsx +++ b/app/src/organisms/RunDetails/ConfirmCancelModal.tsx @@ -88,7 +88,7 @@ export function ConfirmCancelModal( )} {t('run_preview')} - + {t('steps_total', { count: robotSideAnalysis.commands.length })} @@ -91,15 +91,9 @@ export const RunPreviewComponent = ( > {(command, index) => { const isCurrent = index === currentRunCommandIndex - const borderColor = isCurrent - ? COLORS.blueEnabled - : COLORS.transparent - const backgroundColor = isCurrent - ? COLORS.lightBlue - : COLORS.fundamentalsBackground - const contentColor = isCurrent - ? COLORS.darkBlackEnabled - : COLORS.darkGreyEnabled + const borderColor = isCurrent ? COLORS.blue50 : COLORS.transparent + const backgroundColor = isCurrent ? COLORS.blue10 : 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 87c26e5b6dc..86f2889af3f 100644 --- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx +++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx @@ -36,7 +36,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { const terminateHeader: ModalHeaderBaseProps = { title: t('terminate') + '?', iconName: 'ot-alert', - iconColor: COLORS.yellow2, + iconColor: COLORS.yellow50, } return ( @@ -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 ea5966b3097..0d29e2b0f6b 100644 --- a/app/src/organisms/TaskList/index.tsx +++ b/app/src/organisms/TaskList/index.tsx @@ -55,7 +55,7 @@ function ProgressTrackerItem({ borderLeft={BORDERS.lineBorder} borderColor={ isTaskListComplete || isPastTask || isActiveTaskWithSubtasks - ? COLORS.blueEnabled + ? COLORS.blue50 : '' } marginTop={`-${SPACING.spacing12}`} @@ -77,9 +77,7 @@ function ProgressTrackerItem({ margin={SPACING.spacing16} name="ot-check" color={ - isTaskListComplete || isPastTask - ? COLORS.blueEnabled - : COLORS.medGreyHover + isTaskListComplete || isPastTask ? COLORS.blue50 : COLORS.grey60 } /> ) : ( @@ -87,9 +85,7 @@ function ProgressTrackerItem({ flex={FLEX_NONE} alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} - backgroundColor={ - isFutureTask ? COLORS.medGreyHover : COLORS.blueEnabled - } + backgroundColor={isFutureTask ? COLORS.grey60 : COLORS.blue50} color={COLORS.white} margin={SPACING.spacing16} height="1.25rem" @@ -144,15 +140,13 @@ function ProgressTrackerItem({ backgroundColor={ // is in the past or list is complete isTaskListComplete || isPastSubTask - ? COLORS.blueEnabled + ? COLORS.blue50 : subTask.isComplete === true - ? COLORS.medGreyHover + ? COLORS.grey60 : 'initial' } border={BORDERS.lineBorder} - borderColor={ - isFutureSubTask ? COLORS.medGreyHover : COLORS.blueEnabled - } + borderColor={isFutureSubTask ? COLORS.grey60 : COLORS.blue50} borderWidth={SPACING.spacing2} color={COLORS.white} margin={SPACING.spacing16} @@ -169,8 +163,8 @@ function ProgressTrackerItem({ isFinalSubTaskOfTaskList ? COLORS.transparent : isTaskListComplete || isPastSubTask - ? COLORS.blueEnabled - : COLORS.medGreyEnabled + ? COLORS.blue50 + : COLORS.grey30 } marginTop={`-${SPACING.spacing8}`} marginBottom={ @@ -219,7 +213,7 @@ function SubTask({ return ( {description} {footer != null ? ( - + @@ -361,7 +355,7 @@ function Task({ flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing16} backgroundColor={ - isActiveTask && !isTaskOpen ? COLORS.lightBlue : COLORS.white + isActiveTask && !isTaskOpen ? COLORS.blue10 : COLORS.white } border={ isActiveTask && !isTaskOpen @@ -393,8 +387,8 @@ function Task({ {markedBad === true && ( @@ -404,7 +398,7 @@ function Task({ {description} {footer != null ? ( - + - + {t('checking_for_updates')} diff --git a/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx index 2887bee9c69..631551adde6 100644 --- a/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx +++ b/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx @@ -28,7 +28,7 @@ export function CompleteUpdateSoftware({ {t('update_complete')} diff --git a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx index d8028301c7e..38684f9b18a 100644 --- a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx +++ b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx @@ -33,14 +33,14 @@ export function ErrorUpdateSoftware({ > - + {t('software_update_error')} diff --git a/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx b/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx index 912b152b934..2d05b07173e 100644 --- a/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx +++ b/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx @@ -31,7 +31,7 @@ export function NoUpdateFound(props: NoUpdateFoundProps): JSX.Element { > diff --git a/app/src/organisms/UpdateRobotSoftware/UpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/UpdateSoftware.tsx index 58f835fbbf5..69dc7ede5f3 100644 --- a/app/src/organisms/UpdateRobotSoftware/UpdateSoftware.tsx +++ b/app/src/organisms/UpdateRobotSoftware/UpdateSoftware.tsx @@ -43,7 +43,7 @@ export function UpdateSoftware({ return ( {renderText()} diff --git a/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx b/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx index 35023254bdd..170cf9b6d40 100644 --- a/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx +++ b/app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx @@ -21,7 +21,7 @@ describe('UpdateSoftware', () => { const [{ getByText, getByTestId }] = render(props) getByText('Downloading software...') const bar = getByTestId('ProgressBar_Bar') - expect(bar).toHaveStyle(`background: ${String(COLORS.blueEnabled)}`) + expect(bar).toHaveStyle(`background: ${String(COLORS.blue50)}`) expect(bar).toHaveStyle('width: 50%') }) it('should render text and progressbar - sending software', () => { diff --git a/app/src/pages/AppSettings/AdvancedSettings.tsx b/app/src/pages/AppSettings/AdvancedSettings.tsx index 2100d73d3c6..85346b1572b 100644 --- a/app/src/pages/AppSettings/AdvancedSettings.tsx +++ b/app/src/pages/AppSettings/AdvancedSettings.tsx @@ -211,7 +211,7 @@ export function AdvancedSettings(): JSX.Element { @@ -275,7 +275,7 @@ export function AdvancedSettings(): JSX.Element { {t('additional_folder_location')} @@ -284,7 +284,7 @@ export function AdvancedSettings(): JSX.Element { dispatch(CustomLabware.openCustomLabwareDirectory()) } @@ -435,7 +435,7 @@ export function AdvancedSettings(): JSX.Element { {t('override_path')} @@ -444,7 +444,7 @@ export function AdvancedSettings(): JSX.Element { dispatch(ProtocolAnalysis.openPythonInterpreterDirectory()) } @@ -561,14 +561,14 @@ export function AdvancedSettings(): JSX.Element { {driverOutdated && ( - + {t('usb_to_ethernet_adapter_toast_message')} diff --git a/app/src/pages/AppSettings/GeneralSettings.tsx b/app/src/pages/AppSettings/GeneralSettings.tsx index c92daad5db1..3a164df898c 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 93b787779ab..a516ef93a25 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} ${COLORS.medGreyEnabled}`} + 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 2d48c93b414..f416a65d141 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 1a352d4053d..b31b6ce9fd5 100644 --- a/app/src/pages/ConnectViaUSB/index.tsx +++ b/app/src/pages/ConnectViaUSB/index.tsx @@ -70,7 +70,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 47333226f01..ae445a1d2ac 100644 --- a/app/src/pages/Devices/DeviceDetails/DeviceDetailsComponent.tsx +++ b/app/src/pages/Devices/DeviceDetails/DeviceDetailsComponent.tsx @@ -49,7 +49,7 @@ export function DeviceDetailsComponent({ @@ -239,7 +239,7 @@ function PageContents(props: PageContentsProps): JSX.Element { diff --git a/app/src/pages/EmergencyStop/index.tsx b/app/src/pages/EmergencyStop/index.tsx index 03d6fe2ed0d..ec7e0019913 100644 --- a/app/src/pages/EmergencyStop/index.tsx +++ b/app/src/pages/EmergencyStop/index.tsx @@ -56,9 +56,7 @@ export function EmergencyStop(): JSX.Element { @@ -74,7 +72,7 @@ export function EmergencyStop(): JSX.Element { @@ -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 4f519b6e40f..3a200a78b24 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/InstrumentDetailOverflowMenu.tsx b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx index af5a89e1dd6..5d3aedf9c8c 100644 --- a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx +++ b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx @@ -96,7 +96,7 @@ const InstrumentDetailsOverflowMenu = NiceModal.create( { name="overflow-btn-touchscreen" height="3.75rem" width="3rem" - color={COLORS.darkBlack70} + color={COLORS.grey60} /> @@ -81,11 +81,11 @@ const IconButton = styled('button')` background-color: ${COLORS.white}; &:active { - background-color: ${COLORS.darkBlack20}; + background-color: ${COLORS.grey35}; } &:focus-visible { box-shadow: ${ODD_FOCUS_VISIBLE}; - background-color: ${COLORS.darkBlack20}; + background-color: ${COLORS.grey35}; } &:disabled { background-color: transparent; diff --git a/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx b/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx index f44d75dd1f3..509b8b7639e 100644 --- a/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx +++ b/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx @@ -23,7 +23,7 @@ export const PipetteRecalibrationODDWarning = (): JSX.Element | null => { justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER} borderRadius={BORDERS.borderRadiusSize3} - backgroundColor={COLORS.yellow3} + backgroundColor={COLORS.yellow35} padding={`${SPACING.spacing12} ${SPACING.spacing16}`} height="5.76rem" width="60rem" @@ -31,7 +31,7 @@ export const PipetteRecalibrationODDWarning = (): JSX.Element | null => { - + {t('shared:sort_by')} {t('create_new_def')} diff --git a/app/src/pages/NameRobot/index.tsx b/app/src/pages/NameRobot/index.tsx index 7e778652457..2b65755b8fc 100644 --- a/app/src/pages/NameRobot/index.tsx +++ b/app/src/pages/NameRobot/index.tsx @@ -179,7 +179,7 @@ export function NameRobot(): JSX.Element { } }} > - + @@ -224,7 +224,7 @@ export function NameRobot(): JSX.Element { {t('name_your_robot_description')} @@ -243,7 +243,7 @@ export function NameRobot(): JSX.Element { {t('name_rule_description')} @@ -252,7 +252,7 @@ export function NameRobot(): JSX.Element { {formik.errors.newRobotName} diff --git a/app/src/pages/NetworkSetupMenu/index.tsx b/app/src/pages/NetworkSetupMenu/index.tsx index 38f126305b4..fe245bf22f5 100644 --- a/app/src/pages/NetworkSetupMenu/index.tsx +++ b/app/src/pages/NetworkSetupMenu/index.tsx @@ -57,7 +57,7 @@ export function NetworkSetupMenu(): JSX.Element { {t('choose_network_type')} @@ -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 f64f3471b3f..63177139042 100644 --- a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx +++ b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx @@ -37,7 +37,7 @@ export function DeleteProtocolConfirmationModal({ const modalHeader: ModalHeaderBaseProps = { title: t('delete_this_protocol'), iconName: 'ot-alert', - iconColor: COLORS.yellow2, + iconColor: COLORS.yellow50, } const host = useHost() const queryClient = useQueryClient() @@ -128,11 +128,11 @@ const ProtocolNameText = styled.span` font-weight: ${TYPOGRAPHY.fontWeightBold}; font-size: ${TYPOGRAPHY.fontSize22}; line-height: ${TYPOGRAPHY.lineHeight28}; - color: ${COLORS.darkBlack90}; + color: ${COLORS.grey60}; ` const AdditionalText = styled.span` font-weight: ${TYPOGRAPHY.fontWeightRegular}; font-size: ${TYPOGRAPHY.fontSize22}; line-height: ${TYPOGRAPHY.lineHeight28}; - color: ${COLORS.darkBlack90}; + color: ${COLORS.grey60}; ` diff --git a/app/src/pages/ProtocolDashboard/NoProtocols.tsx b/app/src/pages/ProtocolDashboard/NoProtocols.tsx index a4987026d11..85bc5f7cb52 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 1b824274ac4..ea0d27ba1ef 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 ? '' : COLORS.darkBlack40}; + 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 fca8db7fe72..fa7428b2923 100644 --- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx +++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx @@ -146,15 +146,15 @@ export function ProtocolCard(props: { background-color: ${longpress.isLongPressed ? '' : isFailedAnalysis - ? COLORS.red3Pressed - : COLORS.darkBlack40}; + ? COLORS.red40 + : COLORS.grey50}; } ` return ( {isFailedAnalysis ? ( @@ -204,7 +204,7 @@ export function ProtocolCard(props: { - + {lastRun != null ? formatDistance(new Date(lastRun), new Date(), { addSuffix: true, @@ -213,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 fd11c3e2192..7c0e7219d49 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 4dbebd36b10..6386ad731e4 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 83cf3c87a77..2b7d535255c 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: ${COLORS.light1}; + 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 cd9b247a2af..ab7dddcb6dc 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: ${COLORS.light1}; + background-color: ${COLORS.grey35}; border: 1px ${COLORS.white} solid; height: 4.75rem; ` @@ -77,7 +77,7 @@ export const Labware = (props: { protocolId: string }): JSX.Element => { { { > {definition?.namespace === 'opentrons' ? ( { {i18n.format(liquid.displayName, 'titleCase')} - + {i18n.format(liquid.description, 'titleCase')} @@ -132,7 +132,7 @@ export const Liquids = (props: { protocolId: string }): JSX.Element => { history.push('/protocols')} width="3rem" > - + { {description ?? i18n.format(t('no_summary'), 'capitalize')} @@ -101,7 +89,7 @@ export function CloseButton({ onClose }: CloseButtonProps): JSX.Element { return ( {status !== 'general' && !disabled ? ( @@ -177,7 +177,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 295cd6bcc0b..ae3d6a112f5 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 6bc4fed3a4a..23777645a81 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 d06fe9bb0cf..0cec39929e2 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 98a57a6681c..d1207ec1356 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: ${COLORS.light1}; + background-color: ${COLORS.grey35}; padding: ${SPACING.spacing20} ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadiusSize4}; &:active { - background-color: ${COLORS.darkBlack40}; + background-color: ${COLORS.grey50}; } ` @@ -69,7 +69,7 @@ export function RobotSettingButton({ whiteSpace="nowrap" > {iconName != null ? ( - + ) : null} {settingInfo != null ? ( - + )} diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx index 905f5518943..c022bf29a87 100644 --- a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx +++ b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx @@ -118,7 +118,7 @@ export function RobotSettingsList(props: RobotSettingsListProps): JSX.Element { hug={true} /> ) : null} - + } /> @@ -206,7 +206,7 @@ function FeatureFlags(): JSX.Element { key={flag} width="100%" marginBottom={SPACING.spacing8} - backgroundColor={COLORS.light1} + backgroundColor={COLORS.grey35} padding={`${SPACING.spacing20} ${SPACING.spacing24}`} borderRadius={BORDERS.borderRadiusSize4} display={DISPLAY_FLEX} @@ -223,7 +223,7 @@ function FeatureFlags(): JSX.Element { gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER} > - + @@ -282,9 +282,7 @@ export function RunSummary(): JSX.Element { {headerText} @@ -398,7 +396,7 @@ const ProtocolName = styled.h4` text-align: ${TYPOGRAPHY.textAlignLeft}; font-size: ${TYPOGRAPHY.fontSize28}; line-height: ${TYPOGRAPHY.lineHeight36}; - color: ${COLORS.darkBlack70}; + color: ${COLORS.grey60}; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -416,7 +414,7 @@ const SummaryDatum = styled.div` height: 44px; background: #d6d6d6; border-radius: 4px; - color: ${COLORS.darkBlack90}; + color: ${COLORS.grey60}; font-size: ${TYPOGRAPHY.fontSize22}; line-height: ${TYPOGRAPHY.lineHeight28}; font-weight: ${TYPOGRAPHY.fontWeightRegular}; @@ -429,17 +427,17 @@ const DURATION_TEXT_STYLE = css` ` const RUN_AGAIN_CLICKED_STYLE = css` - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; &:focus { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } &:hover { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } &:focus-visible { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } &:active { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } ` diff --git a/app/src/pages/RunningProtocol/index.tsx b/app/src/pages/RunningProtocol/index.tsx index 48a55430427..d99991c9fb5 100644 --- a/app/src/pages/RunningProtocol/index.tsx +++ b/app/src/pages/RunningProtocol/index.tsx @@ -64,7 +64,7 @@ const Bullet = styled.div` border-radius: 50%; z-index: 2; background: ${(props: BulletProps) => - props.isActive ? COLORS.darkBlack60 : COLORS.darkBlack40}; + 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 4f534b1a0fc..dd374bd1a97 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 f1487c3e1ba..3cfbbaab02a 100644 --- a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx +++ b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx @@ -3,7 +3,8 @@ import * as React from 'react' import { fireEvent } from '@testing-library/react' import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles' import { renderWithProviders } from '../../../testing/utils' -import { COLORS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' +import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants' import { CheckboxField } from '..' @@ -40,7 +41,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(COLORS.darkGreyEnabled)}`) + expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) expect(checkBoxIcon).toHaveStyle( @@ -50,39 +51,27 @@ describe('CheckboxField', () => { expect(checkBoxIcon).toHaveStyleRule('cursor', 'pointer', { modifier: ':hover', }) - expect(checkBoxIcon).toHaveStyleRule( - 'color', - `${String(COLORS.darkGreyHover)}`, - { - modifier: ':hover', - } - ) - expect(checkBoxIcon).toHaveStyleRule( - 'color', - `${String(COLORS.darkGreyPressed)}`, - { - modifier: ':active', - } - ) + expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, { + modifier: ':hover', + }) + expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, { + modifier: ':active', + }) expect(checkBoxIcon).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${String(COLORS.fundamentalsFocus)}`, + `0 0 0 3px ${String(COLORS.blue50)}`, { modifier: ':focus' } ) - expect(checkBoxIcon).toHaveStyleRule( - 'color', - `${String(COLORS.darkGreyPressed)}`, - { - 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') // expect(checkBoxLabel).toHaveStyle('@apply --font-form-default') // expect(checkBoxLabel).toHaveStyle('font-size: 0.75rem') // expect(checkBoxLabel).toHaveStyle('font-weight: 400') - // expect(checkBoxLabel).toHaveStyle(`color: ${COLORS.darkBlackEnabled}`) + // expect(checkBoxLabel).toHaveStyle(`color: ${COLORS.black90}`) // expect(checkBoxLabel).toHaveStyle('display: flex') // expect(checkBoxLabel).toHaveStyle(`align-items: ${ALIGN_CENTER}`) // expect(checkBoxLabel).toHaveStyle('line-height: 1') @@ -105,9 +94,7 @@ describe('CheckboxField', () => { expect(checkBoxFieldBox).toHaveStyle( `font-weight: ${String(TYPOGRAPHY.fontWeightRegular)}` ) - expect(checkBoxFieldBox).toHaveStyle( - `color: ${String(COLORS.darkBlackEnabled)}` - ) + expect(checkBoxFieldBox).toHaveStyle(`color: ${String(COLORS.black90)}`) expect(checkBoxFieldBox).toHaveStyle(`flex: 0 0 auto`) expect(checkBoxFieldBox).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing8}` @@ -124,7 +111,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(COLORS.blueEnabled)}`) + expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue50)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) expect(checkBoxIcon).toHaveStyle( @@ -139,7 +126,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(COLORS.darkGreyEnabled)}`) + 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 0f10c9ec596..d11abd36ea0 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 { SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { Flex, Box } from '../../primitives' import { Icon } from '../../icons' import { ALIGN_CENTER, JUSTIFY_CENTER, SIZE_1 } from '../../styles' @@ -45,7 +46,7 @@ const OUTER_STYLE = css` const INNER_STYLE_VALUE = css` width: ${SPACING.spacing20}; min-width: ${SPACING.spacing20}; - color: ${COLORS.blueEnabled}; + color: ${COLORS.blue50}; display: flex; border-radius: 1px; justify-content: ${JUSTIFY_CENTER}; @@ -53,25 +54,25 @@ const INNER_STYLE_VALUE = css` &:hover { cursor: pointer; - color: ${COLORS.blueHover}; + color: ${COLORS.blue55}; } &:active { - color: ${COLORS.bluePressed}; + color: ${COLORS.blue60}; } &:focus { - box-shadow: 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: 0 0 0 3px ${COLORS.blue50}; } &:disabled { - color: ${COLORS.bluePressed}; + color: ${COLORS.blue60}; } ` const INNER_STYLE_NO_VALUE = css` width: ${SPACING.spacing20}; min-width: ${SPACING.spacing20}; - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; display: flex; border-radius: 1px; justify-content: ${JUSTIFY_CENTER}; @@ -79,26 +80,26 @@ const INNER_STYLE_NO_VALUE = css` &:hover { cursor: pointer; - color: ${COLORS.darkGreyHover}; + color: ${COLORS.grey60}; } &:active { - color: ${COLORS.darkGreyPressed}; + color: ${COLORS.grey60}; } &:focus { - box-shadow: 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: 0 0 0 3px ${COLORS.blue50}; } &:disabled { - color: ${COLORS.darkGreyPressed}; + color: ${COLORS.grey60}; } ` const LABEL_TEXT_STYLE = css` font-size: ${TYPOGRAPHY.fontSizeP}; font-weight: ${TYPOGRAPHY.fontWeightRegular}; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; flex: 0 0 auto; padding: ${SPACING.spacing8} ${SPACING.spacing8}; @@ -126,13 +127,13 @@ export function CheckboxField(props: CheckboxFieldProps): JSX.Element { alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} borderRadius="2px" - backgroundColor={COLORS.darkGreyDisabled} + backgroundColor={COLORS.grey30} size={SIZE_1} > ) : ( diff --git a/components/src/atoms/StepMeter/index.tsx b/components/src/atoms/StepMeter/index.tsx index 1dddf1b1299..14bbf48c6ca 100644 --- a/components/src/atoms/StepMeter/index.tsx +++ b/components/src/atoms/StepMeter/index.tsx @@ -1,7 +1,8 @@ import * as React from 'react' import { css } from 'styled-components' import { Box } from '../../primitives' -import { COLORS, RESPONSIVENESS, SPACING } from '../../ui-style-constants' +import { RESPONSIVENESS, SPACING } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles' interface StepMeterProps { @@ -22,7 +23,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => { const StepMeterContainer = css` position: ${POSITION_RELATIVE}; height: ${SPACING.spacing4}; - background-color: ${COLORS.medGreyEnabled}; + background-color: ${COLORS.grey30}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { height: ${SPACING.spacing12}; } @@ -31,7 +32,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => { position: ${POSITION_ABSOLUTE}; top: 0; height: 100%; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; width: ${percentComplete}; webkit-transition: width 0.5s ease-in-out; moz-transition: width 0.5s ease-in-out; diff --git a/components/src/atoms/buttons/AlertPrimaryButton.tsx b/components/src/atoms/buttons/AlertPrimaryButton.tsx index 143f13ca391..4fd8f2ec845 100644 --- a/components/src/atoms/buttons/AlertPrimaryButton.tsx +++ b/components/src/atoms/buttons/AlertPrimaryButton.tsx @@ -1,9 +1,10 @@ import styled from 'styled-components' -import { COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants' +import { BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { NewAlertPrimaryBtn, styleProps } from '../../primitives' export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)` - background-color: ${COLORS.errorEnabled}; + background-color: ${COLORS.red50}; border-radius: ${BORDERS.radiusSoftCorners}; padding-left: ${SPACING.spacing16}; padding-right: ${SPACING.spacing16}; @@ -18,7 +19,7 @@ export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)` } &:disabled { - background-color: ${COLORS.darkGreyDisabled}; - color: ${COLORS.errorDisabled}; + background-color: ${COLORS.grey30}; + color: ${COLORS.grey40}; } ` diff --git a/components/src/atoms/buttons/PrimaryButton.tsx b/components/src/atoms/buttons/PrimaryButton.tsx index 2ddd9df94d3..8005b021930 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, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants' +import { BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { NewPrimaryBtn, styleProps } from '../../primitives' export const PrimaryButton = styled(NewPrimaryBtn)` - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; border-radius: ${BORDERS.radiusSoftCorners}; box-shadow: none; padding-left: ${SPACING.spacing16}; @@ -16,20 +17,20 @@ export const PrimaryButton = styled(NewPrimaryBtn)` &:hover, &:focus { - background-color: ${COLORS.blueHover}; + background-color: ${COLORS.blue55}; box-shadow: none; } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.warningEnabled}; + box-shadow: 0 0 0 3px ${COLORS.yellow50}; } &:active { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } &:disabled { - background-color: ${COLORS.darkGreyDisabled}; - color: ${COLORS.errorDisabled}; + background-color: ${COLORS.grey30}; + color: ${COLORS.grey40}; } ` diff --git a/components/src/atoms/buttons/SecondaryButton.tsx b/components/src/atoms/buttons/SecondaryButton.tsx index 5f071aa117e..06c065bcdb6 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 { COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants' +import { 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 { @@ -13,11 +13,9 @@ export const SecondaryButton = styled.button.withConfig({ })` appearance: none; cursor: pointer; - color: ${props => - props.isDangerous ? COLORS.errorText : COLORS.blueEnabled}; + color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue50)}; border: ${BORDERS.lineBorder}; - border-color: ${props => - props.isDangerous ? COLORS.errorEnabled : 'initial'}; + border-color: ${props => (props.isDangerous ? COLORS.red50 : 'initial')}; border-radius: ${BORDERS.radiusSoftCorners}; padding: ${SPACING.spacing8} ${SPACING.spacing16}; text-transform: ${TYPOGRAPHY.textTransformNone}; @@ -35,7 +33,7 @@ export const SecondaryButton = styled.button.withConfig({ } &:focus-visible { - box-shadow: 0 0 0 3px ${COLORS.fundamentalsFocus}; + box-shadow: 0 0 0 3px ${COLORS.blue50}; } &:active { diff --git a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx index 30c56f0e936..c3d909c6eb4 100644 --- a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx @@ -1,12 +1,8 @@ import 'jest-styled-components' import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' -import { - COLORS, - BORDERS, - TYPOGRAPHY, - SPACING, -} from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' +import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' import { AlertPrimaryButton } from '../AlertPrimaryButton' @@ -26,7 +22,7 @@ describe('AlertPrimaryButton', () => { it('renders alert primary button with text', () => { const { getByText } = render(props) const button = getByText('alert primary button') - expect(button).toHaveStyle(`background-color: ${COLORS.errorEnabled}`) + expect(button).toHaveStyle(`background-color: ${COLORS.red50}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}` ) diff --git a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx index 5edc100c259..f1b6b668216 100644 --- a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx @@ -1,12 +1,8 @@ import 'jest-styled-components' import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' -import { - COLORS, - BORDERS, - TYPOGRAPHY, - SPACING, -} from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' +import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' import { PrimaryButton } from '../PrimaryButton' const render = (props: React.ComponentProps) => { @@ -25,7 +21,7 @@ describe('PrimaryButton', () => { it('renders primary button with text', () => { const { getByText } = render(props) const button = getByText('primary button') - expect(button).toHaveStyle(`background-color: ${COLORS.blueEnabled}`) + expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}` ) @@ -45,14 +41,14 @@ describe('PrimaryButton', () => { const { getByText } = render(props) const button = getByText('primary button') expect(button).toBeDisabled() - expect(button).toHaveStyle(`background-color: ${COLORS.darkGreyDisabled}`) - expect(button).toHaveStyle(`color: ${COLORS.errorDisabled}`) + expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`) + expect(button).toHaveStyle(`color: ${COLORS.grey40}`) }) it('applies the correct states to the button - focus', () => { const { getByText } = render(props) const button = getByText('primary button') - expect(button).toHaveStyleRule('background-color', `${COLORS.blueHover}`, { + expect(button).toHaveStyleRule('background-color', `${COLORS.blue55}`, { modifier: ':focus', }) }) @@ -60,7 +56,7 @@ describe('PrimaryButton', () => { it('applies the correct states to the button - hover', () => { const { getByText } = render(props) const button = getByText('primary button') - expect(button).toHaveStyleRule('background-color', `${COLORS.blueHover}`, { + expect(button).toHaveStyleRule('background-color', `${COLORS.blue55}`, { modifier: ':hover', }) }) @@ -68,13 +64,9 @@ describe('PrimaryButton', () => { it('applies the correct states to the button - active', () => { const { getByText } = render(props) const button = getByText('primary button') - expect(button).toHaveStyleRule( - 'background-color', - `${COLORS.bluePressed}`, - { - modifier: ':active', - } - ) + expect(button).toHaveStyleRule('background-color', `${COLORS.blue60}`, { + modifier: ':active', + }) }) it('applies the correct states to the button - focus-visible', () => { @@ -82,7 +74,7 @@ describe('PrimaryButton', () => { const button = getByText('primary button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${COLORS.warningEnabled}`, + `0 0 0 3px ${COLORS.yellow50}`, { modifier: ':focus-visible', } @@ -90,10 +82,10 @@ describe('PrimaryButton', () => { }) it('renders primary button with text and different background color', () => { - props.backgroundColor = COLORS.errorEnabled + props.backgroundColor = COLORS.red50 const { getByText } = render(props) const button = getByText('primary button') - expect(button).toHaveStyle(`background-color: ${COLORS.errorEnabled}`) + expect(button).toHaveStyle(`background-color: ${COLORS.red50}`) expect(button).toHaveStyle(`color: ${COLORS.white}`) }) }) diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx index babf1ded4db..2c455bb2477 100644 --- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx @@ -1,12 +1,8 @@ import 'jest-styled-components' import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' -import { - COLORS, - BORDERS, - TYPOGRAPHY, - SPACING, -} from '../../../ui-style-constants' +import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import { SecondaryButton } from '../SecondaryButton' @@ -37,7 +33,7 @@ describe('SecondaryButton', () => { expect(button).toHaveStyle( `text-transform: ${TYPOGRAPHY.textTransformNone}` ) - expect(button).toHaveStyle(`color: ${COLORS.blueEnabled}`) + expect(button).toHaveStyle(`color: ${COLORS.blue50}`) }) it('renders secondary button with text and disabled', () => { @@ -64,7 +60,7 @@ describe('SecondaryButton', () => { const button = getByText('secondary button') expect(button).toHaveStyleRule( 'box-shadow', - `0 0 0 3px ${COLORS.warningEnabled}`, + `0 0 0 3px ${COLORS.yellow50}`, { modifier: ':focus-visible', } @@ -72,9 +68,9 @@ describe('SecondaryButton', () => { }) it('renders secondary button with text and different background color', () => { - props.color = COLORS.errorEnabled + props.color = COLORS.red50 const { getByText } = render(props) const button = getByText('secondary button') - expect(button).toHaveStyle(`color: ${COLORS.errorEnabled}`) + expect(button).toHaveStyle(`color: ${COLORS.red50}`) }) }) diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx index 6030da22221..15172afbd9d 100644 --- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx +++ b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx @@ -22,7 +22,7 @@ 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 { COLORS } from '../../helix-design-system' import { Svg } from '../../primitives' import { SingleSlotFixture } from './SingleSlotFixture' @@ -84,9 +84,9 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { robotType, modulesOnDeck = [], labwareOnDeck = [], - lightFill = COLORS.light1, - mediumFill = COLORS.grey2, - darkFill = COLORS.darkBlack70, + lightFill = COLORS.grey35, + mediumFill = COLORS.grey50, + darkFill = COLORS.grey60, deckLayerBlocklist = [], deckConfig, showExpansion = true, @@ -141,7 +141,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { {showSlotLabels ? ( 0 || wasteChuteStagingAreaFixtures.length > 0 diff --git a/components/src/hardware-sim/BaseDeck/SlotClip.tsx b/components/src/hardware-sim/BaseDeck/SlotClip.tsx index 2a500641113..cd17d13c735 100644 --- a/components/src/hardware-sim/BaseDeck/SlotClip.tsx +++ b/components/src/hardware-sim/BaseDeck/SlotClip.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { COLORS } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' export function SlotClip(props: React.SVGProps): JSX.Element { return ( handleClickAdd(fixtureLocation)} > - + ) @@ -66,26 +67,26 @@ const EMPTY_CONFIG_STYLE = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; justify-content: ${JUSTIFY_CENTER}; - background-color: ${COLORS.mediumBlueEnabled}; - border: 3px dashed ${COLORS.blueEnabled}; + background-color: ${COLORS.blue35}; + border: 3px dashed ${COLORS.blue50}; border-radius: ${BORDERS.radiusSoftCorners}; width: 100%; &:active { - border: 3px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.mediumBluePressed}; + border: 3px solid ${COLORS.blue50}; + background-color: ${COLORS.blue40}; } &:focus { - border: 3px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.mediumBluePressed}; + border: 3px solid ${COLORS.blue50}; + background-color: ${COLORS.blue40}; } &:hover { - background-color: ${COLORS.mediumBluePressed}; + background-color: ${COLORS.blue40}; } &:focus-visible { - border: 3px solid ${COLORS.fundamentalsFocus}; + border: 3px solid ${COLORS.blue50}; } ` diff --git a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx index 5a0478dde6a..ca1bb2e7784 100644 --- a/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/StagingAreaConfigFixture.tsx @@ -4,7 +4,8 @@ import { css } from 'styled-components' import { Icon } from '../../icons' import { Btn, Text } from '../../primitives' import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' -import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { FIXTURE_HEIGHT, @@ -77,7 +78,7 @@ export function StagingAreaConfigFixture( const STAGING_AREA_CONFIG_STYLE_READ_ONLY = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; - background-color: ${COLORS.grey2}; + background-color: ${COLORS.grey50}; border-radius: ${BORDERS.borderRadiusSize1}; color: ${COLORS.white}; grid-gap: ${SPACING.spacing8}; @@ -89,14 +90,14 @@ const STAGING_AREA_CONFIG_STYLE_EDITABLE = css` ${STAGING_AREA_CONFIG_STYLE_READ_ONLY} &:active { - background-color: ${COLORS.darkBlack90}; + background-color: ${COLORS.grey60}; } &:hover { - background-color: ${COLORS.grey1}; + background-color: ${COLORS.grey55}; } &:focus-visible { - border: 3px solid ${COLORS.fundamentalsFocus}; + border: 3px solid ${COLORS.blue50}; } ` diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx index 900cbdf526f..cc6591ba4cd 100644 --- a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx @@ -4,7 +4,8 @@ import { css } from 'styled-components' import { Icon } from '../../icons' import { Btn, Text } from '../../primitives' import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' -import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { FIXTURE_HEIGHT, @@ -82,7 +83,7 @@ export function TrashBinConfigFixture( const TRASH_BIN_CONFIG_STYLE_READ_ONLY = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; - background-color: ${COLORS.grey2}; + background-color: ${COLORS.grey50}; border-radius: ${BORDERS.borderRadiusSize1}; color: ${COLORS.white}; justify-content: ${JUSTIFY_CENTER}; @@ -94,11 +95,11 @@ const TRASH_BIN_CONFIG_STYLE_EDTIABLE = css` ${TRASH_BIN_CONFIG_STYLE_READ_ONLY} &:active { - background-color: ${COLORS.darkBlack90}; + background-color: ${COLORS.grey60}; } &:hover { - background-color: ${COLORS.grey1}; + background-color: ${COLORS.grey55}; } &:focus-visible { diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx index 851a2c2bc8c..fc166a181ca 100644 --- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx @@ -4,7 +4,8 @@ import { css } from 'styled-components' import { Icon } from '../../icons' import { Btn, Text } from '../../primitives' import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' -import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { WASTE_CHUTE_DISPLAY_NAME, @@ -86,7 +87,7 @@ export function WasteChuteConfigFixture( const WASTE_CHUTE_CONFIG_STYLE_READ_ONLY = css` display: ${DISPLAY_FLEX}; align-items: ${ALIGN_CENTER}; - background-color: ${COLORS.grey2}; + background-color: ${COLORS.grey50}; border-radius: ${BORDERS.borderRadiusSize1}; color: ${COLORS.white}; justify-content: ${JUSTIFY_CENTER}; @@ -98,14 +99,14 @@ const WASTE_CHUTE_CONFIG_STYLE_EDITABLE = css` ${WASTE_CHUTE_CONFIG_STYLE_READ_ONLY} &:active { - background-color: ${COLORS.darkBlack90}; + background-color: ${COLORS.grey60}; } &:hover { - background-color: ${COLORS.grey1}; + background-color: ${COLORS.grey55}; } &:focus-visible { - border: 3px solid ${COLORS.fundamentalsFocus}; + border: 3px solid ${COLORS.blue50}; } ` diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx index f592b76d489..f4aff0eecf2 100644 --- a/components/src/hardware-sim/DeckConfigurator/index.tsx +++ b/components/src/hardware-sim/DeckConfigurator/index.tsx @@ -10,7 +10,7 @@ import { WASTE_CHUTE_STAGING_AREA_FIXTURES, } from '@opentrons/shared-data' -import { COLORS } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import { SingleSlotFixture } from '../BaseDeck/SingleSlotFixture' import { SlotLabels } from '../Deck' import { RobotCoordinateSpace } from '../RobotCoordinateSpace' @@ -37,8 +37,8 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element { deckConfig, handleClickAdd, handleClickRemove, - lightFill = COLORS.light1, - darkFill = COLORS.darkBlackEnabled, + lightFill = COLORS.grey35, + darkFill = COLORS.black90, readOnly = false, showExpansion = true, children, diff --git a/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx index d84f3fc49d0..8db868edb9f 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/FilledWells.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import map from 'lodash/map' -import { COLORS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import { Well } from './Well' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { CSSProperties } from 'styled-components' @@ -23,7 +23,7 @@ function FilledWellsComponent(props: FilledWellsProps): JSX.Element { wellName={wellName} well={definition.wells[wellName]} fill={color} - stroke={COLORS.black} + stroke={COLORS.black90} strokeWidth="0.6" /> ) diff --git a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx index b0b95390d95..ffd6e85ce55 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { SLOT_RENDER_WIDTH, SLOT_RENDER_HEIGHT } from '@opentrons/shared-data' -import { COLORS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import type { CSSProperties } from 'styled-components' import type { LabwareDefinition2 } from '@opentrons/shared-data' @@ -59,7 +59,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element { borderThickness={1.5 * OUTLINE_THICKNESS_MM} xDimension={dimensions.xDimension} yDimension={dimensions.yDimension} - stroke={COLORS.blueEnabled} + stroke={COLORS.blue50} fill={backgroundFill} rx="4" ry="4" @@ -70,7 +70,7 @@ export function LabwareOutline(props: LabwareOutlineProps): JSX.Element { borderThickness={OUTLINE_THICKNESS_MM} xDimension={dimensions.xDimension} yDimension={dimensions.yDimension} - stroke={stroke ?? (parameters.isTiprack ? '#979797' : COLORS.black)} + stroke={stroke ?? (parameters.isTiprack ? '#979797' : COLORS.black90)} fill={backgroundFill} /> )} diff --git a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx index a609038422c..3f15b3a19c4 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/StaticLabware.tsx @@ -9,7 +9,7 @@ import { Well } from './Well' import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data' import type { WellMouseEvent } from './types' import { STYLE_BY_WELL_CONTENTS } from './StyledWells' -import { COLORS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' export interface StaticLabwareProps { /** Labware definition to render */ @@ -44,7 +44,7 @@ const TipDecoration = React.memo(function TipDecoration(props: { const LabwareDetailGroup = styled.g` fill: none; - stroke: ${COLORS.black}; + stroke: ${COLORS.black90}; stroke-width: 1; ` diff --git a/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx index a4220711c4d..2db4d61da33 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/StrokedWells.tsx @@ -3,7 +3,7 @@ import map from 'lodash/map' import { Well } from './Well' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { CSSProperties } from 'styled-components' -import { COLORS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' export interface StrokedWellProps { definition: LabwareDefinition2 diff --git a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx index ff1a37d7b82..c19b29f4a52 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx @@ -1,8 +1,8 @@ import * as React from 'react' import { Well } from './Well' +import { COLORS } from '../../../helix-design-system' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { WellGroup } from './types' -import { COLORS } from '../../../ui-style-constants' type WellContents = | 'tipPresent' @@ -25,8 +25,8 @@ export const STYLE_BY_WELL_CONTENTS: { } } = { highlightedWell: { - stroke: COLORS.blueEnabled, - fill: `${COLORS.blueEnabled}33`, // 20% opacity + stroke: COLORS.blue50, + fill: `${COLORS.blue50}33`, // 20% opacity strokeWidth: 1, }, disabledWell: { @@ -35,7 +35,7 @@ export const STYLE_BY_WELL_CONTENTS: { strokeWidth: 0.6, }, selectedWell: { - stroke: COLORS.blueEnabled, + stroke: COLORS.blue50, fill: COLORS.transparent, strokeWidth: 1, }, @@ -51,7 +51,7 @@ export const STYLE_BY_WELL_CONTENTS: { }, defaultWell: { fill: COLORS.white, - stroke: COLORS.black, + stroke: COLORS.black90, strokeWidth: 0.6, }, } diff --git a/components/src/hardware-sim/Labware/labwareInternals/Well.tsx b/components/src/hardware-sim/Labware/labwareInternals/Well.tsx index 26fb56fdf66..12c9182465c 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/Well.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/Well.tsx @@ -1,9 +1,10 @@ import * as React from 'react' +import { COLORS } from '../../../helix-design-system' + import type { LabwareWell } from '@opentrons/shared-data' import type { WellMouseEvent } from './types' import type { StyleProps } from '../../../primitives' -import { COLORS } from '../../../ui-style-constants' export const INTERACTIVE_WELL_DATA_ATTRIBUTE = 'data-wellname' export interface WellProps extends StyleProps { @@ -23,7 +24,7 @@ export function WellComponent(props: WellProps): JSX.Element { const { well, wellName, - stroke = COLORS.black, + stroke = COLORS.black90, strokeWidth = 1, fill = COLORS.white, onMouseEnterWell, diff --git a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx index e2f2446eb6f..f3f044f04bd 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import { C_BLACK, C_BLUE } from '../../../styles/colors' import { RobotCoordsText } from '../../Deck' import { WellLabelOption, WELL_LABEL_OPTIONS } from '../LabwareRender' +import { COLORS } from '../../../helix-design-system' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { HighlightedWellLabels } from './types' -import { COLORS } from '../../../ui-style-constants' // 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: COLORS.darkGrey, // 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/hardware-sim/Module/HeaterShaker.tsx b/components/src/hardware-sim/Module/HeaterShaker.tsx index d40bc37f493..698ee042f86 100644 --- a/components/src/hardware-sim/Module/HeaterShaker.tsx +++ b/components/src/hardware-sim/Module/HeaterShaker.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { COLORS } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' export interface HeaterShakerVizProps { targetTemp: number | null @@ -9,7 +9,7 @@ export interface HeaterShakerVizProps { export function HeaterShaker(props: HeaterShakerVizProps): JSX.Element { const { targetTemp } = props let ledLightColor: string = COLORS.white - if (targetTemp != null) ledLightColor = COLORS.red4 + if (targetTemp != null) ledLightColor = COLORS.red30 return ( diff --git a/components/src/hardware-sim/Module/MagneticBlock.tsx b/components/src/hardware-sim/Module/MagneticBlock.tsx index bd8fa375c1e..87134b796ca 100644 --- a/components/src/hardware-sim/Module/MagneticBlock.tsx +++ b/components/src/hardware-sim/Module/MagneticBlock.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { COLORS } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' export function MagneticBlock(): JSX.Element { return ( @@ -8,7 +8,7 @@ export function MagneticBlock(): JSX.Element { diff --git a/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN1.tsx b/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN1.tsx index b9950d7b8c7..8b2282cde38 100644 --- a/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN1.tsx +++ b/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN1.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { COLORS } from '../../../ui-style-constants' - +import { COLORS } from '../../../helix-design-system' interface ThermocyclerGEN1Props { lidMotorState: 'open' | 'closed' ledLightColor: string @@ -23,7 +22,7 @@ export function ThermocyclerGEN1(props: ThermocyclerGEN1Props): JSX.Element { diff --git a/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN2.tsx b/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN2.tsx index dad53b87981..5218428ee09 100644 --- a/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN2.tsx +++ b/components/src/hardware-sim/Module/Thermocycler/ThermocyclerGEN2.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { COLORS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' interface ThermocyclerGEN2Props { lidMotorState: 'open' | 'closed' @@ -65,7 +65,7 @@ function ClosedThermocyclerGEN2Layers(props: { > diff --git a/components/src/hardware-sim/Module/Thermocycler/index.tsx b/components/src/hardware-sim/Module/Thermocycler/index.tsx index b2e2402a667..dde2a21136a 100644 --- a/components/src/hardware-sim/Module/Thermocycler/index.tsx +++ b/components/src/hardware-sim/Module/Thermocycler/index.tsx @@ -7,7 +7,8 @@ import { } from '@opentrons/shared-data' import { C_MED_LIGHT_GRAY } from '../../../styles' -import { COLORS, BORDERS } from '../../../ui-style-constants' +import { BORDERS } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import { RobotCoordsForeignDiv } from '../../Deck' import { ThermocyclerGEN1 } from './ThermocyclerGEN1' @@ -43,9 +44,7 @@ export function Thermocycler(props: ThermocyclerVizProps): JSX.Element { let ledLightColor = COLORS.transparent if (blockTargetTemp != null) { ledLightColor = - blockTargetTemp <= ROOM_TEMPERATURE_C - ? COLORS.mediumBlueEnabled - : COLORS.red4 + blockTargetTemp <= ROOM_TEMPERATURE_C ? COLORS.blue35 : COLORS.red30 } return model === THERMOCYCLER_MODULE_V1 ? ( diff --git a/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx b/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx index 6fec8abd443..a70d7199cc8 100644 --- a/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx +++ b/components/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx @@ -12,7 +12,8 @@ import { ALIGN_FLEX_START, } from '../../styles' import { Box, Flex, Text } from '../../primitives' -import { TYPOGRAPHY, SPACING, COLORS } from '../../ui-style-constants' +import { TYPOGRAPHY, SPACING } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' const labwareDisplayNameStyle = css` overflow: hidden; diff --git a/components/src/helix-design-system/colors.ts b/components/src/helix-design-system/colors.ts new file mode 100644 index 00000000000..4175e1df8da --- /dev/null +++ b/components/src/helix-design-system/colors.ts @@ -0,0 +1,81 @@ +/** + * green + */ +export const green60 = '#03683E' +export const green50 = '#04AA65' +export const green40 = '#91E2C0' +export const green35 = '#AFEDD3' +export const green30 = '#C4F6E0' +export const green20 = '#E8F7ED' + +/** + * red + */ +export const red60 = '#941313' +export const red55 = '#C71A1B' +export const red50 = '#DE1B1B' +export const red40 = '#F5B2B3' +export const red35 = '#F8C8C9' +export const red30 = '#FAD6D6' +export const red20 = '#FCE9E9' + +/** + * yellow + */ +export const yellow60 = '#825512' +export const yellow50 = '#F09D20' +export const yellow40 = '#FCD48B' +export const yellow35 = '#FFE1A4' +export const yellow30 = '#FFE9BE' +export const yellow20 = '#FDF3E2' + +/** + * purple + */ +export const purple60 = '#562566' +export const purple55 = '#713187' +export const purple50 = '#893BA4' +export const purple40 = '#CEA4DF' +export const purple35 = '#DBBCE7' +export const purple30 = '#E6D5EC' +export const purple20 = '#F1E8F5' + +/** + * blue + */ +export const blue60 = '#004196' +export const blue55 = '#0056C8' +export const blue40 = '#A9CEFD' +export const blue35 = '#BFDCFD' +export const blue30 = '#D0E6FE' +export const blue10 = '#F1F8FF' + +/** + * grey + */ +export const grey60 = '#4A4C4E' +export const grey55 = '#737578' +export const grey50 = '#9C9C9C' +export const grey40 = '#D0D0D0' +export const grey35 = '#CBCCCC' +export const grey30 = '#DEDEDE' +export const grey20 = '#ECECEC' +export const grey10 = '#F8F8F8' + +/** + * core + */ +export const black90 = '#16212D' +export const black80 = '#24313F' +export const black70 = '#39495B' +export const white = '#FFFFFF' +export const blue50 = '#006CFA' + +/** + * extras + */ +export const transparent = 'transparent' +// opacity hex codes to append to 6-digit color hex codes +export const opacity20HexCode = '33' // 20% opacity +export const opacity40HexCode = '66' // 40% opacity +export const opacity60HexCode = '99' // 60% opacity diff --git a/components/src/helix-design-system/index.ts b/components/src/helix-design-system/index.ts new file mode 100644 index 00000000000..2240f640245 --- /dev/null +++ b/components/src/helix-design-system/index.ts @@ -0,0 +1 @@ +export * as COLORS from './colors' diff --git a/components/src/hooks/useSelectDeckLocation/index.tsx b/components/src/hooks/useSelectDeckLocation/index.tsx index 8023355b1e6..7bd9f9d974f 100644 --- a/components/src/hooks/useSelectDeckLocation/index.tsx +++ b/components/src/hooks/useSelectDeckLocation/index.tsx @@ -23,7 +23,8 @@ import { import { Icon } from '../../icons' import { Text } from '../../primitives' import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles' -import { COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import type { DeckDefinition, @@ -108,16 +109,10 @@ export function DeckLocationSelect({ typeof l === 'object' && 'slotName' in l && l.slotName === slot.id ) const isSelected = isEqual(selectedLocation, slotLocation) - let fill = - theme === 'default' - ? COLORS.highlightPurple2 - : COLORS.lightGreyPressed + let fill = theme === 'default' ? COLORS.purple35 : COLORS.grey35 if (isSelected) - fill = - theme === 'default' - ? COLORS.highlightPurple1 - : COLORS.darkGreyEnabled - if (isDisabled) fill = COLORS.darkGreyDisabled + fill = theme === 'default' ? COLORS.purple50 : COLORS.grey50 + if (isDisabled) fill = COLORS.grey30 if (isSelected && slot.id === 'B1' && isThermocycler) { return ( @@ -224,7 +219,7 @@ export function DeckLocationSelect({ layerBlocklist={OT2_DECK_LOCATION_SELECT_LAYER_BLOCK_LIST} /> ) : null} - + ) } diff --git a/components/src/icons/IconList.stories.tsx b/components/src/icons/IconList.stories.tsx index 7e4b3bda085..d92aca2c8e2 100644 --- a/components/src/icons/IconList.stories.tsx +++ b/components/src/icons/IconList.stories.tsx @@ -81,8 +81,8 @@ const Template: Story> = args => { onClick={() => handleCopy(name, index)} border={ selectedIcon === name - ? `2px solid ${COLORS.blueEnabled}` - : `2px solid ${COLORS.darkBlackEnabled}` + ? `2px solid ${COLORS.blue50}` + : `2px solid ${COLORS.black90}` } > @@ -94,9 +94,7 @@ const Template: Story> = args => { {name} - {showText ? ( - {'copied'} - ) : null} + {showText ? {'copied'} : null} ))} @@ -105,5 +103,5 @@ const Template: Story> = args => { } export const IconList = Template.bind({}) IconList.args = { - backgroundColor: COLORS.blueEnabled, + backgroundColor: COLORS.blue50, } diff --git a/components/src/index.ts b/components/src/index.ts index fdfd146ed70..7fe4930699e 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -27,6 +27,11 @@ export * from './tooltips' export * from './styles' // new ui-overhaul style vars export * from './ui-style-constants' +// helix design system +export * from './helix-design-system' + +// helix design system +export * from './helix-design-system' // Pure Types export * from './robot-types' diff --git a/components/src/modals/BaseModal.tsx b/components/src/modals/BaseModal.tsx index 6e309b45484..65fb9eacf58 100644 --- a/components/src/modals/BaseModal.tsx +++ b/components/src/modals/BaseModal.tsx @@ -2,9 +2,10 @@ import * as React from 'react' import * as Styles from '../styles' import { Box, Flex } from '../primitives' -import { COLORS, SPACING } from '../ui-style-constants' -import type { StyleProps } from '../primitives' +import { SPACING } from '../ui-style-constants' +import { COLORS } from '../helix-design-system' import { POSITION_FIXED } from '../styles' +import type { StyleProps } from '../primitives' const BASE_STYLE = { position: Styles.POSITION_ABSOLUTE, @@ -73,7 +74,7 @@ export interface BaseModalProps extends StyleProps { */ export function BaseModal(props: BaseModalProps): JSX.Element { const { - overlayColor = COLORS.backgroundOverlay, + overlayColor = `${COLORS.black90}${COLORS.opacity40HexCode}`, onOutsideClick, zIndex = 10, header, diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx index 0eb80cfa074..6488db16b24 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 { BORDERS, RESPONSIVENESS, SPACING } from '../ui-style-constants' +import { COLORS } from '../helix-design-system' import { StyleProps, styleProps } from '../primitives' import { POSITION_FIXED, @@ -77,11 +78,11 @@ const Overlay = styled.div` top: 0; bottom: 0; z-index: 1; - background-color: ${COLORS.backgroundOverlay}; + background-color: ${COLORS.black90}${COLORS.opacity40HexCode}; cursor: default; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - background-color: ${COLORS.darkBlack60}; + background-color: ${COLORS.grey50}; } ` const ContentArea = styled.div<{ zIndex: string | number }>` diff --git a/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx b/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx index 785304a7c96..62ad919e747 100644 --- a/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx +++ b/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' -import { BORDERS, COLORS, SPACING } from '../../../ui-style-constants' +import { BORDERS, SPACING } from '../../../ui-style-constants' +import { COLORS } from '../../../helix-design-system' import { LocationIcon } from '..' @@ -24,7 +25,7 @@ describe('LocationIcon', () => { expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing4} 0.375rem`) expect(locationIcon).toHaveStyle('height: 2rem') expect(locationIcon).toHaveStyle('width: max-content') - expect(locationIcon).toHaveStyle(`border: 2px solid ${COLORS.darkBlack100}`) + expect(locationIcon).toHaveStyle(`border: 2px solid ${COLORS.black90}`) expect(locationIcon).toHaveStyle( `border-radius: ${BORDERS.borderRadiusSize3}` ) diff --git a/components/src/molecules/LocationIcon/index.tsx b/components/src/molecules/LocationIcon/index.tsx index 4bb33b3ca34..f2279600fe2 100644 --- a/components/src/molecules/LocationIcon/index.tsx +++ b/components/src/molecules/LocationIcon/index.tsx @@ -4,7 +4,8 @@ import { css } from 'styled-components' import { Icon } from '../../icons' import { Flex, Text } from '../../primitives' import { ALIGN_CENTER } from '../../styles' -import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { COLORS } from '../../helix-design-system' import type { IconName } from '../../icons' import type { StyleProps } from '../../primitives' @@ -31,7 +32,7 @@ const LOCATION_ICON_STYLE = css<{ width?: string }>` align-items: ${ALIGN_CENTER}; - border: 2px solid ${props => props.color ?? COLORS.darkBlack100}; + border: 2px solid ${props => props.color ?? COLORS.black90}; border-radius: ${BORDERS.borderRadiusSize3}; height: ${props => props.height ?? SPACING.spacing32}; width: ${props => props.width ?? 'max-content'}; @@ -63,7 +64,7 @@ export function LocationIcon({ ) : ( diff --git a/components/src/molecules/RoundTab.tsx b/components/src/molecules/RoundTab.tsx index 613253cdb39..5525a34ea3c 100644 --- a/components/src/molecules/RoundTab.tsx +++ b/components/src/molecules/RoundTab.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { css } from 'styled-components' -import { TYPOGRAPHY, BORDERS, SPACING, COLORS } from '../ui-style-constants' +import { TYPOGRAPHY, BORDERS, SPACING } from '../ui-style-constants' +import { COLORS } from '../helix-design-system' import { POSITION_RELATIVE, POSITION_ABSOLUTE, @@ -20,11 +21,11 @@ const defaultTabStyle = css` ` const inactiveTabStyle = css` - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { - color: ${COLORS.darkGreyEnabled}; - background-color: ${COLORS.fundamentalsBackgroundShade}; + color: ${COLORS.grey50}; + background-color: ${COLORS.grey20}; } ` @@ -34,7 +35,7 @@ const currentTabStyle = css` border-top: ${BORDERS.lineBorder}; border-left: ${BORDERS.lineBorder}; border-right: ${BORDERS.lineBorder}; - color: ${COLORS.blueEnabled}; + color: ${COLORS.blue50}; /* extend below the tab when active to flow into the content */ &:after { diff --git a/components/src/tooltips/Tooltip.tsx b/components/src/tooltips/Tooltip.tsx index b679709fe67..cea7e35ca20 100644 --- a/components/src/tooltips/Tooltip.tsx +++ b/components/src/tooltips/Tooltip.tsx @@ -4,9 +4,9 @@ import { css } from 'styled-components' import { radiusSoftCorners } from '../ui-style-constants/borders' import { fontSizeH4 } from '../ui-style-constants/typography' import { spacing8 } from '../ui-style-constants/spacing' -import { white, darkGreyEnabled } from '../ui-style-constants/colors' import { ARROW_SIZE_PX } from './styles' import { Box } from '../primitives' +import { COLORS } from '../helix-design-system' import type { CSSProperties } from 'react' import type { FlattenSimpleInterpolation } from 'styled-components' @@ -51,7 +51,7 @@ export const Tooltip = React.forwardRef(function TooltipComponent( children, width, fontSize = fontSizeH4, - backgroundColor = darkGreyEnabled, + backgroundColor = COLORS.grey50, ...boxProps } = props @@ -59,7 +59,7 @@ export const Tooltip = React.forwardRef(function TooltipComponent( position: absolute; z-index: 9001; padding: ${spacing8}; - color: ${white}; + color: ${COLORS.white}; filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2)); cursor: pointer; font-size: ${fontSize}; diff --git a/components/src/ui-style-constants/borders.ts b/components/src/ui-style-constants/borders.ts index e39bf052eda..435e2170953 100644 --- a/components/src/ui-style-constants/borders.ts +++ b/components/src/ui-style-constants/borders.ts @@ -1,10 +1,5 @@ import { css } from 'styled-components' -import { - blueEnabled, - medGreyEnabled, - transparent, - medGreyHover, -} from './colors' +import { COLORS } from '../helix-design-system' export const radiusSoftCorners = '4px' export const radiusRoundEdge = '20px' @@ -21,19 +16,19 @@ export const borderRadiusSize6 = '60px' export const tabBorder = css` border-bottom-style: ${styleSolid}; border-bottom-width: 2px; - border-bottom-color: ${blueEnabled}; + border-bottom-color: ${COLORS.blue50}; ` -export const activeLineBorder = `1px ${styleSolid} ${blueEnabled}` -export const lineBorder = `1px ${styleSolid} ${medGreyEnabled}` -export const transparentLineBorder = `1px ${styleSolid} ${transparent}` +export const activeLineBorder = `1px ${styleSolid} ${COLORS.blue50}` +export const lineBorder = `1px ${styleSolid} ${COLORS.grey30}` +export const transparentLineBorder = `1px ${styleSolid} ${COLORS.transparent}` export const cardOutlineBorder = css` border-style: ${styleSolid}; border-width: 1px; - border-color: ${medGreyEnabled}; + border-color: ${COLORS.grey30}; border-radius: ${radiusSoftCorners}; &:hover { - border-color: ${medGreyHover}; + border-color: ${COLORS.grey55}; } ` diff --git a/components/src/ui-style-constants/colors.ts b/components/src/ui-style-constants/colors.ts deleted file mode 100644 index 1cea8822d76..00000000000 --- a/components/src/ui-style-constants/colors.ts +++ /dev/null @@ -1,151 +0,0 @@ -// colors fundamentals -export const white = '#ffffff' -export const fundamentalsBackground = '#f8f8f8' -export const lightBlue = '#f1f8ff' -export const medBlue = '#d9e9fe' -export const fundamentalsFocus = '#f09d20' -export const black = '#000000' -export const fundamentalsBackgroundShade = '#eeeeee' -// note 07/27/2022 kj keep this color to avoid break H/S design -// this will be fixed in the future -export const darkGrey = '#4a4a4a' - -// opacity hex codes to append to 6-digit color hex codes -// taken from table: https://davidwalsh.name/hex-opacity -export const opacity0HexCode = '00' // 0% opacity -export const opacity10HexCode = '1a' // 10% opacity -export const opacity12HexCode = '1f' // 12% opacity -export const opacity15HexCode = '26' // 15% opacity -export const opacity17HexCode = '2b' // 17% opacity -export const opacity20HexCode = '33' // 20% opacity -export const opacity30HexCode = '4d' // 30% opacity -export const opacity35HexCode = '59' // 35% opacity -export const opacity40HexCode = '66' // 40% opacity -export const opacity50HexCode = '80' // 50% opacity -export const opacity55HexCode = '8c' // 55% opacity -export const opacity60HexCode = '99' // 60% opacity -export const opacity70HexCode = 'b3' // 70% opacity -export const opacity90HexCode = 'e6' // 90% opacity - -// colors blue -export const blueEnabled = '#006cfa' -export const blueHover = '#0061e0' -export const bluePressed = '#0050b8' - -// colors black -export const darkBlackEnabled = '#16212d' -export const darkBlackHover = '#24313f' -export const darkBlackSelected = '#39495b' -export const darkBlackLight = '#283d52' - -// colors yellow -export const dandelionYellowEnabled = '#f2b53c' -export const dandelionYellowHover = '#eca20f' -export const dandelionYellowPressed = '#eca20f' - -// colors grey -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 -export const successBackgroundLight = '#f3fffa' -export const successBackgroundMed = '#def4eb' -export const successEnabled = '#04aa65' -export const successText = '#00854d' -export const successDisabled = '#8f8f8f' - -// colors warning -export const warningBackgroundLight = '#fffcf5' -export const warningBackgroundMed = '#fcf0d8' -export const warningEnabled = '#f09d20' -export const warningText = '#7b5b09' -export const warningDisabled = '#8f8f8f' - -// colors error -export const errorBackgroundLight = '#fff3f3' -export const errorBackgroundMed = '#f7e0e0' -export const errorEnabled = '#bf0000' -export const errorHover = '#a30000' -export const errorText = '#850000' -export const errorDisabled = '#8f8f8f' - -// others -export const transparent = 'transparent' -export const backgroundOverlay = `${darkBlackEnabled}${opacity35HexCode}` - -// colors pd liquid -export const electricPurple = '#b925ff' -export const goldenYellow = '#ffd600' -export const aquamarine = '#9dffd8' -export const orangePeel = '#ff9900' -export const skyBlue = '#50d5ff' -export const popPink = '#ff80f5' -export const springGreen = '#7eff42' -export const tartRed = '#ff4f4f' -export const whaleGrey = '#9395a0' - -export const liquidColors = [ - electricPurple, - goldenYellow, - aquamarine, - orangePeel, - skyBlue, - popPink, - springGreen, - tartRed, -] - -// touchscreen light mode colors -export const darkBlack100 = darkBlackEnabled -export const darkBlack90 = `${darkBlackEnabled}${opacity90HexCode}` -export const darkBlack70 = `${darkBlackEnabled}${opacity70HexCode}` -export const darkBlack60 = `${darkBlackEnabled}${opacity60HexCode}` -export const darkBlack40 = `${darkBlackEnabled}${opacity40HexCode}` -export const darkBlack20 = `${darkBlackEnabled}${opacity20HexCode}` - -export const grey1 = '#57575c' -export const grey2 = '#6d6d74' -export const grey3 = '#d0d0d0' -export const grey4 = '#e0e0e0' - -export const light1 = '#d0d0d0' -export const light1Pressed = '#b4b6b8' -export const light2 = '#e0e0e0' - -export const highlightPurple1 = '#9c3ba4' -export const highlightPurple1Pressed = '#883792' -export const highlightPurple2 = '#e7c3e9' -export const highlightPurple2Pressed = '#c8abcd' - -// touchscreen foundational color -export const mediumBlueEnabled = '#b4d4ff' -export const mediumBluePressed = '#9cb9e0' - -// touchscreen communication colors -export const green1 = '#027e23' -export const green2 = '#2ebd55' -export const green3 = '#a1ffbc' -export const green3Pressed = '#8cdea7' -export const green4 = '#baffcd' - -export const yellow1 = '#7a5200' -export const yellow2 = '#ec930f' -export const yellow3 = '#ffe1a4' -export const yellow3Pressed = '#dcc492' -export const yellow4 = '#ffe9be' - -export const red1 = errorText -export const red2 = '#e31e1e' -export const red2Pressed = '#c41e20' -export const red3 = '#fbcdcd' -export const red3Pressed = '#d9b3b5' -export const red4 = '#ffdddd' diff --git a/components/src/ui-style-constants/index.ts b/components/src/ui-style-constants/index.ts index ee2a09868de..b33b88ba25e 100644 --- a/components/src/ui-style-constants/index.ts +++ b/components/src/ui-style-constants/index.ts @@ -1,5 +1,4 @@ export * as BORDERS from './borders' -export * as COLORS from './colors' export * as RESPONSIVENESS from './responsiveness' export * as TYPOGRAPHY from './typography' export * as SPACING from './spacing' diff --git a/components/src/ui-style-constants/typography.ts b/components/src/ui-style-constants/typography.ts index 582e749c1da..7f5e472e936 100644 --- a/components/src/ui-style-constants/typography.ts +++ b/components/src/ui-style-constants/typography.ts @@ -1,5 +1,5 @@ import { css } from 'styled-components' -import { COLORS } from './' +import { COLORS } from '../helix-design-system' // Font Sizes export const fontSize80 = '5rem' // 80px @@ -125,7 +125,7 @@ export const linkPSemiBold = css` font-size: ${fontSizeP}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${COLORS.blueEnabled}; + color: ${COLORS.blue50}; &:hover { opacity: 70%; @@ -233,9 +233,9 @@ export const darkLinkH4SemiBold = css` font-size: ${fontSizeH4}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; } ` @@ -243,9 +243,9 @@ export const darkLinkLabelSemiBold = css` font-size: ${fontSizeLabel}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${COLORS.darkGreyEnabled}; + color: ${COLORS.grey50}; &:hover { - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; } ` @@ -253,6 +253,6 @@ export const darkLinkLabelSemiBoldDisabled = css` font-size: ${fontSizeLabel}; font-weight: ${fontWeightSemiBold}; line-height: ${lineHeight20}; - color: ${COLORS.medGreyHover}; + color: ${COLORS.grey60}; cursor: not-allowed; ` diff --git a/protocol-designer/src/atoms/Slideout.tsx b/protocol-designer/src/atoms/Slideout.tsx index 1f57a3207ae..596691da3c2 100644 --- a/protocol-designer/src/atoms/Slideout.tsx +++ b/protocol-designer/src/atoms/Slideout.tsx @@ -93,10 +93,10 @@ const CLOSE_ICON_STYLE = css` border-radius: 50%; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } ` @@ -191,10 +191,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => { ) : ( <>{title} )} - + setShowColorPicker(false)} /> { props.onChange(color.hex) diff --git a/protocol-designer/src/components/DeckSetup/FlexModuleTag.tsx b/protocol-designer/src/components/DeckSetup/FlexModuleTag.tsx index 9a8ce2920b5..729b8d63145 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: COLORS.darkGreyEnabled, + backgroundColor: COLORS.grey50, padding: SPACING.spacing4, height: '100%', color: COLORS.white, - border: `1px solid ${COLORS.darkGrey}`, + 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 3828b542161..50c190c6dc6 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: ${COLORS.darkBlack90}; + 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 231e6876414..5809ed12b6a 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: COLORS.darkGreyEnabled, + 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 520c9941a9f..8044c838050 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 = COLORS.light1 -const darkFill = COLORS.darkBlack70 +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={COLORS.grey2} + backgroundColor={COLORS.grey50} /> ) : null diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx index 44418c4482e..2ae7cb8a28d 100644 --- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx +++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx @@ -14,8 +14,8 @@ import { Flex, JUSTIFY_END, TYPOGRAPHY, - COLORS, } from '@opentrons/components' +import { DEPRECATED_WHALE_GREY } from '@opentrons/shared-data' import { selectors } from '../../labware-ingred/selectors' import styles from './LiquidEditForm.css' import formStyles from '../forms/forms.css' @@ -48,7 +48,7 @@ function checkColor(hex: string): boolean { return luminance < 0.1 || luminance > 0.9 } -const INVALID_DISPLAY_COLORS = ['#000000', '#ffffff', COLORS.whaleGrey] +const INVALID_DISPLAY_COLORS = ['#000000', '#ffffff', DEPRECATED_WHALE_GREY] export const liquidEditFormSchema: Yup.Schema< { name: string; description: string; serialize: boolean } | undefined, diff --git a/protocol-designer/src/components/OffDeckLabwareSlideout.tsx b/protocol-designer/src/components/OffDeckLabwareSlideout.tsx index 48983d4e417..f16bfbda5aa 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 0acd1df9c28..72d4b5a47a9 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx @@ -50,9 +50,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element { } borderRadius={BORDERS.borderRadiusSize2} cursor={disabled ? 'auto' : 'pointer'} - backgroundColor={ - disabled ? COLORS.darkGreyDisabled : COLORS.transparent - } + backgroundColor={disabled ? COLORS.grey30 : COLORS.transparent} onClick={disabled ? undefined : onClick} {...styleProps} {...targetProps} @@ -62,7 +60,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element { aria-label={`EquipmentOption_${ isSelected ? 'checkbox-marked' : 'checkbox-blank-outline' }`} - color={isSelected ? COLORS.blueEnabled : COLORS.darkGreyEnabled} + color={isSelected ? COLORS.blue50 : COLORS.grey50} size="1.5rem" name={isSelected ? 'checkbox-marked' : 'checkbox-blank-outline'} /> @@ -77,7 +75,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element { {text} diff --git a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx index c1aeaf9bfd5..5e4d67cc8f7 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx @@ -71,7 +71,7 @@ export function InputField(props: InputFieldProps): JSX.Element { lineHeight={1} fontSize={TYPOGRAPHY.fontSizeP} fontWeight={TYPOGRAPHY.fontWeightRegular} - color={props.error != null ? COLOR_WARNING_DARK : COLORS.darkBlackEnabled} + color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90} opacity={props.disabled ?? false ? 0.5 : ''} > @@ -90,8 +90,7 @@ function Input(props: InputFieldProps): JSX.Element { background-color: ${COLORS.white}; border-radius: ${SPACING.spacing4}; padding: ${SPACING.spacing8}; - border: 1px ${BORDERS.styleSolid} - ${error ? COLORS.errorEnabled : COLORS.medGreyEnabled}; + border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.grey30}; font-size: ${TYPOGRAPHY.fontSizeP}; @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { @@ -99,12 +98,12 @@ function Input(props: InputFieldProps): JSX.Element { } &:active { - border: 1px ${BORDERS.styleSolid} ${COLORS.darkGreyEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey50}; } & input { border-radius: inherit; - color: ${COLORS.darkBlackEnabled}; + color: ${COLORS.black90}; border: none; flex: 1 1 auto; width: 100%; @@ -115,14 +114,13 @@ function Input(props: InputFieldProps): JSX.Element { } &:hover { - border: 1px ${BORDERS.styleSolid} - ${error ? COLORS.errorEnabled : COLORS.medGreyHover}; + border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.grey60}; } &:focus { - border: 1px ${BORDERS.styleSolid} ${COLORS.blueEnabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.blue50}; } &:disabled { - border: 1px ${BORDERS.styleSolid} ${COLORS.darkGreyDisabled}; + border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { @@ -145,7 +143,7 @@ function Input(props: InputFieldProps): JSX.Element { display={DISPLAY_INLINE_BLOCK} textAlign={TEXT_ALIGN_RIGHT} alignSelf={ALIGN_CENTER} - color={COLORS.darkGreyEnabled} + color={COLORS.grey50} fontSize={TYPOGRAPHY.fontSizeLabel} > {props.units} @@ -153,7 +151,7 @@ function Input(props: InputFieldProps): JSX.Element { )} {props.secondaryCaption} ) : null} - {props.error} + {props.error} ) diff --git a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx index ee89fcc370a..ad42b71ff67 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx @@ -104,10 +104,10 @@ export function PipetteTipsTile(props: PipetteTipsTileProps): JSX.Element { } const INPUT_STYLE = css` - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; border-radius: ${BORDERS.radiusRoundEdge}; box-shadow: none; - color: ${COLORS.fundamentalsBackground}; + color: ${COLORS.grey10}; overflow: no-wrap; padding-left: ${SPACING.spacing16}; padding-right: ${SPACING.spacing16}; @@ -124,22 +124,22 @@ const INPUT_STYLE = css` } &:hover { - background-color: ${COLORS.blueHover}; + background-color: ${COLORS.blue55}; box-shadow: none; } &:active { - background-color: ${COLORS.bluePressed}; + background-color: ${COLORS.blue60}; } ` const ACCORDION_STYLE = css` border-radius: 50%; &:hover { - background: ${COLORS.lightGreyHover}; + background: ${COLORS.grey30}; } &:active { - background: ${COLORS.lightGreyPressed}; + background: ${COLORS.grey35}; } ` interface PipetteTipsFieldProps extends FormikProps { @@ -275,7 +275,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null { alignItems={ALIGN_CENTER} width="100%" height="8.5rem" - backgroundColor={COLORS.darkBlack20} + backgroundColor={COLORS.grey35} padding={SPACING.spacing8} border={BORDERS.lineBorder} borderRadius={BORDERS.borderRadiusSize2} @@ -283,7 +283,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 f1717984520..8427cea4166 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 ${COLORS.medGreyEnabled}; + border: 1px solid ${COLORS.grey30}; border-radius: ${BORDERS.radiusSoftCorners}; height: 14.5625rem; width: 14.5625rem; @@ -131,14 +131,14 @@ const UNSELECTED_OPTIONS_STYLE = css` grid-gap: ${SPACING.spacing8} &:hover { - border: 1px solid ${COLORS.medGreyHover}; + border: 1px solid ${COLORS.grey60}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { flex-direction: ${DIRECTION_ROW}; justify-content: ${JUSTIFY_FLEX_START}; - background-color: ${COLORS.mediumBlueEnabled}; - border-width: 0; + background-color: ${COLORS.blue35}; + border-width: 0; border-radius: ${BORDERS.borderRadiusSize4}; padding: ${SPACING.spacing24}; height: 5.25rem; @@ -151,22 +151,22 @@ const UNSELECTED_OPTIONS_STYLE = css` ` const SELECTED_OPTIONS_STYLE = css` ${UNSELECTED_OPTIONS_STYLE} - border: 1px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.lightBlue}; + border: 1px solid ${COLORS.blue50}; + background-color: ${COLORS.blue10}; &:hover { - border: 1px solid ${COLORS.blueEnabled}; - background-color: ${COLORS.lightBlue}; + border: 1px solid ${COLORS.blue50}; + background-color: ${COLORS.blue10}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { border-width: 0px; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; color: ${COLORS.white}; &:hover { border-width: 0px; - background-color: ${COLORS.blueEnabled}; + background-color: ${COLORS.blue50}; } } ` diff --git a/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx b/protocol-designer/src/components/modals/CreateFileWizard/WizardHeader.tsx index 307f3961d09..ad7b5413dd3 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: ${COLORS.darkGreyEnabled}; + 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 93c3bed9563..e29a700caab 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx @@ -27,7 +27,7 @@ describe('EquipmentOption', () => { } const { getByLabelText } = render(props) expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle( - `background-color: ${COLORS.darkGreyDisabled}` + `background-color: ${COLORS.grey30}` ) }) it('renders the equipment option without check not selected and image', () => { @@ -41,7 +41,7 @@ describe('EquipmentOption', () => { getByRole('img') expect( getByLabelText('EquipmentOption_checkbox-blank-outline') - ).toHaveStyle(`color: ${COLORS.darkGreyEnabled}`) + ).toHaveStyle(`color: ${COLORS.grey50}`) expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle( `border: ${BORDERS.lineBorder}` ) @@ -55,7 +55,7 @@ describe('EquipmentOption', () => { const { getByText, getByLabelText } = render(props) getByText('mockText') expect(getByLabelText('EquipmentOption_checkbox-marked')).toHaveStyle( - `color: ${COLORS.blueEnabled}` + `color: ${COLORS.blue50}` ) expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle( `border: ${BORDERS.activeLineBorder}` diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/RobotTypeTile.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/RobotTypeTile.test.tsx index 42fb3f01b3c..0eec708c931 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/RobotTypeTile.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/RobotTypeTile.test.tsx @@ -45,7 +45,7 @@ describe('RobotTypeTile', () => { const flex = screen.getByLabelText('RobotTypeTile_OT-3 Standard') fireEvent.click(flex) expect(props.setFieldValue).toHaveBeenCalled() - expect(flex).toHaveStyle(`background-color: ${COLORS.lightBlue}`) + expect(flex).toHaveStyle(`background-color: ${COLORS.blue10}`) const ot2 = screen.getByLabelText('RobotTypeTile_OT-2 Standard') fireEvent.click(ot2) expect(props.setFieldValue).toHaveBeenCalled() diff --git a/protocol-designer/src/components/modules/FlexSlotMap.tsx b/protocol-designer/src/components/modules/FlexSlotMap.tsx index dcabe5df72d..d03e068bd52 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) => { diff --git a/protocol-designer/src/components/swatchColors.ts b/protocol-designer/src/components/swatchColors.ts index eb1945cf129..c400566f8e3 100644 --- a/protocol-designer/src/components/swatchColors.ts +++ b/protocol-designer/src/components/swatchColors.ts @@ -1,6 +1,8 @@ import { AIR } from '@opentrons/step-generation' import { COLORS } from '@opentrons/components' -export const MIXED_WELL_COLOR = '#9b9b9b' // NOTE: matches `--c-med-gray` in COLORS.liquidColors.css +import { DEFAULT_LIQUID_COLORS } from '@opentrons/shared-data' + +export const MIXED_WELL_COLOR = COLORS.grey50 export const swatchColors = (ingredGroupId: string): string => { const num = Number(ingredGroupId) @@ -15,5 +17,5 @@ export const swatchColors = (ingredGroupId: string): string => { return 'transparent' } - return COLORS.liquidColors[num % COLORS.liquidColors.length] + return DEFAULT_LIQUID_COLORS[num % DEFAULT_LIQUID_COLORS.length] } diff --git a/shared-data/js/constants.ts b/shared-data/js/constants.ts index 79abaf266fc..a37fb3ee638 100644 --- a/shared-data/js/constants.ts +++ b/shared-data/js/constants.ts @@ -382,3 +382,24 @@ export const WASTE_CHUTE_STAGING_AREA_FIXTURES: CutoutFixtureId[] = [ ] export const LOW_VOLUME_PIPETTES = ['p50_single_flex', 'p50_multi_flex'] + +// default hex values for liquid colors +const electricPurple = '#b925ff' +const goldenYellow = '#ffd600' +const aquamarine = '#9dffd8' +const orangePeel = '#ff9900' +const skyBlue = '#50d5ff' +const popPink = '#ff80f5' +const springGreen = '#7eff42' +const tartRed = '#ff4f4f' +export const DEFAULT_LIQUID_COLORS = [ + electricPurple, + goldenYellow, + aquamarine, + orangePeel, + skyBlue, + popPink, + springGreen, + tartRed, +] +export const DEPRECATED_WHALE_GREY = '#9395a0'