Add tokens as css variables in root

43 files changed, 365 insertions, 157 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index a71df61f56..67e7a4db33 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -39,6 +39,7 @@ import log, { ConsoleOutput } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
 import { Scheduler } from '../shared/scheduler';
 import AppRouter from './components/AppRouter';
+import { VariablesGlobalStyle } from './components/common/variables';
 import ErrorBoundary from './components/ErrorBoundary';
 import KeyboardNavigation from './components/KeyboardNavigation';
 import Lang from './components/Lang';
@@ -295,7 +296,9 @@ export default class AppRenderer {
                   <ErrorBoundary>
                     <ModalContainer>
                       <KeyboardNavigation>
-                        <AppRouter />
+                        <VariablesGlobalStyle>
+                          <AppRouter />
+                        </VariablesGlobalStyle>
                       </KeyboardNavigation>
                       {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
                     </ModalContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index 99f405b2a8..f1e5a5e5ae 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -12,9 +12,9 @@ import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
-import { Spacings } from '../tokens';
 import * as Cell from './cell';
 import { Flex } from './common/layout';
+import { Spacings } from './common/variables';
 import {
   ContextMenu,
   ContextMenuContainer,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index 54b101d5fd..b3a88688e0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -8,10 +8,10 @@ import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
-import { Spacings } from '../tokens';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import { Flex } from './common/layout';
+import { Spacings } from './common/variables';
 import InfoButton from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
index 9522b422e5..a1aa849b50 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
-import { Spacings } from '../tokens';
 import * as AppButton from './AppButton';
+import { Spacings } from './common/variables';
 import { measurements } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index a7ece12a7d..6145d902ce 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../tokens';
 import { Flex } from './common/layout';
+import { Colors, Spacings } from './common/variables';
 import { measurements } from './common-styles';
 import HeaderBar from './HeaderBar';
 import { NavigationScrollbars } from './NavigationBar';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
index 002f23598f..a63754a691 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -26,9 +26,9 @@ import {
 import { RoutePath } from '../lib/routes';
 import accountActions from '../redux/account/actions';
 import { IReduxState, useSelector } from '../redux/store';
-import { Colors } from '../tokens';
 import * as AppButton from './AppButton';
 import { Link } from './common/text';
+import { Colors } from './common/variables';
 import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal';
 import {
   NotificationActions,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 2bc05a5f04..2294d74a7d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -7,7 +7,7 @@ import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
 import * as Cell from './cell';
-import { Button } from './common/molecules/Button';
+import { Button } from './common/molecules';
 import { TitleBig } from './common/text';
 import { BackAction } from './KeyboardNavigation';
 import {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 643fb5da27..adb8357ac8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../tokens';
 import { Flex } from './common/layout';
 import { LabelTiny, TitleBig } from './common/text';
+import { Colors, Spacings } from './common/variables';
 
 export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index fea4181624..97254d5e3f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -14,12 +14,12 @@ import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
 import { IReduxState } from '../redux/store';
-import { Colors, Spacings } from '../tokens';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { Flex } from './common/layout/Flex';
 import { FootnoteMini } from './common/text/FootnoteMini';
+import { Colors, Spacings } from './common/variables';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 84764439ef..5423c8a212 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
-import { Spacings } from '../tokens';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
+import { Spacings } from './common/variables';
 import { measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { NavigationScrollbars } from './NavigationBar';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index c27072cab2..7c58f43ab0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -15,11 +15,11 @@ import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { RelaySettingsRedux } from '../redux/settings/reducers';
 import { useSelector } from '../redux/store';
-import { Colors, Spacings } from '../tokens';
 import * as AppButton from './AppButton';
 import { AriaDescription, AriaDetails, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import Selector, { SelectorItem } from './cell/Selector';
+import { Colors, Spacings } from './common/variables';
 import CustomDnsSettings from './CustomDnsSettings';
 import InfoButton, { InfoIcon } from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index f637008a68..8f0336c13c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../../tokens';
 import { Center } from '../common/layout';
+import { Colors, Spacings } from '../common/variables';
 import { IImageViewProps } from '../ImageView';
 import { CellDisabledContext } from './Container';
 import { Icon } from './Label';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
index f8db1c45e6..551b5d7c20 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../../tokens';
+import { Spacings } from '../common/variables';
 import { Row } from './Row';
 
 const StyledContainer = styled(Row)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 002aa86433..058c96db82 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../../tokens';
 import { LabelTiny } from '../common/text';
+import { Colors, Spacings } from '../common/variables';
 
 export const CellFooter = styled.div({
   margin: `${Spacings.spacing1} ${Spacings.spacing6} 0px`,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index 3123a31dc4..5bce2c71af 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../../tokens';
+import { Colors, Spacings } from '../common/variables';
 import { buttonText, normalText, tinyText } from '../common-styles';
 import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
index 0e390eb901..002b3ac478 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -4,9 +4,9 @@ import styled from 'styled-components';
 import { useAppContext } from '../../context';
 import { useHistory } from '../../lib/history';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
-import { Colors, Spacings } from '../../tokens';
 import Accordion from '../Accordion';
 import ChevronButton from '../ChevronButton';
+import { Colors, Spacings } from '../common/variables';
 import { buttonText, openSans, sourceSansPro } from '../common-styles';
 import { Container } from './Container';
 import { Row } from './Row';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
index fc08d8411d..51ddba958f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Colors, Spacings } from '../tokens';
+import { Colors, Spacings } from './common/variables';
 
 export const openSans: React.CSSProperties = {
   fontFamily: 'Open Sans',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
index 839f9a8f57..79e8ed316a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../../../tokens';
+import { Spacings } from '../variables';
 import { Flex, FlexProps } from './Flex';
 
 export interface ContainerProps extends FlexProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
index 32d7f4f30b..13a4804fa9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../../../tokens';
+import { Spacings } from '../variables';
 import { Layout, LayoutProps } from './Layout';
 
 export interface FlexProps extends LayoutProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
index fe1dfbb94e..03e4d5371d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Spacings } from '../../../tokens';
+import { Spacings } from '../variables';
 import { margin } from './margin';
 import { padding } from './padding';
 import { LayoutSpacings } from './types';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
index c410e47c34..bcc32fcaee 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
@@ -1,4 +1,4 @@
-import { Spacings } from '../../../tokens';
+import { Spacings } from '../variables';
 import { LayoutSpacings } from './types';
 
 export const all = (margin: Spacings) => ({ margin });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
index d98a209203..16c66f6e64 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
@@ -1,4 +1,4 @@
-import { Spacings } from '../../../tokens';
+import { Spacings } from '../variables';
 import { LayoutSpacings } from './types';
 
 export const all = (padding: Spacings) => ({ padding });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
index f31c458917..1f6ff5407f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
@@ -1,4 +1,4 @@
-import { Spacings } from '../../../tokens';
+import { Spacings } from '../variables';
 
 export interface LayoutSpacings {
   all?: 'string';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx
index c4db496a21..ca8ff74883 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { Colors, Radius, Spacings } from '../../../tokens';
 import { Flex } from '../layout';
 import { buttonReset } from '../mixins';
 import { BodySmallSemiBold } from '../text';
+import { Colors, Radius, Spacings } from '../variables';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'success' | 'destructive';
@@ -79,7 +79,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}>
         <Flex
           $flex={1}
-          $gap={Spacings.spacing4}
+          $gap={Spacings.spacing3}
           $justifyContent="space-between"
           $padding={{
             horizontal: Spacings.spacing3,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx
index bdbe7ba8e4..6d43fef048 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx
@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { Colors } from '../../../tokens';
 import ImageView from '../../ImageView';
 import { buttonReset } from '../mixins';
+import { Colors } from '../variables';
 
 export interface IconButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx
index f2ea457fe3..e1bb272120 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 import { useHistory } from '../../../lib/history';
 import { RoutePath } from '../../../lib/routes';
-import { Colors, Radius } from '../../../tokens';
 import { buttonReset } from '../mixins';
+import { Colors, Radius } from '../variables';
 import { Text, TextProps } from './Text';
 
 export interface LinkProps extends TextProps, Omit<React.HtmlHTMLAttributes<'button'>, 'color'> {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
index 3ea195725a..33b0cdc6d9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
@@ -1,7 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { Colors, Typography, typography } from '../../../tokens';
+import { TransientProps } from '../../../lib/styles';
+import { Colors, Typography, typography, TypographyProperties } from '../variables';
 
 export type TextProps = React.PropsWithChildren<{
   variant?: Typography;
@@ -10,25 +11,16 @@ export type TextProps = React.PropsWithChildren<{
   style?: React.CSSProperties;
 }>;
 
-export const StyledText = styled.span({
+const StyledText = styled.span<TransientProps<TypographyProperties>>((props) => ({
   color: 'var(--color)',
-  fontFamily: 'var(--fontFamily)',
-  fontWeight: 'var(--fontWeight)',
-  fontSize: 'var(--fontSize)',
-  lineHeight: 'var(--lineHeight)',
-});
+  fontFamily: props.$fontFamily,
+  fontWeight: props.$fontWeight,
+  fontSize: props.$fontSize,
+  lineHeight: props.$lineHeight,
+}));
 
 export const Text = forwardRef(
-  (
-    {
-      variant = 'bodySmall',
-      color = Colors.white,
-      children,
-      style,
-      ...props
-    }: React.PropsWithChildren<TextProps>,
-    ref,
-  ) => {
+  ({ variant = 'bodySmall', color = Colors.white, children, style, ...props }: TextProps, ref) => {
     const { fontFamily, fontSize, fontWeight, lineHeight } = typography[variant];
     return (
       <StyledText
@@ -36,13 +28,13 @@ export const Text = forwardRef(
         style={
           {
             '--color': color,
-            '--fontFamily': fontFamily,
-            '--fontWeight': fontWeight,
-            '--fontSize': fontSize,
-            '--lineHeight': lineHeight,
             ...style,
           } as React.CSSProperties
         }
+        $fontFamily={fontFamily}
+        $fontWeight={fontWeight}
+        $fontSize={fontSize}
+        $lineHeight={lineHeight}
         {...props}>
         {children}
       </StyledText>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx
new file mode 100644
index 0000000000..fbd7487dc5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { colors, fontFamilies, fontSizes, fontWeights, lineHeights, radius, spacings } from './';
+
+type VariablesProps = React.PropsWithChildren<object>;
+
+const GlobalStyle = createGlobalStyle`
+  :root {
+    ${Object.entries({
+      ...colors,
+      ...spacings,
+      ...radius,
+      ...fontFamilies,
+      ...fontSizes,
+      ...fontWeights,
+      ...lineHeights,
+    }).reduce((styleString, [key, value]) => ({ ...styleString, [key]: value }), {})}
+  }
+`;
+
+export const VariablesGlobalStyle = ({ children }: VariablesProps) => {
+  return (
+    <>
+      <GlobalStyle />
+      {children}
+    </>
+  );
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts
new file mode 100644
index 0000000000..c048456544
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts
@@ -0,0 +1,67 @@
+import { ColorTokens } from '../../../tokens';
+
+export const colors = {
+  '--color-darker-blue': ColorTokens.darkBlue,
+  '--color-dark-blue': ColorTokens.darkBlue,
+  '--color-blue': ColorTokens.blue,
+  '--color-dark-green': ColorTokens.darkGreen,
+  '--color-green': ColorTokens.green,
+  '--color-red': ColorTokens.red,
+  '--color-darkYellow': ColorTokens.darkYellow,
+  '--color-yellow': ColorTokens.yellow,
+  '--color-black': ColorTokens.black,
+  '--color-white': ColorTokens.white,
+  '--color-white-90': ColorTokens.white90,
+  '--color-white-80': ColorTokens.white80,
+  '--color-white-60': ColorTokens.white60,
+  '--color-white-50': ColorTokens.white50,
+  '--color-white-40': ColorTokens.white40,
+  '--color-white-20': ColorTokens.white20,
+  '--color-white-10': ColorTokens.white10,
+  '--color-blue10': ColorTokens.blue10,
+  '--color-blue-20': ColorTokens.blue20,
+  '--color-blue-40': ColorTokens.blue40,
+  '--color-blue-50': ColorTokens.blue50,
+  '--color-blue-60': ColorTokens.blue60,
+  '--color-blue-80': ColorTokens.blue80,
+  '--color-red-95': ColorTokens.red95,
+  '--color-red-80': ColorTokens.red80,
+  '--color-red-60': ColorTokens.red60,
+  '--color-red-45': ColorTokens.red45,
+  '--color-red-40': ColorTokens.red40,
+  '--color-green-90': ColorTokens.green90,
+  '--color-green-40': ColorTokens.green40,
+};
+
+export enum Colors {
+  darkerBlue = 'var(--color-darker-blue)',
+  darkBlue = 'var(--color-dark-blue)',
+  blue = 'var(--color-blue)',
+  darkGreen = 'var(--color-dark-green)',
+  green = 'var(--color-green)',
+  red = 'var(--color-red)',
+  darkYellow = 'var(--color-dark-yellow)',
+  yellow = 'var(--color-yellow)',
+  black = 'var(--color-black)',
+  white = 'var(--color-white)',
+  white90 = 'var(--color-white-90)',
+  white80 = 'var(--color-white-80)',
+  white60 = 'var(--color-white-60)',
+  white50 = 'var(--color-white-50)',
+  white40 = 'var(--color-white-40)',
+  white20 = 'var(--color-white-20)',
+  white10 = 'var(--color-white-10)',
+  blue10 = 'var(--color-blue-10)',
+  blue20 = 'var(--color-blue-20)',
+  blue40 = 'var(--color-blue-40)',
+  blue50 = 'var(--color-blue-50)',
+  blue60 = 'var(--color-blue-60)',
+  blue80 = 'var(--color-blue-80)',
+  red95 = 'var(--color-red-95)',
+  red80 = 'var(--color-red-80)',
+  red60 = 'var(--color-red-60)',
+  red45 = 'var(--color-red-45)',
+  red40 = 'var(--color-red-40)',
+  green90 = 'var(--color-green-90)',
+  green40 = 'var(--color-green-40)',
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts
new file mode 100644
index 0000000000..3cabd68ee7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts
@@ -0,0 +1,5 @@
+export * from './color-variables';
+export * from './radius-variables';
+export * from './typography-variables';
+export * from './spacing-variables';
+export * from './VariablesGlobalStyle';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts
new file mode 100644
index 0000000000..78ea604156
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts
@@ -0,0 +1,15 @@
+import { RadiusTokens } from '../../../tokens';
+
+export const radius = {
+  '--radius-4': RadiusTokens.radius4,
+  '--radius-8': RadiusTokens.radius8,
+  '--radius-11': RadiusTokens.radius11,
+  '--radius-12': RadiusTokens.radius12,
+};
+
+export enum Radius {
+  radius4 = 'var(--radius-4)',
+  radius8 = 'var(--radius-8)',
+  radius11 = 'var(--radius-11)',
+  radius12 = 'var(--radius-12)',
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts
new file mode 100644
index 0000000000..b6929f070d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts
@@ -0,0 +1,33 @@
+import { SpacingTokens } from '../../../tokens';
+
+export const spacings = {
+  '--spacing-1': SpacingTokens.spacing1,
+  '--spacing-2': SpacingTokens.spacing2,
+  '--spacing-3': SpacingTokens.spacing3,
+  '--spacing-4': SpacingTokens.spacing4,
+  '--spacing-5': SpacingTokens.spacing5,
+  '--spacing-6': SpacingTokens.spacing6,
+  '--spacing-7': SpacingTokens.spacing7,
+  '--spacing-8': SpacingTokens.spacing8,
+  '--spacing-9': SpacingTokens.spacing9,
+  '--spacing-10': SpacingTokens.spacing10,
+  '--spacing-11': SpacingTokens.spacing11,
+  '--spacing-12': SpacingTokens.spacing12,
+  '--spacing-13': SpacingTokens.spacing13,
+};
+
+export enum Spacings {
+  spacing1 = 'var(--spacing-1)',
+  spacing2 = 'var(--spacing-2)',
+  spacing3 = 'var(--spacing-3)',
+  spacing4 = 'var(--spacing-4)',
+  spacing5 = 'var(--spacing-5)',
+  spacing6 = 'var(--spacing-6)',
+  spacing7 = 'var(--spacing-7)',
+  spacing8 = 'var(--spacing-8)',
+  spacing9 = 'var(--spacing-9)',
+  spacing10 = 'var(--spacing-10)',
+  spacing11 = 'var(--spacing-11)',
+  spacing12 = 'var(--spacing-12)',
+  spacing13 = 'var(--spacing-13)',
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts
new file mode 100644
index 0000000000..68f6530c26
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts
@@ -0,0 +1,132 @@
+import {
+  FontFamilyTokens,
+  FontSizeTokens,
+  FontWeightTokens,
+  LineHeightTokens,
+} from '../../../tokens';
+
+export const fontFamilies = {
+  '--font-family-open-sans': FontFamilyTokens.openSans,
+  '--font-family-source-sans-pro': FontFamilyTokens.sourceSansPro,
+};
+
+export enum FontFamilies {
+  openSans = 'var(--font-family-open-sans)',
+  sourceSansPro = 'var(--font-family-source-sans-pro)',
+}
+
+export const fontWeights = {
+  '--font-weight-regular': FontWeightTokens.regular,
+  '--font-weight-semi-bold': FontWeightTokens.semiBold,
+  '--font-weight-bold': FontWeightTokens.bold,
+};
+
+export enum FontWeights {
+  regular = 'var(--font-weight-regular)',
+  semiBold = 'var(--font-weight-semi-bold)',
+  bold = 'var(--font-weight-bold)',
+}
+
+export const fontSizes = {
+  '--font-size-big': FontSizeTokens.big,
+  '--font-size-large': FontSizeTokens.large,
+  '--font-size-medium': FontSizeTokens.medium,
+  '--font-size-small': FontSizeTokens.small,
+  '--font-size-tiny': FontSizeTokens.tiny,
+  '--font-size-mini': FontSizeTokens.mini,
+};
+
+export enum FontSizes {
+  big = 'var(--font-size-big)',
+  large = 'var(--font-size-large)',
+  medium = 'var(--font-size-medium)',
+  small = 'var(--font-size-small)',
+  tiny = 'var(--font-size-tiny)',
+  mini = 'var(--font-size-mini)',
+}
+
+export const lineHeights = {
+  '--line-height-big': LineHeightTokens.big,
+  '--line-height-large': LineHeightTokens.large,
+  '--line-height-medium': LineHeightTokens.medium,
+  '--line-height-small': LineHeightTokens.small,
+  '--line-height-tiny': LineHeightTokens.tiny,
+  '--line-height-mini': LineHeightTokens.mini,
+};
+
+export enum LineHeights {
+  big = 'var(--line-height-big)',
+  large = 'var(--line-height-large)',
+  medium = 'var(--line-height-medium)',
+  small = 'var(--line-height-small)',
+  tiny = 'var(--line-height-tiny)',
+  mini = 'var(--line-height-mini)',
+}
+
+export enum Fonts {
+  title = FontFamilies.sourceSansPro,
+  body = FontFamilies.openSans,
+  label = FontFamilies.openSans,
+  footnote = FontFamilies.openSans,
+}
+
+export type Typography =
+  | 'titleBig'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'bodySmall'
+  | 'bodySmallSemibold'
+  | 'labelTiny'
+  | 'footnoteMini';
+
+export interface TypographyProperties {
+  fontFamily: React.CSSProperties['fontFamily'];
+  fontSize: React.CSSProperties['fontSize'];
+  fontWeight: React.CSSProperties['fontWeight'];
+  lineHeight: React.CSSProperties['lineHeight'];
+}
+
+export const typography: Record<Typography, TypographyProperties> = {
+  titleBig: {
+    fontFamily: Fonts.title,
+    fontWeight: FontWeights.bold,
+    fontSize: FontSizes.big,
+    lineHeight: LineHeights.big,
+  },
+  titleLarge: {
+    fontFamily: Fonts.title,
+    fontWeight: FontWeights.bold,
+    fontSize: FontSizes.large,
+    lineHeight: LineHeights.large,
+  },
+  titleMedium: {
+    fontFamily: Fonts.title,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.medium,
+    lineHeight: LineHeights.medium,
+  },
+  bodySmall: {
+    fontFamily: Fonts.body,
+    fontWeight: FontWeights.regular,
+    fontSize: FontSizes.small,
+    lineHeight: LineHeights.small,
+  },
+  bodySmallSemibold: {
+    fontFamily: Fonts.body,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.small,
+    lineHeight: LineHeights.small,
+  },
+  labelTiny: {
+    fontFamily: Fonts.label,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.tiny,
+    lineHeight: LineHeights.tiny,
+  },
+  footnoteMini: {
+    fontFamily: Fonts.footnote,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.mini,
+    lineHeight: LineHeights.mini,
+  },
+} as const;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
index b0466d0d07..a0126bcd1d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx
@@ -4,7 +4,7 @@ import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
 import { useSelector } from '../../redux/store';
-import { Button } from '../common/molecules/Button';
+import { Button } from '../common/molecules';
 
 export default function ConnectionActionButton() {
   const tunnelState = useSelector((state) => state.connection.status.state);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
index 6460515791..539a7e46c3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
@@ -4,8 +4,8 @@ import { messages } from '../../../../../shared/gettext';
 import { getDownloadUrl } from '../../../../../shared/version';
 import { useAppContext } from '../../../../context';
 import { useSelector } from '../../../../redux/store';
-import { Colors } from '../../../../tokens';
 import * as Cell from '../../../cell';
+import { Colors } from '../../../common/variables';
 import { LabelStack } from '../../../Layout';
 
 export function AppVersionListItem() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
index a15d17956c..df5453a68f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
@@ -6,11 +6,11 @@ import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
 import { useHistory } from '../../../lib/history';
 import { useSelector } from '../../../redux/store';
-import { Colors, Spacings } from '../../../tokens';
 import { Flex } from '../../common/layout';
 import { Container } from '../../common/layout/Container';
-import { Button } from '../../common/molecules/Button';
+import { Button } from '../../common/molecules/';
 import { BodySmall, TitleBig, TitleLarge } from '../../common/text';
+import { Colors, Spacings } from '../../common/variables';
 import ImageView from '../../ImageView';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
@@ -75,7 +75,7 @@ export const ChangelogView = () => {
                       ))}
                     </StyledList>
                   ) : (
-                    <BodySmall>
+                    <BodySmall color={Colors.white60}>
                       {messages.pgettext(
                         'changelog-view',
                         'No updates or changes were made in this release for this platform.',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/styles.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/styles.ts
index 554e669373..ea527ab791 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/styles.ts
@@ -4,6 +4,6 @@ export type NonTransientProps<T, K extends NonTransientPropKey<keyof T>> = {
   [P in keyof T as NonTransientPropKey<P> extends K ? NonTransientPropKey<P> : P]: T[P];
 };
 
-export type TransientProps<T, K extends keyof T> = {
+export type TransientProps<T, K extends keyof T = keyof T> = {
   [P in keyof T as P extends K ? `$${P & string}` : P]: T[P];
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/color-tokens.ts
index 46dc8508be..fe42f71f4e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/color-tokens.ts
@@ -1,4 +1,4 @@
-export enum Colors {
+export enum ColorTokens {
   darkerBlue = 'rgba(25, 38, 56, 0.95)',
   darkBlue = 'rgb(25, 46, 69)',
   blue = 'rgb(41, 77, 115)',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts
index 6faa0dac5e..3c59aa34fd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts
@@ -1,4 +1,4 @@
-export * from './colors';
-export * from './radius';
-export * from './spacings';
-export * from './typography';
+export * from './color-tokens';
+export * from './radius-tokens';
+export * from './spacing-tokens';
+export * from './typography-tokens';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/radius.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/radius-tokens.ts
index e73a2cb513..7eecb31eca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/radius.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/radius-tokens.ts
@@ -1,4 +1,4 @@
-export enum Radius {
+export enum RadiusTokens {
   radius4 = '4px',
   radius8 = '8px',
   radius11 = '11px',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacing-tokens.ts
index fb0c924863..4216dde90a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacing-tokens.ts
@@ -1,4 +1,4 @@
-export enum Spacings {
+export enum SpacingTokens {
   spacing1 = '4px',
   spacing2 = '6px',
   spacing3 = '8px',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts
new file mode 100644
index 0000000000..9d42a89c9f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts
@@ -0,0 +1,28 @@
+export enum FontFamilyTokens {
+  openSans = 'Open Sans',
+  sourceSansPro = '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif',
+}
+
+export enum FontWeightTokens {
+  regular = 400,
+  semiBold = 600,
+  bold = 700,
+}
+
+export enum FontSizeTokens {
+  big = '32px',
+  large = '24px',
+  medium = '18px',
+  small = '14px',
+  tiny = '12px',
+  mini = '10px',
+}
+
+export enum LineHeightTokens {
+  big = '34px',
+  large = '28px',
+  medium = '24px',
+  small = '20px',
+  tiny = '18px',
+  mini = '15px',
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts
deleted file mode 100644
index d647c8465a..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-export enum FontFamilies {
-  openSans = 'Open Sans',
-  openSansPro = '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif',
-}
-
-export enum Fonts {
-  title = FontFamilies.openSansPro,
-  body = FontFamilies.openSans,
-  label = FontFamilies.openSans,
-  footnote = FontFamilies.openSans,
-}
-
-export enum FontWeights {
-  regular = 400,
-  semiBold = 600,
-  bold = 700,
-}
-
-export enum FontSizes {
-  big = '32px',
-  large = '24px',
-  medium = '18px',
-  small = '14px',
-  tiny = '12px',
-  mini = '10px',
-}
-
-export enum LineHeights {
-  big = '34px',
-  large = '28px',
-  medium = '24px',
-  small = '20px',
-  tiny = '18px',
-  mini = '15px',
-}
-
-interface TypographyProperties {
-  fontFamily: React.CSSProperties['fontFamily'];
-  fontSize: React.CSSProperties['fontSize'];
-  fontWeight: React.CSSProperties['fontWeight'];
-  lineHeight: React.CSSProperties['lineHeight'];
-}
-
-export type Typography =
-  | 'titleBig'
-  | 'titleLarge'
-  | 'titleMedium'
-  | 'bodySmall'
-  | 'bodySmallSemibold'
-  | 'labelTiny'
-  | 'footnoteMini';
-
-export const typography: Record<Typography, TypographyProperties> = {
-  titleBig: {
-    fontFamily: Fonts.title,
-    fontWeight: FontWeights.bold,
-    fontSize: FontSizes.big,
-    lineHeight: LineHeights.big,
-  },
-  titleLarge: {
-    fontFamily: Fonts.title,
-    fontWeight: FontWeights.bold,
-    fontSize: FontSizes.large,
-    lineHeight: LineHeights.large,
-  },
-  titleMedium: {
-    fontFamily: Fonts.title,
-    fontWeight: FontWeights.semiBold,
-    fontSize: FontSizes.medium,
-    lineHeight: LineHeights.medium,
-  },
-  bodySmall: {
-    fontFamily: Fonts.body,
-    fontWeight: FontWeights.regular,
-    fontSize: FontSizes.small,
-    lineHeight: LineHeights.small,
-  },
-  bodySmallSemibold: {
-    fontFamily: Fonts.body,
-    fontWeight: FontWeights.semiBold,
-    fontSize: FontSizes.small,
-    lineHeight: LineHeights.small,
-  },
-  labelTiny: {
-    fontFamily: Fonts.label,
-    fontWeight: FontWeights.semiBold,
-    fontSize: FontSizes.tiny,
-    lineHeight: LineHeights.tiny,
-  },
-  footnoteMini: {
-    fontFamily: Fonts.footnote,
-    fontWeight: FontWeights.semiBold,
-    fontSize: FontSizes.mini,
-    lineHeight: LineHeights.mini,
-  },
-} as const;