diff options
3 files changed, 196 insertions, 1 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx index d69bfb25fc..dd5ce64e92 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { createGlobalStyle } from 'styled-components'; import { + colorPrimitives, deprecatedColors, fontFamilies, fontSizes, @@ -18,6 +19,7 @@ const VariablesGlobalStyle = createGlobalStyle` ${Object.entries({ ...deprecatedColors, ...spacingPrimitives, + ...colorPrimitives, ...radius, ...fontFamilies, ...fontSizes, diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts index 805646819e..f8d9fa51af 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts @@ -30,3 +30,66 @@ export enum DeprecatedColorTokens { green90 = 'rgba(68, 173, 77, 0.9)', green40 = 'rgba(68, 173, 77, 0.4)', } + +export const colorTokens = { + white100: 'rgba(255, 255, 255, 1)', + white80: 'rgba(255, 255, 255, 0.8)', + white60: 'rgba(255, 255, 255, 0.6)', + white40: 'rgba(255, 255, 255, 0.4)', + white20: 'rgba(255, 255, 255, 0.2)', + + black: 'rgba(0, 0, 0, 1)', + black50: 'rgba(0, 0, 0, 0.5)', + + brandRed: 'rgba(227, 64, 57, 1)', + brandGreen: 'rgba(68, 173, 77, 1)', + brandYellow: 'rgba(255, 213, 36, 1)', + brandFur: 'rgba(210, 148, 59, 1)', + brandNose: 'rgba(255, 205, 134, 1)', + brandBlue: 'rgba(41, 77, 115, 1)', + brandDarkBlue: 'rgba(25, 46, 69, 1)', + + greenAlpha: 'rgba(68, 173, 77, 0.4)', + green80: 'rgba(59, 148, 75, 1)', + green40: 'rgba(59, 148, 75, 1)', + + redAlpha: 'rgba(227, 64, 57, 0.4)', + red: 'rgba(235, 93, 64, 1)', + red80: 'rgba(187, 60, 59, 1)', + red40: 'rgba(106, 53, 64, 1)', + + dark: 'rgba(78, 73, 73, 1)', + darkerBlue50: 'rgba(25, 38, 56, 1)', + darkerBlue10: 'rgba(16, 24, 35, 1)', + darkerBlue10Alpha80: 'rgba(16, 24, 35, 0.8)', + darkerBlue10Alpha40: 'rgba(16, 24, 35, 0.4)', + darkerBlue50Alpha80: 'rgba(25, 38, 56, 0.8)', + + blue10: 'rgba(27, 49, 74, 1)', + blue20: 'rgba(28, 52, 78, 1)', + blue40: 'rgba(31, 58, 87, 1)', + blue50: 'rgba(33, 62, 92, 1)', + blue60: 'rgba(35, 65, 97, 1)', + blue80: 'rgba(38, 71, 106, 1)', + + whiteOnDarkBlue5: 'rgba(37, 57, 78, 1)', + whiteOnDarkBlue10: 'rgba(48, 67, 88, 1)', + whiteOnDarkBlue20: 'rgba(71, 88, 106, 1)', + whiteOnDarkBlue40: 'rgba(117, 130, 143, 1)', + whiteOnDarkBlue50: 'rgba(140, 150, 162, 1)', + whiteOnDarkBlue60: 'rgba(163, 171, 181, 1)', + whiteOnDarkBlue80: 'rgba(209, 213, 218, 1)', + + whiteOnBlue5: 'rgba(56, 86, 116, 1)', + whiteOnBlue10: 'rgba(62, 95, 129, 1)', + whiteOnBlue20: 'rgba(84, 113, 143, 1)', + whiteOnBlue40: 'rgba(127, 148, 171, 1)', + whiteOnBlue50: 'rgba(148, 166, 185, 1)', + whiteOnBlue60: 'rgba(169, 184, 199, 1)', + whiteOnBlue80: 'rgba(212, 219, 227, 1)', + + chalk100: 'rgba(248, 247, 241, 1)', + chalk80: 'rgba(246, 242, 213, 1)', + chalk80Alpha: 'rgba(248, 247, 241, 0.8)', + chalk40Alpha: 'rgba(248, 247, 241, 0.4)', +} as const; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts index 798d8d1df2..108cb51f52 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts @@ -1,4 +1,4 @@ -import { DeprecatedColorTokens } from '../tokens'; +import { colorTokens, DeprecatedColorTokens } from '../tokens'; export const deprecatedColors = { '--color-darker-blue': DeprecatedColorTokens.darkerBlue, @@ -65,3 +65,133 @@ export enum DeprecatedColors { green90 = 'var(--color-green-90)', green40 = 'var(--color-green-40)', } + +export const colorPrimitives = { + '--color-white100': colorTokens.white100, + '--color-white80': colorTokens.white80, + '--color-white60': colorTokens.white60, + '--color-white40': colorTokens.white40, + '--color-white20': colorTokens.white20, + + '--color-black': colorTokens.black, + '--color-black50': colorTokens.black50, + + '--color-brand-red': colorTokens.brandRed, + '--color-brand-green': colorTokens.brandGreen, + '--color-brand-yellow': colorTokens.brandYellow, + '--color-brand-fur': colorTokens.brandFur, + '--color-brand-nose': colorTokens.brandNose, + '--color-brand-blue': colorTokens.brandBlue, + '--color-brand-dark-blue': colorTokens.brandDarkBlue, + + '--color-green-alpha': colorTokens.greenAlpha, + '--color-green80': colorTokens.green80, + '--color-green40': colorTokens.green40, + + '--color-red': colorTokens.red, + '--color-red-alpha': colorTokens.redAlpha, + '--color-red80': colorTokens.red80, + '--color-red40': colorTokens.red40, + + '--color-dark': colorTokens.dark, + '--color-darker-blue50': colorTokens.darkerBlue50, + '--color-darker-blue10': colorTokens.darkerBlue10, + '--color-darker-blue10-alpha80': colorTokens.darkerBlue10Alpha80, + '--color-darker-blue10-alpha40': colorTokens.darkerBlue10Alpha40, + '--color-darker-blue50-alpha80': colorTokens.darkerBlue50Alpha80, + + '--color-blue10': colorTokens.blue10, + '--color-blue20': colorTokens.blue20, + '--color-blue40': colorTokens.blue40, + '--color-blue50': colorTokens.blue50, + '--color-blue60': colorTokens.blue60, + '--color-blue80': colorTokens.blue80, + + '--color-white-on-dark-blue5': colorTokens.whiteOnDarkBlue5, + '--color-white-on-dark-blue10': colorTokens.whiteOnDarkBlue10, + '--color-white-on-dark-blue20': colorTokens.whiteOnDarkBlue20, + '--color-white-on-dark-blue40': colorTokens.whiteOnDarkBlue40, + '--color-white-on-dark-blue50': colorTokens.whiteOnDarkBlue50, + '--color-white-on-dark-blue60': colorTokens.whiteOnDarkBlue60, + '--color-white-on-dark-blue80': colorTokens.whiteOnDarkBlue80, + + '--color-white-on-blue5': colorTokens.whiteOnBlue5, + '--color-white-on-blue10': colorTokens.whiteOnBlue10, + '--color-white-on-blue20': colorTokens.whiteOnBlue20, + '--color-white-on-blue40': colorTokens.whiteOnBlue40, + '--color-white-on-blue50': colorTokens.whiteOnBlue50, + '--color-white-on-blue60': colorTokens.whiteOnBlue60, + '--color-white-on-blue80': colorTokens.whiteOnBlue80, + + '--color-chalk100': colorTokens.chalk100, + '--color-chalk80': colorTokens.chalk80, + '--color-chalk80Alpha': colorTokens.chalk80Alpha, + '--color-chalk40Alpha': colorTokens.chalk40Alpha, +} as const; + +export const colors = { + white100: 'var(--color-white100)', + white80: 'var(--color-white80)', + white60: 'var(--color-white60)', + white40: 'var(--color-white40)', + white20: 'var(--color-white20)', + + black: 'var(--color-black)', + black50: 'var(--color-black50)', + + brandRed: 'var(--color-brand-red)', + brandGreen: 'var(--color-brand-green)', + brandYellow: 'var(--color-brand-yellow)', + brandFur: 'var(--color-brand-fur)', + brandNose: 'var(--color-brand-nose)', + brandBlue: 'var(--color-brand-blue)', + brandDarkBlue: 'var(--color-brand-dark-blue)', + + greenAlpha: 'var(--color-green-alpha)', + green80: 'var(--color-green80)', + green40: 'var(--color-green40)', + + redAlpha: 'var(--color-red-alpha)', + red: 'var(--color-red)', + red80: 'var(--color-red80)', + red40: 'var(--color-red40)', + + dark: 'var(--color-dark)', + darkerBlue50: 'var(--color-darker-blue50)', + darkerBlue10: 'var(--color-darker-blue10)', + darkerBlue10Alpha80: 'var(--color-darker-blue10-alpha80)', + darkerBlue10Alpha40: 'var(--color-darker-blue10-alpha40)', + darkerBlue50Alpha80: 'var(--color-darker-blue50-alpha80)', + + blue10: 'var(--color-blue10)', + blue20: 'var(--color-blue20)', + blue40: 'var(--color-blue40)', + blue50: 'var(--color-blue50)', + blue60: 'var(--color-blue60)', + blue80: 'var(--color-blue80)', + + whiteOnDarkBlue5: 'var(--color-white-on-dark-blue5)', + whiteOnDarkBlue10: 'var(--color-white-on-dark-blue10)', + whiteOnDarkBlue20: 'var(--color-white-on-dark-blue20)', + whiteOnDarkBlue40: 'var(--color-white-on-dark-blue40)', + whiteOnDarkBlue50: 'var(--color-white-on-dark-blue50)', + whiteOnDarkBlue60: 'var(--color-white-on-dark-blue60)', + whiteOnDarkBlue80: 'var(--color-white-on-dark-blue80)', + + whiteOnBlue5: 'var(--color-white-on-blue5)', + whiteOnBlue10: 'var(--color-white-on-blue10)', + whiteOnBlue20: 'var(--color-white-on-blue20)', + whiteOnBlue40: 'var(--color-white-on-blue40)', + whiteOnBlue50: 'var(--color-white-on-blue50)', + whiteOnBlue60: 'var(--color-white-on-blue60)', + whiteOnBlue80: 'var(--color-white-on-blue80)', + + chalk100: 'var(--color-chalk100)', + chalk80: 'var(--color-chalk80)', + chalk80Alpha: 'var(--color-chalk80Alpha)', + chalk40Alpha: 'var(--color-chalk40Alpha)', +} as const; + +export type Colors = keyof typeof colors; + +export type ColorVariables = (typeof colors)[keyof typeof colors]; |