grey50Enabled to grey50

Opentrons · Jan 12, 2024 · 3fcdc4d · 3fcdc4d
1 parent f5a42e3
commit 3fcdc4d
Show file tree

Hide file tree

Showing 16 changed files with 34 additions and 32 deletions.
diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx
@@ -65,12 +65,12 @@ const BANNER_PROPS_BY_TYPE: Record<
   updating: {
     icon: { name: 'ot-spinner' },
     backgroundColor: COLORS.grey50Disabled,
-    color: COLORS.grey50Enabled,
+    color: COLORS.grey50,
   },
   informing: {
     icon: { name: 'information' },
     backgroundColor: COLORS.grey35,
-    color: COLORS.grey50Enabled,
+    color: COLORS.grey50,
   },
 }
 

diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -94,7 +94,7 @@ function Input(props: InputFieldProps): JSX.Element {
     font-size: ${TYPOGRAPHY.fontSizeP};
 
     &:active {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.grey50Enabled};
+      border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
     }
 
     & input {
@@ -155,15 +155,15 @@ 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}
           </Flex>
         )}
       </Flex>
       <Flex
-        color={COLORS.grey50Enabled}
+        color={COLORS.grey50}
         fontSize={TYPOGRAPHY.fontSizeLabel}
         paddingTop={SPACING.spacing4}
         flexDirection={DIRECTION_COLUMN}

diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -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"
         >
           <circle cx="9.5" cy="9.5" r="1.5" />

diff --git a/app/src/atoms/StatusLabel/StatusLabel.stories.tsx b/app/src/atoms/StatusLabel/StatusLabel.stories.tsx
@@ -32,7 +32,7 @@ export const Idle = Template.bind({})
 Idle.args = {
   status: 'Idle',
   backgroundColor: COLORS.grey35,
-  iconColor: COLORS.grey50Enabled,
+  iconColor: COLORS.grey50,
   pulse: true,
 }
 

diff --git a/app/src/atoms/Toast/index.tsx b/app/src/atoms/Toast/index.tsx
@@ -234,7 +234,7 @@ export function Toast(props: ToastProps): JSX.Element {
     },
     [INFO_TOAST]: {
       iconName: 'information',
-      color: `${showODDStyle ? COLORS.grey50 : COLORS.grey50Enabled}`,
+      color: `${showODDStyle ? COLORS.grey50 : COLORS.grey50}`,
       backgroundColor: `${
         showODDStyle ? COLORS.grey35 : COLORS.grey50Disabled
       }`,

diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
@@ -6,7 +6,7 @@ import { Btn, Icon, 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};

diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -77,7 +77,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')

diff --git a/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx b/app/src/organisms/AppSettings/ManualIpHostnameItem.tsx
@@ -92,7 +92,7 @@ export function ManualIpHostnameItem({
         </IpItem>
         <StyledText
           as="label"
-          color={COLORS.grey50Enabled}
+          color={COLORS.grey50}
           css={{
             'white-space': 'nowrap',
           }}

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupStep.tsx b/app/src/organisms/Devices/ProtocolRun/SetupStep.tsx
@@ -79,7 +79,7 @@ export function SetupStep({
           >
             <Flex flexDirection={DIRECTION_COLUMN}>
               <StyledText
-                color={COLORS.grey50Enabled}
+                color={COLORS.grey50}
                 css={TYPOGRAPHY.h6SemiBold}
                 marginBottom={SPACING.spacing2}
                 id={`CollapsibleStep_${label}`}

diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx
@@ -145,7 +145,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element {
         >
           <StyledText
             as="label"
-            color={COLORS.grey50Enabled}
+            color={COLORS.grey50}
             id="LabwareDetails_dateAdded"
           >
             {t('last_updated')} {format(new Date(modified), 'MM/dd/yyyy')}

diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -421,7 +421,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_creationMethod"
                 >
-                  <StyledText as="h6" color={COLORS.grey50Enabled}>
+                  <StyledText as="h6" color={COLORS.grey50}>
                     {t('creation_method')}
                   </StyledText>
                   <StyledText as="p">
@@ -434,7 +434,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_lastUpdated"
                 >
-                  <StyledText as="h6" color={COLORS.grey50Enabled}>
+                  <StyledText as="h6" color={COLORS.grey50}>
                     {t('last_updated')}
                   </StyledText>
                   <StyledText as="p">
@@ -447,7 +447,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_lastAnalyzed"
                 >
-                  <StyledText as="h6" color={COLORS.grey50Enabled}>
+                  <StyledText as="h6" color={COLORS.grey50}>
                     {t('last_analyzed')}
                   </StyledText>
                   <StyledText as="p">
@@ -477,7 +477,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_author"
                 >
-                  <StyledText as="h6" color={COLORS.grey50Enabled}>
+                  <StyledText as="h6" color={COLORS.grey50}>
                     {t('org_or_author')}
                   </StyledText>
                   <StyledText
@@ -494,7 +494,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_description"
                 >
-                  <StyledText as="h6" color={COLORS.grey50Enabled}>
+                  <StyledText as="h6" color={COLORS.grey50}>
                     {t('description')}
                   </StyledText>
                   {analysisStatus === 'loading' ? (

diff --git a/app/src/pages/Devices/ProtocolRunDetails/index.tsx b/app/src/pages/Devices/ProtocolRunDetails/index.tsx
@@ -59,7 +59,7 @@ const baseRoundTabStyling = css`
 
 const RoundNavLink = styled(NavLink)`
   ${baseRoundTabStyling}
-  color: ${COLORS.grey50Enabled};
+  color: ${COLORS.grey50};
 
   &:hover {
     background-color: ${COLORS.grey35};

diff --git a/components/src/hooks/useSelectDeckLocation/index.tsx b/components/src/hooks/useSelectDeckLocation/index.tsx
@@ -111,10 +111,7 @@ export function DeckLocationSelect({
           let fill =
             theme === 'default' ? COLORS.highlightPurple2 : COLORS.grey35
           if (isSelected)
-            fill =
-              theme === 'default'
-                ? COLORS.highlightPurple1
-                : COLORS.grey50Enabled
+            fill = theme === 'default' ? COLORS.highlightPurple1 : COLORS.grey50
           if (isDisabled) fill = COLORS.grey50Disabled
           if (isSelected && slot.id === 'B1' && isThermocycler) {
             return (
@@ -222,7 +219,7 @@ export function DeckLocationSelect({
           layerBlocklist={OT2_DECK_LOCATION_SELECT_LAYER_BLOCK_LIST}
         />
       ) : null}
-      <SlotLabels robotType={robotType} color={COLORS.grey50Enabled} />
+      <SlotLabels robotType={robotType} color={COLORS.grey50} />
     </RobotCoordinateSpace>
   )
 }

diff --git a/components/src/molecules/RoundTab.tsx b/components/src/molecules/RoundTab.tsx
@@ -20,10 +20,10 @@ const defaultTabStyle = css`
 `
 
 const inactiveTabStyle = css`
-  color: ${COLORS.grey50Enabled};
+  color: ${COLORS.grey50};
 
   &:hover {
-    color: ${COLORS.grey50Enabled};
+    color: ${COLORS.grey50};
     background-color: ${COLORS.fundamentalsBackgroundShade};
   }
 `

diff --git 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
@@ -1,5 +1,10 @@
 import { css } from 'styled-components'
-import { blueEnabled, grey35, transparent, grey55 } from './colors'
+import {
+  blueEnabled,
+  medGreyEnabled,
+  transparent,
+  medGreyHover,
+} from './colors'
 
 export const radiusSoftCorners = '4px'
 export const radiusRoundEdge = '20px'
@@ -20,15 +25,15 @@ export const tabBorder = css`
 `
 
 export const activeLineBorder = `1px ${styleSolid} ${blueEnabled}`
-export const lineBorder = `1px ${styleSolid} ${grey35}`
+export const lineBorder = `1px ${styleSolid} ${medGreyEnabled}`
 export const transparentLineBorder = `1px ${styleSolid} ${transparent}`
 export const cardOutlineBorder = css`
   border-style: ${styleSolid};
   border-width: 1px;
-  border-color: ${grey35};
+  border-color: ${medGreyEnabled};
   border-radius: ${radiusSoftCorners};
   &:hover {
-    border-color: ${grey55};
+    border-color: ${medGreyHover};
   }
 `