Use new colors in cell components

12 files changed, 50 insertions, 55 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index 3092b785b0..6c7431d91f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { Box, IconProps } from '../../lib/components';
-import { DeprecatedColors, spacings } from '../../lib/foundations';
+import { colors, spacings } from '../../lib/foundations';
 import { CellDisabledContext } from './Container';
 import { CellTintedIcon } from './Label';
 import { Row } from './Row';
@@ -15,11 +15,11 @@ interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement>
 
 const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColor = props.$selected
-    ? DeprecatedColors.green
+    ? colors.brandGreen
     : props.$containedInSection
-      ? DeprecatedColors.blue40
-      : DeprecatedColors.blue;
-  const backgroundColorHover = props.$selected ? DeprecatedColors.green : DeprecatedColors.blue80;
+      ? colors.blue40
+      : colors.brandBlue;
+  const backgroundColorHover = props.$selected ? colors.brandGreen : colors.blue80;
 
   return {
     paddingRight: spacings.medium,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
index f247e579a1..adac056d1e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { IconButton } from '../../lib/components';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useBoolean, useCombinedRefs, useEffectEvent, useStyledRef } from '../../lib/utility-hooks';
 import { normalText } from '../common-styles';
 import { BackAction } from '../KeyboardNavigation';
@@ -31,13 +31,9 @@ const StyledInput = styled.input<{ $focused: boolean; $valid?: boolean }>((props
   width: '100%',
   height: '100%',
   color:
-    props.$valid === false
-      ? DeprecatedColors.red
-      : props.$focused
-        ? DeprecatedColors.blue
-        : DeprecatedColors.white,
+    props.$valid === false ? colors.brandRed : props.$focused ? colors.brandBlue : colors.white100,
   '&&::placeholder': {
-    color: props.$focused ? DeprecatedColors.blue60 : DeprecatedColors.white60,
+    color: props.$focused ? colors.blue60 : colors.white60,
   },
 }));
 
@@ -183,7 +179,7 @@ export const Input = React.memo(React.forwardRef(InputWithRef));
 const InputFrame = styled.div<{ $focused: boolean }>((props) => ({
   display: 'flex',
   flexGrow: 0,
-  backgroundColor: props.$focused ? DeprecatedColors.white : 'rgba(255,255,255,0.1)',
+  backgroundColor: props.$focused ? colors.white100 : colors.whiteOnBlue10,
   borderRadius: '4px',
   padding: '6px 8px',
 }));
@@ -286,7 +282,7 @@ const StyledTextArea = styled.textarea<{ $invalid?: boolean }>(normalText, (prop
   fontWeight: 400,
   resize: 'none',
   padding: '10px 25px 10px 0',
-  color: props.$invalid ? DeprecatedColors.red : 'auto',
+  color: props.$invalid ? colors.brandRed : 'auto',
 }));
 
 const StyledInputFiller = styled.div({
@@ -297,13 +293,12 @@ const StyledInputFiller = styled.div({
   marginRight: '25px',
 });
 
-// TODO: This can be removed once we implement the new colors from foundations
 const StyledIconButton = styled(IconButton)<{ $disabled: boolean }>(({ $disabled }) => ({
   ['> div']: {
-    backgroundColor: $disabled ? DeprecatedColors.blue60 : DeprecatedColors.blue,
+    backgroundColor: $disabled ? colors.blue60 : colors.brandBlue,
   },
   ['&&:hover > div']: {
-    backgroundColor: $disabled ? DeprecatedColors.blue60 : DeprecatedColors.blue80,
+    backgroundColor: $disabled ? colors.blue60 : colors.blue80,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index 00fc51a4a4..3a6dca3c1d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { Icon, IconProps, Image, ImageProps } from '../../lib/components';
-import { DeprecatedColors, spacings } from '../../lib/foundations';
+import { colors, spacings } from '../../lib/foundations';
 import { buttonText, normalText, tinyText } from '../common-styles';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
@@ -11,7 +11,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
   display: 'flex',
   margin: '10px 0',
   flex: 1,
-  color: props.disabled ? DeprecatedColors.white40 : DeprecatedColors.white,
+  color: props.disabled ? colors.white40 : colors.white100,
   textAlign: 'left',
 
   [`${LabelContainer} &&`]: {
@@ -27,7 +27,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
 }));
 
 const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
-  color: props.disabled ? DeprecatedColors.white20 : DeprecatedColors.white60,
+  color: props.disabled ? colors.white20 : colors.white60,
   flex: -1,
   textAlign: 'right',
   margin: `0 ${spacings.small}`,
@@ -56,7 +56,7 @@ const StyledTintedIcon = styled(Icon)<IconProps & { disabled?: boolean }>(
 const StyledSubLabel = styled.div<{ disabled: boolean }>(tinyText, {
   display: 'flex',
   alignItems: 'center',
-  color: DeprecatedColors.white60,
+  color: colors.white60,
   marginBottom: '5px',
   lineHeight: '14px',
   height: '14px',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
index 3a520aed5b..25ab602e1b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { measurements } from '../common-styles';
 import { Group } from './Group';
 
@@ -14,7 +14,7 @@ export const Row = styled.div.withConfig({
 })<RowProps>((props) => ({
   display: 'flex',
   alignItems: 'center',
-  backgroundColor: DeprecatedColors.blue,
+  backgroundColor: colors.brandBlue,
   minHeight: measurements.rowMinHeight,
   paddingLeft: measurements.horizontalViewMargin,
   paddingRight: measurements.horizontalViewMargin,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
index 6b2ceddc01..9b9332b301 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { useAppContext } from '../../context';
-import { DeprecatedColors, spacings } from '../../lib/foundations';
+import { colors, spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
@@ -23,7 +23,7 @@ interface SectionTitleProps {
 
 export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({
   paddingRight: spacings.medium,
-  color: props.disabled ? DeprecatedColors.white20 : DeprecatedColors.white,
+  color: props.disabled ? colors.white20 : colors.white100,
   fontWeight: props.$thin ? 400 : 600,
   fontSize: props.$thin ? '15px' : '18px',
   ...(props.$thin ? openSans : sourceSansPro),
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
index 807ac0218c..dabdd09acd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../../shared/gettext';
 import { Icon } from '../../lib/components';
-import { DeprecatedColors, spacings } from '../../lib/foundations';
+import { colors, spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useStyledRef } from '../../lib/utility-hooks';
@@ -194,8 +194,8 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
       </Cell.CellButton>
       {props.details && (
         <StyledSideButton
-          $backgroundColor={DeprecatedColors.blue40}
-          $backgroundColorHover={DeprecatedColors.blue80}
+          $backgroundColor={colors.blue40}
+          $backgroundColorHover={colors.blue80}
           aria-label={props.details.ariaLabel}
           onClick={navigate}>
           <Icon icon="chevron-right" />
@@ -228,9 +228,9 @@ interface StyledCustomContainerProps {
 }
 
 const StyledCustomContainer = styled(Cell.Container)<StyledCustomContainerProps>((props) => ({
-  backgroundColor: props.selected ? DeprecatedColors.green : DeprecatedColors.blue40,
+  backgroundColor: props.selected ? colors.brandGreen : colors.blue40,
   '&&:hover': {
-    backgroundColor: props.selected ? DeprecatedColors.green : DeprecatedColors.blue,
+    backgroundColor: props.selected ? colors.brandGreen : colors.brandBlue,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
index f3a2a0b3ea..81d6db17c1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { measurements, tinyText } from '../common-styles';
 import InfoButton from '../InfoButton';
 import { SettingsRowErrorMessage } from './SettingsRow';
@@ -15,7 +15,7 @@ const StyledContainer = styled.div({
 const StyledTitle = styled.h2(tinyText, {
   display: 'flex',
   alignItems: 'center',
-  color: DeprecatedColors.white80,
+  color: colors.white80,
   margin: `0 ${measurements.horizontalViewMargin} 8px`,
   lineHeight: '17px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
index c2b602ded3..70cc2866b9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useId, useState } from 'react';
 import { styled } from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { AriaInput, AriaInputGroup, AriaLabel } from '../AriaGroup';
 import { smallNormalText } from '../common-styles';
 import { SettingsSelectItem } from './SettingsSelect';
@@ -60,7 +60,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
     height: '12px',
     borderRadius: '50%',
     backgroundColor: 'transparent',
-    border: `1px ${DeprecatedColors.white} solid`,
+    border: `1px ${colors.white100} solid`,
     top: 0,
     left: 0,
   },
@@ -71,7 +71,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
     width: '8px',
     height: '8px',
     borderRadius: '50%',
-    backgroundColor: DeprecatedColors.white,
+    backgroundColor: colors.white100,
     top: '3px',
     left: '3px',
   },
@@ -85,7 +85,7 @@ const StyledRadioButtonContainer = styled.div({
 });
 
 const StyledRadioButtonLabel = styled.label(smallNormalText, {
-  color: DeprecatedColors.white,
+  color: colors.white100,
   marginLeft: '8px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
index d3af391109..d3473e8214 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Icon } from '../../lib/components';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { AriaInputGroup, AriaLabel } from '../AriaGroup';
 import { measurements, smallNormalText, tinyText } from '../common-styles';
 import { StyledSettingsGroup, useSettingsGroupContext } from './SettingsGroup';
@@ -14,7 +14,7 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   margin: `0 ${measurements.horizontalViewMargin} ${measurements.rowVerticalMargin}`,
   padding: '0 8px',
   minHeight: '36px',
-  backgroundColor: DeprecatedColors.blue60,
+  backgroundColor: colors.blue60,
   borderRadius: '4px',
 
   [`${StyledSettingsGroup} &&`]: {
@@ -36,11 +36,11 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   outlineWidth: '1px',
   borderStyle: 'solid',
   outlineStyle: 'solid',
-  borderColor: props.$invalid ? DeprecatedColors.red : 'transparent',
-  outlineColor: props.$invalid ? DeprecatedColors.red : 'transparent',
+  borderColor: props.$invalid ? colors.brandRed : 'transparent',
+  outlineColor: props.$invalid ? colors.brandRed : 'transparent',
   '&&:focus-within': {
-    borderColor: props.$invalid ? DeprecatedColors.red : DeprecatedColors.white,
-    outlineColor: props.$invalid ? DeprecatedColors.red : DeprecatedColors.white,
+    borderColor: props.$invalid ? colors.brandRed : colors.white100,
+    outlineColor: props.$invalid ? colors.brandRed : colors.white100,
   },
 }));
 
@@ -61,7 +61,7 @@ const StyledSettingsRowErrorMessage = styled.div(tinyText, {
   alignItems: 'center',
   marginLeft: measurements.horizontalViewMargin,
   marginTop: '5px',
-  color: DeprecatedColors.white60,
+  color: colors.white60,
 });
 
 const StyledErrorMessageAlertIcon = styled(Icon)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
index 2eaa8cb4ea..41a115f43d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { useScheduler } from '../../../shared/scheduler';
 import { Icon } from '../../lib/components';
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
 import { AriaInput } from '../AriaGroup';
 import { smallNormalText } from '../common-styles';
@@ -20,13 +20,13 @@ const StyledSelect = styled.div.attrs({ tabIndex: 0 })(smallNormalText, {
   position: 'relative',
   background: 'transparent',
   border: 'none',
-  color: DeprecatedColors.white,
+  color: colors.white100,
   borderRadius: '4px',
   height: '26px',
 
   '&&:focus': {
-    outline: `1px ${DeprecatedColors.darkBlue} solid`,
-    backgroundColor: DeprecatedColors.blue,
+    outline: `1px ${colors.brandDarkBlue} solid`,
+    backgroundColor: colors.brandBlue,
   },
 });
 
@@ -37,8 +37,8 @@ const StyledItems = styled.div<{ $direction: 'down' | 'up' }>((props) => ({
   top: props.$direction === 'down' ? 'calc(100% + 4px)' : 'auto',
   bottom: props.$direction === 'up' ? 'calc(100% + 4px)' : 'auto',
   right: '-1px',
-  backgroundColor: DeprecatedColors.darkBlue,
-  border: `1px ${DeprecatedColors.darkerBlue} solid`,
+  backgroundColor: colors.brandDarkBlue,
+  border: `1px ${colors.darkerBlue50} solid`,
   borderRadius: '4px',
   padding: '4px 8px',
   maxHeight: '250px',
@@ -220,7 +220,7 @@ const StyledItem = styled.div<{ $selected: boolean }>((props) => ({
   paddingRight: '18px',
   whiteSpace: 'nowrap',
   '&&:hover': {
-    backgroundColor: DeprecatedColors.blue,
+    backgroundColor: colors.brandBlue,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
index cd0f328471..7f1da42216 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { useEffectEvent } from '../../lib/utility-hooks';
 import { AriaInput } from '../AriaGroup';
 import { smallNormalText } from '../common-styles';
@@ -13,11 +13,11 @@ const StyledInput = styled.input(smallNormalText, {
   textAlign: 'right',
   background: 'transparent',
   border: 'none',
-  color: DeprecatedColors.white,
+  color: colors.white100,
   width: '100px',
 
   '&&::placeholder': {
-    color: DeprecatedColors.white50,
+    color: colors.whiteOnBlue60,
   },
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
index e8cae54309..0d804a0f81 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../lib/foundations';
+import { colors } from '../../lib/foundations';
 import { measurements } from '../common-styles';
 import { buttonColor, ButtonColors } from './styles';
 
@@ -22,7 +22,7 @@ export const SideButton = styled.button<ButtonColors & { $noSeparator?: boolean
       bottom: 0,
       height: '50%',
       width: '1px',
-      backgroundColor: DeprecatedColors.darkBlue,
+      backgroundColor: colors.brandDarkBlue,
     },
   }),
 );