Use new colors in Progress

4 files changed, 11 insertions, 15 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
index 08a4d61055..00d90c520c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-import { DeprecatedColors } from '../../../foundations';
 import { LabelTiny, LabelTinyProps } from '../../typography';
 import { useProgress } from '../ProgressContext';
 
@@ -10,12 +9,14 @@ const StyledText = styled(LabelTiny)`
   min-width: 26px;
 `;
 
-export const ProgressPercent = <T extends React.ElementType = 'span'>(
-  props: ProgressPercentProps<T>,
-) => {
+export const ProgressPercent = <T extends React.ElementType = 'span'>({
+  color,
+  ...props
+}: ProgressPercentProps<T>) => {
   const { percent, disabled } = useProgress();
+  const defaultColor = disabled ? 'white40' : 'white100';
   return (
-    <StyledText color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} {...props}>
+    <StyledText color={color ?? defaultColor} {...props}>
       {`${Math.round(percent)}%`}
     </StyledText>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx
index c49d3339cd..e7d050b052 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx
@@ -1,13 +1,12 @@
 import styled from 'styled-components';
 
-import { DeprecatedColors, Radius } from '../../../foundations';
+import { colors, Radius } from '../../../foundations';
 import { useProgress } from '../ProgressContext';
 
 const StyledDiv = styled.div<{
   disabled?: boolean;
 }>`
-  background-color: ${({ disabled }) =>
-    disabled ? DeprecatedColors.white50 : DeprecatedColors.white};
+  background-color: ${({ disabled }) => (disabled ? colors.white80 : colors.white100)};
   border-radius: ${Radius.radius4};
   height: 100%;
   width: 100%;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
index ffcb22c745..a92f4c6f13 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
@@ -1,4 +1,3 @@
-import { DeprecatedColors } from '../../../foundations';
 import { LabelTiny, LabelTinyProps } from '../../typography';
 import { useProgress } from '../ProgressContext';
 
@@ -6,7 +5,5 @@ export type ProgressTextProps<T extends React.ElementType = 'span'> = LabelTinyP
 
 export const ProgressText = <T extends React.ElementType = 'span'>(props: ProgressTextProps<T>) => {
   const { disabled } = useProgress();
-  return (
-    <LabelTiny color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white60} {...props} />
-  );
+  return <LabelTiny color={disabled ? 'white40' : 'white60'} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressTrack.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressTrack.tsx
index 58e4abb28b..960c106f20 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressTrack.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressTrack.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Radius } from '../../../foundations';
+import { colors, Radius } from '../../../foundations';
 import { Flex, FlexProps } from '../../flex';
 import { useProgress } from '../ProgressContext';
 
 const StyledFlex = styled(Flex)`
-  // TODO: Replace with token when available
-  background-color: ${'rgba(27, 49, 74, 1)'};
+  background-color: ${colors.blue10};
   border-radius: ${Radius.radius4};
   width: 100%;
   height: 8px;