Add text components based on typography tokens

9 files changed, 74 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
new file mode 100644
index 0000000000..9cfe1bc9c0
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const BodySmall = styled(Text)({
+  ...typography['bodySmall'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
new file mode 100644
index 0000000000..705a939e5d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const BodySmallSemiBold = styled(Text)({
+  ...typography['bodySmallSemibold'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
new file mode 100644
index 0000000000..adbafb90d1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const FootnoteMini = styled(Text)({
+  ...typography['footnoteMini'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
new file mode 100644
index 0000000000..9f6f8a143c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const LabelTiny = styled(Text)({
+  ...typography['labelTiny'],
+});
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
new file mode 100644
index 0000000000..f4b32d988d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { Colors } from '../../../tokens';
+
+interface TextProps {
+  $color?: Colors;
+}
+
+export const Text = styled.div<TextProps>(({ $color }) => ({
+  color: $color ? $color : Colors.white,
+}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
new file mode 100644
index 0000000000..16d76c04ef
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const TitleBig = styled(Text)({
+  ...typography['titleBig'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
new file mode 100644
index 0000000000..e939b099fc
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+export const TitleLarge = styled(Text)({
+  ...typography['titleLarge'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
new file mode 100644
index 0000000000..578d435ef3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const TitleMedium = styled(Text)({
+  ...typography['titleMedium'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
new file mode 100644
index 0000000000..56db1927fc
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
@@ -0,0 +1,8 @@
+export * from './BodySmall';
+export * from './BodySmallSemiBold';
+export * from './FootnoteMini';
+export * from './LabelTiny';
+export * from './Text';
+export * from './TitleBig';
+export * from './TitleLarge';
+export * from './TitleMedium';