From 5058bd6ec2306d3337e4524bfd0c6872e05378af Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Tue, 21 Jan 2025 16:24:42 +0100
Subject: [PATCH 1/8] Use color token throughout app

---
 desktop/packages/mullvad-vpn/src/config.json  | 32 -----------------
 .../src/renderer/components/AccountStyles.tsx |  8 ++---
 .../renderer/components/ApiAccessMethods.tsx  |  9 +++--
 .../src/renderer/components/AppButton.tsx     | 24 ++++++-------
 .../src/renderer/components/ChevronButton.tsx |  6 ++--
 .../renderer/components/ClipboardLabel.tsx    | 10 +++---
 .../src/renderer/components/ContextMenu.tsx   | 10 +++---
 .../renderer/components/CustomDnsSettings.tsx |  8 ++---
 .../components/CustomDnsSettingsStyles.tsx    |  8 ++---
 .../renderer/components/DeviceRevokedView.tsx |  8 ++---
 .../src/renderer/components/ErrorView.tsx     |  4 +--
 .../components/ExpiredAccountAddTime.tsx      |  7 ++--
 .../ExpiredAccountErrorViewStyles.tsx         | 12 +++----
 .../src/renderer/components/Filter.tsx        | 18 +++++-----
 .../src/renderer/components/InfoButton.tsx    |  6 ++--
 .../src/renderer/components/Launch.tsx        |  8 ++---
 .../src/renderer/components/LoginStyles.tsx   | 34 +++++++++----------
 .../src/renderer/components/Modal.tsx         | 16 ++++-----
 .../components/NotificationBanner.tsx         | 20 +++++------
 .../src/renderer/components/PageSlider.tsx    | 18 +++++-----
 .../components/ProblemReportStyles.tsx        | 12 +++----
 .../components/RedeemVoucherStyles.tsx        | 16 ++++-----
 .../components/RelayStatusIndicator.tsx       |  8 ++---
 .../src/renderer/components/SearchBar.tsx     | 26 +++++++-------
 .../src/renderer/components/SecuredLabel.tsx  | 18 +++++-----
 .../renderer/components/SettingsImport.tsx    |  6 ++--
 .../components/SettingsTextImport.tsx         |  4 +--
 .../src/renderer/components/SmallButton.tsx   | 16 ++++-----
 .../SplitTunnelingSettingsStyles.tsx          |  7 ++--
 .../src/renderer/components/Switch.tsx        |  8 ++---
 .../renderer/components/TooManyDevices.tsx    | 16 ++++-----
 .../src/renderer/components/YellowLabel.tsx   |  6 ++--
 .../src/renderer/components/cell/Input.tsx    | 14 ++++----
 .../src/renderer/components/cell/Row.tsx      |  4 +--
 .../src/renderer/components/cell/Selector.tsx | 19 +++++------
 .../components/cell/SettingsGroup.tsx         |  4 +--
 .../components/cell/SettingsRadioGroup.tsx    |  8 ++---
 .../renderer/components/cell/SettingsRow.tsx  | 16 ++++-----
 .../components/cell/SettingsSelect.tsx        | 18 +++++-----
 .../components/cell/SettingsTextInput.tsx     |  6 ++--
 .../renderer/components/cell/SideButton.tsx   |  4 +--
 .../main-view/ConnectionDetails.tsx           |  8 ++---
 .../main-view/ConnectionPanelChevron.tsx      |  6 ++--
 .../components/main-view/ConnectionStatus.tsx | 10 +++---
 .../main-view/FeatureIndicators.tsx           | 15 ++++----
 .../components/main-view/Hostname.tsx         |  4 +--
 .../components/main-view/Location.tsx         |  4 +--
 .../select-location/CustomListDialogs.tsx     |  6 ++--
 .../select-location/CustomLists.tsx           | 24 ++++++-------
 .../select-location/LocationRowStyles.tsx     | 20 +++++------
 .../components/select-location/ScopeBar.tsx   | 10 +++---
 .../select-location/SelectLocation.tsx        | 11 +++---
 .../select-location/SelectLocationStyles.tsx  |  8 ++---
 .../select-location/SpecialLocationList.tsx   |  6 ++--
 .../state-dependent/custom-bridge.spec.ts     | 12 +++----
 .../state-dependent/obfuscation.spec.ts       | 18 +++++-----
 .../mocked/expired-account-error-view.spec.ts |  6 ++--
 .../test/e2e/mocked/notifications.spec.ts     |  4 +--
 .../test/e2e/mocked/select-location.spec.ts   | 10 +++---
 .../test/e2e/shared/tunnel-state.ts           | 14 ++++----
 60 files changed, 333 insertions(+), 365 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/config.json b/desktop/packages/mullvad-vpn/src/config.json
index a77c47de4501..a603139ba953 100644
--- a/desktop/packages/mullvad-vpn/src/config.json
+++ b/desktop/packages/mullvad-vpn/src/config.json
@@ -6,38 +6,6 @@
     "privacyGuide": "https://mullvad.net/help/first-steps-towards-online-privacy/",
     "download": "https://mullvad.net/download/vpn/"
   },
-  "colors": {
-    "darkerBlue": "rgba(25, 38, 56, 0.95)",
-    "darkBlue": "rgb(25, 46, 69)",
-    "blue": "rgb(41, 77, 115)",
-    "darkGreen": "rgb(32, 84, 37)",
-    "green": "rgb(68, 173, 77)",
-    "red": "rgb(227, 64, 57)",
-    "darkYellow": "rgb(142, 78, 19)",
-    "yellow": "rgb(255, 213, 36)",
-    "black": "rgb(0, 0, 0)",
-    "white": "rgb(255, 255, 255)",
-    "white90": "rgba(255, 255, 255, 0.9)",
-    "white80": "rgba(255, 255, 255, 0.8)",
-    "white60": "rgba(255, 255, 255, 0.6)",
-    "white50": "rgba(255, 255, 255, 0.5)",
-    "white40": "rgba(255, 255, 255, 0.4)",
-    "white20": "rgba(255, 255, 255, 0.2)",
-    "white10": "rgba(255, 255, 255, 0.1)",
-    "blue10": "rgba(41, 77, 115, 0.1)",
-    "blue20": "rgba(41, 77, 115, 0.2)",
-    "blue40": "rgba(41, 77, 115, 0.4)",
-    "blue50": "rgba(41, 77, 115, 0.5)",
-    "blue60": "rgba(41, 77, 115, 0.6)",
-    "blue80": "rgba(41, 77, 115, 0.8)",
-    "red95": "rgba(227, 64, 57, 0.95)",
-    "red80": "rgba(227, 64, 57, 0.8)",
-    "red60": "rgba(227, 64, 57, 0.6)",
-    "red40": "rgba(227, 64, 57, 0.4)",
-    "red45": "rgba(227, 64, 57, 0.45)",
-    "green90": "rgba(68, 173, 77, 0.9)",
-    "green40": "rgba(68, 173, 77, 0.4)"
-  },
   "strings": {
     "wireguard": "WireGuard",
     "openvpn": "OpenVPN",
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
index 228dd179dc93..155fb0465dea 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { measurements, normalText, tinyText } from './common-styles';
 
 export const AccountContainer = styled.div({
@@ -28,12 +28,12 @@ const AccountRowText = styled.span({
 export const AccountRowLabel = styled(AccountRowText)(tinyText, {
   lineHeight: '20px',
   marginBottom: '5px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 export const AccountRowValue = styled(AccountRowText)(normalText, {
   fontWeight: 600,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const DeviceRowValue = styled(AccountRowValue)({
@@ -41,7 +41,7 @@ export const DeviceRowValue = styled(AccountRowValue)({
 });
 
 export const AccountOutOfTime = styled(AccountRowValue)({
-  color: colors.red,
+  color: Colors.red,
 });
 
 export const StyledDeviceNameRow = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index e11eec5fad03..cdfb906ab42f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -2,13 +2,12 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { AccessMethodSetting } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { Container, Flex } from '../lib/components';
-import { Spacings } from '../lib/foundations';
+import { Colors, Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -50,7 +49,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   width: '10px',
   height: '10px',
   borderRadius: '50%',
-  backgroundColor: props.$result ? colors.green : colors.red,
+  backgroundColor: props.$result ? Colors.green : Colors.red,
   marginRight: Spacings.spacing2,
 }));
 
@@ -300,8 +299,8 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
         <ContextMenuTrigger>
           <StyledMethodTriggerImage
             source="icon-more"
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
             height={36}
             width={36}
           />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx
index f82b997cc4ec..26ddf6a21720 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import log from '../../shared/logging';
+import { Colors } from '../lib/foundations';
 import { useMounted } from '../lib/utility-hooks';
 import {
   StyledButtonContent,
@@ -32,7 +32,7 @@ interface IIconProps {
 }
 
 export function Icon(props: IIconProps) {
-  return <ImageView {...props} tintColor={colors.white} />;
+  return <ImageView {...props} tintColor={Colors.white} />;
 }
 
 export interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -157,37 +157,37 @@ export function BlockingButton(props: IBlockingProps) {
 }
 
 export const RedButton = styled(BaseButton)({
-  backgroundColor: colors.red,
+  backgroundColor: Colors.red,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.red95,
+    backgroundColor: Colors.red95,
   },
 });
 
 export const GreenButton = styled(BaseButton)({
-  backgroundColor: colors.green,
+  backgroundColor: Colors.green,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.green90,
+    backgroundColor: Colors.green90,
   },
 });
 
 export const BlueButton = styled(BaseButton)({
-  backgroundColor: colors.blue80,
+  backgroundColor: Colors.blue80,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.blue60,
+    backgroundColor: Colors.blue60,
   },
 });
 
 export const TransparentButton = styled(BaseButton)(transparentButton, {
-  backgroundColor: colors.white20,
+  backgroundColor: Colors.white20,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
 });
 
 export const RedTransparentButton = styled(BaseButton)(transparentButton, {
-  backgroundColor: colors.red60,
+  backgroundColor: Colors.red60,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.red80,
+    backgroundColor: Colors.red80,
   },
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
index 6e16fdf6dbd4..c0ec34a592ac 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { Icon } from './cell/Label';
 
 interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -25,8 +25,8 @@ export default function ChevronButton(props: IProps) {
   return (
     <Button {...otherProps}>
       <StyledIcon
-        tintColor={colors.white80}
-        tintHoverColor={colors.white}
+        tintColor={Colors.white80}
+        tintHoverColor={Colors.white}
         source={up ? 'icon-chevron-up' : 'icon-chevron-down'}
         height={24}
         width={24}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
index 7f1970ebfcb7..bccf15d3d01d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useScheduler } from '../../shared/scheduler';
+import { Colors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 import ImageView from './ImageView';
 
@@ -80,8 +80,8 @@ export default function ClipboardLabel(props: IProps) {
           }>
           <ImageView
             source={obscured ? 'icon-unobscure' : 'icon-obscure'}
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
             width={24}
           />
         </StyledButton>
@@ -95,8 +95,8 @@ export default function ClipboardLabel(props: IProps) {
         }>
         <ImageView
           source={justCopied ? 'icon-tick' : 'icon-copy'}
-          tintColor={justCopied ? colors.green : colors.white}
-          tintHoverColor={justCopied ? colors.green : colors.white80}
+          tintColor={justCopied ? Colors.green : Colors.white}
+          tintHoverColor={justCopied ? Colors.green : Colors.white80}
           width={justCopied ? 22 : 24}
         />
       </StyledCopyButton>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
index 2e01c9375f6e..5b6e43c4f3de 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { useBoolean, useStyledRef } from '../lib/utility-hooks';
 import { smallText } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
@@ -117,7 +117,7 @@ const StyledMenu = styled.div<StyledMenuProps>((props) => {
     right: props.$align === 'left' ? 'auto' : iconMargin,
     padding: '7px 4px',
     background: 'rgb(36, 53, 78)',
-    border: `1px solid ${colors.darkBlue}`,
+    border: `1px solid ${Colors.darkBlue}`,
     borderRadius: '8px',
     zIndex: 1,
   };
@@ -130,17 +130,17 @@ const StyledMenuItem = styled.button(smallText, (props) => ({
   background: 'transparent',
   border: 'none',
   textAlign: 'left',
-  color: props.disabled ? colors.white50 : colors.white,
+  color: props.disabled ? Colors.white50 : Colors.white,
 
   '&&:hover': {
-    background: props.disabled ? 'transparent' : colors.blue,
+    background: props.disabled ? 'transparent' : Colors.blue,
   },
 }));
 
 const StyledSeparator = styled.hr({
   height: '1px',
   border: 'none',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   margin: '4px 9px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
index 5c105fa7ea4b..051f6b938fac 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { IpAddress } from '../lib/ip';
 import { useBoolean, useMounted, useStyledRef } from '../lib/utility-hooks';
@@ -255,8 +255,8 @@ export default function CustomDnsSettings() {
             source="icon-add"
             width={18}
             height={18}
-            tintColor={colors.white40}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white40}
+            tintHoverColor={Colors.white60}
             tabIndex={-1}
           />
         </StyledAddCustomDnsButton>
@@ -369,7 +369,7 @@ function CellListItem(props: ICellListItemProps) {
                 source="icon-close"
                 width={18}
                 height={18}
-                tintColor={editing ? colors.black : colors.white40}
+                tintColor={editing ? Colors.black : Colors.white40}
               />
             </StyledRemoveButton>
           </AriaDescribed>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
index b8fdc7fd383e..18b98ff6e36e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import * as Cell from './cell';
 import ImageView from './ImageView';
 
@@ -9,7 +9,7 @@ export const StyledCustomDnsFooter = styled(Cell.CellFooter)({
 });
 
 export const StyledAddCustomDnsButton = styled(Cell.CellButton)({
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
 });
 
 export const StyledAddCustomDnsLabel = styled(Cell.Label)<{ $paddingLeft?: number }>((props) => ({
@@ -25,7 +25,7 @@ export const StyledAddCustomDnsLabel = styled(Cell.Label)<{ $paddingLeft?: numbe
 
 export const StyledContainer = styled(Cell.Container)({
   display: 'flex',
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
 });
 
 export const StyledButton = styled.button({
@@ -57,6 +57,6 @@ export const StyledRemoveButton = styled.button({
 
 export const StyledRemoveIcon = styled(ImageView)({
   [StyledRemoveButton + ':hover &&']: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
index cf1c413f6b44..a26510db9003 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { useSelector } from '../redux/store';
 import { AppMainHeader } from './app-main-header';
 import * as AppButton from './AppButton';
@@ -18,7 +18,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -38,12 +38,12 @@ export const StyledStatusIcon = styled.div({
 export const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
   marginBottom: '8px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledMessage = styled.span(smallText, {
   marginBottom: measurements.rowVerticalMargin,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export function DeviceRevokedView() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
index 647dc78b4ab8..849838024d1b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { AppMainHeader } from './app-main-header';
 import { measurements } from './common-styles';
 import ImageView from './ImageView';
@@ -36,7 +36,7 @@ const Subtitle = styled.span({
   fontSize: '14px',
   lineHeight: '20px',
   margin: `0 ${measurements.horizontalViewMargin}`,
-  color: colors.white40,
+  color: Colors.white40,
   textAlign: 'center',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
index df154e628bae..e1d6002d2967 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -3,12 +3,13 @@ import { useParams } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, links } from '../../config.json';
+import { links } from '../../config.json';
 import { formatDate } from '../../shared/account-expiry';
 import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -35,7 +36,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -53,7 +54,7 @@ export const StyledTitle = styled.span(hugeText, {
 
 export const StyledLabel = styled.span(tinyText, {
   lineHeight: '20px',
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '9px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 5e6275157024..1cb2fcde1eac 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import AccountNumberLabel from './AccountNumberLabel';
 import * as Cell from './cell';
 import { hugeText, measurements, tinyText } from './common-styles';
@@ -12,7 +12,7 @@ export const StyledAccountNumberLabel = styled(AccountNumberLabel)({
   lineHeight: '20px',
   fontSize: '20px',
   fontWeight: 700,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledModalCellContainer = styled(Cell.Container)({
@@ -28,7 +28,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -45,11 +45,11 @@ export const StyledTitle = styled.span(hugeText, {
 
 export const StyledMessage = styled.span(tinyText, {
   marginBottom: '20px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledAccountNumberMessage = styled.span(tinyText, {
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledStatusIcon = styled.div({
@@ -70,5 +70,5 @@ export const StyledDeviceLabel = styled.span(tinyText, {
   alignItems: 'middle',
   lineHeight: '20px',
   marginBottom: '18px',
-  color: colors.white,
+  color: Colors.white,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
index 790215cab401..93a76d777438 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { Ownership } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
@@ -10,6 +9,7 @@ import {
   filterLocations,
   filterLocationsByEndPointType,
 } from '../lib/filter-locations';
+import { Colors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useNormalRelaySettings, useTunnelProtocol } from '../lib/relay-settings-hooks';
 import { useBoolean } from '../lib/utility-hooks';
@@ -29,7 +29,7 @@ import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 
 const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   flex: 1,
 });
 
@@ -240,7 +240,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) {
           <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label>
         </AriaLabel>
         <ImageView
-          tintColor={colors.white80}
+          tintColor={Colors.white80}
           source={expanded ? 'icon-chevron-up' : 'icon-chevron-down'}
           height={24}
         />
@@ -290,7 +290,7 @@ function FilterByProvider(props: IFilterByProviderProps) {
       <Cell.CellButton onClick={toggleExpanded}>
         <Cell.Label>{messages.pgettext('filter-view', 'Providers')}</Cell.Label>
         <ImageView
-          tintColor={colors.white80}
+          tintColor={Colors.white80}
           source={expanded ? 'icon-chevron-up' : 'icon-chevron-down'}
           height={24}
         />
@@ -327,20 +327,20 @@ const StyledCheckbox = styled.div({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: colors.white,
+  backgroundColor: Colors.white,
   borderRadius: '4px',
 });
 
 const StyledRow = styled(Cell.Row)({
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
   '&&:hover': {
-    backgroundColor: colors.blue80,
+    backgroundColor: Colors.blue80,
   },
 });
 
 const StyledRowTitle = styled.label<IStyledRowTitleProps>(normalText, (props) => ({
   fontWeight: props.$bold ? 600 : 400,
-  color: colors.white,
+  color: Colors.white,
   marginLeft: '22px',
 }));
 
@@ -358,7 +358,7 @@ function CheckboxRow(props: ICheckboxRowProps) {
   return (
     <StyledRow onClick={onToggle}>
       <StyledCheckbox role="checkbox" aria-label={props.label} aria-checked={props.checked}>
-        {props.checked && <ImageView source="icon-tick" width={18} tintColor={colors.green} />}
+        {props.checked && <ImageView source="icon-tick" width={18} tintColor={Colors.green} />}
       </StyledCheckbox>
       <StyledRowTitle aria-hidden $bold={props.$bold}>
         {props.label}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
index 8243e5b3bebc..90dd080529b5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
@@ -1,6 +1,6 @@
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { Button, IconButton, IconButtonProps } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 import ImageView from './ImageView';
 import { ModalAlert, ModalAlertType } from './Modal';
@@ -17,8 +17,8 @@ export function InfoIcon(props: IInfoIconProps) {
     <ImageView
       source="icon-info"
       width={props.size ?? 18}
-      tintColor={props.tintColor ?? colors.white}
-      tintHoverColor={props.tintHoverColor ?? colors.white80}
+      tintColor={props.tintColor ?? Colors.white}
+      tintHoverColor={props.tintHoverColor ?? Colors.white80}
       className={props.className}
     />
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
index 5d0133f2cf83..59675c025e94 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
@@ -26,7 +26,7 @@ export default function Launch() {
 }
 
 const StyledFooter = styled(Footer)({
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   transition: 'opacity 250ms ease-in-out',
 });
 
@@ -34,14 +34,14 @@ const StyledFooterInner = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   borderRadius: '8px',
   margin: 0,
   padding: '16px',
 });
 
 const StyledFooterMessage = styled.span(tinyText, {
-  color: colors.white,
+  color: Colors.white,
   margin: `8px 0 ${measurements.buttonVerticalMargin} 0`,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 092e4f1f01e8..ebfe29618df9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { Spacings } from '../lib/foundations';
 import { buttonReset } from '../lib/styles';
 import * as Cell from './cell';
@@ -46,13 +46,13 @@ const baseButtonStyles = {
   ...buttonReset,
   width: '100%',
   height: '100%',
-  backgroundColor: colors.white60,
+  backgroundColor: Colors.white60,
   cursor: 'default',
   '&&:hover': {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
   '&:focus-visible': {
-    outline: `2px solid ${colors.white}`,
+    outline: `2px solid ${Colors.white}`,
     outlineOffset: '-2px',
   },
 };
@@ -74,14 +74,14 @@ export const StyledAccountDropdownTrailingButton = styled.button({
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&:focus-visible': {
-    outline: `2px solid ${colors.white}`,
+    outline: `2px solid ${Colors.white}`,
     outlineOffset: '2px',
   },
 });
 
 export const StyledAccountDropdownItemButtonLabel = styled(Cell.Label)(largeText, {
   margin: '0',
-  color: colors.blue80,
+  color: Colors.blue80,
   borderWidth: 0,
   textAlign: 'left',
   marginLeft: 0,
@@ -99,7 +99,7 @@ export const StyledFooter = styled(Footer)<{ $show: boolean }>((props) => ({
   width: '100%',
   bottom: 0,
   transform: `translateY(${props.$show ? 0 : 100}%)`,
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   transition: 'transform 250ms ease-in-out',
 }));
 
@@ -132,14 +132,14 @@ export const StyledAccountInputGroup = styled.form<IStyledAccountInputGroupProps
   borderStyle: 'solid',
   borderRadius: '8px',
   overflow: 'hidden',
-  borderColor: props.$error ? colors.red40 : props.$active ? colors.darkBlue : 'transparent',
+  borderColor: props.$error ? Colors.red40 : props.$active ? Colors.darkBlue : 'transparent',
   opacity: props.$editable ? 1 : 0.6,
 }));
 
 export const StyledAccountInputBackdrop = styled.div({
   display: 'flex',
-  backgroundColor: colors.white,
-  borderColor: colors.darkBlue,
+  backgroundColor: Colors.white,
+  borderColor: Colors.darkBlue,
 });
 
 export const StyledInputButton = styled.button<{ $visible: boolean }>((props) => ({
@@ -151,12 +151,12 @@ export const StyledInputButton = styled.button<{ $visible: boolean }>((props) =>
   justifyContent: 'center',
   opacity: props.$visible ? 1 : 0,
   transition: 'opacity 250ms ease-in-out',
-  backgroundColor: colors.green,
+  backgroundColor: Colors.green,
 }));
 
 export const StyledDropdownSpacer = styled.div({
   height: 1,
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledTitle = styled.h1(hugeText, {
@@ -170,11 +170,11 @@ export const StyledInput = styled(FormattableTextInput)(largeText, {
   minWidth: 0,
   borderWidth: 0,
   padding: '12px 12px 12px',
-  color: colors.blue,
+  color: Colors.blue,
   backgroundColor: 'transparent',
   flex: 1,
   '&&::placeholder': {
-    color: colors.blue40,
+    color: Colors.blue40,
   },
 });
 
@@ -183,19 +183,19 @@ export const StyledBlockMessageContainer = styled.div({
   flexDirection: 'column',
   flex: 1,
   alignSelf: 'start',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   borderRadius: '8px',
   margin: '5px 16px 10px',
   padding: '16px',
 });
 
 export const StyledBlockTitle = styled.div(smallText, {
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '5px',
   fontWeight: 700,
 });
 
 export const StyledBlockMessage = styled.div(tinyText, {
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '10px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
index e339566c243a..a78105379c4e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
@@ -2,8 +2,8 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import log from '../../shared/logging';
+import { Colors } from '../lib/foundations';
 import { useEffectEvent } from '../lib/utility-hooks';
 import { useWillExit } from '../lib/will-exit';
 import * as AppButton from './AppButton';
@@ -128,7 +128,7 @@ const StyledModalAlert = styled.div<{ $visible: boolean; $closing: boolean }>((p
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: colors.darkBlue,
+    backgroundColor: Colors.darkBlue,
     borderRadius: '11px',
     padding: '16px 0 16px 16px',
     maxHeight: '80vh',
@@ -320,15 +320,15 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
     switch (type) {
       case ModalAlertType.info:
         source = 'icon-info';
-        color = colors.white;
+        color = Colors.white;
         break;
       case ModalAlertType.caution:
         source = 'icon-alert';
-        color = colors.white;
+        color = Colors.white;
         break;
       case ModalAlertType.warning:
         source = 'icon-alert';
-        color = colors.red;
+        color = Colors.red;
         break;
 
       case ModalAlertType.loading:
@@ -355,13 +355,13 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
 }
 
 const ModalTitle = styled.h1(normalText, {
-  color: colors.white,
+  color: Colors.white,
   fontWeight: 600,
   margin: '18px 0 0 0',
 });
 
 export const ModalMessage = styled.span(tinyText, {
-  color: colors.white80,
+  color: Colors.white80,
   marginTop: '16px',
 
   [`${ModalTitle} ~ &&`]: {
@@ -372,5 +372,5 @@ export const ModalMessage = styled.span(tinyText, {
 export const ModalMessageList = styled.ul({
   listStyle: 'disc outside',
   paddingLeft: '20px',
-  color: colors.white80,
+  color: Colors.white80,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index bdc81af686bc..d2496447ede4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
 import { IconButton } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { useEffectEvent, useLastDefinedValue, useStyledRef } from '../lib/utility-hooks';
 import * as AppButton from './AppButton';
 import { tinyText } from './common-styles';
@@ -13,11 +13,11 @@ import ImageView from './ImageView';
 const NOTIFICATION_AREA_ID = 'notification-area';
 
 export const NotificationTitle = styled.span(tinyText, {
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const NotificationSubtitleText = styled.span(tinyText, {
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 interface INotificationSubtitleProps {
@@ -39,7 +39,7 @@ export const NotificationActionButton = styled(AppButton.SimpleButton)({
 
 export const NotificationActionButtonInner = styled(ImageView)({
   [NotificationActionButton + ':hover &&']: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
 
@@ -56,7 +56,7 @@ export function NotificationOpenLinkAction(props: NotificationActionProps) {
         <NotificationActionButtonInner
           height={12}
           width={12}
-          tintColor={colors.white60}
+          tintColor={Colors.white60}
           source="icon-extLink"
         />
       </NotificationActionButton>
@@ -73,7 +73,7 @@ export function NotificationTroubleshootDialogAction(props: NotificationActionPr
       <NotificationActionButtonInner
         height={12}
         width={12}
-        tintColor={colors.white60}
+        tintColor={Colors.white60}
         source="icon-info"
       />
     </NotificationActionButton>
@@ -112,9 +112,9 @@ interface INotificationIndicatorProps {
 }
 
 const notificationIndicatorTypeColorMap = {
-  success: colors.green,
-  warning: colors.yellow,
-  error: colors.red,
+  success: Colors.green,
+  warning: Colors.yellow,
+  error: Colors.red,
 };
 
 export const NotificationIndicator = styled.div<INotificationIndicatorProps>((props) => ({
@@ -136,7 +136,7 @@ const Collapsible = styled.div<ICollapsibleProps>((props) => {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: props.$alignBottom ? 'flex-end' : 'flex-start',
-    backgroundColor: colors.darkerBlue,
+    backgroundColor: Colors.darkerBlue,
     overflow: 'hidden',
     // Using auto as the initial value prevents transition if a notification is visible on mount.
     height: props.$height === undefined ? 'auto' : `${props.$height}px`,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
index d03c90a0e297..422bec3d509e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { NonEmptyArray } from '../../shared/utils';
+import { Colors } from '../lib/foundations';
 import { useStyledRef } from '../lib/utility-hooks';
 import { Icon } from './cell';
 
@@ -153,18 +153,18 @@ const StyledPageIndicator = styled.div<{ $current: boolean }>((props) => ({
   width: '8px',
   height: '8px',
   borderRadius: '50%',
-  backgroundColor: props.$current ? colors.white80 : colors.white40,
+  backgroundColor: props.$current ? Colors.white80 : Colors.white40,
 
   [`${StyledTransparentButton}:hover &&`]: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 }));
 
 const StyledArrow = styled(Icon)((props) => ({
-  backgroundColor: props.disabled ? colors.white20 : props.tintColor,
+  backgroundColor: props.disabled ? Colors.white20 : props.tintColor,
 
   [`${StyledTransparentButton}:hover &&`]: {
-    backgroundColor: props.disabled ? colors.white20 : props.tintHoverColor,
+    backgroundColor: props.disabled ? Colors.white20 : props.tintHoverColor,
   },
 }));
 
@@ -203,8 +203,8 @@ function Controls(props: ControlsProps) {
             height={12}
             width={7}
             source="icon-chevron"
-            tintColor={colors.white}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white60}
           />
         </StyledTransparentButton>
         <StyledTransparentButton onClick={props.next}>
@@ -213,8 +213,8 @@ function Controls(props: ControlsProps) {
             height={12}
             width={7}
             source="icon-chevron"
-            tintColor={colors.white}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white60}
           />
         </StyledTransparentButton>
       </StyledArrows>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
index 26a70fe242fc..da055cb5da94 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { hugeText, measurements, smallText } from './common-styles';
 
 export const StyledContentContainer = styled.div({
@@ -37,8 +37,8 @@ const input = {
   flex: 1,
   borderRadius: '4px',
   padding: '14px',
-  color: colors.blue,
-  backgroundColor: colors.white,
+  color: Colors.blue,
+  backgroundColor: Colors.white,
   border: 'none',
 };
 
@@ -60,16 +60,16 @@ export const StyledStatusIcon = styled.div({
 
 export const StyledSentMessage = styled.span(smallText, {
   overflow: 'visible',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 export const StyledThanks = styled.span({
-  color: colors.green,
+  color: Colors.green,
 });
 
 export const StyledEmail = styled.span({
   fontWeight: 900,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledSendStatus = styled.span(hugeText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
index 37f51ee5e4d3..93d39a57dfe0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { normalText, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 import ImageView from './ImageView';
 
 export const StyledLabel = styled.span(smallText, {
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '9px',
 });
 
@@ -16,19 +16,19 @@ export const StyledInput = styled(FormattableTextInput)(normalText, {
   padding: '14px',
   fontWeight: 600,
   lineHeight: '26px',
-  color: colors.blue,
-  backgroundColor: colors.white,
+  color: Colors.blue,
+  backgroundColor: Colors.white,
   border: 'none',
   borderRadius: '4px',
   '&&::placeholder': {
-    color: colors.blue40,
+    color: Colors.blue40,
   },
 });
 
 export const StyledResponse = styled.span(tinyText, {
   lineHeight: '20px',
   marginTop: '8px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledProgressWrapper = styled.div({
@@ -42,7 +42,7 @@ export const StyledProgressResponse = styled(StyledResponse)({
 });
 
 export const StyledErrorResponse = styled(StyledResponse)({
-  color: colors.red,
+  color: Colors.red,
 });
 
 export const StyledEmptyResponse = styled.span({
@@ -65,6 +65,6 @@ export const StyledStatusIcon = styled.div({
 export const StyledTitle = styled.span(smallText, {
   lineHeight: '22px',
   fontWeight: 400,
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '5px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
index 1060121b9e09..97fb6471b1fa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import * as Cell from './cell';
 
 const indicatorStyles: Styles<
@@ -14,7 +14,7 @@ const indicatorStyles: Styles<
 };
 
 const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (props) => ({
-  backgroundColor: props.$active ? colors.green90 : colors.red95,
+  backgroundColor: props.$active ? Colors.green90 : Colors.red95,
 }));
 
 const TickIcon = styled(Cell.Icon)({
@@ -29,12 +29,12 @@ interface IProps {
 
 export default function RelayStatusIndicator(props: IProps) {
   return props.selected ? (
-    <TickIcon tintColor={colors.white} source="icon-tick" width={18} />
+    <TickIcon tintColor={Colors.white} source="icon-tick" width={18} />
   ) : (
     <StyledRelayStatus $active={props.active} />
   );
 }
 
 export const SpecialLocationIndicator = styled.div(indicatorStyles, {
-  backgroundColor: colors.white90,
+  backgroundColor: Colors.white90,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
index fe1d1936aa26..dc9810e299f1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { Colors } from '../lib/foundations';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
@@ -20,17 +20,17 @@ export const StyledSearchInput = styled.input.attrs({ type: 'text' })({
   padding: '9px 38px',
   margin: 0,
   lineHeight: '24px',
-  color: colors.white60,
-  backgroundColor: colors.white10,
+  color: Colors.white60,
+  backgroundColor: Colors.white10,
   '&&::placeholder': {
-    color: colors.white60,
+    color: Colors.white60,
   },
   '&&:focus': {
-    color: colors.blue,
-    backgroundColor: colors.white,
+    color: Colors.blue,
+    backgroundColor: Colors.white,
   },
   '&&:focus::placeholder': {
-    color: colors.blue40,
+    color: Colors.blue40,
   },
 });
 
@@ -50,19 +50,19 @@ export const StyledSearchIcon = styled(ImageView)({
   transform: 'translateY(-50%)',
   left: '9px',
   [`${StyledSearchInput}:focus ~ &&`]: {
-    backgroundColor: colors.blue,
+    backgroundColor: Colors.blue,
   },
 });
 
 export const StyledClearIcon = styled(ImageView)({
   '&&:hover': {
-    backgroundColor: colors.white60,
+    backgroundColor: Colors.white60,
   },
   [`${StyledSearchInput}:focus ~ ${StyledClearButton} &&`]: {
-    backgroundColor: colors.blue40,
+    backgroundColor: Colors.blue40,
   },
   [`${StyledSearchInput}:focus ~ ${StyledClearButton} &&:hover`]: {
-    backgroundColor: colors.blue,
+    backgroundColor: Colors.blue,
   },
 });
 
@@ -107,10 +107,10 @@ export default function SearchBar(props: ISearchBarProps) {
         onInput={onInput}
         placeholder={messages.gettext('Search for...')}
       />
-      <StyledSearchIcon source="icon-search" width={24} tintColor={colors.white60} />
+      <StyledSearchIcon source="icon-search" width={24} tintColor={Colors.white60} />
       {props.searchTerm.length > 0 && (
         <StyledClearButton onClick={onClear}>
-          <StyledClearIcon source="icon-close" width={18} tintColor={colors.white40} />
+          <StyledClearIcon source="icon-close" width={18} tintColor={Colors.white40} />
         </StyledClearButton>
       )}
     </StyledSearchContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
index 534a01a58c65..bc96fab5a708 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { Colors } from '../lib/foundations';
 
 export enum SecuredDisplayStyle {
   secured,
@@ -15,14 +15,14 @@ export enum SecuredDisplayStyle {
 }
 
 const securedDisplayStyleColorMap = {
-  [SecuredDisplayStyle.securing]: colors.white,
-  [SecuredDisplayStyle.securingPq]: colors.white,
-  [SecuredDisplayStyle.unsecuring]: colors.white,
-  [SecuredDisplayStyle.secured]: colors.green,
-  [SecuredDisplayStyle.securedPq]: colors.green,
-  [SecuredDisplayStyle.blocked]: colors.white,
-  [SecuredDisplayStyle.unsecured]: colors.red,
-  [SecuredDisplayStyle.failedToSecure]: colors.red,
+  [SecuredDisplayStyle.securing]: Colors.white,
+  [SecuredDisplayStyle.securingPq]: Colors.white,
+  [SecuredDisplayStyle.unsecuring]: Colors.white,
+  [SecuredDisplayStyle.secured]: Colors.green,
+  [SecuredDisplayStyle.securedPq]: Colors.green,
+  [SecuredDisplayStyle.blocked]: Colors.white,
+  [SecuredDisplayStyle.unsecured]: Colors.red,
+  [SecuredDisplayStyle.failedToSecure]: Colors.red,
 };
 
 const StyledSecuredLabel = styled.span<{ $displayStyle: SecuredDisplayStyle }>((props) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index b2ebe680d821..03c06967054e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -2,12 +2,12 @@ import { useCallback, useEffect, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Flex } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
@@ -207,7 +207,7 @@ const StyledStatusTitle = styled.div(normalText, {
   alignItems: 'center',
   fontWeight: 'bold',
   lineHeight: '20px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 const StyledStatusImage = styled(ImageView)({
@@ -215,7 +215,7 @@ const StyledStatusImage = styled(ImageView)({
 });
 
 const StyledStatusSubTitle = styled.div(tinyText, {
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 interface ImportStatusProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
index ed2dd8469532..baccb60f42c2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import useActions from '../lib/actionsHook';
+import { Colors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs, useRefCallback, useStyledRef } from '../lib/utility-hooks';
 import settingsImportActions from '../redux/settings-import/actions';
@@ -16,7 +16,7 @@ const StyledTextArea = styled.textarea({
   width: '100%',
   flex: 1,
   padding: '13px',
-  color: colors.blue,
+  color: Colors.blue,
 });
 
 export default function SettingsTextImport() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx
index b9ce4a6a59c7..0db3499f3edd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { smallText } from './common-styles';
 
 export enum SmallButtonColor {
@@ -14,18 +14,18 @@ function getButtonColors(color?: SmallButtonColor, disabled?: boolean) {
   switch (color) {
     case SmallButtonColor.red:
       return {
-        background: disabled ? colors.red60 : colors.red,
-        backgroundHover: disabled ? colors.red60 : colors.red80,
+        background: disabled ? Colors.red60 : Colors.red,
+        backgroundHover: disabled ? Colors.red60 : Colors.red80,
       };
     case SmallButtonColor.green:
       return {
-        background: disabled ? colors.green40 : colors.green,
-        backgroundHover: disabled ? colors.green40 : colors.green90,
+        background: disabled ? Colors.green40 : Colors.green,
+        backgroundHover: disabled ? Colors.green40 : Colors.green90,
       };
     default:
       return {
-        background: disabled ? colors.blue50 : colors.blue,
-        backgroundHover: disabled ? colors.blue50 : colors.blue60,
+        background: disabled ? Colors.blue50 : Colors.blue,
+        backgroundHover: disabled ? Colors.blue50 : Colors.blue60,
       };
   }
 }
@@ -46,7 +46,7 @@ const StyledSmallButton = styled.button<StyledSmallButtonProps>(smallText, (prop
     padding: '5px 16px',
     border: 'none',
     background: buttonColors.background,
-    color: props.disabled ? colors.white50 : colors.white,
+    color: props.disabled ? Colors.white50 : Colors.white,
     borderRadius: '4px',
     marginLeft: `${BUTTON_GROUP_GAP}px`,
     alignItems: 'center',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 98438116c9f8..af8b55e2437d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
-import { Spacings } from '../lib/foundations';
+import { Colors, Spacings } from '../lib/foundations';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { measurements, normalText } from './common-styles';
@@ -27,7 +26,7 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
 
 export const StyledCellButton = styled(Cell.CellButton)<{ $lookDisabled?: boolean }>((props) => ({
   '&&:not(:disabled):hover': {
-    backgroundColor: props.$lookDisabled ? colors.blue : undefined,
+    backgroundColor: props.$lookDisabled ? Colors.blue : undefined,
   },
 }));
 
@@ -73,7 +72,7 @@ export const StyledSpinnerRow = styled(Cell.CellButton)({
   justifyContent: 'center',
   padding: `${Spacings.spacing3} 0`,
   marginBottom: measurements.rowVerticalMargin,
-  background: colors.blue40,
+  background: Colors.blue40,
 });
 
 export const StyledBrowseButton = styled(AppButton.BlueButton)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
index 595bc422a218..ba28320c5508 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 
 interface IProps {
   id?: string;
@@ -18,7 +18,7 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({
   position: 'relative',
   width: '34px',
   height: '22px',
-  borderColor: props.disabled ? colors.white20 : colors.white80,
+  borderColor: props.disabled ? Colors.white20 : Colors.white80,
   borderWidth: '2px',
   borderStyle: 'solid',
   borderRadius: '11px',
@@ -26,9 +26,9 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({
 }));
 
 const Knob = styled.div<{ $isOn: boolean; disabled: boolean }>((props) => {
-  let backgroundColor = props.$isOn ? colors.green : colors.red;
+  let backgroundColor = props.$isOn ? Colors.green : Colors.red;
   if (props.disabled) {
-    backgroundColor = props.$isOn ? colors.green40 : colors.red40;
+    backgroundColor = props.$isOn ? Colors.green40 : Colors.red40;
   }
 
   return {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
index 23a5d68b3416..ed797ead3322 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -2,12 +2,12 @@ import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { IDevice } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { RoutePath } from '../lib/routes';
@@ -49,7 +49,7 @@ const StyledStatusIcon = styled.div({
 const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
   margin: `0 ${measurements.horizontalViewMargin} 8px`,
-  color: colors.white,
+  color: Colors.white,
 });
 
 const StyledLabel = styled.span({
@@ -57,7 +57,7 @@ const StyledLabel = styled.span({
   fontSize: '12px',
   fontWeight: 600,
   lineHeight: '20px',
-  color: colors.white,
+  color: Colors.white,
   margin: `0 ${measurements.horizontalViewMargin} 18px`,
 });
 
@@ -81,7 +81,7 @@ const StyledDeviceName = styled.span(normalText, {
 const StyledDeviceDate = styled.span(tinyText, {
   fontSize: '10px',
   lineHeight: '10px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledRemoveDeviceButton = styled.button({
@@ -262,8 +262,8 @@ function Device(props: IDeviceProps) {
               source="icon-close"
               width={18}
               height={18}
-              tintColor={colors.white40}
-              tintHoverColor={colors.white60}
+              tintColor={Colors.white40}
+              tintHoverColor={Colors.white60}
             />
           </StyledRemoveDeviceButton>
         )}
@@ -271,7 +271,7 @@ function Device(props: IDeviceProps) {
       <ModalAlert
         isOpen={confirmationVisible}
         type={ModalAlertType.warning}
-        iconColor={colors.red}
+        iconColor={Colors.red}
         buttons={[
           <AppButton.RedButton key="remove" onClick={onRemove} disabled={deleting}>
             {
@@ -303,7 +303,7 @@ function Device(props: IDeviceProps) {
       <ModalAlert
         isOpen={error}
         type={ModalAlertType.warning}
-        iconColor={colors.red}
+        iconColor={Colors.red}
         buttons={[
           <AppButton.BlueButton key="close" onClick={resetError}>
             {messages.gettext('Close')}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
index 55059e223f31..76a3fdeb16c6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 
 export default styled.span({
   display: 'inline-block',
   fontFamily: 'Open Sans',
-  color: colors.blue,
+  color: Colors.blue,
   fontSize: '12px',
   fontWeight: 800,
   lineHeight: '20px',
   padding: '1px 8px',
   marginLeft: '8px',
-  background: colors.yellow,
+  background: Colors.yellow,
   borderRadius: '5px',
   textAlign: 'center',
   verticalAlign: 'middle',
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 de2649e3c6f8..f4c5428157ea 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { useBoolean, useCombinedRefs, useEffectEvent, useStyledRef } from '../../lib/utility-hooks';
 import { normalText } from '../common-styles';
 import ImageView from '../ImageView';
@@ -30,9 +30,9 @@ const StyledInput = styled.input<{ $focused: boolean; $valid?: boolean }>((props
   border: 'none',
   width: '100%',
   height: '100%',
-  color: props.$valid === false ? colors.red : props.$focused ? colors.blue : colors.white,
+  color: props.$valid === false ? Colors.red : props.$focused ? Colors.blue : Colors.white,
   '&&::placeholder': {
-    color: props.$focused ? colors.blue60 : colors.white60,
+    color: props.$focused ? Colors.blue60 : Colors.white60,
   },
 }));
 
@@ -178,7 +178,7 @@ export const Input = React.memo(React.forwardRef(InputWithRef));
 const InputFrame = styled.div<{ $focused: boolean }>((props) => ({
   display: 'flex',
   flexGrow: 0,
-  backgroundColor: props.$focused ? colors.white : 'rgba(255,255,255,0.1)',
+  backgroundColor: props.$focused ? Colors.white : 'rgba(255,255,255,0.1)',
   borderRadius: '4px',
   padding: '6px 8px',
 }));
@@ -287,7 +287,7 @@ const StyledTextArea = styled.textarea<{ $invalid?: boolean }>(normalText, (prop
   fontWeight: 400,
   resize: 'none',
   padding: '10px 25px 10px 0',
-  color: props.$invalid ? colors.red : 'auto',
+  color: props.$invalid ? Colors.red : 'auto',
 }));
 
 const StyledInputFiller = styled.div({
@@ -399,8 +399,8 @@ export function RowInput(props: IRowInputProps) {
           <ImageView
             source="icon-check"
             height={18}
-            tintColor={value === '' ? colors.blue60 : colors.blue}
-            tintHoverColor={value === '' ? colors.blue60 : colors.blue80}
+            tintColor={value === '' ? Colors.blue60 : Colors.blue}
+            tintHoverColor={value === '' ? Colors.blue60 : Colors.blue80}
           />
         </StyledSubmitButton>
       </StyledCellInputRowContainer>
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 16807bee46b5..954e277844b0 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 { colors } from '../../../config.json';
+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: colors.blue,
+  backgroundColor: Colors.blue,
   minHeight: measurements.rowMinHeight,
   paddingLeft: measurements.horizontalViewMargin,
   paddingRight: measurements.horizontalViewMargin,
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 0917cce12928..7de9a01305a2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -1,9 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
-import { 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';
@@ -198,21 +197,21 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
           $visible={props.isSelected}
           source="icon-tick"
           width={18}
-          tintColor={colors.white}
+          tintColor={Colors.white}
         />
         <SelectorCellLabel subLabel={props.subLabel}>{props.children}</SelectorCellLabel>
       </Cell.CellButton>
       {props.details && (
         <StyledSideButton
-          $backgroundColor={colors.blue40}
-          $backgroundColorHover={colors.blue80}
+          $backgroundColor={Colors.blue40}
+          $backgroundColorHover={Colors.blue80}
           aria-label={props.details.ariaLabel}
           onClick={navigate}>
           <StyledSideButtonImage
             source="icon-chevron"
             width={7}
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
           />
         </StyledSideButton>
       )}
@@ -243,9 +242,9 @@ interface StyledCustomContainerProps {
 }
 
 const StyledCustomContainer = styled(Cell.Container)<StyledCustomContainerProps>((props) => ({
-  backgroundColor: props.selected ? colors.green : colors.blue40,
+  backgroundColor: props.selected ? Colors.green : Colors.blue40,
   '&&:hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue,
+    backgroundColor: props.selected ? Colors.green : Colors.blue,
   },
 }));
 
@@ -367,7 +366,7 @@ export function SelectorWithCustomItem<T, U>(props: SelectorWithCustomItemProps<
             $visible={customIsSelected}
             source="icon-tick"
             width={18}
-            tintColor={colors.white}
+            tintColor={Colors.white}
           />
           <Cell.ValueLabel>{messages.gettext('Custom')}</Cell.ValueLabel>
           <AriaInput>
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 ccca7cdc0b52..efd44271caa4 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 { colors } from '../../../config.json';
+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: colors.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 6f4f1a0d90d0..d0c0a3c0879b 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 { colors } from '../../../config.json';
+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 ${colors.white} solid`,
+    border: `1px ${Colors.white} solid`,
     top: 0,
     left: 0,
   },
@@ -71,7 +71,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
     width: '8px',
     height: '8px',
     borderRadius: '50%',
-    backgroundColor: colors.white,
+    backgroundColor: Colors.white,
     top: '3px',
     left: '3px',
   },
@@ -85,7 +85,7 @@ const StyledRadioButtonContainer = styled.div({
 });
 
 const StyledRadioButtonLabel = styled.label(smallNormalText, {
-  color: colors.white,
+  color: Colors.white,
   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 04f809a14490..7b62dd251a6a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { AriaInputGroup, AriaLabel } from '../AriaGroup';
 import { measurements, smallNormalText, tinyText } from '../common-styles';
 import ImageView from '../ImageView';
@@ -14,7 +14,7 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   margin: `0 ${measurements.horizontalViewMargin} ${measurements.rowVerticalMargin}`,
   padding: '0 8px',
   minHeight: '36px',
-  backgroundColor: colors.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 ? colors.red : 'transparent',
-  outlineColor: props.$invalid ? colors.red : 'transparent',
+  borderColor: props.$invalid ? Colors.red : 'transparent',
+  outlineColor: props.$invalid ? Colors.red : 'transparent',
   '&&:focus-within': {
-    borderColor: props.$invalid ? colors.red : colors.white,
-    outlineColor: props.$invalid ? colors.red : colors.white,
+    borderColor: props.$invalid ? Colors.red : Colors.white,
+    outlineColor: props.$invalid ? Colors.red : Colors.white,
   },
 }));
 
@@ -61,7 +61,7 @@ const StyledSettingsRowErrorMessage = styled.div(tinyText, {
   alignItems: 'center',
   marginLeft: measurements.horizontalViewMargin,
   marginTop: '5px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledErrorMessageAlertIcon = styled(ImageView)({
@@ -132,7 +132,7 @@ export function SettingsRow(props: React.PropsWithChildren<IndentedRowProps>) {
 export function SettingsRowErrorMessage(props: React.PropsWithChildren) {
   return (
     <StyledSettingsRowErrorMessage>
-      <StyledErrorMessageAlertIcon source="icon-alert" tintColor={colors.red} width={12} />
+      <StyledErrorMessageAlertIcon source="icon-alert" tintColor={Colors.red} width={12} />
       {props.children}
     </StyledSettingsRowErrorMessage>
   );
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 7b5e1d7ab4ef..aa7b64bbeca0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { useScheduler } from '../../../shared/scheduler';
+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: colors.white,
+  color: Colors.white,
   borderRadius: '4px',
   height: '26px',
 
   '&&:focus': {
-    outline: `1px ${colors.darkBlue} solid`,
-    backgroundColor: colors.blue,
+    outline: `1px ${Colors.darkBlue} solid`,
+    backgroundColor: Colors.blue,
   },
 });
 
@@ -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: colors.darkBlue,
-  border: `1px ${colors.darkerBlue} solid`,
+  backgroundColor: Colors.darkBlue,
+  border: `1px ${Colors.darkerBlue} solid`,
   borderRadius: '4px',
   padding: '4px 8px',
   maxHeight: '250px',
@@ -155,7 +155,7 @@ export function SettingsSelect<T extends string>(props: SettingsSelectProps<T>)
             <StyledSelectedText>
               {props.items.find((item) => item.value === value)?.label ?? ''}
             </StyledSelectedText>
-            <StyledChevron tintColor={colors.white60} source="icon-chevron-down" width={22} />
+            <StyledChevron tintColor={Colors.white60} source="icon-chevron-down" width={22} />
           </StyledSelectedContainerInner>
           <StyledInvisibleItems>
             {props.items.map((item) => (
@@ -220,7 +220,7 @@ const StyledItem = styled.div<{ $selected: boolean }>((props) => ({
   paddingRight: '18px',
   whiteSpace: 'nowrap',
   '&&:hover': {
-    backgroundColor: colors.blue,
+    backgroundColor: Colors.blue,
   },
 }));
 
@@ -248,7 +248,7 @@ function Item<T extends string>(props: ItemProps<T>) {
       role="option"
       $selected={props.selected}
       aria-selected={props.selected}>
-      {props.selected && <TickIcon tintColor={colors.white} source="icon-tick" width={12} />}
+      {props.selected && <TickIcon tintColor={Colors.white} source="icon-tick" width={12} />}
       {props.item.label}
     </StyledItem>
   );
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 44381bc681f6..f7f0bdc484c9 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 { colors } from '../../../config.json';
+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: colors.white,
+  color: Colors.white,
   width: '100px',
 
   '&&::placeholder': {
-    color: colors.white50,
+    color: Colors.white50,
   },
 });
 
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 7e271e430686..ece110758057 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 { colors } from '../../../config.json';
+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: colors.darkBlue,
+      backgroundColor: Colors.darkBlue,
     },
   }),
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
index c6bff32ef34b..c2e34d265e37 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import {
   EndpointObfuscationType,
   ITunnelEndpoint,
@@ -13,6 +12,7 @@ import {
   tunnelTypeToString,
 } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
 
@@ -38,7 +38,7 @@ const StyledConnectionDetailsHeading = styled.h2(tinyText, {
   margin: '0 0 4px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledConnectionDetailsContainer = styled.div({
@@ -58,13 +58,13 @@ const StyledIpLabelContainer = styled.div({
 
 const StyledConnectionDetailsLabel = styled.span(tinyText, {
   display: 'block',
-  color: colors.white,
+  color: Colors.white,
   fontWeight: '400',
   minHeight: '1em',
 });
 
 const StyledConnectionDetailsTitle = styled(StyledConnectionDetailsLabel)({
-  color: colors.white60,
+  color: Colors.white60,
   whiteSpace: 'nowrap',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx
index a50fada589e8..f6606629107b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import ImageView from '../ImageView';
 
 const Container = styled.button({
@@ -13,7 +13,7 @@ const Container = styled.button({
 
 const Chevron = styled(ImageView)({
   [Container + ':hover &&']: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
 
@@ -33,7 +33,7 @@ export default function ConnectionPanelChevron(props: IProps) {
         source={props.pointsUp ? 'icon-chevron-up' : 'icon-chevron-down'}
         width={24}
         height={24}
-        tintColor={colors.white}
+        tintColor={Colors.white}
       />
     </Container>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
index 1745fdaf11f7..ee2cfac3d232 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { TunnelState } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { largeText } from '../common-styles';
 
@@ -29,14 +29,14 @@ export default function ConnectionStatus() {
 function getConnectionSTatusLabelColor(tunnelState: TunnelState, lockdownMode: boolean) {
   switch (tunnelState.state) {
     case 'connected':
-      return colors.green;
+      return Colors.green;
     case 'connecting':
     case 'disconnecting':
-      return colors.white;
+      return Colors.white;
     case 'disconnected':
-      return lockdownMode ? colors.white : colors.red;
+      return lockdownMode ? Colors.white : Colors.red;
     case 'error':
-      return tunnelState.details.blockingError ? colors.red : colors.white;
+      return tunnelState.details.blockingError ? Colors.red : Colors.white;
   }
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
index 5b7e60ade00d..cac4f654fe14 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
@@ -2,9 +2,10 @@ import { useEffect, useRef } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, strings } from '../../../config.json';
+import { strings } from '../../../config.json';
 import { FeatureIndicator } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useStyledRef } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
@@ -28,7 +29,7 @@ const StyledTitle = styled.h2(tinyText, {
   margin: '0 0 2px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledFeatureIndicators = styled.div({
@@ -50,8 +51,8 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '4px',
-  background: colors.darkerBlue,
-  color: colors.white,
+  background: Colors.darkerBlue,
+  color: Colors.white,
   fontWeight: 400,
   whiteSpace: 'nowrap',
   visibility: 'hidden',
@@ -59,17 +60,17 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   // Style clickable feature indicators with a border and on-hover effect
   boxSizing: 'border-box', // make border act as padding rather than margin
   border: 'solid 1px',
-  borderColor: props.onClick ? colors.blue : colors.darkerBlue,
+  borderColor: props.onClick ? Colors.blue : Colors.darkerBlue,
   transition: 'background ease-in-out 300ms',
   '&&:hover': {
-    background: props.onClick ? colors.blue60 : undefined,
+    background: props.onClick ? Colors.blue60 : undefined,
   },
 }));
 
 const StyledBaseEllipsis = styled.span<{ $display: boolean }>(tinyText, (props) => ({
   position: 'absolute',
   top: `${LINE_HEIGHT + GAP}px`,
-  color: colors.white,
+  color: Colors.white,
   padding: '2px 8px 2px 16px',
   display: props.$display ? 'inline' : 'none',
 }));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
index 097e3b291b1c..9771c124ed48 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
@@ -1,8 +1,8 @@
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { IConnectionReduxState } from '../../redux/connection/reducers';
 import { useSelector } from '../../redux/store';
 import { smallText } from '../common-styles';
@@ -14,7 +14,7 @@ const StyledAccordion = styled(ConnectionPanelAccordion)({
 });
 
 const StyledHostname = styled.span(smallText, {
-  color: colors.white60,
+  color: Colors.white60,
   fontWeight: '400',
   flexShrink: 0,
   minHeight: '1em',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
index 268539415849..d168d09cc9b3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { TunnelState } from '../../../shared/daemon-rpc-types';
+import { Colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { largeText } from '../common-styles';
 import Marquee from '../Marquee';
 import { ConnectionPanelAccordion } from './styles';
 
 const StyledLocation = styled.span(largeText, {
-  color: colors.white,
+  color: Colors.white,
   flexShrink: 0,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
index 4cc42c06233b..b9a64fbfa0b5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import {
   compareRelayLocationGeographical,
   ICustomList,
@@ -12,6 +11,7 @@ import {
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
+import { Colors } from '../../lib/foundations';
 import { formatHtml } from '../../lib/html-formatter';
 import { useBoolean } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
@@ -105,7 +105,7 @@ const StyledSelectListItemLabel = styled(Cell.Label)(normalText, {
 
 const StyledSelectListItemIcon = styled(Cell.Icon)({
   [`${Cell.CellButton}:not(:disabled):hover &&`]: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
 
@@ -137,7 +137,7 @@ function SelectList(props: SelectListProps) {
 
 const StyledInputErrorText = styled.span(tinyText, {
   marginTop: '6px',
-  color: colors.red,
+  color: Colors.red,
 });
 
 interface EditListProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
index 56e263586672..c6dcfafb7851 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { CustomListError, CustomLists, RelayLocation } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
+import { Colors } from '../../lib/foundations';
 import { useBoolean, useStyledRef } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
 import * as Cell from '../cell';
@@ -26,7 +26,7 @@ const StyledInputContainer = styled.div({
   display: 'flex',
   alignItems: 'center',
   flex: 1,
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   paddingLeft: measurements.horizontalViewMargin,
   height: measurements.rowMinHeight,
 });
@@ -34,7 +34,7 @@ const StyledInputContainer = styled.div({
 const StyledHeaderLabel = styled(Cell.Label)({
   display: 'block',
   flex: 1,
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   paddingLeft: measurements.horizontalViewMargin,
   margin: 0,
   height: measurements.rowMinHeight,
@@ -53,17 +53,17 @@ const StyledSideButtonIcon = styled(Cell.Icon)({
   padding: '3px',
 
   [`${StyledCellButton}:disabled &&, ${StyledAddListCellButton}:disabled &&`]: {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
 
   [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]:
     {
-      backgroundColor: colors.white,
+      backgroundColor: Colors.white,
     },
 });
 
 const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({
-  color: props.$error ? colors.red : 'auto',
+  color: props.$error ? Colors.red : 'auto',
 }));
 
 interface CustomListsProps {
@@ -101,10 +101,10 @@ export default function CustomLists(props: CustomListsProps) {
           {messages.pgettext('select-location-view', 'Custom lists')}
         </StyledHeaderLabel>
         <StyledCellButton
-          $backgroundColor={colors.blue}
-          $backgroundColorHover={colors.blue80}
+          $backgroundColor={Colors.blue}
+          $backgroundColorHover={Colors.blue80}
           onClick={showAddList}>
-          <StyledSideButtonIcon source="icon-add" tintColor={colors.white60} width={18} />
+          <StyledSideButtonIcon source="icon-add" tintColor={Colors.white60} width={18} />
         </StyledCellButton>
       </StyledCellContainer>
 
@@ -196,11 +196,11 @@ function AddListForm(props: AddListFormProps) {
           </StyledInputContainer>
 
           <StyledAddListCellButton
-            $backgroundColor={colors.blue}
-            $backgroundColorHover={colors.blue80}
+            $backgroundColor={Colors.blue}
+            $backgroundColorHover={Colors.blue80}
             disabled={!nameValid}
             onClick={createList}>
-            <StyledSideButtonIcon source="icon-check" tintColor={colors.white60} width={18} />
+            <StyledSideButtonIcon source="icon-check" tintColor={Colors.white60} width={18} />
           </StyledAddListCellButton>
         </StyledCellContainer>
         <Cell.CellFooter>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx
index 58e9ba9606d0..dbdc6cceef70 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { buttonColor, ButtonColors } from '../cell/styles';
 import { measurements, normalText } from '../common-styles';
@@ -85,11 +85,11 @@ export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonPro
 export const StyledHoverIcon = styled(ImageView).attrs({
   width: 18,
   height: 18,
-  tintColor: colors.white60,
-  tintHoverColor: colors.white,
+  tintColor: Colors.white60,
+  tintHoverColor: Colors.white,
 })({
   [`${StyledHoverIconButton}:hover &&`]: {
-    backgroundColor: colors.white,
+    backgroundColor: Colors.white,
   },
 });
 
@@ -99,19 +99,19 @@ export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButt
 );
 
 export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
-  let backgroundColor = colors.blue60;
+  let backgroundColor = Colors.blue60;
   if (selected) {
-    backgroundColor = colors.green;
+    backgroundColor = Colors.green;
   } else if (level === 1) {
-    backgroundColor = colors.blue40;
+    backgroundColor = Colors.blue40;
   } else if (level === 2) {
-    backgroundColor = colors.blue20;
+    backgroundColor = Colors.blue20;
   } else if (level === 3) {
-    backgroundColor = colors.blue10;
+    backgroundColor = Colors.blue10;
   }
 
   return {
     $backgroundColor: backgroundColor,
-    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
+    $backgroundColorHover: selected || disabled ? backgroundColor : Colors.blue80,
   };
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
index 28312da19e5b..e069d33fbcdc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { smallText } from '../common-styles';
 
 const StyledScopeBar = styled.div({
   display: 'flex',
   flexDirection: 'row',
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
   borderRadius: '13px',
   overflow: 'hidden',
 });
@@ -40,12 +40,12 @@ const StyledScopeBarItem = styled.button<{ selected?: boolean }>(smallText, (pro
   flex: 1,
   flexBasis: 0,
   padding: '4px 8px',
-  color: colors.white,
+  color: Colors.white,
   textAlign: 'center',
   border: 'none',
-  backgroundColor: props.selected ? colors.green : 'transparent',
+  backgroundColor: props.selected ? Colors.green : 'transparent',
   '&&:hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue40,
+    backgroundColor: props.selected ? Colors.green : Colors.blue40,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index 7779d6fb2b77..e06d2f86b8dd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -1,12 +1,13 @@
 import { useCallback, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { colors, strings } from '../../../config.json';
+import { strings } from '../../../config.json';
 import { Ownership } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import { IconButton } from '../../lib/components';
 import { useRelaySettingsUpdater } from '../../lib/constraint-updater';
 import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-locations';
+import { Colors } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
 import { useNormalRelaySettings } from '../../lib/relay-settings-hooks';
@@ -171,8 +172,8 @@ export default function SelectLocation() {
                               height={16}
                               width={16}
                               source="icon-close"
-                              tintColor={colors.white60}
-                              tintHoverColor={colors.white80}
+                              tintColor={Colors.white60}
+                              tintHoverColor={Colors.white80}
                             />
                           </StyledClearFilterButton>
                         </StyledFilter>
@@ -194,8 +195,8 @@ export default function SelectLocation() {
                               height={16}
                               width={16}
                               source="icon-close"
-                              tintColor={colors.white60}
-                              tintHoverColor={colors.white80}
+                              tintColor={Colors.white60}
+                              tintHoverColor={Colors.white80}
                             />
                           </StyledClearFilterButton>
                         </StyledFilter>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
index ff83a6fc8d0c..5ab08368a349 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { normalText, tinyText } from '../common-styles';
 import SearchBar from '../SearchBar';
@@ -24,7 +24,7 @@ export const StyledNavigationBarAttachment = styled.div({
 
 export const StyledFilterRow = styled.div({
   ...tinyText,
-  color: colors.white,
+  color: Colors.white,
   margin: '0 6px 16px',
 });
 
@@ -32,11 +32,11 @@ export const StyledFilter = styled.div({
   ...tinyText,
   display: 'inline-flex',
   alignItems: 'center',
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   borderRadius: '4px',
   padding: '3px 8px',
   marginLeft: '6px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledClearFilterButton = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
index b64da3057320..fb8227b4fdc6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useSelector } from '../../redux/store';
@@ -154,8 +154,8 @@ export function CustomBridgeLocationRow(
         <StyledSpecialLocationSideButton
           source={icon}
           width={20}
-          tintColor={colors.white}
-          tintHoverColor={colors.white80}
+          tintColor={Colors.white}
+          tintHoverColor={Colors.white80}
         />
       </Cell.SideButton>
     </StyledLocationRowContainerWithMargin>
diff --git a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts
index c022329e7495..118114828678 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../../src/config.json';
+import { colors } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -97,16 +97,16 @@ test('App should add new custom bridge', async () => {
 
 test('App should select custom bridge', async () => {
   const customBridgeButton = page.locator('button:has-text("Custom bridge")');
-  await expect(customBridgeButton).toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
 
   const automaticButton = page.getByText('Automatic');
   await automaticButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).not.toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).not.toHaveCSS('background-color', colors['--color-green']);
 
   await customBridgeButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
 });
 
 test('App should edit custom bridge', async () => {
@@ -133,7 +133,7 @@ test('App should edit custom bridge', async () => {
 
   const customBridgeButton = page.locator('button:has-text("Custom bridge")');
   await expect(customBridgeButton).toBeEnabled();
-  await expect(customBridgeButton).toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
 });
 
 test('App should delete custom bridge', async () => {
@@ -155,5 +155,5 @@ test('App should delete custom bridge', async () => {
 
   const customBridgeButton = page.locator('button:has-text("Custom bridge")');
   await expect(customBridgeButton).toBeDisabled();
-  await expect(customBridgeButton).not.toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).not.toHaveCSS('background-color', colors['--color-green']);
 });
diff --git a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts
index b9518f87177a..a4077ffe3d31 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { execSync } from 'child_process';
 import { Page } from 'playwright';
 
-import { colors } from '../../../../src/config.json';
+import { colors } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -35,7 +35,7 @@ test('App should have automatic obfuscation', async () => {
   );
 
   const automatic = page.getByTestId('automatic-obfuscation');
-  await expect(automatic).toHaveCSS('background-color', colors.green);
+  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
 
   const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n');
   expect(cliObfuscation[0]).toEqual('Obfuscation mode: auto');
@@ -49,7 +49,7 @@ test('App should set obfuscation to shadowsocks with custom port', async () => {
   ).toBe(RoutePath.shadowsocks);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', colors.green);
+  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
 
   const customInput = page.locator('input[type="text"]');
   await customInput.click();
@@ -57,13 +57,13 @@ test('App should set obfuscation to shadowsocks with custom port', async () => {
   await customInput.blur();
 
   const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
-  await expect(customItem).toHaveCSS('background-color', colors.green);
+  await expect(customItem).toHaveCSS('background-color', colors['--color-green']);
 
   await util.waitForNavigation(() => page.click('button[aria-label="Back"]'));
 
   const shadowsocksItem = page.locator('button', { hasText: 'Shadowsocks' });
   await shadowsocksItem.click();
-  await expect(shadowsocksItem).toHaveCSS('background-color', colors.green);
+  await expect(shadowsocksItem).toHaveCSS('background-color', colors['--color-green']);
   await expect(shadowsocksItem).toContainText(`Port: ${SHADOWSOCKS_PORT}`);
 
   const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n')[2];
@@ -76,7 +76,7 @@ test('App should still have shadowsocks custom port', async () => {
   ).toBe(RoutePath.shadowsocks);
 
   const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
-  await expect(customItem).toHaveCSS('background-color', colors.green);
+  await expect(customItem).toHaveCSS('background-color', colors['--color-green']);
 
   await util.waitForNavigation(() => page.click('button[aria-label="Back"]'));
 });
@@ -87,18 +87,18 @@ test('App should set obfuscation to UDP-over-TCP with port', async () => {
   ).toBe(RoutePath.udpOverTcp);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', colors.green);
+  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
 
   const portButton = page.locator('button', { hasText: UDPOVERTCP_PORT });
   await portButton.click();
 
-  await expect(portButton).toHaveCSS('background-color', colors.green);
+  await expect(portButton).toHaveCSS('background-color', colors['--color-green']);
 
   await util.waitForNavigation(() => page.click('button[aria-label="Back"]'));
 
   const udpOverTcpItem = page.locator('button', { hasText: 'UDP-over-TCP' });
   await udpOverTcpItem.click();
-  await expect(udpOverTcpItem).toHaveCSS('background-color', colors.green);
+  await expect(udpOverTcpItem).toHaveCSS('background-color', colors['--color-green']);
   await expect(udpOverTcpItem).toContainText(`Port: ${UDPOVERTCP_PORT}`);
 
   const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n')[1];
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts
index e63e62f51f8c..cee7ebee38d6 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
+import { colors } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import { IAccountData } from '../../../src/shared/daemon-rpc-types';
 import { getBackgroundColor } from '../utils';
@@ -27,11 +27,11 @@ test('App should show Expired Account Error View', async () => {
   await expect(page.locator('text=Out of time')).toBeVisible();
   const buyMoreButton = page.locator('button:has-text("Buy more credit")');
   await expect(buyMoreButton).toBeVisible();
-  expect(await getBackgroundColor(buyMoreButton)).toBe(colors.green);
+  expect(await getBackgroundColor(buyMoreButton)).toBe(colors['--color-green']);
 
   const redeemVoucherButton = page.locator('button:has-text("Redeem voucher")');
   await expect(redeemVoucherButton).toBeVisible();
-  expect(await getBackgroundColor(redeemVoucherButton)).toBe(colors.green);
+  expect(await getBackgroundColor(redeemVoucherButton)).toBe(colors['--color-green']);
 });
 
 test('App should show out of time view after running out of time', async () => {
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
index 7af0d1297a67..b2b954449553 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
+import { colors } from '../../../src/renderer/lib/foundations';
 import { IAccountData } from '../../../src/shared/daemon-rpc-types';
 import { getBackgroundColor } from '../utils';
 import { MockedTestUtils, startMockedApp } from './mocked-utils';
@@ -34,7 +34,7 @@ test('App should notify user about account expiring soon', async () => {
 
   const indicator = page.getByTestId('notificationIndicator');
   const indicatorColor = await getBackgroundColor(indicator);
-  expect(indicatorColor).toBe(colors.yellow);
+  expect(indicatorColor).toBe(colors['--color-yellow']);
 
   await util.sendMockIpcResponse<IAccountData>({
     channel: 'account-',
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts
index c723418ec7be..e8e5e61155e9 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts
@@ -1,8 +1,8 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
 import { getDefaultSettings } from '../../../src/main/default-settings';
+import { colors } from '../../../src/renderer/lib/foundations';
 import {
   IRelayList,
   IRelayListWithEndpointData,
@@ -90,7 +90,7 @@ async function setMultihop() {
 test('App should show entry selection', async () => {
   const entryTab = page.getByText('Entry');
   await entryTab.click();
-  await expect(entryTab).toHaveCSS('background-color', colors.green);
+  await expect(entryTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -99,7 +99,7 @@ test('App should show entry selection', async () => {
 test('App should show exit selection', async () => {
   const exitTab = page.getByText('Exit');
   await exitTab.click();
-  await expect(exitTab).toHaveCSS('background-color', colors.green);
+  await expect(exitTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -120,7 +120,7 @@ test("App shouldn't show entry selection when daita is enabled without direct on
 
   const entryTab = page.getByText('Entry').first();
   await entryTab.click();
-  await expect(entryTab).toHaveCSS('background-color', colors.green);
+  await expect(entryTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).not.toBeVisible();
@@ -141,7 +141,7 @@ test('App should show entry selection when daita is enabled with direct only', a
 
   const entryTab = page.getByText('Entry');
   await entryTab.click();
-  await expect(entryTab).toHaveCSS('background-color', colors.green);
+  await expect(entryTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
diff --git a/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts b/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
index 38315c2136bb..0fe2e03aa3c9 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
@@ -1,16 +1,16 @@
 import { expect } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
+import { colors } from '../../../src/renderer/lib/foundations';
 import { anyOf } from '../utils';
 
-const DISCONNECTED_COLOR = colors.red;
-const CONNECTED_COLOR = colors.green;
-const WHITE_COLOR = colors.white;
+const DISCONNECTED_COLOR = colors['--color-red'];
+const CONNECTED_COLOR = colors['--color-green'];
+const WHITE_COLOR = colors['--color-white'];
 
-const DISCONNECTED_BUTTON_COLOR = anyOf(colors.red, colors.red80);
-const DISCONNECTING_BUTTON_COLOR = anyOf(colors.green40);
-const CONNECTED_BUTTON_COLOR = anyOf(colors.green, colors.green90);
+const DISCONNECTED_BUTTON_COLOR = anyOf(colors['--color-red'], colors['--color-red-80']);
+const DISCONNECTING_BUTTON_COLOR = anyOf(colors['--color-green-40']);
+const CONNECTED_BUTTON_COLOR = anyOf(colors['--color-green'], colors['--color-green-90']);
 
 const getLabel = (page: Page) => page.locator('span[role="status"]');
 const getHeader = (page: Page) => page.locator('header');

From 2ee27df9ceccb6c52bdb6f9851f2b745590744ce Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Wed, 22 Jan 2025 08:36:20 +0100
Subject: [PATCH 2/8] Move links to constants

---
 desktop/packages/mullvad-vpn/src/config.json              | 6 ------
 desktop/packages/mullvad-vpn/src/main/index.ts            | 4 ++--
 .../mullvad-vpn/src/renderer/components/Account.tsx       | 2 +-
 .../src/renderer/components/ExpiredAccountAddTime.tsx     | 2 +-
 .../src/renderer/components/ExpiredAccountErrorView.tsx   | 2 +-
 .../mullvad-vpn/src/renderer/components/Support.tsx       | 2 +-
 .../packages/mullvad-vpn/src/shared/constants/index.ts    | 1 +
 .../packages/mullvad-vpn/src/shared/constants/links.ts    | 8 ++++++++
 .../src/shared/notifications/account-expired.ts           | 2 +-
 .../src/shared/notifications/close-to-account-expiry.ts   | 2 +-
 desktop/packages/mullvad-vpn/src/shared/version.ts        | 2 +-
 11 files changed, 18 insertions(+), 15 deletions(-)
 create mode 100644 desktop/packages/mullvad-vpn/src/shared/constants/index.ts
 create mode 100644 desktop/packages/mullvad-vpn/src/shared/constants/links.ts

diff --git a/desktop/packages/mullvad-vpn/src/config.json b/desktop/packages/mullvad-vpn/src/config.json
index a603139ba953..8490c32bf7a9 100644
--- a/desktop/packages/mullvad-vpn/src/config.json
+++ b/desktop/packages/mullvad-vpn/src/config.json
@@ -1,11 +1,5 @@
 {
   "supportEmail": "support@mullvadvpn.net",
-  "links": {
-    "purchase": "https://mullvad.net/account/",
-    "faq": "https://mullvad.net/help/tag/mullvad-app/",
-    "privacyGuide": "https://mullvad.net/help/first-steps-towards-online-privacy/",
-    "download": "https://mullvad.net/download/vpn/"
-  },
   "strings": {
     "wireguard": "WireGuard",
     "openvpn": "OpenVPN",
diff --git a/desktop/packages/mullvad-vpn/src/main/index.ts b/desktop/packages/mullvad-vpn/src/main/index.ts
index f855278ba922..214081716705 100644
--- a/desktop/packages/mullvad-vpn/src/main/index.ts
+++ b/desktop/packages/mullvad-vpn/src/main/index.ts
@@ -4,12 +4,12 @@ import fs from 'fs';
 import * as path from 'path';
 import util from 'util';
 
-import config from '../config.json';
 import { hasExpired } from '../shared/account-expiry';
 import {
   ISplitTunnelingApplication,
   ISplitTunnelingAppListRetriever,
 } from '../shared/application-types';
+import { links } from '../shared/constants';
 import {
   AccessMethodSetting,
   DaemonEvent,
@@ -855,7 +855,7 @@ class ApplicationMain
 
     IpcMainEventChannel.app.handleQuit(() => this.disconnectAndQuit());
     IpcMainEventChannel.app.handleOpenUrl(async (url) => {
-      if (Object.values(config.links).find((link) => url.startsWith(link))) {
+      if (Object.values(links).find((link) => url.startsWith(link))) {
         await shell.openExternal(url);
       }
     });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
index 115196a49d56..ede19201a906 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
-import { links } from '../../config.json';
 import { formatDate, hasExpired } from '../../shared/account-expiry';
+import { links } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
index e1d6002d2967..a3a94dd26ec4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -3,8 +3,8 @@ import { useParams } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { links } from '../../config.json';
 import { formatDate } from '../../shared/account-expiry';
+import { links } from '../../shared/constants';
 import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
index 744632c6ed5e..750268815ecb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -1,7 +1,7 @@
 import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { links } from '../../config.json';
+import { links } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
index 34f49a1c30e0..b2f34a89da6b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { links } from '../../config.json';
+import { links } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/index.ts b/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
new file mode 100644
index 000000000000..26f360af9e29
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
@@ -0,0 +1 @@
+export * from './links';
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/links.ts b/desktop/packages/mullvad-vpn/src/shared/constants/links.ts
new file mode 100644
index 000000000000..e55adad68cc6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/links.ts
@@ -0,0 +1,8 @@
+// This should only contain links to the mullvad website
+// No links to other websites should be added
+export const links = {
+  purchase: 'https://mullvad.net/account/',
+  faq: 'https://mullvad.net/help/tag/mullvad-app/',
+  privacyGuide: 'https://mullvad.net/help/first-steps-towards-online-privacy/',
+  download: 'https://mullvad.net/download/vpn/',
+} as const;
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts
index a7af4f2c8b6d..3c1684e15d8e 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts
@@ -1,5 +1,5 @@
-import { links } from '../../config.json';
 import { hasExpired } from '../account-expiry';
+import { links } from '../constants';
 import { TunnelState } from '../daemon-rpc-types';
 import { messages } from '../gettext';
 import {
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts
index 4fde6ab39535..c33cc1354e72 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts
@@ -1,8 +1,8 @@
 import { sprintf } from 'sprintf-js';
 
-import { links } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { closeToExpiry, formatRemainingTime } from '../account-expiry';
+import { links } from '../constants';
 import {
   InAppNotification,
   InAppNotificationProvider,
diff --git a/desktop/packages/mullvad-vpn/src/shared/version.ts b/desktop/packages/mullvad-vpn/src/shared/version.ts
index dc87afaae0ab..e8a3bc5b1991 100644
--- a/desktop/packages/mullvad-vpn/src/shared/version.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/version.ts
@@ -1,4 +1,4 @@
-import { links } from '../config.json';
+import { links } from './constants';
 
 export function getDownloadUrl(suggestedIsBeta: boolean): string {
   let url = links.download;

From 6cb6442b3e9cd5b95f25f7068a812a5fd096dec8 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Wed, 22 Jan 2025 08:55:38 +0100
Subject: [PATCH 3/8] Move strings to constants

---
 desktop/packages/mullvad-vpn/src/config.json          | 11 +----------
 .../src/renderer/components/DaitaSettings.tsx         |  2 +-
 .../src/renderer/components/ErrorBoundary.tsx         |  4 ++--
 .../src/renderer/components/MultihopSettings.tsx      |  2 +-
 .../src/renderer/components/OpenVpnSettings.tsx       |  2 +-
 .../mullvad-vpn/src/renderer/components/Settings.tsx  |  2 +-
 .../renderer/components/SplitTunnelingSettings.tsx    |  2 +-
 .../src/renderer/components/VpnSettings.tsx           |  2 +-
 .../src/renderer/components/WireguardSettings.tsx     |  2 +-
 .../components/main-view/FeatureIndicators.tsx        |  2 +-
 .../components/select-location/SelectLocation.tsx     |  2 +-
 .../mullvad-vpn/src/shared/constants/index.ts         |  1 +
 .../mullvad-vpn/src/shared/constants/strings.ts       |  8 ++++++++
 .../shared/notifications/block-when-disconnected.ts   |  2 +-
 .../mullvad-vpn/src/shared/notifications/error.ts     |  2 +-
 15 files changed, 23 insertions(+), 23 deletions(-)
 create mode 100644 desktop/packages/mullvad-vpn/src/shared/constants/strings.ts

diff --git a/desktop/packages/mullvad-vpn/src/config.json b/desktop/packages/mullvad-vpn/src/config.json
index 8490c32bf7a9..0967ef424bce 100644
--- a/desktop/packages/mullvad-vpn/src/config.json
+++ b/desktop/packages/mullvad-vpn/src/config.json
@@ -1,10 +1 @@
-{
-  "supportEmail": "support@mullvadvpn.net",
-  "strings": {
-    "wireguard": "WireGuard",
-    "openvpn": "OpenVPN",
-    "splitTunneling": "Split tunneling",
-    "daita": "DAITA",
-    "daitaFull": "Defence against AI-guided Traffic Analysis"
-  }
-}
+{}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index db8fe0c42e99..f19707b5a06b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../config.json';
+import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Flex } from '../lib/components';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorBoundary.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorBoundary.tsx
index 40615e44f423..84425471cf37 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorBoundary.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { supportEmail } from '../../config.json';
+import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import ErrorView from './ErrorView';
@@ -40,7 +40,7 @@ export default class ErrorBoundary extends React.Component<IProps, IState> {
         messages
           .pgettext('error-boundary-view', 'Something went wrong. Please contact us at %(email)s')
           .split('%(email)s', 2);
-      reachBackMessage.splice(1, 0, <Email>{supportEmail}</Email>);
+      reachBackMessage.splice(1, 0, <Email>{strings.supportEmail}</Email>);
 
       return <ErrorView settingsUnavailable>{reachBackMessage}</ErrorView>;
     } else {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
index d885dd8533b7..fcc4111e9e20 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { strings } from '../../config.json';
+import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { Flex } from '../lib/components';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/OpenVpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/OpenVpnSettings.tsx
index d1288b30a1df..36097f76b513 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/OpenVpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/OpenVpnSettings.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../config.json';
+import { strings } from '../../shared/constants';
 import {
   BridgeState,
   RelayProtocol,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index e99fe19ed269..5a50224d80b0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { strings } from '../../config.json';
+import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Button, TitleBig } from '../lib/components';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index 849b420cd122..1fba8b4d5358 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -2,12 +2,12 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { sprintf } from 'sprintf-js';
 
-import { strings } from '../../config.json';
 import {
   IApplication,
   ILinuxSplitTunnelingApplication,
   ISplitTunnelingApplication,
 } from '../../shared/application-types';
+import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Button, Container, Flex, FootnoteMini } from '../lib/components';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index c79a5eaa5dd8..46b0f8014eff 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../config.json';
+import { strings } from '../../shared/constants';
 import { IDnsOptions, TunnelProtocol, wrapConstraint } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx
index 450ced9d31c9..2d54fa1f474a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../config.json';
+import { strings } from '../../shared/constants';
 import {
   Constraint,
   IpVersion,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
index cac4f654fe14..a80371ae7791 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { strings } from '../../../config.json';
+import { strings } from '../../../shared/constants';
 import { FeatureIndicator } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import { Colors } from '../../lib/foundations';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index e06d2f86b8dd..d650fd18026f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { strings } from '../../../config.json';
+import { strings } from '../../../shared/constants';
 import { Ownership } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import { IconButton } from '../../lib/components';
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/index.ts b/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
index 26f360af9e29..9326f8434e1f 100644
--- a/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
@@ -1 +1,2 @@
 export * from './links';
+export * from './strings';
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/strings.ts b/desktop/packages/mullvad-vpn/src/shared/constants/strings.ts
new file mode 100644
index 000000000000..4e3ef56ba56a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/strings.ts
@@ -0,0 +1,8 @@
+export const strings = {
+  wireguard: 'WireGuard',
+  openvpn: 'OpenVPN',
+  splitTunneling: 'Split tunneling',
+  daita: 'DAITA',
+  daitaFull: 'Defence against AI-guided Traffic Analysis',
+  supportEmail: 'support@mullvadvpn.net',
+} as const;
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/block-when-disconnected.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/block-when-disconnected.ts
index 2f3df718b690..67ab96fb4aef 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/block-when-disconnected.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/block-when-disconnected.ts
@@ -1,7 +1,7 @@
 import { sprintf } from 'sprintf-js';
 
-import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { strings } from '../constants';
 import { TunnelState } from '../daemon-rpc-types';
 import {
   InAppNotification,
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/error.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/error.ts
index 42e550c46641..1d3bc169d498 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/error.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/error.ts
@@ -1,6 +1,6 @@
 import { sprintf } from 'sprintf-js';
 
-import { strings } from '../../config.json';
+import { strings } from '../constants';
 import {
   AuthFailedError,
   ErrorStateCause,

From 7d9e1263d2e9eabad9a6224f6ff26f82b1d3f805 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Wed, 22 Jan 2025 10:24:55 +0100
Subject: [PATCH 4/8] Remove config.json

---
 desktop/packages/mullvad-vpn/src/config.json |  1 -
 desktop/packages/mullvad-vpn/tasks/assets.js | 15 +--------------
 desktop/packages/mullvad-vpn/tasks/watch.js  | 10 +---------
 3 files changed, 2 insertions(+), 24 deletions(-)
 delete mode 100644 desktop/packages/mullvad-vpn/src/config.json

diff --git a/desktop/packages/mullvad-vpn/src/config.json b/desktop/packages/mullvad-vpn/src/config.json
deleted file mode 100644
index 0967ef424bce..000000000000
--- a/desktop/packages/mullvad-vpn/src/config.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/desktop/packages/mullvad-vpn/tasks/assets.js b/desktop/packages/mullvad-vpn/tasks/assets.js
index 686b969e7014..aa578d5bf041 100644
--- a/desktop/packages/mullvad-vpn/tasks/assets.js
+++ b/desktop/packages/mullvad-vpn/tasks/assets.js
@@ -4,10 +4,6 @@ function copyStaticAssets() {
   return src('assets/**').pipe(dest('build/assets'));
 }
 
-function copyConfig() {
-  return src('src/config.json').pipe(dest('build/src'));
-}
-
 function copyCss() {
   return src('src/renderer/**/*.css').pipe(dest('build/src/renderer'));
 }
@@ -25,22 +21,13 @@ function copyGeoData() {
 }
 
 copyStaticAssets.displayName = 'copy-static-assets';
-copyConfig.displayName = 'copy-config';
 copyCss.displayName = 'copy-css';
 copyHtml.displayName = 'copy-html';
 copyLocales.displayName = 'copy-locales';
 copyGeoData.displayName = 'copy-geo-data';
 
-exports.copyAll = parallel(
-  copyStaticAssets,
-  copyConfig,
-  copyCss,
-  copyHtml,
-  copyLocales,
-  copyGeoData,
-);
+exports.copyAll = parallel(copyStaticAssets, copyCss, copyHtml, copyLocales, copyGeoData);
 exports.copyStaticAssets = copyStaticAssets;
 exports.copyCss = copyCss;
 exports.copyHtml = copyHtml;
-exports.copyConfig = copyConfig;
 exports.copyGeoData = copyGeoData;
diff --git a/desktop/packages/mullvad-vpn/tasks/watch.js b/desktop/packages/mullvad-vpn/tasks/watch.js
index c64c4d48d31e..83f2982dbfd7 100644
--- a/desktop/packages/mullvad-vpn/tasks/watch.js
+++ b/desktop/packages/mullvad-vpn/tasks/watch.js
@@ -11,10 +11,6 @@ function watchCss() {
   return watch(['src/renderer/**/*.css'], series(assets.copyCss, electron.reloadRenderer));
 }
 
-function watchConfig() {
-  return watch(['src/config.json'], series(assets.copyConfig, electron.reloadRenderer));
-}
-
 function watchHtml() {
   return watch(['src/renderer/index.html'], series(assets.copyHtml, electron.reloadRenderer));
 }
@@ -28,7 +24,6 @@ function watchStaticAssets() {
 
 watchMainScripts.displayName = 'watch-main-scripts';
 watchCss.displayName = 'watch-css';
-watchConfig.displayName = 'watch-config';
 watchHtml.displayName = 'watch-html';
 watchStaticAssets.displayName = 'watch-static-assets';
 
@@ -40,10 +35,7 @@ exports.start = series(
   scripts.makeWatchCompiler(
     // set up hotreload, run electron and begin watching filesystem for changes, after the first
     // successful build
-    series(
-      electron.start,
-      parallel(watchMainScripts, watchCss, watchConfig, watchHtml, watchStaticAssets),
-    ),
+    series(electron.start, parallel(watchMainScripts, watchCss, watchHtml, watchStaticAssets)),
     electron.reloadRenderer,
   ),
 );

From 8b61611894ac067109ff58de81ade8afd438ac58 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Wed, 22 Jan 2025 10:25:34 +0100
Subject: [PATCH 5/8] Remove config.json from README

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index a53f74dfda6e..584447258ed8 100644
--- a/README.md
+++ b/README.md
@@ -283,7 +283,6 @@ If you're using GNOME, try installing one of these GNOME Shell extensions:
       - **app.tsx** - Entry file for the renderer process
       - **routes.tsx** - Routes configurator
       - **transitions.ts** - Transition rules between views
-    - **config.json** - App color definitions and URLs to external resources
   - **tasks/** - Gulp tasks used to build app and watch for changes during development
     - **distribution.js** - Configuration for `electron-builder`
   - **test/** - Electron GUI tests

From f42fd8310673177f98ac98993600ae6e6efecb0a Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Fri, 31 Jan 2025 10:32:54 +0100
Subject: [PATCH 6/8] Add typing to open url functions

---
 desktop/packages/mullvad-vpn/src/renderer/app.tsx         | 5 +++--
 .../mullvad-vpn/src/renderer/components/Login.tsx         | 3 ++-
 .../packages/mullvad-vpn/src/shared/constants/links.ts    | 4 ++++
 .../mullvad-vpn/src/shared/notifications/notification.ts  | 3 ++-
 desktop/packages/mullvad-vpn/src/shared/version.ts        | 8 ++++----
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index b92dbd917925..5f416e7bd4ba 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -9,6 +9,7 @@ import {
   ILinuxSplitTunnelingApplication,
   ISplitTunnelingApplication,
 } from '../shared/application-types';
+import { Link } from '../shared/constants';
 import {
   AccessMethodSetting,
   AccountNumber,
@@ -358,7 +359,7 @@ export default class AppRenderer {
     IpcRendererEventChannel.problemReport.collectLogs(toRedact);
   public viewLog = (path: string) => IpcRendererEventChannel.problemReport.viewLog(path);
   public quit = () => IpcRendererEventChannel.app.quit();
-  public openUrl = (url: string) => IpcRendererEventChannel.app.openUrl(url);
+  public openUrl = (url: Link) => IpcRendererEventChannel.app.openUrl(url);
   public getPathBaseName = (path: string) => IpcRendererEventChannel.app.getPathBaseName(path);
   public showOpenDialog = (options: Electron.OpenDialogOptions) =>
     IpcRendererEventChannel.app.showOpenDialog(options);
@@ -462,7 +463,7 @@ export default class AppRenderer {
     return devices;
   };
 
-  public openLinkWithAuth = async (link: string): Promise<void> => {
+  public openLinkWithAuth = async (link: Link): Promise<void> => {
     let token = '';
     try {
       token = await IpcRendererEventChannel.account.getWwwAuthToken();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
index 94216a23d0ee..d71e53395b14 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 
+import { Link } from '../../shared/constants';
 import { AccountDataError, AccountNumber } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
@@ -74,7 +75,7 @@ interface IProps {
   accountHistory?: AccountNumber;
   loginState: LoginState;
   showBlockMessage: boolean;
-  openExternalLink: (type: string) => void;
+  openExternalLink: (type: Link) => void;
   login: (accountNumber: AccountNumber) => void;
   resetLoginError: () => void;
   updateAccountNumber: (accountNumber: AccountNumber) => void;
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/links.ts b/desktop/packages/mullvad-vpn/src/shared/constants/links.ts
index e55adad68cc6..2d99ebd22cab 100644
--- a/desktop/packages/mullvad-vpn/src/shared/constants/links.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/links.ts
@@ -6,3 +6,7 @@ export const links = {
   privacyGuide: 'https://mullvad.net/help/first-steps-towards-online-privacy/',
   download: 'https://mullvad.net/download/vpn/',
 } as const;
+
+type LinkValue = (typeof links)[keyof typeof links];
+type LinkWithSuffix = `${LinkValue}${string}`;
+export type Link = LinkValue | LinkWithSuffix;
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
index 48561c555b01..bff0e9e57cf3 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
@@ -1,8 +1,9 @@
 import { LinkProps } from '../../renderer/lib/components';
+import { Link } from '../constants';
 
 export type NotificationAction = {
   type: 'open-url';
-  url: string;
+  url: Link;
   text?: string;
   withAuth?: boolean;
 };
diff --git a/desktop/packages/mullvad-vpn/src/shared/version.ts b/desktop/packages/mullvad-vpn/src/shared/version.ts
index e8a3bc5b1991..338077e6ecf0 100644
--- a/desktop/packages/mullvad-vpn/src/shared/version.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/version.ts
@@ -1,7 +1,7 @@
-import { links } from './constants';
+import { Link, links } from './constants';
 
-export function getDownloadUrl(suggestedIsBeta: boolean): string {
-  let url = links.download;
+export function getDownloadUrl(suggestedIsBeta: boolean): Link {
+  let url: Link = links.download;
   switch (process.platform ?? window.env.platform) {
     case 'win32':
       url += 'windows/';
@@ -18,5 +18,5 @@ export function getDownloadUrl(suggestedIsBeta: boolean): string {
     url += 'beta/';
   }
 
-  return url;
+  return url as Link;
 }

From e5dd6b271d1e8b253e2b93ee9076e01819d7ff79 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Fri, 31 Jan 2025 10:43:47 +0100
Subject: [PATCH 7/8] Rename link constants and types to url

---
 desktop/packages/mullvad-vpn/src/main/index.ts            | 4 ++--
 desktop/packages/mullvad-vpn/src/renderer/app.tsx         | 6 +++---
 .../mullvad-vpn/src/renderer/components/Account.tsx       | 4 ++--
 .../src/renderer/components/ExpiredAccountAddTime.tsx     | 4 ++--
 .../src/renderer/components/ExpiredAccountErrorView.tsx   | 4 ++--
 .../mullvad-vpn/src/renderer/components/Login.tsx         | 4 ++--
 .../mullvad-vpn/src/renderer/components/Support.tsx       | 4 ++--
 .../packages/mullvad-vpn/src/shared/constants/index.ts    | 2 +-
 .../src/shared/constants/{links.ts => urls.ts}            | 8 ++++----
 .../src/shared/notifications/account-expired.ts           | 4 ++--
 .../src/shared/notifications/close-to-account-expiry.ts   | 6 +++---
 .../mullvad-vpn/src/shared/notifications/notification.ts  | 4 ++--
 desktop/packages/mullvad-vpn/src/shared/version.ts        | 8 ++++----
 13 files changed, 31 insertions(+), 31 deletions(-)
 rename desktop/packages/mullvad-vpn/src/shared/constants/{links.ts => urls.ts} (66%)

diff --git a/desktop/packages/mullvad-vpn/src/main/index.ts b/desktop/packages/mullvad-vpn/src/main/index.ts
index 214081716705..fbdd581a09ae 100644
--- a/desktop/packages/mullvad-vpn/src/main/index.ts
+++ b/desktop/packages/mullvad-vpn/src/main/index.ts
@@ -9,7 +9,7 @@ import {
   ISplitTunnelingApplication,
   ISplitTunnelingAppListRetriever,
 } from '../shared/application-types';
-import { links } from '../shared/constants';
+import { urls } from '../shared/constants';
 import {
   AccessMethodSetting,
   DaemonEvent,
@@ -855,7 +855,7 @@ class ApplicationMain
 
     IpcMainEventChannel.app.handleQuit(() => this.disconnectAndQuit());
     IpcMainEventChannel.app.handleOpenUrl(async (url) => {
-      if (Object.values(links).find((link) => url.startsWith(link))) {
+      if (Object.values(urls).find((link) => url.startsWith(link))) {
         await shell.openExternal(url);
       }
     });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index 5f416e7bd4ba..a90efd803793 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -9,7 +9,7 @@ import {
   ILinuxSplitTunnelingApplication,
   ISplitTunnelingApplication,
 } from '../shared/application-types';
-import { Link } from '../shared/constants';
+import { Url } from '../shared/constants';
 import {
   AccessMethodSetting,
   AccountNumber,
@@ -359,7 +359,7 @@ export default class AppRenderer {
     IpcRendererEventChannel.problemReport.collectLogs(toRedact);
   public viewLog = (path: string) => IpcRendererEventChannel.problemReport.viewLog(path);
   public quit = () => IpcRendererEventChannel.app.quit();
-  public openUrl = (url: Link) => IpcRendererEventChannel.app.openUrl(url);
+  public openUrl = (url: Url) => IpcRendererEventChannel.app.openUrl(url);
   public getPathBaseName = (path: string) => IpcRendererEventChannel.app.getPathBaseName(path);
   public showOpenDialog = (options: Electron.OpenDialogOptions) =>
     IpcRendererEventChannel.app.showOpenDialog(options);
@@ -463,7 +463,7 @@ export default class AppRenderer {
     return devices;
   };
 
-  public openLinkWithAuth = async (link: Link): Promise<void> => {
+  public openLinkWithAuth = async (link: Url): Promise<void> => {
     let token = '';
     try {
       token = await IpcRendererEventChannel.account.getWwwAuthToken();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
index ede19201a906..6a7da779e750 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
 import { formatDate, hasExpired } from '../../shared/account-expiry';
-import { links } from '../../shared/constants';
+import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -33,7 +33,7 @@ export default function Account() {
   const { updateAccountData, openLinkWithAuth, logout } = useAppContext();
 
   const onBuyMore = useCallback(async () => {
-    await openLinkWithAuth(links.purchase);
+    await openLinkWithAuth(urls.purchase);
   }, [openLinkWithAuth]);
 
   const onMount = useEffectEvent(() => updateAccountData());
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
index a3a94dd26ec4..62a79a206481 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -4,7 +4,7 @@ import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
 import { formatDate } from '../../shared/account-expiry';
-import { links } from '../../shared/constants';
+import { urls } from '../../shared/constants';
 import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
@@ -201,7 +201,7 @@ export function SetupFinished() {
   const finish = useFinishedCallback();
   const { openUrl } = useAppContext();
 
-  const openPrivacyLink = useCallback(() => openUrl(links.privacyGuide), [openUrl]);
+  const openPrivacyLink = useCallback(() => openUrl(urls.privacyGuide), [openUrl]);
 
   return (
     <Layout>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
index 750268815ecb..cac8a07a8e3b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -1,7 +1,7 @@
 import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { links } from '../../shared/constants';
+import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
@@ -188,7 +188,7 @@ function ExternalPaymentButton() {
     if (recoveryAction === RecoveryAction.disableBlockedWhenDisconnected) {
       setShowBlockWhenDisconnectedAlert(true);
     } else {
-      await openLinkWithAuth(links.purchase);
+      await openLinkWithAuth(urls.purchase);
     }
   }, [openLinkWithAuth, recoveryAction, setShowBlockWhenDisconnectedAlert]);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
index d71e53395b14..d7a24733890e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { Link } from '../../shared/constants';
+import { Url } from '../../shared/constants';
 import { AccountDataError, AccountNumber } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
@@ -75,7 +75,7 @@ interface IProps {
   accountHistory?: AccountNumber;
   loginState: LoginState;
   showBlockMessage: boolean;
-  openExternalLink: (type: Link) => void;
+  openExternalLink: (type: Url) => void;
   login: (accountNumber: AccountNumber) => void;
   resetLoginError: () => void;
   updateAccountNumber: (accountNumber: AccountNumber) => void;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
index b2f34a89da6b..a5c29ae453f6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { links } from '../../shared/constants';
+import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -86,7 +86,7 @@ function FaqButton() {
   const isOffline = useSelector((state) => state.connection.isBlocked);
   const { openUrl } = useAppContext();
 
-  const openFaq = useCallback(() => openUrl(links.faq), [openUrl]);
+  const openFaq = useCallback(() => openUrl(urls.faq), [openUrl]);
 
   return (
     <AriaDescriptionGroup>
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/index.ts b/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
index 9326f8434e1f..d2cc15e20ffd 100644
--- a/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/index.ts
@@ -1,2 +1,2 @@
-export * from './links';
+export * from './urls';
 export * from './strings';
diff --git a/desktop/packages/mullvad-vpn/src/shared/constants/links.ts b/desktop/packages/mullvad-vpn/src/shared/constants/urls.ts
similarity index 66%
rename from desktop/packages/mullvad-vpn/src/shared/constants/links.ts
rename to desktop/packages/mullvad-vpn/src/shared/constants/urls.ts
index 2d99ebd22cab..24851e0a4c02 100644
--- a/desktop/packages/mullvad-vpn/src/shared/constants/links.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/constants/urls.ts
@@ -1,12 +1,12 @@
 // This should only contain links to the mullvad website
 // No links to other websites should be added
-export const links = {
+export const urls = {
   purchase: 'https://mullvad.net/account/',
   faq: 'https://mullvad.net/help/tag/mullvad-app/',
   privacyGuide: 'https://mullvad.net/help/first-steps-towards-online-privacy/',
   download: 'https://mullvad.net/download/vpn/',
 } as const;
 
-type LinkValue = (typeof links)[keyof typeof links];
-type LinkWithSuffix = `${LinkValue}${string}`;
-export type Link = LinkValue | LinkWithSuffix;
+type BaseUrl = (typeof urls)[keyof typeof urls];
+type ExtendedBaseUrl = `${BaseUrl}${string}`;
+export type Url = BaseUrl | ExtendedBaseUrl;
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts
index 3c1684e15d8e..8eff5379db80 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/account-expired.ts
@@ -1,5 +1,5 @@
 import { hasExpired } from '../account-expiry';
-import { links } from '../constants';
+import { urls } from '../constants';
 import { TunnelState } from '../daemon-rpc-types';
 import { messages } from '../gettext';
 import {
@@ -33,7 +33,7 @@ export class AccountExpiredNotificationProvider implements SystemNotificationPro
       presentOnce: { value: true, name: this.constructor.name },
       action: {
         type: 'open-url',
-        url: links.purchase,
+        url: urls.purchase,
         withAuth: true,
         text: messages.pgettext('notifications', 'Buy more'),
       },
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts
index c33cc1354e72..2e72938fae07 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/close-to-account-expiry.ts
@@ -2,7 +2,7 @@ import { sprintf } from 'sprintf-js';
 
 import { messages } from '../../shared/gettext';
 import { closeToExpiry, formatRemainingTime } from '../account-expiry';
-import { links } from '../constants';
+import { urls } from '../constants';
 import {
   InAppNotification,
   InAppNotificationProvider,
@@ -44,7 +44,7 @@ export class CloseToAccountExpiryNotificationProvider
       severity: SystemNotificationSeverityType.medium,
       action: {
         type: 'open-url',
-        url: links.purchase,
+        url: urls.purchase,
         withAuth: true,
         text: messages.pgettext('notifications', 'Buy more'),
       },
@@ -66,7 +66,7 @@ export class CloseToAccountExpiryNotificationProvider
       indicator: 'warning',
       title: messages.pgettext('in-app-notifications', 'ACCOUNT CREDIT EXPIRES SOON'),
       subtitle,
-      action: { type: 'open-url', url: links.purchase, withAuth: true },
+      action: { type: 'open-url', url: urls.purchase, withAuth: true },
     };
   }
 }
diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
index bff0e9e57cf3..d46f344a099b 100644
--- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts
@@ -1,9 +1,9 @@
 import { LinkProps } from '../../renderer/lib/components';
-import { Link } from '../constants';
+import { Url } from '../constants';
 
 export type NotificationAction = {
   type: 'open-url';
-  url: Link;
+  url: Url;
   text?: string;
   withAuth?: boolean;
 };
diff --git a/desktop/packages/mullvad-vpn/src/shared/version.ts b/desktop/packages/mullvad-vpn/src/shared/version.ts
index 338077e6ecf0..afdf7ee9cab3 100644
--- a/desktop/packages/mullvad-vpn/src/shared/version.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/version.ts
@@ -1,7 +1,7 @@
-import { Link, links } from './constants';
+import { Url, urls } from './constants';
 
-export function getDownloadUrl(suggestedIsBeta: boolean): Link {
-  let url: Link = links.download;
+export function getDownloadUrl(suggestedIsBeta: boolean): Url {
+  let url: Url = urls.download;
   switch (process.platform ?? window.env.platform) {
     case 'win32':
       url += 'windows/';
@@ -18,5 +18,5 @@ export function getDownloadUrl(suggestedIsBeta: boolean): Link {
     url += 'beta/';
   }
 
-  return url as Link;
+  return url as Url;
 }

From 99b30c41f7cbf2baf88615cacc34bc2cf666ddb9 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@mohlin.dev>
Date: Fri, 31 Jan 2025 10:58:45 +0100
Subject: [PATCH 8/8] Rename open link functions to open url

---
 desktop/packages/mullvad-vpn/src/main/index.ts              | 2 +-
 desktop/packages/mullvad-vpn/src/renderer/app.tsx           | 4 ++--
 .../mullvad-vpn/src/renderer/components/Account.tsx         | 6 +++---
 .../src/renderer/components/ExpiredAccountErrorView.tsx     | 6 +++---
 .../src/renderer/components/NotificationArea.tsx            | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/desktop/packages/mullvad-vpn/src/main/index.ts b/desktop/packages/mullvad-vpn/src/main/index.ts
index fbdd581a09ae..2186168379e8 100644
--- a/desktop/packages/mullvad-vpn/src/main/index.ts
+++ b/desktop/packages/mullvad-vpn/src/main/index.ts
@@ -855,7 +855,7 @@ class ApplicationMain
 
     IpcMainEventChannel.app.handleQuit(() => this.disconnectAndQuit());
     IpcMainEventChannel.app.handleOpenUrl(async (url) => {
-      if (Object.values(urls).find((link) => url.startsWith(link))) {
+      if (Object.values(urls).find((allowedUrl) => url.startsWith(allowedUrl))) {
         await shell.openExternal(url);
       }
     });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index a90efd803793..14fdd537b0d0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -463,7 +463,7 @@ export default class AppRenderer {
     return devices;
   };
 
-  public openLinkWithAuth = async (link: Url): Promise<void> => {
+  public openUrlWithAuth = async (url: Url): Promise<void> => {
     let token = '';
     try {
       token = await IpcRendererEventChannel.account.getWwwAuthToken();
@@ -471,7 +471,7 @@ export default class AppRenderer {
       const error = e as Error;
       log.error(`Failed to get the WWW auth token: ${error.message}`);
     }
-    void this.openUrl(`${link}?token=${token}`);
+    void this.openUrl(`${url}?token=${token}`);
   };
 
   public setAllowLan = async (allowLan: boolean) => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
index 6a7da779e750..204a77501cc3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
@@ -30,11 +30,11 @@ import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 export default function Account() {
   const history = useHistory();
   const isOffline = useSelector((state) => state.connection.isBlocked);
-  const { updateAccountData, openLinkWithAuth, logout } = useAppContext();
+  const { updateAccountData, openUrlWithAuth, logout } = useAppContext();
 
   const onBuyMore = useCallback(async () => {
-    await openLinkWithAuth(urls.purchase);
-  }, [openLinkWithAuth]);
+    await openUrlWithAuth(urls.purchase);
+  }, [openUrlWithAuth]);
 
   const onMount = useEffectEvent(() => updateAccountData());
   useEffect(() => onMount(), []);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
index cac8a07a8e3b..fa59ac7d76d0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -177,7 +177,7 @@ function Content() {
 function ExternalPaymentButton() {
   const { setShowBlockWhenDisconnectedAlert } = useExpiredAccountContext();
   const { recoveryAction } = useRecoveryAction();
-  const { openLinkWithAuth } = useAppContext();
+  const { openUrlWithAuth } = useAppContext();
   const isNewAccount = useIsNewAccount();
 
   const buttonText = isNewAccount
@@ -188,9 +188,9 @@ function ExternalPaymentButton() {
     if (recoveryAction === RecoveryAction.disableBlockedWhenDisconnected) {
       setShowBlockWhenDisconnectedAlert(true);
     } else {
-      await openLinkWithAuth(urls.purchase);
+      await openUrlWithAuth(urls.purchase);
     }
-  }, [openLinkWithAuth, recoveryAction, setShowBlockWhenDisconnectedAlert]);
+  }, [openUrlWithAuth, recoveryAction, setShowBlockWhenDisconnectedAlert]);
 
   return (
     <AppButton.BlockingButton
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
index 20b001f0959e..d9c6cbb666c8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -184,7 +184,7 @@ function NotificationActionWrapper({
   setIsModalOpen,
 }: NotificationActionWrapperProps) {
   const { push } = useHistory();
-  const { openLinkWithAuth, openUrl } = useAppContext();
+  const { openUrlWithAuth, openUrl } = useAppContext();
 
   const closeTroubleshootModal = useCallback(() => setIsModalOpen(false), [setIsModalOpen]);
 
@@ -193,7 +193,7 @@ function NotificationActionWrapper({
       switch (action.type) {
         case 'open-url':
           if (action.withAuth) {
-            return openLinkWithAuth(action.url);
+            return openUrlWithAuth(action.url);
           } else {
             return openUrl(action.url);
           }
@@ -207,7 +207,7 @@ function NotificationActionWrapper({
     }
 
     return Promise.resolve();
-  }, [action, setIsModalOpen, openLinkWithAuth, openUrl]);
+  }, [action, setIsModalOpen, openUrlWithAuth, openUrl]);
 
   const goToProblemReport = useCallback(() => {
     closeTroubleshootModal();