diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx
index fd933205f0e2..85a7bc39d7a3 100644
--- a/app/src/App/DesktopApp.tsx
+++ b/app/src/App/DesktopApp.tsx
@@ -119,7 +119,7 @@ export const DesktopApp = (): JSX.Element => {
position={POSITION_RELATIVE}
width="100%"
height="100%"
- backgroundColor={COLORS.grey35}
+ backgroundColor={COLORS.grey10}
overflow={OVERFLOW_AUTO}
>
diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
index c72d39f3fb6b..66df24d2e59c 100644
--- a/app/src/App/Navbar.tsx
+++ b/app/src/App/Navbar.tsx
@@ -63,14 +63,14 @@ const NavbarLink = styled(NavLink)`
`
const NavIconLink = styled(NavLink)`
&.active > svg {
- color: ${COLORS.grey35};
- background-color: ${COLORS.darkBlackSelected};
+ color: ${COLORS.grey30};
+ background-color: ${COLORS.black70};
}
`
const IconLink = styled(Link)`
&.active > svg {
- color: ${COLORS.grey35};
- background-color: ${COLORS.darkBlackSelected};
+ color: ${COLORS.grey30};
+ background-color: ${COLORS.black70};
}
`
@@ -79,7 +79,7 @@ const NavbarIcon = styled(Icon)`
height: ${SIZE_2};
padding: ${SPACING.spacing6};
border-radius: 50%;
- color: ${COLORS.grey35};
+ color: ${COLORS.grey30};
background-color: ${COLORS.transparent};
&:hover {
@@ -93,13 +93,13 @@ const NavbarIcon = styled(Icon)`
}
&:active {
- color: ${COLORS.grey35};
- background-color: ${COLORS.darkBlackEnabled};
+ color: ${COLORS.grey30};
+ background-color: ${COLORS.black90};
}
&.active {
- color: ${COLORS.grey35};
- background-color: ${COLORS.darkBlackSelected};
+ color: ${COLORS.grey30};
+ background-color: ${COLORS.black70};
}
`
diff --git a/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx b/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx
index da7f396ede84..f985048cd137 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/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
index 6856b6963659..2a8c133eeff7 100644
--- a/app/src/DesignTokens/Spacing/Spacing.stories.tsx
+++ b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
@@ -51,7 +51,7 @@ const Template: Story = args => {
))}
diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx
index bdcefc72085a..0f8428064c89 100644
--- a/app/src/atoms/Banner/index.tsx
+++ b/app/src/atoms/Banner/index.tsx
@@ -10,6 +10,7 @@ import {
Icon,
IconProps,
JUSTIFY_SPACE_BETWEEN,
+ LEGACY_COLORS,
RESPONSIVENESS,
SIZE_1,
SPACING,
@@ -64,13 +65,13 @@ const BANNER_PROPS_BY_TYPE: Record<
},
updating: {
icon: { name: 'ot-spinner' },
- backgroundColor: COLORS.grey50Disabled,
- color: COLORS.grey50Enabled,
+ backgroundColor: COLORS.grey30,
+ color: COLORS.grey50,
},
informing: {
icon: { name: 'information' },
- backgroundColor: COLORS.grey35,
- color: COLORS.grey50Enabled,
+ backgroundColor: COLORS.grey10,
+ color: COLORS.grey50,
},
}
diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
index 33b76ab8d257..65ee6c35dbd2 100644
--- a/app/src/atoms/Chip/__tests__/Chip.test.tsx
+++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -19,7 +19,7 @@ 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(chip).toHaveStyle(`background-color: ${COLORS.grey35}`)
expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
expect(queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
})
@@ -94,7 +94,7 @@ 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.grey35}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
const icon = getByLabelText('icon_mockNeutral')
diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
index b8d32d20c779..f16c53fba240 100644
--- a/app/src/atoms/Chip/index.tsx
+++ b/app/src/atoms/Chip/index.tsx
@@ -39,7 +39,7 @@ const CHIP_PROPS_BY_TYPE: Record<
}
> = {
basic: {
- backgroundColor: COLORS.darkBlack20,
+ backgroundColor: COLORS.grey35,
borderRadius: BORDERS.borderRadiusSize1,
textColor: COLORS.grey60,
},
@@ -50,7 +50,7 @@ const CHIP_PROPS_BY_TYPE: Record<
textColor: COLORS.red1,
},
neutral: {
- backgroundColor: COLORS.darkBlack20,
+ backgroundColor: COLORS.grey35,
borderRadius: BORDERS.borderRadiusSize5,
iconColor: COLORS.grey60,
textColor: COLORS.grey60,
diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
index 83db35bc5cdd..4180af7998bf 100644
--- a/app/src/atoms/InlineNotification/index.tsx
+++ b/app/src/atoms/InlineNotification/index.tsx
@@ -47,7 +47,7 @@ const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
neutral: {
icon: { name: 'information' },
backgroundColor: COLORS.grey35,
- color: COLORS.darkBlackEnabled,
+ color: COLORS.black90,
},
success: {
icon: { name: 'ot-check' },
diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
index 3edc786c8939..8f6e71b5cf68 100644
--- a/app/src/atoms/InputField/index.tsx
+++ b/app/src/atoms/InputField/index.tsx
@@ -6,6 +6,7 @@ import {
BORDERS,
COLOR_WARNING_DARK,
COLORS,
+ LEGACY_COLORS,
DIRECTION_COLUMN,
DISPLAY_INLINE_BLOCK,
Flex,
@@ -71,7 +72,11 @@ 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
+ : LEGACY_COLORS.darkBlackEnabled
+ }
opacity={props.disabled ?? false ? 0.5 : ''}
>
@@ -86,20 +91,20 @@ function Input(props: InputFieldProps): JSX.Element {
const INPUT_FIELD = css`
display: flex;
- background-color: ${COLORS.white};
+ background-color: ${LEGACY_COLORS.white};
border-radius: ${SPACING.spacing4};
padding: ${SPACING.spacing8};
border: 1px ${BORDERS.styleSolid}
- ${error ? COLORS.errorEnabled : COLORS.grey35};
+ ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey30};
font-size: ${TYPOGRAPHY.fontSizeP};
&:active {
- border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Enabled};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
}
& input {
border-radius: inherit;
- color: ${COLORS.darkBlackEnabled};
+ color: ${LEGACY_COLORS.darkBlackEnabled};
border: none;
flex: 1 1 auto;
width: 100%;
@@ -111,13 +116,13 @@ function Input(props: InputFieldProps): JSX.Element {
&:hover {
border: 1px ${BORDERS.styleSolid}
- ${error ? COLORS.errorEnabled : COLORS.grey55};
+ ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey55};
}
&:focus {
- border: 1px ${BORDERS.styleSolid} ${COLORS.blueEnabled};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
}
&:disabled {
- border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Disabled};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
@@ -134,10 +139,10 @@ function Input(props: InputFieldProps): JSX.Element {
`
const ERROR_TEXT_STYLE = css`
- color: ${COLORS.errorEnabled};
+ color: ${LEGACY_COLORS.errorEnabled};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
font-size: ${TYPOGRAPHY.fontSize22};
- color: ${COLORS.red2};
+ color: ${LEGACY_COLORS.red2};
}
`
@@ -155,7 +160,7 @@ function Input(props: InputFieldProps): JSX.Element {
display={DISPLAY_INLINE_BLOCK}
textAlign={TEXT_ALIGN_RIGHT}
alignSelf={ALIGN_CENTER}
- color={COLORS.grey50Enabled}
+ color={COLORS.grey50}
fontSize={TYPOGRAPHY.fontSizeLabel}
>
{props.units}
@@ -163,7 +168,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 a4bbd1ab0e8b..7f158e2826b3 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 0f17babdf1bc..e5c633c3a1f3 100644
--- a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx
+++ b/app/src/atoms/ListItem/__tests__/ListItem.test.tsx
@@ -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}`
)
diff --git a/app/src/atoms/ListItem/index.tsx b/app/src/atoms/ListItem/index.tsx
index 1ce33bb9cb20..b72e530deda9 100644
--- a/app/src/atoms/ListItem/index.tsx
+++ b/app/src/atoms/ListItem/index.tsx
@@ -21,7 +21,7 @@ const LISTITEM_PROPS_BY_TYPE: Record<
backgroundColor: COLORS.red3,
},
noActive: {
- backgroundColor: COLORS.light1,
+ backgroundColor: COLORS.grey35,
},
success: {
backgroundColor: COLORS.green3,
diff --git a/app/src/atoms/MenuList/MenuItem.tsx b/app/src/atoms/MenuList/MenuItem.tsx
index 15734ef850c4..1730c392b747 100644
--- a/app/src/atoms/MenuList/MenuItem.tsx
+++ b/app/src/atoms/MenuList/MenuItem.tsx
@@ -22,7 +22,7 @@ export const MenuItem = styled.button`
&:hover,
&:active {
- background-color: ${COLORS.lightBlue};
+ background-color: ${COLORS.blue10};
}
&:disabled {
@@ -44,12 +44,12 @@ export const MenuItem = styled.button`
&:hover,
&:active {
background-color: ${({ isAlert }) =>
- isAlert ? COLORS.errorEnabled : COLORS.grey35};
+ isAlert ? LEGACY_COLORS.errorEnabled : COLORS.grey35};
}
&:disabled {
background-color: ${({ isAlert }) =>
- isAlert ? COLORS.errorEnabled : COLORS.transparent};
+ isAlert ? LEGACY_COLORS.errorEnabled : 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 310acf3713b1..d60133802ed8 100644
--- a/app/src/atoms/MenuList/OverflowBtn.tsx
+++ b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import { css } from 'styled-components'
-import { Btn, COLORS, SPACING } from '@opentrons/components'
+import { Btn, COLORS, LEGACY_COLORS, SPACING } from '@opentrons/components'
export const OverflowBtn = React.forwardRef(
(
@@ -14,7 +14,7 @@ export const OverflowBtn = React.forwardRef(
max-height: ${SPACING.spacing32};
&:hover {
- background-color: ${COLORS.grey35};
+ background-color: ${COLORS.grey30};
}
&:hover circle {
fill: ${COLORS.darkBlackEnabled};
@@ -53,7 +53,7 @@ export const OverflowBtn = React.forwardRef(
width="19"
height="31"
viewBox="0 0 19 31"
- fill={COLORS.grey50Enabled}
+ 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 69a052105eb6..b01d9761d17d 100644
--- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
+++ b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
@@ -1,7 +1,11 @@
import 'jest-styled-components'
import * as React from 'react'
import { fireEvent } from '@testing-library/react'
-import { COLORS, renderWithProviders } from '@opentrons/components'
+import {
+ COLORS,
+ LEGACY_COLORS,
+ renderWithProviders,
+} from '@opentrons/components'
import { OverflowBtn } from '../OverflowBtn'
const render = (props: React.ComponentProps) => {
@@ -27,7 +31,7 @@ describe('OverflowBtn', () => {
expect(getByRole('button')).toHaveStyleRule(
'background-color',
- `${String(COLORS.grey35)}`,
+ `${String(COLORS.grey30)}`,
{
modifier: ':hover',
}
diff --git a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx
index 2d7a8ddd44e9..b6909b3fac21 100644
--- a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx
+++ b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx
@@ -5,6 +5,7 @@ import {
DIRECTION_COLUMN,
SPACING,
COLORS,
+ LEGACY_COLORS,
SecondaryButton,
} from '@opentrons/components'
@@ -33,7 +34,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 a02a016d04cc..3f9a299ee373 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,7 +40,7 @@ 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%')
})
@@ -51,8 +51,8 @@ describe('ProgressBar', () => {
`
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: ${LEGACY_COLORS.errorEnabled}`)
expect(bar).toHaveStyle('width: 50%')
})
})
diff --git a/app/src/atoms/ProgressBar/index.tsx b/app/src/atoms/ProgressBar/index.tsx
index 6450d602612d..01054384094a 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 8a21d472883d..45ecffae4b3d 100644
--- a/app/src/atoms/SelectField/Select.tsx
+++ b/app/src/atoms/SelectField/Select.tsx
@@ -4,6 +4,7 @@ import {
BORDERS,
Box,
COLORS,
+ LEGACY_COLORS,
DIRECTION_ROW,
Icon,
POSITION_ABSOLUTE,
@@ -43,7 +44,7 @@ export function Select(props: SelectComponentProps): JSX.Element {
border: BORDERS.lineBorder,
width: props.width != null ? props.width : 'auto',
height: SPACING.spacing16,
- borderColor: COLORS.grey35,
+ borderColor: COLORS.grey30,
boxShadow: 'none',
padding: SPACING.spacing6,
flexDirection: DIRECTION_ROW,
@@ -106,17 +107,15 @@ export function Select(props: SelectComponentProps): JSX.Element {
}),
option: (styles: CSSObjectWithLabel, state: OptionProps) => ({
...styles,
- color: Boolean(state.isDisabled)
- ? COLORS.grey50Disabled
- : COLORS.darkBlackEnabled,
+ color: Boolean(state.isDisabled) ? COLORS.grey30 : COLORS.black90,
backgroundColor: Boolean(state.isSelected)
- ? COLORS.lightBlue
- : COLORS.white,
+ ? COLORS.blue10
+ : LEGACY_COLORS.white,
'&:hover': {
- backgroundColor: COLORS.lightBlue,
+ backgroundColor: COLORS.blue10,
},
'&:active': {
- backgroundColor: COLORS.lightBlue,
+ backgroundColor: COLORS.blue10,
},
}),
placeholder: (styles: CSSObjectWithLabel) => ({
diff --git a/app/src/atoms/Skeleton/index.tsx b/app/src/atoms/Skeleton/index.tsx
index 14a4fc7338fa..d898c7de354e 100644
--- a/app/src/atoms/Skeleton/index.tsx
+++ b/app/src/atoms/Skeleton/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import { css } from 'styled-components'
-import { BORDERS, Box, COLORS } from '@opentrons/components'
+import { BORDERS, Box, COLORS, LEGACY_COLORS } from '@opentrons/components'
interface SkeletonProps {
width: string
@@ -16,9 +16,9 @@ export const Skeleton = (props: SkeletonProps): JSX.Element => {
animation: shimmer 2s infinite linear;
background: linear-gradient(
to right,
- ${COLORS.grey35} 1%,
+ ${COLORS.grey30} 1%,
#e3e3e366 25%,
- ${COLORS.grey35} 40%
+ ${COLORS.grey30} 40%
);
background-size: ${backgroundSize};
width: ${width};
diff --git a/app/src/atoms/Slideout/Slideout.stories.tsx b/app/src/atoms/Slideout/Slideout.stories.tsx
index 5d0823c25774..b09e3c78c01e 100644
--- a/app/src/atoms/Slideout/Slideout.stories.tsx
+++ b/app/src/atoms/Slideout/Slideout.stories.tsx
@@ -26,7 +26,11 @@ const Children = (
>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
marginTop="28rem"
textTransform={TYPOGRAPHY.textTransformNone}
>
diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx
index 43e4b1b49bb4..6fe080c92dc4 100644
--- a/app/src/atoms/Slideout/index.tsx
+++ b/app/src/atoms/Slideout/index.tsx
@@ -99,7 +99,7 @@ const CLOSE_ICON_STYLE = css`
border-radius: 50%;
&:hover {
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
}
&:active {
background: ${COLORS.grey35};
@@ -195,7 +195,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
) : (
<>{title}
)}
-
+
> = args => (
export const Active = Template.bind({})
Active.args = {
status: 'Heating',
+<<<<<<< HEAD
+ backgroundColor: COLORS.blue30
+ iconColor: COLORS.blue50,
+=======
backgroundColor: COLORS.medBlue,
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
pulse: true,
}
export const Holding = Template.bind({})
Holding.args = {
status: 'Holding at target',
+<<<<<<< HEAD
+ backgroundColor: COLORS.blue30
+ iconColor: COLORS.blue50,
+=======
backgroundColor: COLORS.medBlue,
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
pulse: false,
}
export const Idle = Template.bind({})
Idle.args = {
status: 'Idle',
- backgroundColor: COLORS.grey35,
- iconColor: COLORS.grey50Enabled,
+ backgroundColor: COLORS.grey30,
+ iconColor: COLORS.grey50,
pulse: true,
}
diff --git a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
index 230ee7384b93..8bc72828ef69 100644
--- a/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
+++ b/app/src/atoms/StatusLabel/__tests__/StatusLabel.test.tsx
@@ -1,5 +1,10 @@
import * as React from 'react'
-import { C_SKY_BLUE, COLORS, renderWithProviders } from '@opentrons/components'
+import {
+ C_SKY_BLUE,
+ COLORS,
+ LEGACY_COLORS,
+ renderWithProviders,
+} from '@opentrons/components'
import { StatusLabel } from '..'
const render = (props: React.ComponentProps) => {
@@ -13,7 +18,11 @@ describe('StatusLabel', () => {
props = {
status: 'Engaged',
backgroundColor: C_SKY_BLUE,
+<<<<<<< HEAD
+ iconColor: COLORS.blue50,
+=======
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
id: 'engaged_status',
showIcon: true,
}
@@ -26,7 +35,11 @@ describe('StatusLabel', () => {
props = {
status: 'Disengaged',
backgroundColor: C_SKY_BLUE,
+<<<<<<< HEAD
+ iconColor: COLORS.blue50,
+=======
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
const { getByText } = render(props)
expect(getByText('Disengaged')).toHaveStyle('backgroundColor: C_SKY_BLUE')
@@ -35,9 +48,9 @@ describe('StatusLabel', () => {
it('renders an idle status label with a gray background and text', () => {
props = {
status: 'Idle',
- backgroundColor: COLORS.grey35,
+ backgroundColor: COLORS.grey30,
iconColor: COLORS.grey50,
- textColor: COLORS.darkBlackEnabled,
+ textColor: COLORS.black90,
showIcon: false,
}
const { getByText } = render(props)
@@ -49,7 +62,11 @@ describe('StatusLabel', () => {
props = {
status: 'holding at target',
backgroundColor: C_SKY_BLUE,
+<<<<<<< HEAD
+ iconColor: COLORS.blue50,
+=======
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
const { getByText } = render(props)
expect(getByText('Holding at target')).toHaveStyle(
@@ -61,7 +78,11 @@ describe('StatusLabel', () => {
props = {
status: 'cooling',
backgroundColor: C_SKY_BLUE,
+<<<<<<< HEAD
+ iconColor: COLORS.blue50,
+=======
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
const { getByText } = render(props)
expect(getByText('Cooling')).toHaveStyle('backgroundColor: C_SKY_BLUE')
@@ -71,7 +92,11 @@ describe('StatusLabel', () => {
props = {
status: 'heating',
backgroundColor: C_SKY_BLUE,
+<<<<<<< HEAD
+ iconColor: COLORS.blue50,
+=======
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
const { getByText } = render(props)
expect(getByText('Heating')).toHaveStyle('backgroundColor: C_SKY_BLUE')
@@ -81,7 +106,11 @@ describe('StatusLabel', () => {
props = {
status: 'Engaged',
backgroundColor: C_SKY_BLUE,
+<<<<<<< HEAD
+ iconColor: COLORS.blue50,
+=======
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
pulse: true,
}
const { getByTestId } = render(props)
diff --git a/app/src/atoms/StatusLabel/index.tsx b/app/src/atoms/StatusLabel/index.tsx
index e35cbcaac4ca..c65e12f5b23a 100644
--- a/app/src/atoms/StatusLabel/index.tsx
+++ b/app/src/atoms/StatusLabel/index.tsx
@@ -6,7 +6,10 @@ import {
Icon,
ALIGN_CENTER,
BORDERS,
+<<<<<<< HEAD
+=======
COLORS,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
SPACING,
TYPOGRAPHY,
} from '@opentrons/components'
@@ -74,7 +77,11 @@ export const StatusLabel = (props: StatusLabelProps): JSX.Element | null => {
>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
>
{capitalize(status)}
diff --git a/app/src/atoms/StepMeter/index.tsx b/app/src/atoms/StepMeter/index.tsx
index 646447b627b4..de836df292ab 100644
--- a/app/src/atoms/StepMeter/index.tsx
+++ b/app/src/atoms/StepMeter/index.tsx
@@ -3,6 +3,7 @@ import { css } from 'styled-components'
import {
Box,
COLORS,
+ LEGACY_COLORS,
SPACING,
POSITION_RELATIVE,
POSITION_ABSOLUTE,
@@ -27,7 +28,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
const StepMeterContainer = css`
position: ${POSITION_RELATIVE};
height: ${SPACING.spacing4};
- background-color: ${COLORS.grey35};
+ background-color: ${COLORS.grey30};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
height: ${SPACING.spacing12};
}
@@ -44,7 +45,11 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
position: ${POSITION_ABSOLUTE};
top: 0;
height: 100%;
+<<<<<<< HEAD
+ background-color: ${COLORS.blue50};
+=======
background-color: ${COLORS.blueEnabled};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
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 363a05b4c8ed..3c6af41a780c 100644
--- a/app/src/atoms/Toast/index.tsx
+++ b/app/src/atoms/Toast/index.tsx
@@ -234,10 +234,8 @@ export function Toast(props: ToastProps): JSX.Element {
},
[INFO_TOAST]: {
iconName: 'information',
- color: `${showODDStyle ? COLORS.grey50 : COLORS.grey50Enabled}`,
- backgroundColor: `${
- showODDStyle ? COLORS.grey35 : COLORS.grey50Disabled
- }`,
+ color: `${showODDStyle ? COLORS.grey50 : COLORS.grey50}`,
+ backgroundColor: `${showODDStyle ? COLORS.grey30 : COLORS.grey30}`,
},
[SUCCESS_TOAST]: {
iconName: 'ot-check',
diff --git a/app/src/atoms/Tooltip/Tooltip.stories.tsx b/app/src/atoms/Tooltip/Tooltip.stories.tsx
index 47f0edb4d0e2..9509b865f0b5 100644
--- a/app/src/atoms/Tooltip/Tooltip.stories.tsx
+++ b/app/src/atoms/Tooltip/Tooltip.stories.tsx
@@ -4,6 +4,7 @@ import {
JUSTIFY_CENTER,
ALIGN_CENTER,
COLORS,
+ LEGACY_COLORS,
useHoverTooltip,
TOOLTIP_TOP_START,
TOOLTIP_AUTO,
@@ -24,7 +25,7 @@ export default {
alignItems={ALIGN_CENTER}
height={SIZE_4}
width="100%"
- backgroundColor={COLORS.grey35}
+ backgroundColor={COLORS.grey10}
>
diff --git a/app/src/atoms/buttons/FloatingActionButton.tsx b/app/src/atoms/buttons/FloatingActionButton.tsx
index f48fffbdb823..088e5c874bd5 100644
--- a/app/src/atoms/buttons/FloatingActionButton.tsx
+++ b/app/src/atoms/buttons/FloatingActionButton.tsx
@@ -9,6 +9,7 @@ import {
ALIGN_CENTER,
BORDERS,
COLORS,
+ LEGACY_COLORS,
DIRECTION_ROW,
POSITION_FIXED,
SPACING,
@@ -38,14 +39,14 @@ export function FloatingActionButton(
const contentColor = disabled ? COLORS.grey50 : COLORS.white
const FLOATING_ACTION_BUTTON_STYLE = css`
- background-color: ${COLORS.highlightPurple1};
+ background-color: ${COLORS.purple50};
border-radius: ${BORDERS.borderRadiusSize5};
box-shadow: ${BORDERS.shadowBig};
color: ${contentColor};
cursor: default;
&:active {
- background-color: ${COLORS.highlightPurple1Pressed};
+ background-color: ${COLORS.purple55};
}
&:focus-visible {
diff --git a/app/src/atoms/buttons/LargeButton.tsx b/app/src/atoms/buttons/LargeButton.tsx
index 2f2656b07dda..a1d5b684b3d7 100644
--- a/app/src/atoms/buttons/LargeButton.tsx
+++ b/app/src/atoms/buttons/LargeButton.tsx
@@ -3,6 +3,7 @@ import { css } from 'styled-components'
import {
TYPOGRAPHY,
COLORS,
+ LEGACY_COLORS,
SPACING,
BORDERS,
Btn,
@@ -10,6 +11,7 @@ import {
DIRECTION_COLUMN,
JUSTIFY_SPACE_BETWEEN,
DISPLAY_FLEX,
+ COLORS,
} from '@opentrons/components'
import { StyledText } from '../text'
import { ODD_FOCUS_VISIBLE } from './constants'
@@ -43,10 +45,17 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
}
> = {
secondary: {
+<<<<<<< HEAD
+ defaultColor: LEGACY_COLORS.darkBlackEnabled,
+ defaultBackgroundColor: COLORS.blue35,
+ activeBackgroundColor: COLORS.blue40,
+ iconColor: COLORS.blue50,
+=======
defaultColor: COLORS.darkBlackEnabled,
defaultBackgroundColor: COLORS.mediumBlueEnabled,
activeBackgroundColor: COLORS.mediumBluePressed,
iconColor: COLORS.blueEnabled,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
},
alert: {
defaultColor: COLORS.red1,
@@ -55,10 +64,17 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
iconColor: COLORS.red1,
},
primary: {
+<<<<<<< HEAD
+ defaultColor: LEGACY_COLORS.white,
+ defaultBackgroundColor: COLORS.blue50,
+ activeBackgroundColor: COLORS.blue60,
+ iconColor: LEGACY_COLORS.white,
+=======
defaultColor: COLORS.white,
defaultBackgroundColor: COLORS.blueEnabled,
activeBackgroundColor: COLORS.bluePressed,
iconColor: COLORS.white,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
},
}
diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx
index 747b51dc5886..5167ad0e1742 100644
--- a/app/src/atoms/buttons/MediumButton.tsx
+++ b/app/src/atoms/buttons/MediumButton.tsx
@@ -10,6 +10,7 @@ import {
SPACING,
TYPOGRAPHY,
DISPLAY_FLEX,
+ LEGACY_COLORS,
JUSTIFY_CENTER,
} from '@opentrons/components'
import { StyledText } from '../text'
@@ -66,26 +67,27 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
alertSecondary: {
// TODO(ew, 3/22/23): replaces these hex codes with the color constants
activeBackgroundColor: '#ccabac',
- defaultBackgroundColor: COLORS.red3,
- defaultColor: COLORS.red1,
+ defaultBackgroundColor: LEGACY_COLORS.red3,
+ defaultColor: LEGACY_COLORS.red1,
disabledBackgroundColor: COLORS.grey35,
- iconColor: COLORS.red1,
+ iconColor: LEGACY_COLORS.red1,
},
primary: {
// TODO(ew, 3/22/23): replaces these hex codes with the color constants
activeBackgroundColor: '#045dd0',
- defaultBackgroundColor: COLORS.blueEnabled,
+ defaultBackgroundColor: LEGACY_COLORS.blueEnabled,
defaultColor: COLORS.white,
disabledBackgroundColor: COLORS.grey35,
iconColor: COLORS.white,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
},
secondary: {
// TODO(ew, 3/22/23): replaces these hex codes with the color constants
activeBackgroundColor: '#94afd4',
- defaultBackgroundColor: COLORS.mediumBlueEnabled,
- defaultColor: COLORS.darkBlackEnabled,
+ defaultBackgroundColor: LEGACY_COLORS.mediumBlueEnabled,
+ defaultColor: COLORS.black90,
disabledBackgroundColor: COLORS.grey35,
- iconColor: COLORS.blueEnabled,
+ iconColor: LEGACY_COLORS.blueEnabled,
},
tertiaryHigh: {
activeBackgroundColor: COLORS.grey35,
diff --git a/app/src/atoms/buttons/QuaternaryButton.tsx b/app/src/atoms/buttons/QuaternaryButton.tsx
index fd2dbb24e17e..2bf80d4ab924 100644
--- a/app/src/atoms/buttons/QuaternaryButton.tsx
+++ b/app/src/atoms/buttons/QuaternaryButton.tsx
@@ -12,7 +12,11 @@ export const QuaternaryButton = styled(NewSecondaryBtn)`
background-color: ${COLORS.white};
border-radius: ${BORDERS.radiusRoundEdge};
box-shadow: none;
+<<<<<<< HEAD
+ color: ${COLORS.blue50};
+=======
color: ${COLORS.blueEnabled};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
overflow: no-wrap;
padding-left: ${SPACING.spacing16};
padding-right: ${SPACING.spacing16};
diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
index b437dffe5c5b..b363680b5b11 100644
--- a/app/src/atoms/buttons/RadioButton.tsx
+++ b/app/src/atoms/buttons/RadioButton.tsx
@@ -3,8 +3,10 @@ import styled, { css } from 'styled-components'
import {
TYPOGRAPHY,
COLORS,
+ LEGACY_COLORS,
SPACING,
BORDERS,
+ COLORS,
Flex,
RESPONSIVENESS,
} from '@opentrons/components'
@@ -40,19 +42,34 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
`
const AVAILABLE_BUTTON_STYLE = css`
+<<<<<<< HEAD
+ background: ${COLORS.blue35};
+
+ &:active {
+ background-color: ${COLORS.blue40};
+=======
background: ${COLORS.mediumBlueEnabled};
&:active {
background-color: ${COLORS.mediumBluePressed};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
`
const SELECTED_BUTTON_STYLE = css`
+<<<<<<< HEAD
+ background: ${COLORS.blue50};
+ color: ${LEGACY_COLORS.white};
+
+ &:active {
+ background-color: ${COLORS.blue60};
+=======
background: ${COLORS.blueEnabled};
color: ${COLORS.white};
&:active {
background-color: ${COLORS.bluePressed};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
`
diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx
index c3e14f06c5dc..02bbc7428641 100644
--- a/app/src/atoms/buttons/SmallButton.tsx
+++ b/app/src/atoms/buttons/SmallButton.tsx
@@ -3,6 +3,7 @@ import { css } from 'styled-components'
import {
TYPOGRAPHY,
COLORS,
+ LEGACY_COLORS,
SPACING,
BORDERS,
Btn,
@@ -58,38 +59,38 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
}
> = {
secondary: {
- defaultColor: COLORS.darkBlackEnabled,
- defaultBackgroundColor: COLORS.mediumBlueEnabled,
- activeBackgroundColor: COLORS.mediumBluePressed,
+ defaultColor: COLORS.black90,
+ defaultBackgroundColor: LEGACY_COLORS.mediumBlueEnabled,
+ activeBackgroundColor: LEGACY_COLORS.mediumBluePressed,
disabledBackgroundColor: `${COLORS.grey35}`,
disabledColor: `${COLORS.grey50}`,
},
alert: {
defaultColor: COLORS.white,
- defaultBackgroundColor: COLORS.red2,
- activeBackgroundColor: COLORS.red2Pressed,
+ defaultBackgroundColor: LEGACY_COLORS.red2,
+ activeBackgroundColor: LEGACY_COLORS.red2Pressed,
disabledBackgroundColor: `${COLORS.grey35}`,
disabledColor: `${COLORS.grey50}`,
},
primary: {
defaultColor: COLORS.white,
- defaultBackgroundColor: COLORS.blueEnabled,
- activeBackgroundColor: COLORS.bluePressed,
+ defaultBackgroundColor: LEGACY_COLORS.blueEnabled,
+ activeBackgroundColor: LEGACY_COLORS.bluePressed,
disabledBackgroundColor: `${COLORS.grey35}`,
disabledColor: `${COLORS.grey50}`,
},
tertiaryHighLight: {
- defaultColor: COLORS.darkBlackEnabled,
- defaultBackgroundColor: `${COLORS.blueEnabled}${COLORS.opacity0HexCode}`,
+ defaultColor: COLORS.black90,
+ defaultBackgroundColor: `${LEGACY_COLORS.blueEnabled}${LEGACY_COLORS.opacity0HexCode}`,
activeBackgroundColor: `${COLORS.grey35}`,
- disabledBackgroundColor: `${COLORS.blueEnabled}${COLORS.opacity0HexCode}`,
+ disabledBackgroundColor: `${LEGACY_COLORS.blueEnabled}${LEGACY_COLORS.opacity0HexCode}`,
disabledColor: `${COLORS.grey50}`,
},
tertiaryLowLight: {
defaultColor: `${COLORS.grey60}`,
- defaultBackgroundColor: ` ${COLORS.blueEnabled}${COLORS.opacity0HexCode}`,
+ defaultBackgroundColor: ` ${LEGACY_COLORS.blueEnabled}${LEGACY_COLORS.opacity0HexCode}`,
activeBackgroundColor: `${COLORS.grey35}`,
- disabledBackgroundColor: `${COLORS.blueEnabled}${COLORS.opacity0HexCode}`,
+ disabledBackgroundColor: `${LEGACY_COLORS.blueEnabled}${LEGACY_COLORS.opacity0HexCode}`,
disabledColor: `${COLORS.grey50}`,
},
}
diff --git a/app/src/atoms/buttons/SubmitPrimaryButton.tsx b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
index e53f0fd8e395..c460dd85ee2b 100644
--- a/app/src/atoms/buttons/SubmitPrimaryButton.tsx
+++ b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
@@ -3,6 +3,7 @@ import { css } from 'styled-components'
import {
SPACING,
COLORS,
+ LEGACY_COLORS,
BORDERS,
TYPOGRAPHY,
styleProps,
@@ -18,7 +19,11 @@ export const SubmitPrimaryButton = (
props: SubmitPrimaryButtonProps
): JSX.Element => {
const SUBMIT_INPUT_STYLE = css`
+<<<<<<< HEAD
+ background-color: ${COLORS.blue50};
+=======
background-color: ${COLORS.blueEnabled};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
border-radius: ${BORDERS.radiusSoftCorners};
padding: ${SPACING.spacing8} ${SPACING.spacing16};
color: ${COLORS.white};
@@ -33,17 +38,25 @@ export const SubmitPrimaryButton = (
}
&:hover {
+<<<<<<< HEAD
+ background-color: ${COLORS.blue55};
+=======
background-color: ${COLORS.blueHover};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
box-shadow: 0 0 0;
}
&:active {
+<<<<<<< HEAD
+ background-color: ${COLORS.blue60};
+=======
background-color: ${COLORS.bluePressed};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
&:disabled {
- background-color: ${COLORS.grey50Disabled};
- color: ${COLORS.successDisabled};
+ background-color: ${COLORS.grey30};
+ color: ${LEGACY_COLORS.successDisabled};
}
`
return
diff --git a/app/src/atoms/buttons/TabbedButton.tsx b/app/src/atoms/buttons/TabbedButton.tsx
index b9db63b1f022..1b4fccbfc313 100644
--- a/app/src/atoms/buttons/TabbedButton.tsx
+++ b/app/src/atoms/buttons/TabbedButton.tsx
@@ -3,38 +3,39 @@ import {
Btn,
BORDERS,
COLORS,
+ LEGACY_COLORS,
SPACING,
styleProps,
TYPOGRAPHY,
} 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};
+ background-color: ${COLORS.purple35};
color: ${COLORS.darkBlack100};
&:focus,
&:hover {
- background-color: ${COLORS.highlightPurple2};
+ background-color: ${COLORS.purple35};
box-shadow: none;
}
&:active {
- background-color: ${COLORS.highlightPurple2Pressed};
+ background-color: ${COLORS.purple40};
}
`
diff --git a/app/src/atoms/buttons/TertiaryButton.tsx b/app/src/atoms/buttons/TertiaryButton.tsx
index 73bfc55aff75..42fd5732c59e 100644
--- a/app/src/atoms/buttons/TertiaryButton.tsx
+++ b/app/src/atoms/buttons/TertiaryButton.tsx
@@ -3,16 +3,21 @@ import {
NewPrimaryBtn,
SPACING,
COLORS,
+ LEGACY_COLORS,
BORDERS,
TYPOGRAPHY,
styleProps,
} from '@opentrons/components'
export const TertiaryButton = styled(NewPrimaryBtn)`
+<<<<<<< HEAD
+ background-color: ${COLORS.blue50};
+=======
background-color: ${COLORS.blueEnabled};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
border-radius: ${BORDERS.radiusRoundEdge};
box-shadow: none;
- color: ${COLORS.grey35};
+ color: ${COLORS.grey10};
overflow: no-wrap;
padding-left: ${SPACING.spacing16};
padding-right: ${SPACING.spacing16};
@@ -23,12 +28,20 @@ export const TertiaryButton = styled(NewPrimaryBtn)`
${styleProps}
&:hover {
+<<<<<<< HEAD
+ background-color: ${COLORS.blue55};
+=======
background-color: ${COLORS.blueHover};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
box-shadow: none;
}
&:active {
+<<<<<<< HEAD
+ background-color: ${COLORS.blue60};
+=======
background-color: ${COLORS.bluePressed};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
&:focus-visible {
@@ -36,7 +49,7 @@ export const TertiaryButton = styled(NewPrimaryBtn)`
}
&:disabled {
- background-color: ${COLORS.grey50Disabled};
- color: ${COLORS.grey40};
+ background-color: ${COLORS.grey30};
+ color: ${LEGACY_COLORS.errorDisabled};
}
`
diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
index b5684637984a..c609de355923 100644
--- a/app/src/atoms/buttons/ToggleButton.tsx
+++ b/app/src/atoms/buttons/ToggleButton.tsx
@@ -1,12 +1,19 @@
import * as React from 'react'
import { css } from 'styled-components'
-import { Btn, Icon, COLORS, SIZE_1, SIZE_2 } from '@opentrons/components'
+import {
+ Btn,
+ Icon,
+ COLORS,
+ LEGACY_COLORS,
+ SIZE_1,
+ SIZE_2,
+} from '@opentrons/components'
import type { StyleProps } from '@opentrons/components'
const TOGGLE_DISABLED_STYLES = css`
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
color: ${COLORS.grey55};
@@ -17,15 +24,22 @@ const TOGGLE_DISABLED_STYLES = css`
}
&:disabled {
- color: ${COLORS.grey50Disabled};
+ color: ${COLORS.grey30};
}
`
const TOGGLE_ENABLED_STYLES = css`
+<<<<<<< HEAD
+ color: ${COLORS.blue50};
+
+ &:hover {
+ color: ${COLORS.blue55};
+=======
color: ${COLORS.blueEnabled};
&:hover {
color: ${COLORS.blueHover};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
&:focus-visible {
@@ -33,7 +47,7 @@ const TOGGLE_ENABLED_STYLES = css`
}
&:disabled {
- color: ${COLORS.grey50Disabled};
+ color: ${COLORS.grey30};
}
`
diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
index 55e04d8bfeac..f6639b418ab3 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}`)
@@ -59,7 +59,7 @@ describe('FloatingActionButton', () => {
const button = getByRole('button')
expect(button).toHaveStyleRule(
'background-color',
- `${COLORS.highlightPurple1Pressed}`,
+ `${COLORS.purple55}`,
{
modifier: ':active',
}
diff --git a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx
index 058a12886c82..277734816bb9 100644
--- a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx
@@ -22,7 +22,11 @@ describe('LargeButton', () => {
fireEvent.click(screen.getByText('large button'))
expect(props.onClick).toHaveBeenCalled()
expect(screen.getByRole('button')).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${COLORS.blue50}`
+=======
`background-color: ${COLORS.blueEnabled}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
})
it('renders the alert button', () => {
@@ -42,7 +46,11 @@ describe('LargeButton', () => {
}
render(props)
expect(screen.getByRole('button')).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${COLORS.blue35}`
+=======
`background-color: ${COLORS.mediumBlueEnabled}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
})
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 af83fdbb4f5e..68e8921fb790 100644
--- a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
@@ -22,7 +22,11 @@ describe('MediumButton', () => {
fireEvent.click(screen.getByText('Medium button'))
expect(props.onClick).toHaveBeenCalled()
expect(screen.getByRole('button')).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${COLORS.blue50}`
+=======
`background-color: ${COLORS.blueEnabled}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
})
it('renders the alert button', () => {
@@ -42,7 +46,11 @@ describe('MediumButton', () => {
}
render(props)
expect(screen.getByRole('button')).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${COLORS.blue35}`
+=======
`background-color: ${COLORS.mediumBlueEnabled}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
})
it('renders the secondary alert button', () => {
diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
index efea7640e95b..aa1825fe5a22 100644
--- a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
@@ -31,7 +31,11 @@ describe('QuaternaryButton', () => {
`border-radius: ${String(BORDERS.radiusRoundEdge)}`
)
expect(button).toHaveStyle('box-shadow: none')
+<<<<<<< HEAD
+ expect(button).toHaveStyle(`color: ${String(COLORS.blue50)}`)
+=======
expect(button).toHaveStyle(`color: ${String(COLORS.blueEnabled)}`)
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
expect(button).toHaveStyle(
`padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
)
diff --git a/app/src/atoms/buttons/__tests__/RadioButton.test.tsx b/app/src/atoms/buttons/__tests__/RadioButton.test.tsx
index b03dd301c782..f1207b456704 100644
--- a/app/src/atoms/buttons/__tests__/RadioButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/RadioButton.test.tsx
@@ -23,7 +23,11 @@ describe('RadioButton', () => {
}
const { getByRole } = render(props)
const label = getByRole('label')
+<<<<<<< HEAD
+ expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
+=======
expect(label).toHaveStyle(`background-color: ${COLORS.mediumBlueEnabled}`)
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
})
it('renders the large selected button', () => {
@@ -34,7 +38,11 @@ describe('RadioButton', () => {
}
const { getByRole } = render(props)
const label = getByRole('label')
+<<<<<<< HEAD
+ expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
+=======
expect(label).toHaveStyle(`background-color: ${COLORS.blueEnabled}`)
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
})
it('renders the small button', () => {
@@ -44,7 +52,11 @@ describe('RadioButton', () => {
}
const { getByRole } = render(props)
const label = getByRole('label')
+<<<<<<< HEAD
+ expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
+=======
expect(label).toHaveStyle(`background-color: ${COLORS.mediumBlueEnabled}`)
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
})
it('renders the small selected button', () => {
@@ -55,7 +67,11 @@ describe('RadioButton', () => {
}
const { getByRole } = render(props)
const label = getByRole('label')
+<<<<<<< HEAD
+ expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
+=======
expect(label).toHaveStyle(`background-color: ${COLORS.blueEnabled}`)
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
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 1e0d5fdf9f6e..7bca0704c896 100644
--- a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
@@ -22,7 +22,11 @@ describe('SmallButton', () => {
fireEvent.click(screen.getByText('small button'))
expect(props.onClick).toHaveBeenCalled()
expect(screen.getByRole('button')).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${COLORS.blue50}`
+=======
`background-color: ${COLORS.blueEnabled}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
expect(screen.getByRole('button')).toHaveStyle(
`border-radius: ${BORDERS.borderRadiusSize4}`
@@ -45,7 +49,11 @@ describe('SmallButton', () => {
}
render(props)
expect(screen.getByRole('button')).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${COLORS.blue35}`
+=======
`background-color: ${COLORS.mediumBlueEnabled}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
})
it('renders the tertiary high light button', () => {
diff --git a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
index d7fde7270262..415e95a15fd3 100644
--- a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/react'
import {
renderWithProviders,
COLORS,
+ LEGACY_COLORS,
SPACING,
TYPOGRAPHY,
BORDERS,
@@ -33,7 +34,11 @@ describe('SubmitPrimaryButton', () => {
const { getByText } = render(props)
const button = getByText('submit primary button')
expect(button).toHaveStyle(
+<<<<<<< HEAD
+ `background-color: ${String(COLORS.blue50)}`
+=======
`background-color: ${String(COLORS.blueEnabled)}`
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
)
expect(button).toHaveStyle(
`border-radius: ${String(BORDERS.radiusSoftCorners)}`
@@ -63,8 +68,9 @@ describe('SubmitPrimaryButton', () => {
const { getByText } = render(props)
const button = getByText('submit primary button')
expect(button).toBeDisabled()
+ expect(button).toHaveStyle(`background-color: ${String(COLORS.grey30)}`)
expect(button).toHaveStyle(
- `background-color: ${String(COLORS.grey50Disabled)}`
+ `color: ${String(LEGACY_COLORS.successDisabled)}`
)
expect(button).toHaveStyle(`color: ${String(COLORS.successDisabled)}`)
})
@@ -81,7 +87,11 @@ describe('SubmitPrimaryButton', () => {
const button = getByText('submit primary button')
expect(button).toHaveStyleRule(
'background-color',
+<<<<<<< HEAD
+ `${String(COLORS.blue55)}`,
+=======
`${String(COLORS.blueHover)}`,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
{
modifier: ':hover',
}
@@ -96,7 +106,11 @@ describe('SubmitPrimaryButton', () => {
const button = getByText('submit primary button')
expect(button).toHaveStyleRule(
'background-color',
+<<<<<<< HEAD
+ `${String(COLORS.blue60)}`,
+=======
`${String(COLORS.bluePressed)}`,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
{
modifier: ':active',
}
diff --git a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx
index 74e7b169cbd9..055fd0357a7f 100644
--- a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx
@@ -27,7 +27,7 @@ describe('Unselected TabbedButton', () => {
const { getByText } = render(props)
const button = getByText('tabbed button')
expect(button).toHaveStyle(
- `background-color: ${String(COLORS.highlightPurple2)}`
+ `background-color: ${String(COLORS.purple35)}`
)
expect(button).toHaveStyle(
`padding: ${SPACING.spacing16} ${SPACING.spacing24}`
@@ -63,7 +63,7 @@ describe('Unselected TabbedButton', () => {
const button = getByText('tabbed button')
expect(button).toHaveStyleRule(
'background-color',
- `${String(COLORS.highlightPurple2Pressed)}`,
+ `${String(COLORS.purple40)}`,
{
modifier: ':active',
}
@@ -105,7 +105,7 @@ describe('Selected TabbedButton', () => {
const { getByText } = render(props)
const button = getByText('tabbed button')
expect(button).toHaveStyle(
- `background-color: ${String(COLORS.highlightPurple1)}`
+ `background-color: ${String(COLORS.purple50)}`
)
expect(button).toHaveStyle(
`padding: ${SPACING.spacing16} ${SPACING.spacing24}`
@@ -141,7 +141,7 @@ describe('Selected TabbedButton', () => {
const button = getByText('tabbed button')
expect(button).toHaveStyleRule(
'background-color',
- `${String(COLORS.highlightPurple1Pressed)}`,
+ `${String(COLORS.purple55)}`,
{
modifier: ':active',
}
diff --git a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
index 737e94247b94..28012e02c2d2 100644
--- a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
import {
renderWithProviders,
COLORS,
+ LEGACY_COLORS,
SPACING,
TYPOGRAPHY,
BORDERS,
@@ -25,9 +26,13 @@ describe('TertiaryButton', () => {
it('renders tertiary button with text', () => {
const { getByText } = render(props)
const button = getByText('tertiary button')
+<<<<<<< HEAD
+ expect(button).toHaveStyle(`background-color: ${String(COLORS.blue50)}`)
+=======
expect(button).toHaveStyle(
`background-color: ${String(COLORS.blueEnabled)}`
)
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
expect(button).toHaveStyle(
`padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
)
@@ -47,7 +52,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.grey35)}`)
+ expect(button).toHaveStyle(`color: ${String(COLORS.grey10)}`)
})
it('renders tertiary button with text and disabled', () => {
@@ -55,10 +60,8 @@ describe('TertiaryButton', () => {
const { getByText } = render(props)
const button = getByText('tertiary button')
expect(button).toBeDisabled()
- expect(button).toHaveStyle(
- `background-color: ${String(COLORS.grey50Disabled)}`
- )
- expect(button).toHaveStyle(`color: ${String(COLORS.grey40)}`)
+ expect(button).toHaveStyle(`background-color: ${String(COLORS.grey30)}`)
+ expect(button).toHaveStyle(`color: ${String(LEGACY_COLORS.errorDisabled)}`)
})
it('applies the correct states to the button - hover', () => {
@@ -66,7 +69,11 @@ describe('TertiaryButton', () => {
const button = getByText('tertiary button')
expect(button).toHaveStyleRule(
'background-color',
+<<<<<<< HEAD
+ `${String(COLORS.blue55)}`,
+=======
`${String(COLORS.blueHover)}`,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
{
modifier: ':hover',
}
@@ -81,7 +88,11 @@ describe('TertiaryButton', () => {
const button = getByText('tertiary button')
expect(button).toHaveStyleRule(
'background-color',
+<<<<<<< HEAD
+ `${String(COLORS.blue60)}`,
+=======
`${String(COLORS.bluePressed)}`,
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
{
modifier: ':active',
}
@@ -105,8 +116,8 @@ describe('TertiaryButton', () => {
const { getByText } = render(props)
const button = getByText('tertiary button')
expect(button).toHaveStyle(
- `background-color: ${String(COLORS.errorEnabled)}`
+ `background-color: ${String(LEGACY_COLORS.errorEnabled)}`
)
- expect(button).toHaveStyle(`color: ${String(COLORS.grey35)}`)
+ 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 b0ac9f436d09..d3ed5e91fcb8 100644
--- a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -1,7 +1,12 @@
import 'jest-styled-components'
import * as React from 'react'
import { fireEvent } from '@testing-library/react'
-import { renderWithProviders, COLORS, SIZE_2 } from '@opentrons/components'
+import {
+ renderWithProviders,
+ COLORS,
+ LEGACY_COLORS,
+ SIZE_2,
+} from '@opentrons/components'
import { ToggleButton } from '..'
@@ -27,7 +32,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,9 +41,13 @@ 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)}`, {
- modifier: ':hover',
- })
+ expect(button).toHaveStyleRule(
+ 'color',
+ `${String(LEGACY_COLORS.blueHover)}`,
+ {
+ modifier: ':hover',
+ }
+ )
})
it('applies the correct states to the toggle on- focus-visible', () => {
@@ -57,13 +66,9 @@ describe('ToggleButton', () => {
props.disabled = true
const { getByLabelText } = render(props)
const button = getByLabelText('toggle button')
- expect(button).toHaveStyleRule(
- 'color',
- `${String(COLORS.grey50Disabled)}`,
- {
- modifier: ':disabled',
- }
- )
+ expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, {
+ modifier: ':disabled',
+ })
})
it('calls mock function when clicking the toggle button - on', () => {
@@ -77,7 +82,7 @@ describe('ToggleButton', () => {
props.toggledOn = false
const { getByLabelText } = render(props)
const button = getByLabelText('toggle button')
- expect(button).toHaveStyle(`color: ${String(COLORS.grey50Enabled)}`)
+ 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')
@@ -110,13 +115,9 @@ describe('ToggleButton', () => {
props.disabled = true
const { getByLabelText } = render(props)
const button = getByLabelText('toggle button')
- expect(button).toHaveStyleRule(
- 'color',
- `${String(COLORS.grey50Disabled)}`,
- {
- 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/structure/Divider.tsx b/app/src/atoms/structure/Divider.tsx
index 4df87c5d2b79..01c60e2d4c59 100644
--- a/app/src/atoms/structure/Divider.tsx
+++ b/app/src/atoms/structure/Divider.tsx
@@ -1,12 +1,12 @@
import * as React from 'react'
-import { Box, COLORS, SPACING } from '@opentrons/components'
+import { Box, COLORS, LEGACY_COLORS, SPACING } from '@opentrons/components'
type Props = React.ComponentProps
export function Divider(props: Props): JSX.Element {
return (
) => {
@@ -19,7 +24,7 @@ describe('Divider', () => {
const { getByTestId } = render(props)
const divider = getByTestId('divider')
expect(divider).toHaveStyle(
- `borderBottom: 1px solid ${String(COLORS.grey35)}`
+ `borderBottom: 1px solid ${String(COLORS.grey30)}`
)
expect(divider).toHaveStyle('width: 80%')
expect(divider).toHaveStyle(`margin-top: ${SPACING.spacing4}`)
@@ -30,13 +35,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 e3277c02de79..f7279d1e30d0 100644
--- a/app/src/atoms/structure/__tests__/Line.test.tsx
+++ b/app/src/atoms/structure/__tests__/Line.test.tsx
@@ -1,5 +1,10 @@
import * as React from 'react'
-import { renderWithProviders, SPACING, COLORS } from '@opentrons/components'
+import {
+ renderWithProviders,
+ SPACING,
+ COLORS,
+ LEGACY_COLORS,
+} from '@opentrons/components'
import { Line } from '../index'
const render = (props: React.ComponentProps) => {
@@ -19,24 +24,21 @@ describe('Line', () => {
const { getByTestId } = render(props)
const line = getByTestId('line')
expect(line).toHaveStyle('width: 100%')
- expect(line).toHaveStyle(`borderBottom: 1px solid ${String(COLORS.grey35)}`)
+ 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')
- expect(line).toHaveStyle('padding-left: 0.25rem')
expect(line).toHaveStyle('padding-right: 0.25rem')
})
})
diff --git a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
index 53174b54c11b..f9df36aa6259 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 ba91f2df4433..69ddf2946e1d 100644
--- a/app/src/molecules/CardButton/index.tsx
+++ b/app/src/molecules/CardButton/index.tsx
@@ -7,6 +7,7 @@ import {
ALIGN_CENTER,
SPACING,
COLORS,
+ LEGACY_COLORS,
TYPOGRAPHY,
Icon,
Btn,
@@ -27,24 +28,24 @@ 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: ${LEGACY_COLORS.darkBlackEnabled};
}
&: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 {
@@ -83,20 +84,22 @@ export function CardButton(props: CardButtonProps): JSX.Element {
onClick={() => history.push(destinationPath)}
width="100%"
css={CARD_BUTTON_STYLE}
- backgroundColor={disabled ? COLORS.grey35 : COLORS.mediumBlueEnabled}
+ backgroundColor={
+ disabled ? COLORS.grey35 : LEGACY_COLORS.mediumBlueEnabled
+ }
disabled={disabled}
>
{title}
@@ -110,7 +113,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 306d580f4f0d..9dc4a10f242b 100644
--- a/app/src/molecules/CollapsibleSection/index.tsx
+++ b/app/src/molecules/CollapsibleSection/index.tsx
@@ -9,6 +9,7 @@ import {
JUSTIFY_SPACE_BETWEEN,
StyleProps,
COLORS,
+ LEGACY_COLORS,
TYPOGRAPHY,
} from '@opentrons/components'
import { StyledText } from '../../atoms/text'
@@ -16,7 +17,7 @@ import { StyledText } from '../../atoms/text'
const ACCORDION_STYLE = css`
border-radius: 50%;
&:hover {
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
}
&:active {
background: ${COLORS.grey35};
diff --git a/app/src/molecules/GenericWizardTile/index.tsx b/app/src/molecules/GenericWizardTile/index.tsx
index 378d87865c38..930269bc1293 100644
--- a/app/src/molecules/GenericWizardTile/index.tsx
+++ b/app/src/molecules/GenericWizardTile/index.tsx
@@ -40,7 +40,7 @@ const CAPITALIZE_FIRST_LETTER_STYLE = css`
`
const GO_BACK_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
opacity: 70%;
diff --git a/app/src/molecules/InProgressModal/InProgressModal.tsx b/app/src/molecules/InProgressModal/InProgressModal.tsx
index 5b0b53ebee00..8cab57ad88be 100644
--- a/app/src/molecules/InProgressModal/InProgressModal.tsx
+++ b/app/src/molecules/InProgressModal/InProgressModal.tsx
@@ -49,7 +49,7 @@ const MODAL_STYLE = css`
}
`
const SPINNER_STYLE = css`
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
opacity: 100%;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
color: ${COLORS.darkBlackEnabled};
diff --git a/app/src/molecules/InfoMessage/index.tsx b/app/src/molecules/InfoMessage/index.tsx
index fde36811a6e6..c79745bdc3dd 100644
--- a/app/src/molecules/InfoMessage/index.tsx
+++ b/app/src/molecules/InfoMessage/index.tsx
@@ -23,7 +23,7 @@ export interface InfoMessageProps {
export function InfoMessage({ title, body }: InfoMessageProps): JSX.Element {
return (
diff --git a/app/src/molecules/JogControls/ControlContainer.tsx b/app/src/molecules/JogControls/ControlContainer.tsx
index ade493cf2e6f..3e60a319f868 100644
--- a/app/src/molecules/JogControls/ControlContainer.tsx
+++ b/app/src/molecules/JogControls/ControlContainer.tsx
@@ -17,7 +17,7 @@ interface ControlContainerProps extends StyleProps {
}
const CONTROL_CHILDREN_STYLES = css`
- background-color: ${COLORS.grey35};
+ 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 499c14e0db2b..4f1bf08b63c6 100644
--- a/app/src/molecules/JogControls/DirectionControl.tsx
+++ b/app/src/molecules/JogControls/DirectionControl.tsx
@@ -186,13 +186,13 @@ const DEFAULT_BUTTON_STYLE = css`
background-color: ${COLORS.white};
color: ${COLORS.black};
box-shadow: 0 0 0;
- border: 1px ${COLORS.grey35} solid;
+ border: 1px ${COLORS.grey30} solid;
}
&:active {
- background-color: ${COLORS.white};
- color: ${COLORS.blueEnabled};
- border: 1px ${COLORS.blueEnabled} solid;
+ background-color: ${LEGACY_COLORS.white};
+ color: ${COLORS.blue50};
+ border: 1px ${COLORS.blue50} solid;
}
&:disabled {
@@ -203,18 +203,18 @@ const DEFAULT_BUTTON_STYLE = css`
const ACTIVE_BUTTON_STYLE = css`
${DEFAULT_BUTTON_STYLE}
+<<<<<<< HEAD
+ color: ${COLORS.blue50};
+ border: 1px ${COLORS.blue50} solid;
+
+ &:hover {
+ color: ${COLORS.blue60};
+=======
color: ${COLORS.blueEnabled};
border: 1px ${COLORS.blueEnabled} solid;
&:hover {
color: ${COLORS.bluePressed};
- border: 1px ${COLORS.bluePressed} solid;
- }
-`
-
-interface DirectionControlProps {
- planes: Plane[]
- jog: Jog
stepSize: StepSize
initialPlane?: Plane
buttonColor?: string
@@ -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.grey50Enabled};
+ color: ${COLORS.grey50};
background-color: ${COLORS.white};
border: ${BORDERS.lineBorder};
@@ -344,13 +344,13 @@ const ARROW_BUTTON_STYLES = css`
background-color: ${COLORS.white};
color: ${COLORS.grey55};
box-shadow: 0 0 0;
- border: 1px ${COLORS.grey35} solid;
+ border: 1px ${COLORS.grey30} solid;
}
&:active {
background-color: ${COLORS.white};
color: ${COLORS.grey60};
- border: 1px ${COLORS.grey35} solid;
+ border: 1px ${COLORS.grey30} solid;
}
&:focus {
@@ -359,7 +359,7 @@ const ARROW_BUTTON_STYLES = css`
&:disabled {
background-color: ${COLORS.white};
- color: ${COLORS.grey50Disabled};
+ color: ${COLORS.grey30};
}
@media (max-width: 750px) {
@@ -369,13 +369,13 @@ 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.grey40};
- color: ${COLORS.darkBlackHover};
+ color: ${COLORS.black80};
border: 1px ${COLORS.transparent} solid;
}
diff --git a/app/src/molecules/JogControls/StepSizeControl.tsx b/app/src/molecules/JogControls/StepSizeControl.tsx
index 355fc173f2b6..5a3a1c7449e5 100644
--- a/app/src/molecules/JogControls/StepSizeControl.tsx
+++ b/app/src/molecules/JogControls/StepSizeControl.tsx
@@ -60,13 +60,13 @@ const DEFAULT_BUTTON_STYLE = css`
background-color: ${COLORS.white};
color: ${COLORS.black};
box-shadow: 0 0 0;
- border: 1px ${COLORS.grey35} solid;
+ border: 1px ${COLORS.grey30} solid;
}
&:active {
- background-color: ${COLORS.white};
- color: ${COLORS.blueEnabled};
- border: 1px ${COLORS.blueEnabled} solid;
+ background-color: ${LEGACY_COLORS.white};
+ color: ${COLORS.blue50};
+ border: 1px ${COLORS.blue50} solid;
}
&:disabled {
@@ -76,12 +76,12 @@ const DEFAULT_BUTTON_STYLE = css`
`
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`}
diff --git a/app/src/molecules/JogControls/TouchControlButton.tsx b/app/src/molecules/JogControls/TouchControlButton.tsx
index c1490726c5a6..104221723812 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 b10c032e8529..8f63710c94b3 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 6b789e33fc2c..405731f91f98 100644
--- a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx
+++ b/app/src/molecules/LegacyModal/LegacyModalHeader.tsx
@@ -10,6 +10,7 @@ import {
SPACING,
JUSTIFY_CENTER,
COLORS,
+ LEGACY_COLORS,
} from '@opentrons/components'
import { StyledText } from '../../atoms/text'
@@ -33,7 +34,7 @@ const closeIconStyles = css`
width: 1.625rem;
height: 1.625rem;
&:hover {
- background-color: ${COLORS.grey35};
+ background-color: ${COLORS.grey30};
}
&:active {
diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx
index e18fb13f1ab2..55a89a2a6fd1 100644
--- a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx
+++ b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx
@@ -5,6 +5,7 @@ import * as React from 'react'
import {
ALIGN_CENTER,
COLORS,
+ LEGACY_COLORS,
JUSTIFY_CENTER,
renderWithProviders,
SPACING,
@@ -70,7 +71,7 @@ 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.grey35, {
+ expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey30, {
modifier: ':hover',
})
expect(closeIcon).toHaveStyleRule('background-color', COLORS.grey35, {
diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
index 2961a9fca940..5bfa336ea8e5 100644
--- a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
+++ b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
@@ -29,7 +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.grey35)}`)
+ expect(miniCard).toHaveStyle(`border: 1px solid ${String(COLORS.grey30)}`)
expect(miniCard).toHaveStyle(
`border-radius: ${String(BORDERS.radiusSoftCorners)}`
)
@@ -42,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)}`
)
@@ -56,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',
}
diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx
index 43eabe09f02f..1301353e67ca 100644
--- a/app/src/molecules/MiniCard/index.tsx
+++ b/app/src/molecules/MiniCard/index.tsx
@@ -12,7 +12,7 @@ interface MiniCardProps extends StyleProps {
}
const unselectedOptionStyles = css`
background-color: ${COLORS.white};
- border: 1px solid ${COLORS.grey35};
+ border: 1px solid ${COLORS.grey30};
border-radius: ${BORDERS.radiusSoftCorners};
padding: ${SPACING.spacing8};
width: 100%;
@@ -24,12 +24,12 @@ const unselectedOptionStyles = css`
`
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};
}
`
diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
index 90d6d100c229..e5796593b186 100644
--- a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
+++ b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
@@ -55,7 +55,7 @@ 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.grey50Enabled)}`)
+ expect(module).toHaveStyle(`color: ${String(COLORS.grey50)}`)
expect(module).toHaveStyle(`height: ${SPACING.spacing16}`)
expect(module).toHaveStyle(`width: ${SPACING.spacing16}`)
expect(module).toHaveStyle(`margin-left: ${SPACING.spacing2}`)
diff --git a/app/src/molecules/ModuleIcon/index.tsx b/app/src/molecules/ModuleIcon/index.tsx
index 985bb940cd46..1cd55f127eb5 100644
--- a/app/src/molecules/ModuleIcon/index.tsx
+++ b/app/src/molecules/ModuleIcon/index.tsx
@@ -33,7 +33,7 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element {
moduleType={module.moduleType}
size={SPACING.spacing16}
marginX={SPACING.spacing2}
- color={COLORS.grey50Enabled}
+ 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 92acae8c257a..590ede62201f 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.grey50Enabled)}`)
+ 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(`border-bottom-color: ${String(COLORS.blue50)}`)
expect(tab).toHaveStyle(`border-bottom-width: 2px`)
expect(tab).toHaveStyle(
`border-bottom-style: ${String(BORDERS.styleSolid)}`
diff --git a/app/src/molecules/NavTab/index.tsx b/app/src/molecules/NavTab/index.tsx
index f0838235f99b..b3264b36c796 100644
--- a/app/src/molecules/NavTab/index.tsx
+++ b/app/src/molecules/NavTab/index.tsx
@@ -13,7 +13,7 @@ interface NavTabProps {
const StyledNavLink = styled(NavLink)>`
padding: 0 ${SPACING.spacing4} ${SPACING.spacing8};
${TYPOGRAPHY.labelSemiBold}
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&.active {
color: ${COLORS.darkBlackEnabled};
diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
index d1a75dd14af2..1e911888665c 100644
--- a/app/src/molecules/ToggleGroup/useToggleGroup.tsx
+++ b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
@@ -29,14 +29,14 @@ const BUTTON_GROUP_STYLES = css`
}
&:hover {
- background-color: ${COLORS.grey35};
- color: ${COLORS.black};
+ background-color: ${COLORS.grey10};
+ color: ${LEGACY_COLORS.black};
box-shadow: 0 0 0;
}
&.active {
- background-color: ${COLORS.blueEnabled};
- color: ${COLORS.white};
+ background-color: ${COLORS.blue50};
+ color: ${LEGACY_COLORS.white};
}
&:disabled {
@@ -59,17 +59,13 @@ const BUTTON_GROUP_STYLES = css`
const ACTIVE_STYLE = css`
padding-left: ${SPACING.spacing8};
padding-right: ${SPACING.spacing8};
- background-color: ${COLORS.blueEnabled};
- color: ${COLORS.white};
+ background-color: ${COLORS.blue50};
+ color: ${LEGACY_COLORS.white};
pointer-events: none;
-`
-
-const DEFAULT_STYLE = css`
- padding-left: ${SPACING.spacing8};
padding-right: ${SPACING.spacing8};
background-color: ${COLORS.white};
- color: ${COLORS.black};
- border: 1px ${COLORS.grey35} solid;
+ color: ${LEGACY_COLORS.black};
+ 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 12f74f49c573..9ec420741867 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.grey35};
+ 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 ab9f4e26d507..a4d48e2db5c2 100644
--- a/app/src/molecules/WizardHeader/index.tsx
+++ b/app/src/molecules/WizardHeader/index.tsx
@@ -28,7 +28,7 @@ interface WizardHeaderProps {
const EXIT_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
text-transform: ${TYPOGRAPHY.textTransformCapitalize};
- color: ${COLORS.grey50Enabled};
+ 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 e88d67ed6911..97f0caf17275 100644
--- a/app/src/molecules/WizardRequiredEquipmentList/index.tsx
+++ b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
@@ -98,7 +98,7 @@ export function WizardRequiredEquipmentList(
{footer}
@@ -160,7 +160,7 @@ function RequiredEquipmentCard(props: RequiredEquipmentCardProps): JSX.Element {
>
{displayName}
{subtitle != null ? (
-
+
{subtitle}
) : null}
diff --git a/app/src/organisms/AddCustomLabwareSlideout/index.tsx b/app/src/organisms/AddCustomLabwareSlideout/index.tsx
index da7f363c175e..43778af840b1 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 4d4367fb7cc9..671150cba2ce 100644
--- a/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx
+++ b/app/src/organisms/AppSettings/ConnectRobotSlideout.tsx
@@ -105,7 +105,7 @@ export function ConnectRobotSlideout({
{t('searching')}
@@ -118,7 +118,7 @@ export function ConnectRobotSlideout({
<>
{t('discovery_timeout')}
diff --git a/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx b/app/src/organisms/AppSettings/ManualIpHostnameForm.tsx
index 76317f42685b..0c9c7d9ba251 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.grey35};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
height: ${SIZE_2};
font-size: ${TYPOGRAPHY.fontSizeP};
&:active {
- border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Enabled};
+ 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.grey50Disabled};
+ 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.grey35)}`
+ inputForm.style.border = `1px solid ${String(COLORS.grey30)}`
addManualIpAndHostname(ip)
resetForm()
setMostRecentAddition(ip)
diff --git a/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx b/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx
index 02f3a5499da8..e1d1746c5905 100644
--- a/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx
+++ b/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx
@@ -6,6 +6,7 @@ import {
Btn,
Icon,
COLORS,
+ LEGACY_COLORS,
TYPOGRAPHY,
Flex,
JUSTIFY_FLEX_START,
@@ -28,7 +29,7 @@ const CLOSE_ICON_STYLE = css`
border-radius: 50%;
&:hover {
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
}
&:active {
background: ${COLORS.grey35};
@@ -92,7 +93,7 @@ export function ManualIpHostnameItem({
-
+
{t('calibration_on_opentrons_tips_is_important')}
diff --git a/app/src/organisms/CalibrationPanels/LoadingState.tsx b/app/src/organisms/CalibrationPanels/LoadingState.tsx
index e5abf0f6817e..0bc24a1e9bed 100644
--- a/app/src/organisms/CalibrationPanels/LoadingState.tsx
+++ b/app/src/organisms/CalibrationPanels/LoadingState.tsx
@@ -24,7 +24,7 @@ export function LoadingState(props: LoadingStateProps): JSX.Element {
alignItems={ALIGN_CENTER}
minHeight="32rem"
>
-
+
{header != null ? {header} : null}
{body != null ? {body} : null}
diff --git a/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx b/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx
index 51d363126515..01dac649b39c 100644
--- a/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx
+++ b/app/src/organisms/CalibrationPanels/NeedHelpLink.tsx
@@ -23,7 +23,7 @@ export function NeedHelpLink(props: NeedHelpLinkProps): JSX.Element {
return (
{`${mount} MOUNT`}
{pipette != null ? (
diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
index 4fe4eea30c22..1100ad0d6504 100644
--- a/app/src/organisms/ChooseProtocolSlideout/index.tsx
+++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -294,11 +294,11 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
css={css`
${BORDERS.cardOutlineBorder}
&:hover {
- border-color: ${COLORS.grey35};
+ border-color: ${COLORS.grey30};
}
`}
>
-
+
{t('app_settings:searching')}
@@ -193,7 +193,7 @@ export function ChooseRobotSlideout(
name="ot-spinner"
spin
size="1.25rem"
- color={COLORS.grey50Enabled}
+ color={COLORS.grey50}
/>
) : (
@@ -212,7 +212,7 @@ export function ChooseRobotSlideout(
css={css`
${BORDERS.cardOutlineBorder}
&:hover {
- border-color: ${COLORS.grey35};
+ border-color: ${COLORS.grey30};
}
`}
flexDirection={DIRECTION_COLUMN}
@@ -289,7 +289,7 @@ export function ChooseRobotSlideout(
textAlign={TYPOGRAPHY.textAlignCenter}
marginTop={SPACING.spacing24}
>
-
+
{showIdleOnly
? t('unavailable_or_busy_robot_not_listed', {
count: unavailableCount + reducerBusyCount,
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
index 57c6de52a0cf..3b80b1dc57f8 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
@@ -215,7 +215,7 @@ export function AddFixtureModal({
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_SPACE_BETWEEN}
padding={`${SPACING.spacing8} ${SPACING.spacing16}`}
- backgroundColor={COLORS.grey35}
+ backgroundColor={COLORS.grey30}
borderRadius={BORDERS.borderRadiusSize1}
>
@@ -251,7 +251,7 @@ 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;
@@ -264,12 +264,12 @@ const FIXTURE_BUTTON_STYLE = css`
&: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 {
@@ -277,13 +277,13 @@ const FIXTURE_BUTTON_STYLE = css`
}
&:disabled {
- background-color: ${COLORS.light1};
+ background-color: ${COLORS.grey35};
color: ${COLORS.grey50};
}
`
const GO_BACK_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
opacity: 70%;
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
index 83bdfc16ffd2..3c6de071a102 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
@@ -197,7 +197,7 @@ export function DeviceDetailsDeckConfiguration({
fixtureDisplayList.map(fixture => (
{getModuleDisplayName(module.moduleModel)}
diff --git a/app/src/organisms/Devices/HistoricalProtocolRun.tsx b/app/src/organisms/Devices/HistoricalProtocolRun.tsx
index 2d86cce40df1..0b6e5a5c89c8 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 : LEGACY_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 84a48cd42a0a..e57e621c77af 100644
--- a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx
+++ b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx
@@ -189,7 +189,7 @@ function MenuDropdown(props: MenuDropdownProps): JSX.Element {
diff --git a/app/src/organisms/Devices/ModuleInfo.tsx b/app/src/organisms/Devices/ModuleInfo.tsx
index 1a42d2e80b95..0b3d2a053309 100644
--- a/app/src/organisms/Devices/ModuleInfo.tsx
+++ b/app/src/organisms/Devices/ModuleInfo.tsx
@@ -83,7 +83,7 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
/>
{!isAttached ? t('module_not_connected') : t('module_connected')}
@@ -92,13 +92,13 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
) : null}
{getModuleDisplayName(moduleModel)}
{i18n.format(t('current_version'), 'upperCase')}
@@ -73,7 +73,7 @@ export const AboutPipetteSlideout = (
{i18n.format(t('serial_number'), 'upperCase')}
diff --git a/app/src/organisms/Devices/PipetteCard/index.tsx b/app/src/organisms/Devices/PipetteCard/index.tsx
index f41c9b1ca84c..f49c59eff97b 100644
--- a/app/src/organisms/Devices/PipetteCard/index.tsx
+++ b/app/src/organisms/Devices/PipetteCard/index.tsx
@@ -182,7 +182,7 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
}
return (
{
) : null}
{
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 ab5db8a722ce..e3ce77bca661 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx
@@ -252,7 +252,7 @@ export function ProtocolRunSetup({
) : null}
{analysisErrors != null && analysisErrors?.length > 0 ? (
-
+
{t('protocol_analysis_failed')}
) : (
@@ -313,7 +313,7 @@ export function ProtocolRunSetup({
)}
) : (
-
+
{t('loading_data')}
)}
diff --git a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
index 23dff6834ddc..de542573ca29 100644
--- a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
@@ -86,7 +86,7 @@ export function RunFailedModal({
marginTop={SPACING.spacing8}
marginBottom={SPACING.spacing16}
padding={`${SPACING.spacing8} ${SPACING.spacing12}`}
- backgroundColor={COLORS.grey35}
+ backgroundColor={COLORS.grey10}
borderRadius={BORDERS.borderRadiusSize1}
overflowWrap="anywhere"
border={BORDERS.lineBorder}
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx
index 71174f82931d..b7a238db291c 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx
@@ -54,7 +54,7 @@ export function SetupCalibrationItem({
) : null
return (
{label != null && (
)}
-
+
{calibrationDataNotAvailableText ?? subText ?? calibratedText}
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx
index adaf66ad760a..f7a1112fd041 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx
@@ -48,7 +48,7 @@ const OffsetTableHeader = styled('th')`
padding: ${SPACING.spacing4};
`
const OffsetTableRow = styled('tr')`
- background-color: ${COLORS.grey35};
+ 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 ea4404012925..437d38c28f8f 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
@@ -56,7 +56,7 @@ const LabwareRow = styled.div`
grid-template-columns: 1fr 6fr 5.9fr;
border-style: ${BORDERS.styleSolid};
border-width: 1px;
- border-color: ${COLORS.grey35};
+ border-color: ${COLORS.grey30};
border-radius: ${BORDERS.radiusSoftCorners};
padding: ${SPACING.spacing16};
`
@@ -161,7 +161,7 @@ export function LabwareListItem(
extraAttentionText = (
+
{t('heater_shaker_labware_list_view')}
)
@@ -271,7 +271,7 @@ export function LabwareListItem(
{labwareDisplayName}
-
+
{nickName}
@@ -293,7 +293,7 @@ export function LabwareListItem(
{nestedLabwareInfo.nestedLabwareDisplayName}
-
+
{nestedLabwareInfo.nestedLabwareNickName}
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx
index 76cf172d9a0a..bf638d5ee101 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx
@@ -45,7 +45,7 @@ const OffsetTableHeader = styled('th')`
padding: ${SPACING.spacing4};
`
const OffsetTableRow = styled('tr')`
- background-color: ${COLORS.grey35};
+ 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 aec9a605d581..86615f0454be 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx
@@ -99,7 +99,7 @@ export function SetupLabwarePositionCheck(
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx
index 079412e6dd8e..5c5dc73f6d62 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx
@@ -35,8 +35,8 @@ const LIQUID_CARD_STYLE = css`
}
`
const LIQUID_CARD_ODD_STYLE = css`
- border-color: ${COLORS.grey35};
- border: ${SPACING.spacing4} solid ${COLORS.grey35};
+ 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,7 +116,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
{description != null ? description : null}
@@ -207,7 +207,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
>
{displayName}
-
+
{description != null ? description : null}
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx
index 7d600245f52f..7d40afe592c8 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx
@@ -167,7 +167,7 @@ export const LiquidsLabwareDetailsModal = (
@@ -193,7 +193,7 @@ export const LiquidsLabwareDetailsModal = (
{t('slot_number')}
@@ -212,7 +212,7 @@ export const LiquidsLabwareDetailsModal = (
{t('labware_name')}
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
index d92bbf59c171..36d8c74a1419 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
@@ -52,7 +52,7 @@ const HIDE_SCROLLBAR = css`
const LIQUID_BORDER_STYLE = css`
border-style: ${BORDERS.styleSolid};
border-width: 1px;
- border-color: ${COLORS.grey35};
+ border-color: ${COLORS.grey30};
border-radius: ${BORDERS.radiusSoftCorners};
`
@@ -132,7 +132,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element {
css={LIQUID_CARD_STYLE}
padding={SPACING.spacing16}
onClick={handleSetOpenItem}
- backgroundColor={openItem ? COLORS.grey35 : COLORS.white}
+ backgroundColor={openItem ? COLORS.grey10 : COLORS.white}
data-testid="LiquidsListItem_Row"
>
{moduleModel != null
? t('on_adapter_in_mod', {
@@ -311,7 +311,7 @@ export const LiquidsListItemDetails = (
{description != null ? description : null}
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx
index aa22ffd3f989..8290a9d42a4b 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx
@@ -93,7 +93,7 @@ describe('LiquidDetailCard', () => {
getAllByText(nestedTextMatcher('100 µL'))
getAllByText(nestedTextMatcher('total volume'))
expect(getByLabelText('liquidBox_odd')).toHaveStyle(
- `border: ${SPACING.spacing4} solid ${COLORS.grey35}`
+ `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 f8d4f4131ac6..ce9d144b90f9 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
@@ -150,7 +150,7 @@ export const LocationConflictModal = (
>
-
+
{t('deck_conflict')}
@@ -243,7 +247,7 @@ export const LocationConflictModal = (
>
+
{t('no_usb_connection_required')}
)
@@ -383,7 +379,7 @@ export function ModulesListItem({
) : null}
{t('modules')}
@@ -185,7 +185,7 @@ function AttachedInstruments(props: { robotName: string }): JSX.Element {
gridGap={SPACING.spacing4}
minWidth="24rem"
>
-
+
{t('shared:instruments')}
diff --git a/app/src/organisms/Devices/RobotOverview.tsx b/app/src/organisms/Devices/RobotOverview.tsx
index af9d7bc0fbd8..5684a06650c6 100644
--- a/app/src/organisms/Devices/RobotOverview.tsx
+++ b/app/src/organisms/Devices/RobotOverview.tsx
@@ -126,7 +126,7 @@ export function RobotOverview({
>
-
+
{t('characters_max')}
{formik.errors.newRobotName && (
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
index 5a9a46c74a3e..d93d0dbc3389 100644
--- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
+++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
@@ -54,7 +54,7 @@ export function DisplayRobotName({
>
{t('robot_name')}
-
+
{robotName}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx
index 7b8437236816..800185b6117b 100644
--- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx
+++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx
@@ -82,7 +82,7 @@ export function RobotServerVersion({
{t('up_to_date')}
diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
index d6eae815e790..4137633e28c0 100644
--- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
+++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
@@ -37,11 +37,11 @@ const UPDATE_PROGRESS_BAR_STYLE = css`
margin-top: ${SPACING.spacing24};
margin-bottom: ${SPACING.spacing24};
border-radius: ${BORDERS.borderRadiusSize3};
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
width: 17.12rem;
`
const UPDATE_TEXT_STYLE = css`
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
font-size: 0.8rem;
`
const HIDDEN_CSS = css`
diff --git a/app/src/organisms/Devices/RobotStatusHeader.tsx b/app/src/organisms/Devices/RobotStatusHeader.tsx
index 660cc057092b..360af8448b5b 100644
--- a/app/src/organisms/Devices/RobotStatusHeader.tsx
+++ b/app/src/organisms/Devices/RobotStatusHeader.tsx
@@ -153,7 +153,7 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element {
diff --git a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
index 830e1271e562..fcb054e61d1f 100644
--- a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
+++ b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
@@ -186,7 +186,7 @@ export const BeforeBeginning = (
const UNSELECTED_OPTIONS_STYLE = css`
background-color: ${COLORS.white};
- border: 1px solid ${COLORS.grey35};
+ border: 1px solid ${COLORS.grey30};
border-radius: ${BORDERS.radiusSoftCorners};
height: 12.5625rem;
width: 14.5625rem;
@@ -203,7 +203,7 @@ const UNSELECTED_OPTIONS_STYLE = css`
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
flex-direction: ${DIRECTION_ROW};
justify-content: ${JUSTIFY_FLEX_START};
- background-color: ${COLORS.mediumBlueEnabled};
+ background-color: ${COLORS.blue35};
border-width: 0;
border-radius: ${BORDERS.borderRadiusSize4};
padding: ${SPACING.spacing24};
@@ -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};
- color: ${COLORS.white};
+ background-color: ${COLORS.blue50};
+ color: ${LEGACY_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 71d684b26895..566ce5d9040c 100644
--- a/app/src/organisms/DropTipWizard/ChooseLocation.tsx
+++ b/app/src/organisms/DropTipWizard/ChooseLocation.tsx
@@ -171,7 +171,7 @@ const TILE_CONTAINER_STYLE = css`
`
const GO_BACK_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
opacity: 70%;
diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
index 1e5ad85c9408..e04ef1b4f9d0 100644
--- a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
@@ -21,7 +21,7 @@ interface UpdateInProgressModalProps {
}
const OUTER_STYLES = css`
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
width: 100%;
`
diff --git a/app/src/organisms/FirmwareUpdateModal/index.tsx b/app/src/organisms/FirmwareUpdateModal/index.tsx
index a58dd9f4bbe7..4032dddb628b 100644
--- a/app/src/organisms/FirmwareUpdateModal/index.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/index.tsx
@@ -57,12 +57,12 @@ const MODAL_STYLE = css`
`
const OUTER_STYLES = css`
border-radius: ${BORDERS.borderRadiusSize4};
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
width: 13.374rem;
`
const SPINNER_STYLE = css`
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
opacity: 100%;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
color: ${COLORS.darkBlackEnabled};
diff --git a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx
index f5403405cf01..f184f68c274b 100644
--- a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx
+++ b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx
@@ -45,7 +45,7 @@ export const AboutGripperSlideout = (
{i18n.format(t('current_version'), 'upperCase')}
@@ -61,7 +61,7 @@ export const AboutGripperSlideout = (
{i18n.format(t('serial_number'), 'upperCase')}
diff --git a/app/src/organisms/GripperWizardFlows/MountGripper.tsx b/app/src/organisms/GripperWizardFlows/MountGripper.tsx
index 463dad98058b..9b98b834e5ee 100644
--- a/app/src/organisms/GripperWizardFlows/MountGripper.tsx
+++ b/app/src/organisms/GripperWizardFlows/MountGripper.tsx
@@ -28,7 +28,7 @@ import type { BadGripper, GripperData } from '@opentrons/api-client'
const GO_BACK_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
padding-left: ${SPACING.spacing32};
&:hover {
diff --git a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx
index faf26bbff548..4b01577ebb7c 100644
--- a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx
+++ b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx
@@ -28,7 +28,7 @@ import type { GripperData } from '@opentrons/api-client'
const GO_BACK_BUTTON_TEXT_STYLE = css`
${TYPOGRAPHY.pSemiBold};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
opacity: 70%;
diff --git a/app/src/organisms/InstrumentInfo/index.tsx b/app/src/organisms/InstrumentInfo/index.tsx
index b850c9bd341b..e09b2926ac50 100644
--- a/app/src/organisms/InstrumentInfo/index.tsx
+++ b/app/src/organisms/InstrumentInfo/index.tsx
@@ -6,6 +6,7 @@ import {
Flex,
BORDERS,
COLORS,
+ LEGACY_COLORS,
JUSTIFY_SPACE_BETWEEN,
SPACING,
TYPOGRAPHY,
diff --git a/app/src/organisms/InstrumentMountItem/LabeledMount.tsx b/app/src/organisms/InstrumentMountItem/LabeledMount.tsx
index 3c6e16ec0a3d..b0ea51d29dc5 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.grey40};
+ isAttached ? COLORS.green40 : COLORS.grey40};
}
`
interface LabeledMountProps {
diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
index ee192fcf7392..45259760bcd0 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.grey35};
+ background-color: ${COLORS.grey10};
border-radius: ${BORDERS.radiusSoftCorners};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
- background-color: ${COLORS.light1};
+ background-color: ${COLORS.grey35};
border-radius: ${BORDERS.borderRadiusSize3};
}
`
@@ -192,7 +192,7 @@ export function MoveLabwareInterventionContent({
{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 d6f741940537..09bb752ffc97 100644
--- a/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx
+++ b/app/src/organisms/LabwareDetails/ManufacturerDetails.tsx
@@ -28,7 +28,7 @@ export function ManufacturerDetails(
brandName === 'all' || brandName === 'generic' ? t(brandName) : brandName
return (
-
+
-
+
{label}
{value}
diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx
index 82a273beec3f..3fb1195a0a9b 100644
--- a/app/src/organisms/LabwareDetails/index.tsx
+++ b/app/src/organisms/LabwareDetails/index.tsx
@@ -10,6 +10,7 @@ import {
Flex,
SPACING,
COLORS,
+ LEGACY_COLORS,
TYPOGRAPHY,
BORDERS,
DIRECTION_COLUMN,
@@ -40,7 +41,7 @@ const CLOSE_ICON_STYLE = css`
border-radius: 50%;
&:hover {
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
}
&:active {
background: ${COLORS.grey35};
@@ -50,7 +51,7 @@ const CLOSE_ICON_STYLE = css`
const COPY_ICON_STYLE = css`
transform: translateY(${SPACING.spacing4});
&:hover {
- color: ${COLORS.blueEnabled};
+ color: ${COLORS.blue50};
}
&:active,
&:focus {
@@ -122,11 +123,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element {
{!isCustomDefinition && (
- {' '}
+ {' '}
{t('last_updated')} {format(new Date(modified), 'MM/dd/yyyy')}
@@ -163,7 +160,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element {
diff --git a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
index 2f336b66a629..0d91ead8b835 100644
--- a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
+++ b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx
@@ -45,7 +45,11 @@ export const ExitConfirmation = (props: ExitConfirmationProps): JSX.Element => {
alignItems={ALIGN_CENTER}
paddingX={SPACING.spacing32}
>
-
+
{isOnDevice ? (
<>
diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
index c05dec3db474..081ec9bb7e8d 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.grey35}
- wellLabelColor={COLORS.grey35}
+ labwareStroke={COLORS.grey30}
+ wellLabelColor={COLORS.grey30}
/>
-
+
{header != null ? {header} : null}
{body != null ? {body} : null}
diff --git a/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx b/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx
index c65df12b8da4..45b8a5e7c630 100644
--- a/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx
+++ b/app/src/organisms/ModuleCard/AboutModuleSlideout.tsx
@@ -101,7 +101,7 @@ export const AboutModuleSlideout = (
{i18n.format(t('current_version'), 'upperCase')}
@@ -117,7 +117,7 @@ export const AboutModuleSlideout = (
{
const StatusLabelProps = {
- backgroundColor: COLORS.grey35,
- iconColor: COLORS.grey50Enabled,
- textColor: COLORS.bluePressed,
+ backgroundColor: COLORS.grey30,
+ iconColor: COLORS.grey50,
+ textColor: LEGACY_COLORS.bluePressed,
pulse: false,
}
switch (status) {
case 'idle': {
- StatusLabelProps.backgroundColor = COLORS.grey35
- StatusLabelProps.iconColor = COLORS.grey50Enabled
- 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': {
@@ -64,7 +64,7 @@ export const HeaterShakerModuleData = (
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_engage_height')}
diff --git a/app/src/organisms/ModuleCard/TemperatureModuleData.tsx b/app/src/organisms/ModuleCard/TemperatureModuleData.tsx
index 7fbec0431e21..7f76daaa6b0c 100644
--- a/app/src/organisms/ModuleCard/TemperatureModuleData.tsx
+++ b/app/src/organisms/ModuleCard/TemperatureModuleData.tsx
@@ -23,25 +23,34 @@ export const TemperatureModuleData = (
const { moduleStatus, targetTemp, currentTemp } = props
const { t } = useTranslation('device_details')
- let backgroundColor: string = COLORS.grey35
- let iconColor: string = COLORS.grey50Enabled
+ let backgroundColor: string = COLORS.grey30
+ let iconColor: string = COLORS.grey50
let textColor
let pulse
switch (moduleStatus) {
case 'idle': {
- backgroundColor = COLORS.grey35
- iconColor = COLORS.grey50Enabled
- textColor = COLORS.darkBlackEnabled
+ backgroundColor = COLORS.grey30
+ iconColor = COLORS.grey50
+ textColor = COLORS.black90
break
}
case 'holding at target': {
+<<<<<<< HEAD
+ backgroundColor = COLORS.blue30
+ iconColor = COLORS.blue50
+=======
backgroundColor = COLORS.medBlue
iconColor = COLORS.blueEnabled
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
break
}
case 'cooling':
case 'heating': {
+<<<<<<< HEAD
+ backgroundColor = COLORS.blue30
+=======
backgroundColor = COLORS.medBlue
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
pulse = true
break
}
diff --git a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx
index 6d6da60daa65..28e870c79a3c 100644
--- a/app/src/organisms/ModuleCard/TestShakeSlideout.tsx
+++ b/app/src/organisms/ModuleCard/TestShakeSlideout.tsx
@@ -168,14 +168,14 @@ export const TestShakeSlideout = (
-
+
) : null}
-
+
diff --git a/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx b/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx
index 1806a9f8854f..b6e255e2968e 100644
--- a/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx
+++ b/app/src/organisms/ModuleCard/ThermocyclerModuleData.tsx
@@ -34,28 +34,28 @@ export const ThermocyclerModuleData = (
textColor: string
} => {
const StatusLabelProps = {
- backgroundColor: COLORS.grey35,
- iconColor: COLORS.grey50Enabled,
- textColor: COLORS.bluePressed,
+ backgroundColor: COLORS.grey30,
+ iconColor: COLORS.grey50,
+ textColor: LEGACY_COLORS.bluePressed,
pulse: false,
}
switch (status) {
case 'idle': {
- StatusLabelProps.backgroundColor = COLORS.grey35
- StatusLabelProps.iconColor = COLORS.grey50Enabled
- 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.grey50Enabled
+ StatusLabelProps.backgroundColor = LEGACY_COLORS.medBlue
+ StatusLabelProps.iconColor = COLORS.grey50
StatusLabelProps.pulse = true
break
}
@@ -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 23044f2ef221..8e322fe43151 100644
--- a/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
+++ b/app/src/organisms/ModuleCard/__tests__/HeaterShakerModuleData.test.tsx
@@ -39,7 +39,7 @@ describe('HeaterShakerModuleData', () => {
it('renders an idle status', () => {
const { getByText } = render(props)
expect(getByText('Mock StatusLabel')).toHaveStyle(
- 'backgroundColor: COLORS.grey35'
+ '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.grey35'
+ 'backgroundColor: COLORS.grey30'
)
})
@@ -167,7 +167,7 @@ describe('HeaterShakerModuleData', () => {
getByText('Target: N/A')
getByText('Current: 0 rpm')
expect(getByText('Mock StatusLabel')).toHaveStyle(
- 'backgroundColor: COLORS.grey35'
+ '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/index.tsx b/app/src/organisms/ModuleCard/index.tsx
index 08a4f331a526..98e4260346e9 100644
--- a/app/src/organisms/ModuleCard/index.tsx
+++ b/app/src/organisms/ModuleCard/index.tsx
@@ -245,7 +245,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
return (
{
<>
{
moduleType={module.moduleType}
size="1rem"
marginRight={SPACING.spacing2}
- color={COLORS.grey50Enabled}
+ color={COLORS.grey50}
/>
{getModuleDisplayName(module.moduleModel)}
diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx
index 67f04cc291a1..ebdb61162316 100644
--- a/app/src/organisms/Navigation/index.tsx
+++ b/app/src/organisms/Navigation/index.tsx
@@ -157,7 +157,7 @@ const TouchNavLink = styled(NavLink)`
color: ${COLORS.black};
}
&.active > div {
- background-color: ${COLORS.highlightPurple1};
+ background-color: ${COLORS.purple50};
}
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
diff --git a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx
index bbfff412b4c5..0585f7466dbb 100644
--- a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx
+++ b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx
@@ -31,25 +31,25 @@ 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.grey40};
- color: ${COLORS.darkBlack100};
+ color: ${COLORS.black90};
box-shadow: none;
}
&:active {
background-color: ${COLORS.grey40};
- color: ${COLORS.darkBlack100};
+ color: ${COLORS.black90};
}
&:focus-visible {
box-shadow: ${ODD_FOCUS_VISIBLE};
@@ -106,7 +106,7 @@ export function DisplayWifiList({
display="flex"
onClick={handleJoinAnotherNetwork}
height="5rem"
- backgroundColor={COLORS.light1}
+ backgroundColor={COLORS.grey35}
borderRadius={BORDERS.borderRadiusSize4}
color={COLORS.black}
css={NETWORK_ROW_STYLE}
diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx
index abd2d935492c..d4860be03ca1 100644
--- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx
+++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx
@@ -36,8 +36,8 @@ const SSID_INPUT_FIELD_STYLE = css`
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 857a8b34483a..3163675f6a95 100644
--- a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx
+++ b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx
@@ -29,8 +29,8 @@ const SSID_INPUT_FIELD_STYLE = css`
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};
}
`
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx
index af99a72fc6ab..a55b9ce75a8b 100644
--- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx
@@ -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 {
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx
index 99ef0bfa21f8..210b77e2cc5d 100644
--- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx
@@ -217,8 +217,8 @@ export function RunningProtocolCommandList({
{(command, index) => {
const backgroundColor =
index === currentRunCommandIndex
- ? COLORS.mediumBlueEnabled
- : COLORS.light1
+ ? LEGACY_COLORS.mediumBlueEnabled
+ : COLORS.grey35
return (
{
) {
const GO_BACK_BUTTON_STYLE = css`
${TYPOGRAPHY.pSemiBold};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
opacity: 70%;
diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
index a8e14cfec689..f071e0150378 100644
--- a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
+++ b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx
@@ -69,7 +69,7 @@ describe('ChoosePipette', () => {
// 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/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx
index 13459af3cbf4..8531c7277faf 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/RobotConfigurationDetails.tsx b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
index 24d36635ee71..43de374260f5 100644
--- a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
+++ b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
@@ -155,7 +155,7 @@ export const RobotConfigurationDetails = (
moduleType={getModuleType(module.params.model)}
marginRight={SPACING.spacing4}
alignSelf={ALIGN_CENTER}
- color={COLORS.grey50Enabled}
+ color={COLORS.grey50}
height={SIZE_1}
minWidth={SIZE_1}
minHeight={SIZE_1}
@@ -208,7 +208,7 @@ export const RobotConfigurationDetailsItem = (
flex="0 0 auto"
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
marginRight={SPACING.spacing16}
- color={COLORS.grey50Enabled}
+ color={COLORS.grey50}
textTransform={TYPOGRAPHY.textTransformCapitalize}
width="4.625rem"
>
diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
index 3ee5e734a8de..921167a8d4bd 100644
--- a/app/src/organisms/ProtocolDetails/index.tsx
+++ b/app/src/organisms/ProtocolDetails/index.tsx
@@ -18,6 +18,7 @@ import {
ALIGN_CENTER,
BORDERS,
COLORS,
+ LEGACY_COLORS,
DIRECTION_COLUMN,
DIRECTION_ROW,
DISPLAY_FLEX,
@@ -84,7 +85,7 @@ const GRID_STYLE = css`
const ZOOM_ICON_STYLE = css`
border-radius: ${BORDERS.radiusSoftCorners};
&:hover {
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
}
&:active {
background: ${COLORS.grey35};
@@ -327,9 +328,9 @@ export function ProtocolDetails(
const deckMap =
const deckViewByAnalysisStatus = {
- missing: ,
- loading: ,
- error: ,
+ missing: ,
+ loading: ,
+ error: ,
complete: (
{deckMap}
@@ -387,7 +388,7 @@ export function ProtocolDetails(
-
+
{t('creation_method')}
@@ -434,7 +435,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_lastUpdated"
>
-
+
{t('last_updated')}
@@ -447,7 +448,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_lastAnalyzed"
>
-
+
{t('last_analyzed')}
@@ -477,7 +478,7 @@ export function ProtocolDetails(
flexDirection={DIRECTION_COLUMN}
data-testid="ProtocolDetails_author"
>
-
+
{t('org_or_author')}
-
+
{t('description')}
{analysisStatus === 'loading' ? (
@@ -535,7 +536,7 @@ export function ProtocolDetails(
flex={`0 0 ${String(SIZE_5)}`}
flexDirection={DIRECTION_COLUMN}
backgroundColor={COLORS.white}
- border={`1px solid ${String(COLORS.grey35)}`}
+ border={`1px solid ${String(COLORS.grey30)}`}
borderRadius={BORDERS.radiusSoftCorners}
height="100%"
data-testid="ProtocolDetails_deckMap"
diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
index e2462d5869a6..2bb5fa1d9335 100644
--- a/app/src/organisms/ProtocolSetupLabware/index.tsx
+++ b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -316,7 +316,7 @@ export function ProtocolSetupLabware({
const labwareLatchStyles = css`
&:active {
- background-color: ${COLORS.mediumBluePressed};
+ background-color: ${COLORS.blue40};
}
`
@@ -409,7 +409,7 @@ function LabwareLatch({
return (
@@ -546,7 +546,7 @@ function RowLabware({
return (
{t('setup_instructions_description')}
diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
index e27fbceb25e6..7ff72c9683d7 100644
--- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
+++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
@@ -169,12 +169,12 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
{
missing: ,
loading: ,
- error: ,
+ error: ,
complete:
mostRecentAnalysis != null ? (
) : (
-
+
),
}[analysisStatus]
}
@@ -203,7 +203,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
{/* data section */}
{analysisStatus === 'loading' ? (
-
+
{t('loading_data')}
) : (
@@ -216,7 +216,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
>
-
+
{t('robot')}
@@ -230,7 +230,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
data-testid={`ProtocolCard_instruments_${protocolDisplayName}`}
minWidth="10.625rem"
>
-
+
{t('shared:instruments')}
{
@@ -275,14 +275,14 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
>
{requiredModuleTypes.length > 0 ? (
<>
-
+
{t('modules')}
{requiredModuleTypes.map((moduleType, index) => (
-
+
{`${t('updated')} ${format(
new Date(modified),
'M/d/yy HH:mm'
diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
index 3e06df66815f..37eb341a1666 100644
--- a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
+++ b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
@@ -46,7 +46,7 @@ const SORT_BY_BUTTON_STYLE = css`
}
&:active,
&:focus {
- background-color: ${COLORS.grey35};
+ 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 181da16300f0..1501a181a48e 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 ae5e3315f93d..b110fc9546a6 100644
--- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationItems.tsx
@@ -2,7 +2,12 @@ import * as React from 'react'
import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'
-import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
+import {
+ BORDERS,
+ LEGACY_COLORS,
+ SPACING,
+ TYPOGRAPHY,
+} from '@opentrons/components'
import { getModuleDisplayName } from '@opentrons/shared-data/js/modules'
import { StyledText } from '../../../atoms/text'
@@ -95,6 +100,6 @@ const StyledTableCell = styled.td`
`
const BODY_STYLE = css`
- box-shadow: 0 0 0 1px ${COLORS.grey35};
+ 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 838eef69deae..db4f321230ae 100644
--- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/PipetteOffsetCalibrationItems.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/PipetteOffsetCalibrationItems.tsx
@@ -45,7 +45,7 @@ const StyledTableCell = styled.td`
`
const BODY_STYLE = css`
- box-shadow: 0 0 0 1px ${COLORS.grey35};
+ 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 89406d1fffcc..c3bb87c09dd7 100644
--- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx
@@ -3,7 +3,12 @@ import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import styled, { css } from 'styled-components'
-import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
+import {
+ BORDERS,
+ LEGACY_COLORS,
+ SPACING,
+ TYPOGRAPHY,
+} from '@opentrons/components'
import { StyledText } from '../../../atoms/text'
import { useAttachedPipettes } from '../../../organisms/Devices/hooks'
@@ -35,7 +40,7 @@ const StyledTableCell = styled.td`
`
const BODY_STYLE = css`
- box-shadow: 0 0 0 1px ${COLORS.grey35};
+ 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 beb3457a7145..eb6c5c2570d8 100644
--- a/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx
@@ -48,7 +48,7 @@ export function DeckCalibrationConfirmModal({
onClick={cancel}
textTransform={TYPOGRAPHY.textTransformCapitalize}
marginRight={SPACING.spacing24}
- color={COLORS.blueEnabled}
+ color={COLORS.blue50}
css={TYPOGRAPHY.fontSizeP}
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
>
diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx
index 1ab69946b0fa..865556535ec5 100644
--- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsDeckCalibration.tsx
@@ -62,7 +62,7 @@ export function RobotSettingsDeckCalibration({
{t('deck_calibration_title')}
{t('deck_calibration_description')}
-
+
{deckLastModified}
diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx
index a2d54bb65d78..30ce9ee06a16 100644
--- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx
@@ -41,7 +41,7 @@ const StyledTableCell = styled.td`
`
const BODY_STYLE = css`
- box-shadow: 0 0 0 1px ${COLORS.grey35};
+ 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 d8279d9f4e12..97e0ccb68344 100644
--- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
@@ -44,7 +44,7 @@ const OptionLabel = styled.label`
color: ${({ isSelected }) =>
isSelected === true ? COLORS.white : COLORS.darkBlack100};
background: ${({ isSelected }) =>
- isSelected === true ? COLORS.blueEnabled : COLORS.mediumBlueEnabled};
+ isSelected === true ? COLORS.blue50 : COLORS.blue35};
`
interface DeviceResetProps {
diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx
index 3414e707a64d..fcae6ce79373 100644
--- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx
@@ -24,7 +24,7 @@ import type { State } from '../../../redux/types'
const STRETCH_LIST_STYLE = css`
width: 100%;
padding: ${SPACING.spacing16};
- background-color: ${COLORS.light1};
+ background-color: ${COLORS.grey35};
border-radius: ${BORDERS.borderRadiusSize3};
`
diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
index 718f9fd4034b..08f61fbfcb8b 100644
--- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
@@ -43,7 +43,7 @@ export function NetworkSettings({
}
const handleButtonBackgroundColor = (isConnected: boolean): string =>
- isConnected ? COLORS.green3 : COLORS.light1
+ isConnected ? COLORS.green35 : COLORS.grey35
const handleChipText = (isConnected: boolean): string =>
isConnected ? t('connected') : t('not_connected')
@@ -102,7 +102,7 @@ function NetworkSettingButton({
const PUSHED_STATE_STYLE = css`
&:active {
background-color: ${chipType === 'success'
- ? COLORS.green3Pressed
+ ? COLORS.green40
: COLORS.grey50};
}
`
diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx
index 955179bc0694..50d69fc7ffcb 100644
--- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx
@@ -79,7 +79,7 @@ export function RobotSystemVersion({
{t('view_latest_release_notes_at', { url: GITHUB_URL })}
- props.isActive ? COLORS.highlightPurple1 : COLORS.highlightPurple2};
+ props.isActive ? LEGACY_COLORS.purple50 : LEGACY_COLORS.purple35};
`
interface TextSizeProps {
diff --git a/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx b/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx
index e83905e5e301..f16f2273a335 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
diff --git a/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx b/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx
index d6a516ea7f07..36b6628f6973 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};
`
diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx
index 10daf9a2fafb..6ff92dc48a6f 100644
--- a/app/src/organisms/RunPreview/index.tsx
+++ b/app/src/organisms/RunPreview/index.tsx
@@ -64,7 +64,7 @@ export const RunPreviewComponent = (
{t('run_preview')}
-
+
{t('steps_total', { count: robotSideAnalysis.commands.length })}
@@ -92,12 +92,12 @@ export const RunPreviewComponent = (
{(command, index) => {
const isCurrent = index === currentRunCommandIndex
const borderColor = isCurrent
- ? COLORS.blueEnabled
+ ? LEGACY_COLORS.blueEnabled
: COLORS.transparent
- const backgroundColor = isCurrent ? COLORS.lightBlue : COLORS.grey35
- const contentColor = isCurrent
- ? COLORS.darkBlackEnabled
- : COLORS.grey50Enabled
+ const backgroundColor = isCurrent
+ ? LEGACY_COLORS.lightBlue
+ : COLORS.grey10
+ const contentColor = isCurrent ? COLORS.black90 : COLORS.grey50
return (
diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx
index 32db7893417e..c2ef79f8fbe1 100644
--- a/app/src/organisms/TaskList/index.tsx
+++ b/app/src/organisms/TaskList/index.tsx
@@ -55,7 +55,11 @@ function ProgressTrackerItem({
borderLeft={BORDERS.lineBorder}
borderColor={
isTaskListComplete || isPastTask || isActiveTaskWithSubtasks
+<<<<<<< HEAD
+ ? COLORS.blue50
+=======
? COLORS.blueEnabled
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
: ''
}
marginTop={`-${SPACING.spacing12}`}
@@ -78,7 +82,7 @@ function ProgressTrackerItem({
name="ot-check"
color={
isTaskListComplete || isPastTask
- ? COLORS.blueEnabled
+ ? LEGACY_COLORS.blueEnabled
: COLORS.grey55
}
/>
@@ -87,8 +91,10 @@ function ProgressTrackerItem({
flex={FLEX_NONE}
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_CENTER}
- backgroundColor={isFutureTask ? COLORS.grey55 : COLORS.blueEnabled}
- color={COLORS.white}
+ backgroundColor={
+ isFutureTask ? COLORS.grey55 : LEGACY_COLORS.blueEnabled
+ }
+ color={LEGACY_COLORS.white}
margin={SPACING.spacing16}
height="1.25rem"
width="1.25rem"
@@ -142,14 +148,16 @@ function ProgressTrackerItem({
backgroundColor={
// is in the past or list is complete
isTaskListComplete || isPastSubTask
- ? COLORS.blueEnabled
+ ? COLORS.blue50
: subTask.isComplete === true
? COLORS.grey55
: 'initial'
}
border={BORDERS.lineBorder}
borderColor={
- isFutureSubTask ? COLORS.grey55 : COLORS.blueEnabled
+ isFutureSubTask
+ ? COLORS.grey55
+ : LEGACY_COLORS.blueEnabled
}
borderWidth={SPACING.spacing2}
color={COLORS.white}
@@ -167,8 +175,8 @@ function ProgressTrackerItem({
isFinalSubTaskOfTaskList
? COLORS.transparent
: isTaskListComplete || isPastSubTask
- ? COLORS.blueEnabled
- : COLORS.grey35
+ ? LEGACY_COLORS.blueEnabled
+ : COLORS.grey30
}
marginTop={`-${SPACING.spacing8}`}
marginBottom={
@@ -217,7 +225,7 @@ function SubTask({
return (
{description}
{footer != null ? (
-
+
{description}
{footer != null ? (
-
+
{
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 c5763f1610b3..aa5587bbb558 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')}
@@ -435,7 +435,7 @@ export function AdvancedSettings(): JSX.Element {
{t('override_path')}
diff --git a/app/src/pages/AppSettings/GeneralSettings.tsx b/app/src/pages/AppSettings/GeneralSettings.tsx
index 89f4e0e455d6..3a164df898cf 100644
--- a/app/src/pages/AppSettings/GeneralSettings.tsx
+++ b/app/src/pages/AppSettings/GeneralSettings.tsx
@@ -174,7 +174,7 @@ export function GeneralSettings(): JSX.Element {
{t('up_to_date')}
diff --git a/app/src/pages/AppSettings/index.tsx b/app/src/pages/AppSettings/index.tsx
index 6567002fc74c..a516ef93a25f 100644
--- a/app/src/pages/AppSettings/index.tsx
+++ b/app/src/pages/AppSettings/index.tsx
@@ -50,7 +50,7 @@ export function AppSettings(): JSX.Element {
backgroundColor={COLORS.white}
height="100%"
width="100%"
- border={`1px ${BORDERS.styleSolid} ${COLORS.grey35}`}
+ 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 423079c71ee2..f416a65d1417 100644
--- a/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx
+++ b/app/src/pages/ConnectViaEthernet/DisplayConnectionStatus.tsx
@@ -34,7 +34,7 @@ export function DisplayConnectionStatus({
diff --git a/app/src/pages/Labware/index.tsx b/app/src/pages/Labware/index.tsx
index 2b9205c15c13..162de514fe5e 100644
--- a/app/src/pages/Labware/index.tsx
+++ b/app/src/pages/Labware/index.tsx
@@ -72,7 +72,7 @@ const SORT_BY_BUTTON_STYLE = css`
&:active,
&:focus {
- background-color: ${COLORS.grey35};
+ background-color: ${COLORS.grey30};
}
`
@@ -155,7 +155,7 @@ export function Labware(): JSX.Element {
/>
-
+
{t('shared:sort_by')}
{
return (
{
>
{definition?.namespace === 'opentrons' ? (
{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/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx
index a891f8c870a7..56164b047246 100644
--- a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx
+++ b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx
@@ -25,7 +25,7 @@ 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};
diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx
index 905f55189433..4c3ab265ffa1 100644
--- a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx
+++ b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx
@@ -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}
diff --git a/app/src/pages/RunSummary/index.tsx b/app/src/pages/RunSummary/index.tsx
index 690e5e453aff..c349f25a3c01 100644
--- a/app/src/pages/RunSummary/index.tsx
+++ b/app/src/pages/RunSummary/index.tsx
@@ -429,6 +429,20 @@ const DURATION_TEXT_STYLE = css`
`
const RUN_AGAIN_CLICKED_STYLE = css`
+<<<<<<< HEAD
+ background-color: ${COLORS.blue60};
+ &:focus {
+ background-color: ${COLORS.blue60};
+ }
+ &:hover {
+ background-color: ${COLORS.blue60};
+ }
+ &:focus-visible {
+ background-color: ${COLORS.blue60};
+ }
+ &:active {
+ background-color: ${COLORS.blue60};
+=======
background-color: ${COLORS.bluePressed};
&:focus {
background-color: ${COLORS.bluePressed};
@@ -441,5 +455,6 @@ const RUN_AGAIN_CLICKED_STYLE = css`
}
&:active {
background-color: ${COLORS.bluePressed};
+>>>>>>> 2524ab95c98ff696e637a42d46ea6a893c63f735
}
`
diff --git a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
index 0e7ac6a55291..f9b3d6ac48b8 100644
--- a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
+++ b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
@@ -40,7 +40,7 @@ describe('CheckboxField', () => {
// INNER_STYLE_NO_VALUE
expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
- expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50Enabled)}`)
+ expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
expect(checkBoxIcon).toHaveStyle(`display: flex`)
expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
expect(checkBoxIcon).toHaveStyle(
@@ -112,7 +112,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(
@@ -127,7 +127,7 @@ describe('CheckboxField', () => {
const checkBoxIcon = getByTestId('CheckboxField_icon')
expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
- expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50Enabled)}`)
+ 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 2b6546d8a77a..23d59cad6387 100644
--- a/components/src/atoms/CheckboxField/index.tsx
+++ b/components/src/atoms/CheckboxField/index.tsx
@@ -1,6 +1,7 @@
import * as React from 'react'
import { css } from 'styled-components'
-import { COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '@opentrons/components'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
import { Flex, Box } from '../../primitives'
import { Icon } from '../../icons'
import { ALIGN_CENTER, JUSTIFY_CENTER, SIZE_1 } from '../../styles'
@@ -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,7 +54,7 @@ const INNER_STYLE_VALUE = css`
&:hover {
cursor: pointer;
- color: ${COLORS.blueHover};
+ color: ${COLORS.blue55};
}
&:active {
@@ -71,7 +72,7 @@ const INNER_STYLE_VALUE = css`
const INNER_STYLE_NO_VALUE = css`
width: ${SPACING.spacing20};
min-width: ${SPACING.spacing20};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
display: flex;
border-radius: 1px;
justify-content: ${JUSTIFY_CENTER};
@@ -126,13 +127,13 @@ export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_CENTER}
borderRadius="2px"
- backgroundColor={COLORS.grey50Disabled}
+ backgroundColor={COLORS.grey30}
size={SIZE_1}
>
) : (
diff --git a/components/src/atoms/StepMeter/index.tsx b/components/src/atoms/StepMeter/index.tsx
index c0f01521c7e5..b481f90a1cfc 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 { COLORS } from '@opentrons/components'
import { Box } from '../../primitives'
-import { COLORS, RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
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.grey35};
+ 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 8029a5d9c9f9..91538798fb93 100644
--- a/components/src/atoms/buttons/AlertPrimaryButton.tsx
+++ b/components/src/atoms/buttons/AlertPrimaryButton.tsx
@@ -1,5 +1,10 @@
import styled from 'styled-components'
-import { COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import {
+ LEGACY_COLORS,
+ BORDERS,
+ TYPOGRAPHY,
+ SPACING,
+} from '../../ui-style-constants'
import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
@@ -18,7 +23,7 @@ export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
}
&:disabled {
- background-color: ${COLORS.grey50Disabled};
- color: ${COLORS.grey40};
+ background-color: ${COLORS.grey30};
+ color: ${LEGACY_COLORS.errorDisabled};
}
`
diff --git a/components/src/atoms/buttons/PrimaryButton.tsx b/components/src/atoms/buttons/PrimaryButton.tsx
index 2fb563135951..58cda3c8b6df 100644
--- a/components/src/atoms/buttons/PrimaryButton.tsx
+++ b/components/src/atoms/buttons/PrimaryButton.tsx
@@ -1,9 +1,15 @@
import styled from 'styled-components'
-import { COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import { COLORS } from '@opentrons/components'
+import {
+ BORDERS,
+ TYPOGRAPHY,
+ SPACING,
+ LEGACY_COLORS,
+} from '../../ui-style-constants'
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,7 +22,7 @@ export const PrimaryButton = styled(NewPrimaryBtn)`
&:hover,
&:focus {
- background-color: ${COLORS.blueHover};
+ background-color: ${COLORS.blue55};
box-shadow: none;
}
@@ -29,7 +35,7 @@ export const PrimaryButton = styled(NewPrimaryBtn)`
}
&:disabled {
- background-color: ${COLORS.grey50Disabled};
- color: ${COLORS.grey40};
+ background-color: ${COLORS.grey30};
+ color: ${LEGACY_COLORS.errorDisabled};
}
`
diff --git a/components/src/atoms/buttons/SecondaryButton.tsx b/components/src/atoms/buttons/SecondaryButton.tsx
index ef56ef1a2e3a..db585e629832 100644
--- a/components/src/atoms/buttons/SecondaryButton.tsx
+++ b/components/src/atoms/buttons/SecondaryButton.tsx
@@ -1,5 +1,10 @@
import styled from 'styled-components'
-import { COLORS, BORDERS, TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import {
+ LEGACY_COLORS,
+ BORDERS,
+ TYPOGRAPHY,
+ SPACING,
+} from '../../ui-style-constants'
import { isntStyleProp, styleProps } from '../../primitives'
import { COLORS } from '../../helix-design-system'
import type { StyleProps } from '../../index'
@@ -10,11 +15,11 @@ interface SecondaryButtonProps extends StyleProps {
}
export const SecondaryButton = styled.button.withConfig({
shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous',
-}) `
+})`
appearance: none;
cursor: pointer;
color: ${props =>
- props.isDangerous ? COLORS.errorText : COLORS.blueEnabled};
+ props.isDangerous ? LEGACY_COLORS.errorText : COLORS.blue50};
border: ${BORDERS.lineBorder};
border-color: ${props =>
props.isDangerous ? COLORS.errorEnabled : 'initial'};
diff --git a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
index 9d603cd9371f..db29bf30eac8 100644
--- a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
@@ -26,7 +26,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}`
)
@@ -46,14 +46,14 @@ describe('PrimaryButton', () => {
const { getByText } = render(props)
const button = getByText('primary button')
expect(button).toBeDisabled()
- expect(button).toHaveStyle(`background-color: ${COLORS.grey50Disabled}`)
- expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
+ expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
+ expect(button).toHaveStyle(`color: ${LEGACY_COLORS.errorDisabled}`)
})
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',
})
})
@@ -61,7 +61,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',
})
})
diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
index f6d1d0d7d432..46f40c5824d7 100644
--- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
+++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx
@@ -38,7 +38,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', () => {
diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
index ed6b8eadc46d..967bbb97500d 100644
--- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
+++ b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -15,6 +15,7 @@ import {
WASTE_CHUTE_ONLY_FIXTURES,
WASTE_CHUTE_STAGING_AREA_FIXTURES,
} from '@opentrons/shared-data'
+import { COLORS } from '@opentrons/components'
import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
import { Module } from '../Module'
@@ -22,7 +23,6 @@ import { LabwareRender } from '../Labware'
import { FlexTrash } from '../Deck/FlexTrash'
import { DeckFromLayers } from '../Deck/DeckFromLayers'
import { SlotLabels } from '../Deck'
-import { COLORS } from '../../ui-style-constants'
import { Svg } from '../../primitives'
import { SingleSlotFixture } from './SingleSlotFixture'
@@ -84,7 +84,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
robotType,
modulesOnDeck = [],
labwareOnDeck = [],
- lightFill = COLORS.light1,
+ lightFill = COLORS.grey35,
mediumFill = COLORS.grey50,
darkFill = COLORS.grey60,
deckLayerBlocklist = [],
diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
index 99b16f93326c..8b4872738e17 100644
--- a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
@@ -10,7 +10,8 @@ import {
JUSTIFY_CENTER,
TEXT_ALIGN_CENTER,
} from '../../styles'
-import { COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '@opentrons/components'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
import { SlotBase } from './SlotBase'
@@ -31,7 +32,7 @@ export function WasteChuteFixture(
const {
cutoutId,
deckDefinition,
- fixtureBaseColor = COLORS.light1,
+ fixtureBaseColor = COLORS.grey35,
wasteChuteColor = COLORS.grey50,
...restProps
} = props
diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
index 4d5291a91d36..6b9afa142936 100644
--- a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
+++ b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
@@ -1,8 +1,8 @@
import * as React from 'react'
import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data'
+import { COLORS } from '@opentrons/components'
-import { COLORS } from '../../ui-style-constants'
import { SlotBase } from './SlotBase'
import { SlotClip } from './SlotClip'
import { WasteChute } from './WasteChuteFixture'
@@ -26,7 +26,7 @@ export function WasteChuteStagingAreaFixture(
const {
cutoutId,
deckDefinition,
- fixtureBaseColor = COLORS.light1,
+ fixtureBaseColor = COLORS.grey35,
slotClipColor = COLORS.grey60,
wasteChuteColor = COLORS.grey50,
...restProps
diff --git a/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx b/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx
index 5aa94680cb41..6233e0e7301e 100644
--- a/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx
+++ b/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx
@@ -233,8 +233,8 @@ export function MoveLabwareOnDeck(
x={OUTLINE_THICKNESS_MM}
y={OUTLINE_THICKNESS_MM}
strokeWidth={OUTLINE_THICKNESS_MM}
- stroke={COLORS.blueEnabled}
- fill={COLORS.white}
+ stroke={COLORS.blue50}
+ fill={LEGACY_COLORS.white}
width={
movedLabwareDef.dimensions.xDimension - 2 * OUTLINE_THICKNESS_MM
}
@@ -256,7 +256,7 @@ export function MoveLabwareOnDeck(
handleClickAdd(fixtureLocation)}
>
-
+
)
@@ -66,19 +66,19 @@ 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.blue35};
}
&:focus {
- border: 3px solid ${COLORS.blueEnabled};
- background-color: ${COLORS.mediumBluePressed};
+ border: 3px solid ${COLORS.blue50};
+ background-color: ${COLORS.blue35};
}
&:hover {
diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx
index f592b76d4890..01aac516e5ec 100644
--- a/components/src/hardware-sim/DeckConfigurator/index.tsx
+++ b/components/src/hardware-sim/DeckConfigurator/index.tsx
@@ -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/LabwareOutline.tsx b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
index b0b95390d954..60dd11e4fc50 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/LabwareOutline.tsx
@@ -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"
diff --git a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx
index 7606f15673b0..b6871aacea4d 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/StyledWells.tsx
@@ -27,8 +27,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: {
@@ -37,7 +37,7 @@ export const STYLE_BY_WELL_CONTENTS: {
strokeWidth: 0.6,
},
selectedWell: {
- stroke: COLORS.blueEnabled,
+ stroke: COLORS.blue50,
fill: COLORS.transparent,
strokeWidth: 1,
},
diff --git a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx
index 197fd931ba0d..ed4079cdaa15 100644
--- a/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx
+++ b/components/src/hardware-sim/Labware/labwareInternals/WellLabels.tsx
@@ -4,7 +4,7 @@ import { RobotCoordsText } from '../../Deck'
import { WellLabelOption, WELL_LABEL_OPTIONS } from '../LabwareRender'
import type { LabwareDefinition2 } from '@opentrons/shared-data'
import type { HighlightedWellLabels } from './types'
-import { COLORS } from '../../../ui-style-constants'
+import { COLORS } from '@opentrons/components'
// magic layout numbers to make the letters close to the edges of the labware
const LETTER_COLUMN_X_INSIDE = 4
diff --git a/components/src/helix-design-system/colors.ts b/components/src/helix-design-system/colors.ts
index 381d8fd5aae2..9b972fe27715 100644
--- a/components/src/helix-design-system/colors.ts
+++ b/components/src/helix-design-system/colors.ts
@@ -32,11 +32,22 @@ 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
*/
diff --git a/components/src/hooks/useSelectDeckLocation/index.tsx b/components/src/hooks/useSelectDeckLocation/index.tsx
index 62cf05adfc7f..59f37bb57355 100644
--- a/components/src/hooks/useSelectDeckLocation/index.tsx
+++ b/components/src/hooks/useSelectDeckLocation/index.tsx
@@ -110,13 +110,15 @@ export function DeckLocationSelect({
)
const isSelected = isEqual(selectedLocation, slotLocation)
let fill =
- theme === 'default' ? COLORS.highlightPurple2 : COLORS.grey35
+ theme === 'default'
+ ? LEGACY_COLORS.highlightPurple2
+ : LEGACY_COLORS.grey35
if (isSelected)
fill =
theme === 'default'
- ? COLORS.highlightPurple1
- : COLORS.grey50Enabled
- if (isDisabled) fill = COLORS.grey50Disabled
+ ? LEGACY_COLORS.highlightPurple1
+ : LEGACY_COLORS.grey50
+ if (isDisabled) fill = LEGACY_COLORS.grey30
if (isSelected && slot.id === 'B1' && isThermocycler) {
return (
@@ -223,7 +225,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 2b47f2c6f3c8..ea06d3919093 100644
--- a/components/src/icons/IconList.stories.tsx
+++ b/components/src/icons/IconList.stories.tsx
@@ -82,8 +82,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 ${LEGACY_COLORS.darkBlackEnabled}`
}
>
@@ -95,9 +95,7 @@ const Template: Story> = args => {
{name}
- {showText ? (
- {'copied'}
- ) : null}
+ {showText ? {'copied'} : null}
))}
@@ -106,5 +104,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 948f34f5df6e..961278a87983 100644
--- a/components/src/index.ts
+++ b/components/src/index.ts
@@ -22,7 +22,7 @@ export * from './tabbedNav'
export * from './slotmap'
export * from './structure'
export * from './tooltips'
-
+export * from './helix-design-system'
// styles
export * from './styles'
// new ui-overhaul style vars
diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
index 072fc5037be4..5a56c310d0ff 100644
--- a/components/src/modals/ModalShell.tsx
+++ b/components/src/modals/ModalShell.tsx
@@ -1,6 +1,7 @@
import * as React from 'react'
import styled from 'styled-components'
-import { BORDERS, COLORS, RESPONSIVENESS, SPACING } from '../ui-style-constants'
+import { COLORS } from '@opentrons/components'
+import { BORDERS, RESPONSIVENESS, SPACING } from '../ui-style-constants'
import { StyleProps, styleProps } from '../primitives'
import {
POSITION_FIXED,
diff --git a/components/src/molecules/RoundTab.tsx b/components/src/molecules/RoundTab.tsx
index 07eca1c5e5fd..06f93fca26b8 100644
--- a/components/src/molecules/RoundTab.tsx
+++ b/components/src/molecules/RoundTab.tsx
@@ -1,6 +1,12 @@
import * as React from 'react'
import { css } from 'styled-components'
-import { TYPOGRAPHY, BORDERS, SPACING, COLORS } from '../ui-style-constants'
+import { COLORS } from '@opentrons/components'
+import {
+ TYPOGRAPHY,
+ BORDERS,
+ SPACING,
+ LEGACY_COLORS,
+} from '../ui-style-constants'
import {
POSITION_RELATIVE,
POSITION_ABSOLUTE,
@@ -20,11 +26,11 @@ const defaultTabStyle = css`
`
const inactiveTabStyle = css`
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.grey50};
&:hover {
- color: ${COLORS.grey50Enabled};
- background-color: ${COLORS.fundamentalsBackgroundShade};
+ color: ${COLORS.grey50};
+ background-color: ${LEGACY_COLORS.fundamentalsBackgroundShade};
}
`
@@ -34,7 +40,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 6a73ed99a42f..f8372c6bd4ed 100644
--- a/components/src/tooltips/Tooltip.tsx
+++ b/components/src/tooltips/Tooltip.tsx
@@ -4,7 +4,7 @@ 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, grey50Enabled } from '../ui-style-constants/colors'
+import { white, grey50 } from '../ui-style-constants/colors'
import { ARROW_SIZE_PX } from './styles'
import { Box } from '../primitives'
@@ -51,7 +51,7 @@ export const Tooltip = React.forwardRef(function TooltipComponent(
children,
width,
fontSize = fontSizeH4,
- backgroundColor = grey50Enabled,
+ backgroundColor = grey50,
...boxProps
} = props
diff --git a/components/src/ui-style-constants/borders.ts b/components/src/ui-style-constants/borders.ts
index 818daefa7d08..936329cb1698 100644
--- a/components/src/ui-style-constants/borders.ts
+++ b/components/src/ui-style-constants/borders.ts
@@ -1,5 +1,5 @@
import { css } from 'styled-components'
-import { blueEnabled, grey35, transparent, grey55 } from './colors'
+import { blueEnabled, grey30, transparent, grey55 } from './colors'
export const radiusSoftCorners = '4px'
export const radiusRoundEdge = '20px'
@@ -20,12 +20,12 @@ export const tabBorder = css`
`
export const activeLineBorder = `1px ${styleSolid} ${blueEnabled}`
-export const lineBorder = `1px ${styleSolid} ${grey35}`
+export const lineBorder = `1px ${styleSolid} ${grey30}`
export const transparentLineBorder = `1px ${styleSolid} ${transparent}`
export const cardOutlineBorder = css`
border-style: ${styleSolid};
border-width: 1px;
- border-color: ${grey35};
+ border-color: ${grey30};
border-radius: ${radiusSoftCorners};
&:hover {
border-color: ${grey55};
diff --git a/components/src/ui-style-constants/colors.ts b/components/src/ui-style-constants/colors.ts
index 8b193813de75..1cea8822d764 100644
--- a/components/src/ui-style-constants/colors.ts
+++ b/components/src/ui-style-constants/colors.ts
@@ -48,9 +48,12 @@ export const lightGreyPressed = `${darkBlackEnabled}${opacity17HexCode}`
export const lightGreyHover = `${darkBlackEnabled}${opacity10HexCode}`
export const medGreyEnabled = '#e3e3e3'
export const medGreyHover = '#b8b8b8'
+export const medGreyPressed = '#5a5a5e'
+export const medGreySelected = '#5a5a5e'
export const darkGreyEnabled = '#707075'
export const darkGreyHover = '#646468'
export const darkGreyPressed = '#5a5a5e'
+export const darkGreySelected = '#5a5a5e'
export const darkGreyDisabled = '#eaeaeb'
// colors success
diff --git a/components/src/ui-style-constants/typography.ts b/components/src/ui-style-constants/typography.ts
index f59c75325ec4..df6ab961e467 100644
--- a/components/src/ui-style-constants/typography.ts
+++ b/components/src/ui-style-constants/typography.ts
@@ -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,7 +233,7 @@ export const darkLinkH4SemiBold = css`
font-size: ${fontSizeH4};
font-weight: ${fontWeightSemiBold};
line-height: ${lineHeight20};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.darkGreyEnabled};
&:hover {
color: ${COLORS.darkBlackEnabled};
}
@@ -243,7 +243,7 @@ export const darkLinkLabelSemiBold = css`
font-size: ${fontSizeLabel};
font-weight: ${fontWeightSemiBold};
line-height: ${lineHeight20};
- color: ${COLORS.grey50Enabled};
+ color: ${COLORS.darkGreyEnabled};
&:hover {
color: ${COLORS.darkBlackEnabled};
}
@@ -253,6 +253,6 @@ export const darkLinkLabelSemiBoldDisabled = css`
font-size: ${fontSizeLabel};
font-weight: ${fontWeightSemiBold};
line-height: ${lineHeight20};
- color: ${COLORS.grey55};
+ color: ${COLORS.medGreyHover};
cursor: not-allowed;
`
diff --git a/hardware-testing/hardware_testing/tools/plot/plotly-2.12.1.min.js b/hardware-testing/hardware_testing/tools/plot/plotly-2.12.1.min.js
index 21a6d0abe1df..51c5aee344f2 100644
--- a/hardware-testing/hardware_testing/tools/plot/plotly-2.12.1.min.js
+++ b/hardware-testing/hardware_testing/tools/plot/plotly-2.12.1.min.js
@@ -3264,17 +3264,20 @@
if (_t < 0) {
var a = o(e)
if (a.scrollX || a.scrollY) {
- var s = (n = t.select('body').append('svg').style(
- {
- position: 'absolute',
- top: 0,
- left: 0,
- margin: 0,
- padding: 0,
- border: 'none',
- },
- 'important'
- ))[0][0].getScreenCTM()
+ var s = (n = t
+ .select('body')
+ .append('svg')
+ .style(
+ {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ margin: 0,
+ padding: 0,
+ border: 'none',
+ },
+ 'important'
+ ))[0][0].getScreenCTM()
;(_t = !(s.f || s.e)), n.remove()
}
}
@@ -103294,10 +103297,12 @@ object-assign
}
function W(r) {
return (
- r.call(u.font, H).attr({
- 'text-anchor':
- { left: 'start', right: 'end' }[e.align] || 'middle',
- }),
+ r
+ .call(u.font, H)
+ .attr({
+ 'text-anchor':
+ { left: 'start', right: 'end' }[e.align] || 'middle',
+ }),
h.convertToTspans(r, t, X),
r
)
@@ -116712,11 +116717,13 @@ object-assign
? (function () {
var t = Math.max(r.line.width, 10),
n = s.append('g').attr('data-index', o)
- n.append('path').attr('d', e.attr('d')).style({
- cursor: 'move',
- 'stroke-width': t,
- 'stroke-opacity': '0',
- })
+ n.append('path')
+ .attr('d', e.attr('d'))
+ .style({
+ cursor: 'move',
+ 'stroke-width': t,
+ 'stroke-opacity': '0',
+ })
var i = { 'fill-opacity': '0' },
a = Math.max(t / 2, 10)
return (
@@ -140456,15 +140463,17 @@ object-assign
) {
var i = e._plots[r[n]]._scene2d,
a = i.toImage('png')
- e._glimages.append('svg:image').attr({
- xmlns: o.svg,
- 'xlink:href': a,
- x: 0,
- y: 0,
- width: '100%',
- height: '100%',
- preserveAspectRatio: 'none',
- }),
+ e._glimages
+ .append('svg:image')
+ .attr({
+ xmlns: o.svg,
+ 'xlink:href': a,
+ x: 0,
+ y: 0,
+ width: '100%',
+ height: '100%',
+ preserveAspectRatio: 'none',
+ }),
i.destroy()
}
}),
@@ -141086,15 +141095,17 @@ object-assign
o = a.domain,
s = a._scene,
c = s.toImage('png')
- e._glimages.append('svg:image').attr({
- xmlns: l.svg,
- 'xlink:href': c,
- x: n.l + n.w * o.x[0],
- y: n.t + n.h * (1 - o.y[1]),
- width: n.w * (o.x[1] - o.x[0]),
- height: n.h * (o.y[1] - o.y[0]),
- preserveAspectRatio: 'none',
- }),
+ e._glimages
+ .append('svg:image')
+ .attr({
+ xmlns: l.svg,
+ 'xlink:href': c,
+ x: n.l + n.w * o.x[0],
+ y: n.t + n.h * (1 - o.y[1]),
+ width: n.w * (o.x[1] - o.x[0]),
+ height: n.h * (o.y[1] - o.y[0]),
+ preserveAspectRatio: 'none',
+ }),
s.destroy()
}
}),
@@ -143137,15 +143148,17 @@ object-assign
var s = e[r[i]],
h = s.domain,
d = s._subplot.toImage('png')
- e._glimages.append('svg:image').attr({
- xmlns: l.svg,
- 'xlink:href': d,
- x: n.l + n.w * h.x[0],
- y: n.t + n.h * (1 - h.y[1]),
- width: n.w * (h.x[1] - h.x[0]),
- height: n.h * (h.y[1] - h.y[0]),
- preserveAspectRatio: 'none',
- })
+ e._glimages
+ .append('svg:image')
+ .attr({
+ xmlns: l.svg,
+ 'xlink:href': d,
+ x: n.l + n.w * h.x[0],
+ y: n.t + n.h * (1 - h.y[1]),
+ width: n.w * (h.x[1] - h.x[0]),
+ height: n.h * (h.y[1] - h.y[0]),
+ preserveAspectRatio: 'none',
+ })
var m = c.select(s._subplot.div)
if (
!(
@@ -143157,11 +143170,14 @@ object-assign
'transform',
a(n.l + n.w * h.x[0] + 10, n.t + n.h * (1 - h.y[0]) - 31)
),
- g.append('path').attr('d', p.mapboxLogo.path0).style({
- opacity: 0.9,
- fill: '#ffffff',
- 'enable-background': 'new',
- }),
+ g
+ .append('path')
+ .attr('d', p.mapboxLogo.path0)
+ .style({
+ opacity: 0.9,
+ fill: '#ffffff',
+ 'enable-background': 'new',
+ }),
g
.append('path')
.attr('d', p.mapboxLogo.path1)
@@ -143187,13 +143203,15 @@ object-assign
.replace('Improve this map', ''),
y = e._glimages.append('g'),
x = y.append('text')
- x.text(v).classed('static-attribution', !0).attr({
- 'font-size': 12,
- 'font-family': 'Arial',
- color: 'rgba(0, 0, 0, 0.75)',
- 'text-anchor': 'end',
- 'data-unformatted': v,
- })
+ x.text(v)
+ .classed('static-attribution', !0)
+ .attr({
+ 'font-size': 12,
+ 'font-family': 'Arial',
+ color: 'rgba(0, 0, 0, 0.75)',
+ 'text-anchor': 'end',
+ 'data-unformatted': v,
+ })
var b = u.bBox(x.node()),
_ = n.w * (h.x[1] - h.x[0])
if (b.width > _ / 2) {
@@ -143205,13 +143223,15 @@ object-assign
(b = u.bBox(x.node()))
}
x.attr('transform', a(-3, 8 - b.height)),
- y.insert('rect', '.static-attribution').attr({
- x: -b.width - 6,
- y: -b.height - 3,
- width: b.width + 6,
- height: b.height + 3,
- fill: 'rgba(255, 255, 255, 0.75)',
- })
+ y
+ .insert('rect', '.static-attribution')
+ .attr({
+ x: -b.width - 6,
+ y: -b.height - 3,
+ width: b.width + 6,
+ height: b.height + 3,
+ fill: 'rgba(255, 255, 255, 0.75)',
+ })
var T = 1
b.width + 6 > _ && (T = _ / (b.width + 6))
var k = [n.l + n.w * h.x[1], n.t + n.h * (1 - h.y[0])]
@@ -144349,11 +144369,13 @@ object-assign
.append('div')
.attr('id', 'hiddenform')
.style('display', 'none'),
- i = r.append('form').attr({
- action: e + '/external',
- method: 'post',
- target: '_blank',
- })
+ i = r
+ .append('form')
+ .attr({
+ action: e + '/external',
+ method: 'post',
+ target: '_blank',
+ })
return (
(i
.append('input')
@@ -171765,13 +171787,15 @@ object-assign
A = s.rangefont,
M = i.extendDeepNoArrays({}, c, {
color: l.map(
- n.scale.linear().domain(
- T({
- values: l,
- range: [f.min, f.max],
- _length: s._length,
- })
- )
+ n.scale
+ .linear()
+ .domain(
+ T({
+ values: l,
+ range: [f.min, f.max],
+ _length: s._length,
+ })
+ )
),
blockLineCount: y.blockLineCount,
canvasOverdrag: y.overdrag * y.canvasPixelRatio,
@@ -204608,7 +204632,7 @@ object-assign
37440: 'UNPACK_FLIP_Y_WEBGL',
37441: 'UNPACK_PREMULTIPLY_ALPHA_WEBGL',
37442: 'CONTEXT_LOST_WEBGL',
- 37443: 'UNPACK_COLORSPACE_CONVERSION_WEBGL',
+ 37443: 'UNPACK_LEGACY_COLORSPACE_CONVERSION_WEBGL',
37444: 'BROWSER_DEFAULT_WEBGL',
}
},
diff --git a/protocol-designer/src/atoms/Slideout.tsx b/protocol-designer/src/atoms/Slideout.tsx
index 21d8d8bc5d67..419b6717e119 100644
--- a/protocol-designer/src/atoms/Slideout.tsx
+++ b/protocol-designer/src/atoms/Slideout.tsx
@@ -94,7 +94,7 @@ const CLOSE_ICON_STYLE = css`
border-radius: 50%;
&:hover {
- background: ${COLORS.grey35};
+ background: ${COLORS.grey30};
}
&:active {
background: ${COLORS.grey35};
@@ -192,7 +192,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => {
) : (
<>{title}
)}
-
+
{
diff --git a/protocol-designer/src/components/OffDeckLabwareSlideout.tsx b/protocol-designer/src/components/OffDeckLabwareSlideout.tsx
index 8e718b43e266..f16bfbda5aaf 100644
--- a/protocol-designer/src/components/OffDeckLabwareSlideout.tsx
+++ b/protocol-designer/src/components/OffDeckLabwareSlideout.tsx
@@ -93,7 +93,7 @@ export const OffDeckLabwareSlideout = (
diff --git a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx
index 21594a704fa0..bc5ffdcdbc53 100644
--- a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx
+++ b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx
@@ -91,7 +91,7 @@ function Input(props: InputFieldProps): JSX.Element {
border-radius: ${SPACING.spacing4};
padding: ${SPACING.spacing8};
border: 1px ${BORDERS.styleSolid}
- ${error ? COLORS.errorEnabled : COLORS.grey35};
+ ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey30};
font-size: ${TYPOGRAPHY.fontSizeP};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
@@ -99,7 +99,7 @@ function Input(props: InputFieldProps): JSX.Element {
}
&:active {
- border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Enabled};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
}
& input {
@@ -116,13 +116,13 @@ function Input(props: InputFieldProps): JSX.Element {
&:hover {
border: 1px ${BORDERS.styleSolid}
- ${error ? COLORS.errorEnabled : COLORS.grey55};
+ ${error ? LEGACY_COLORS.errorEnabled : COLORS.grey55};
}
&:focus {
- border: 1px ${BORDERS.styleSolid} ${COLORS.blueEnabled};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
}
&:disabled {
- border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Disabled};
+ border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
@@ -145,7 +145,7 @@ function Input(props: InputFieldProps): JSX.Element {
display={DISPLAY_INLINE_BLOCK}
textAlign={TEXT_ALIGN_RIGHT}
alignSelf={ALIGN_CENTER}
- color={COLORS.grey50Enabled}
+ color={COLORS.grey50}
fontSize={TYPOGRAPHY.fontSizeLabel}
>
{props.units}
@@ -153,7 +153,7 @@ function Input(props: InputFieldProps): 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 58e8c1ee920c..1f1776b29ad5 100644
--- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx
+++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx
@@ -1,5 +1,9 @@
import * as React from 'react'
-import { BORDERS, COLORS, renderWithProviders } from '@opentrons/components'
+import {
+ BORDERS,
+ LEGACY_COLORS,
+ renderWithProviders,
+} from '@opentrons/components'
import { EquipmentOption } from '../EquipmentOption'
const render = (props: React.ComponentProps) => {
@@ -27,7 +31,7 @@ describe('EquipmentOption', () => {
}
const { getByLabelText } = render(props)
expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
- `background-color: ${COLORS.grey50Disabled}`
+ `background-color: ${COLORS.grey30}`
)
})
it('renders the equipment option without check not selected and image', () => {
@@ -41,7 +45,7 @@ describe('EquipmentOption', () => {
getByRole('img')
expect(
getByLabelText('EquipmentOption_checkbox-blank-outline')
- ).toHaveStyle(`color: ${COLORS.grey50Enabled}`)
+ ).toHaveStyle(`color: ${COLORS.grey50}`)
expect(getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
`border: ${BORDERS.lineBorder}`
)
@@ -55,7 +59,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/modules/FlexSlotMap.tsx b/protocol-designer/src/components/modules/FlexSlotMap.tsx
index 5e5984f44a55..d03e068bd527 100644
--- a/protocol-designer/src/components/modules/FlexSlotMap.tsx
+++ b/protocol-designer/src/components/modules/FlexSlotMap.tsx
@@ -50,7 +50,7 @@ export function FlexSlotMap(props: FlexSlotMapProps): JSX.Element {
cutoutId={cutout.id}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
- fixtureBaseColor={COLORS.light1}
+ fixtureBaseColor={COLORS.grey35}
/>
))}
{selectedSlots.map((selectedSlot, index) => {