Use new color tokens in tests

6 files changed, 32 insertions, 44 deletions

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 6e995758cd..01526139de 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 { deprecatedColors } from '../../../../src/renderer/lib/foundations';
+import { colorTokens } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -99,19 +99,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', deprecatedColors['--color-green']);
+  await expect(customBridgeButton).toHaveCSS('background-color', colorTokens.green);
 
   const automaticButton = page.getByText('Automatic');
   await automaticButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).not.toHaveCSS(
-    'background-color',
-    deprecatedColors['--color-green'],
-  );
+  await expect(customBridgeButton).not.toHaveCSS('background-color', colorTokens.green);
 
   await customBridgeButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(customBridgeButton).toHaveCSS('background-color', colorTokens.green);
 });
 
 test('App should edit custom bridge', async () => {
@@ -138,7 +135,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', deprecatedColors['--color-green']);
+  await expect(customBridgeButton).toHaveCSS('background-color', colorTokens.green);
 });
 
 test('App should delete custom bridge', async () => {
@@ -158,8 +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',
-    deprecatedColors['--color-green'],
-  );
+  await expect(customBridgeButton).not.toHaveCSS('background-color', colorTokens.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 5de49c5da7..9fb2474f86 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 { deprecatedColors } from '../../../../src/renderer/lib/foundations';
+import { colorTokens } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -36,7 +36,7 @@ test('App should have automatic obfuscation', async () => {
   await util.waitForRoute(RoutePath.wireguardSettings);
 
   const automatic = page.getByTestId('automatic-obfuscation');
-  await expect(automatic).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(automatic).toHaveCSS('background-color', colorTokens.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 () => {
   await util.waitForRoute(RoutePath.shadowsocks);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(automatic).toHaveCSS('background-color', colorTokens.green);
 
   const customInput = page.locator('input[type="text"]');
   await customInput.click();
@@ -57,14 +57,14 @@ 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', deprecatedColors['--color-green']);
+  await expect(customItem).toHaveCSS('background-color', colorTokens.green);
 
   await page.click('button[aria-label="Back"]');
   await util.waitForRoute(RoutePath.wireguardSettings);
 
   const shadowsocksItem = page.locator('button', { hasText: 'Shadowsocks' });
   await shadowsocksItem.click();
-  await expect(shadowsocksItem).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(shadowsocksItem).toHaveCSS('background-color', colorTokens.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 () => {
   await util.waitForRoute(RoutePath.shadowsocks);
 
   const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
-  await expect(customItem).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(customItem).toHaveCSS('background-color', colorTokens.green);
 
   await page.click('button[aria-label="Back"]');
   await util.waitForRoute(RoutePath.wireguardSettings);
@@ -87,19 +87,19 @@ test('App should set obfuscation to UDP-over-TCP with port', async () => {
   await util.waitForRoute(RoutePath.udpOverTcp);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(automatic).toHaveCSS('background-color', colorTokens.green);
 
   const portButton = page.locator('button', { hasText: UDPOVERTCP_PORT });
   await portButton.click();
 
-  await expect(portButton).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(portButton).toHaveCSS('background-color', colorTokens.green);
 
   await page.click('button[aria-label="Back"]');
   await util.waitForRoute(RoutePath.wireguardSettings);
 
   const udpOverTcpItem = page.locator('button', { hasText: 'UDP-over-TCP' });
   await udpOverTcpItem.click();
-  await expect(udpOverTcpItem).toHaveCSS('background-color', deprecatedColors['--color-green']);
+  await expect(udpOverTcpItem).toHaveCSS('background-color', colorTokens.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 901338ead6..d03baafde8 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 { deprecatedColors } from '../../../src/renderer/lib/foundations';
+import { colorTokens } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import { IAccountData } from '../../../src/shared/daemon-rpc-types';
 import { getBackgroundColor } from '../utils';
@@ -28,11 +28,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(deprecatedColors['--color-green']);
+  expect(await getBackgroundColor(buyMoreButton)).toBe(colorTokens.green);
 
   const redeemVoucherButton = page.locator('button:has-text("Redeem voucher")');
   await expect(redeemVoucherButton).toBeVisible();
-  expect(await getBackgroundColor(redeemVoucherButton)).toBe(deprecatedColors['--color-green']);
+  expect(await getBackgroundColor(redeemVoucherButton)).toBe(colorTokens.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 3626465cee..c783b8a868 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
 import { getDefaultSettings } from '../../../src/main/default-settings';
-import { deprecatedColors } from '../../../src/renderer/lib/foundations';
+import { colorTokens } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import {
   Constraint,
@@ -44,7 +44,7 @@ test('App should notify user about account expiring soon', async () => {
 
   const indicator = page.getByTestId('notificationIndicator');
   const indicatorColor = await getBackgroundColor(indicator);
-  expect(indicatorColor).toBe(deprecatedColors['--color-yellow']);
+  expect(indicatorColor).toBe(colorTokens.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 529c8e09d9..ffcf9d42e4 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
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
 import { getDefaultSettings } from '../../../src/main/default-settings';
-import { deprecatedColors } from '../../../src/renderer/lib/foundations';
+import { colorTokens } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import {
   IRelayList,
@@ -93,7 +93,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', deprecatedColors['--color-green']);
+  await expect(entryTab).toHaveCSS('background-color', colorTokens.green);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -102,7 +102,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', deprecatedColors['--color-green']);
+  await expect(exitTab).toHaveCSS('background-color', colorTokens.green);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -123,7 +123,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', deprecatedColors['--color-green']);
+  await expect(entryTab).toHaveCSS('background-color', colorTokens.green);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).not.toBeVisible();
@@ -144,7 +144,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', deprecatedColors['--color-green']);
+  await expect(entryTab).toHaveCSS('background-color', colorTokens.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 99d9b3fe3d..e9c2ddd872 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
@@ -1,22 +1,16 @@
 import { expect } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { deprecatedColors } from '../../../src/renderer/lib/foundations';
+import { colorTokens } from '../../../src/renderer/lib/foundations';
 import { anyOf } from '../utils';
 
-const DISCONNECTED_COLOR = deprecatedColors['--color-red'];
-const CONNECTED_COLOR = deprecatedColors['--color-green'];
-const WHITE_COLOR = deprecatedColors['--color-white'];
+const DISCONNECTED_COLOR = colorTokens.red;
+const CONNECTED_COLOR = colorTokens.green;
+const WHITE_COLOR = colorTokens.white;
 
-const DISCONNECTED_BUTTON_COLOR = anyOf(
-  deprecatedColors['--color-red'],
-  deprecatedColors['--color-red-80'],
-);
-const DISCONNECTING_BUTTON_COLOR = anyOf(deprecatedColors['--color-green-40']);
-const CONNECTED_BUTTON_COLOR = anyOf(
-  deprecatedColors['--color-green'],
-  deprecatedColors['--color-green-90'],
-);
+const DISCONNECTED_BUTTON_COLOR = anyOf(colorTokens.red, colorTokens.red80);
+const DISCONNECTING_BUTTON_COLOR = anyOf(colorTokens.green40);
+const CONNECTED_BUTTON_COLOR = anyOf(colorTokens.green, colorTokens.green80);
 
 const getLabel = (page: Page) => page.locator('span[role="status"]');
 const getHeader = (page: Page) => page.locator('header');