diff options
4 files changed, 146 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts new file mode 100644 index 0000000000..46dc8508be --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts @@ -0,0 +1,32 @@ +export enum 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)', + red45 = 'rgba(227, 64, 57, 0.45)', + red40 = 'rgba(227, 64, 57, 0.4)', + green90 = 'rgba(68, 173, 77, 0.9)', + green40 = 'rgba(68, 173, 77, 0.4)', +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts new file mode 100644 index 0000000000..53555f1d5a --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts @@ -0,0 +1,3 @@ +export * from './colors'; +export * from './spacings'; +export * from './typography'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts new file mode 100644 index 0000000000..fb0c924863 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts @@ -0,0 +1,15 @@ +export enum Spacings { + spacing1 = '4px', + spacing2 = '6px', + spacing3 = '8px', + spacing4 = '12px', + spacing5 = '16px', + spacing6 = '24px', + spacing7 = '32px', + spacing8 = '40px', + spacing9 = '48px', + spacing10 = '56px', + spacing11 = '64px', + spacing12 = '72px', + spacing13 = '80px', +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts new file mode 100644 index 0000000000..df7359b8f0 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts @@ -0,0 +1,96 @@ +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 Typography { + fontFamily: React.CSSProperties['fontFamily']; + fontSize: React.CSSProperties['fontSize']; + fontWeight: React.CSSProperties['fontWeight']; + lineHeight: React.CSSProperties['lineHeight']; +} + +export const typography: Record< + | 'titleBig' + | 'titleLarge' + | 'titleMedium' + | 'bodySmall' + | 'bodySmallSemibold' + | 'labelTiny' + | 'footnoteMini', + Typography +> = { + 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; |