From 14acbdda629c6fd0a279eb508c75d02b80e3dd20 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 17 Apr 2024 16:29:33 +0200
Subject: [PATCH] Add working example of importing design tokens from
 tokens.module.scss

---
 frontend/renderer/plugins/vuetify.ts        | 4 +++-
 frontend/src/assets/sass/tokens.module.scss | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/assets/sass/tokens.module.scss

diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts
index 9fc6dc1b9..7ee24bc10 100644
--- a/frontend/renderer/plugins/vuetify.ts
+++ b/frontend/renderer/plugins/vuetify.ts
@@ -6,13 +6,15 @@ import { I18n, useI18n } from 'vue-i18n'
 import { createVuetify, ThemeDefinition } from 'vuetify'
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
 
+import tokens from '#assets/sass/tokens.module.scss'
+
 const ocelotStandardLightTheme: ThemeDefinition = {
   dark: false,
   colors: {
     background: 'rgb(255, 255, 255)',
     surface: 'rgb(255, 255, 255)',
     // primary: rgbToHex(23, 181, 63, '#'),
-    primary: 'rgb(23, 181, 63)',
+    primary: tokens.primaryColor,
     // 'primary-darken-1': rgbToHex(25, 122, 49, '#'),
     'primary-darken-1': 'rgb(25, 122, 49)',
     secondary: 'rgb(0, 142, 230)',
diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss
new file mode 100644
index 000000000..f92d34280
--- /dev/null
+++ b/frontend/src/assets/sass/tokens.module.scss
@@ -0,0 +1,5 @@
+$primary-color: rgba(20,20,20,10%);
+
+:export {
+    primaryColor: $primary-color
+}