Refactor config to use environment variable for mock mode and update color definitions in styles

Author: d0rich

gui/config.ts

@@ -1,5 +1,5 @@
 const config = {
-  useMock: true,
+  useMock: import.meta.env.VITE_USE_MOCK === 'true',
   bankA: {
     name: 'Bank A' as const,
     bic: 'TESTGETBXXX',

gui/src/main.ts

@@ -7,6 +7,25 @@ import { router } from './router'
 import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
 import { Tooltip } from 'primevue'
+import { definePreset } from '@primeuix/themes'
+
+const MyPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: 'var(--color-primary-50)',
+      100: 'var(--color-primary-100)',
+      200: 'var(--color-primary-200)',
+      300: 'var(--color-primary-300)',
+      400: 'var(--color-primary-400)',
+      500: 'var(--color-primary-500)',
+      600: 'var(--color-primary-600)',
+      700: 'var(--color-primary-700)',
+      800: 'var(--color-primary-800)',
+      900: 'var(--color-primary-900)',
+      950: 'var(--color-primary-950)'
+    }
+  }
+})
 
 createApp(App)
   .use(
@@ -22,7 +41,7 @@ createApp(App)
   .use(router)
   .use(PrimeVue, {
     theme: {
-      preset: Aura,
+      preset: MyPreset,
       options: {
         darkModeSelector: '[data-theme="dim"]'
       }

gui/src/style.css

@@ -51,6 +51,19 @@
     --color-grad-bg-logo-1: #6dbbb9;
     --color-grad-bg-logo-2: #3c7b86;
     --color-grad-bg-logo-3: #78c3c2;
+
+    --color-primary: oklch(62.384% 0.08324 203.57);
+    --color-primary-50: oklch(91.965% 0.02668 205.44);
+    --color-primary-100: oklch(89.531% 0.03587 203.07);
+    --color-primary-200: oklch(84.562% 0.05199 202.33);
+    --color-primary-300: oklch(79.469% 0.0666 204.44);
+    --color-primary-400: oklch(74.658% 0.08016 203.83);
+    --color-primary-500: oklch(69.985% 0.09121 203.59);
+    --color-primary-600: oklch(62.384% 0.08324 203.57);
+    --color-primary-700: oklch(50.588% 0.06617 203.55);
+    --color-primary-800: oklch(38.057% 0.04783 203.54);
+    --color-primary-900: oklch(24.386% 0.02719 203.57);
+    --color-primary-950: oklch(16.815% 0.01534 203.61);
 }
 
 @plugin "daisyui/theme" {
@@ -79,6 +92,19 @@
     --color-grad-bg-logo-1: #9b4ad1;
     --color-grad-bg-logo-2: #662c90;
     --color-grad-bg-logo-3: #9f55d9;
+
+    --color-primary: oklch(48.365% 0.18981 307.66);
+    --color-primary-50: oklch(88.629% 0.04902 310.97);
+    --color-primary-100: oklch(84.678% 0.06628 311.41);
+    --color-primary-200: oklch(76.742% 0.10235 310.58);
+    --color-primary-300: oklch(69.168% 0.13742 310.08);
+    --color-primary-400: oklch(61.609% 0.17174 309.72);
+    --color-primary-500: oklch(54.61% 0.20109 308);
+    --color-primary-600: oklch(48.365% 0.18981 307.66);
+    --color-primary-700: oklch(39.613% 0.15215 307.63);
+    --color-primary-800: oklch(30.421% 0.10908 307.86);
+    --color-primary-900: oklch(20.614% 0.06407 309.28);
+    --color-primary-950: oklch(15.193% 0.03619 309.04);
 }
 
 @plugin "daisyui" {