refactor: changed fetching fonts from remote to local; changed sass import rules to use

chore: updated packages

package.json

@@ -16,10 +16,10 @@
     "pinia": "^2.1.7",
     "vue": "^3.3.11",
     "vue-i18n": "9.8.0",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.2.5"
-    "vue-tsc": "^1.8.25"
   },
   "devDependencies": {
+    "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",

src/App.vue

@@ -23,20 +23,12 @@ import packageInfo from '../package.json';
 
 export default defineComponent({
   setup() {
-    const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
+    const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
-      immediate: true
-    });
 
-    return {
+    return { offlineReady, needRefresh, updateServiceWorker };
-      offlineReady,
-      needRefresh,
-      updateServiceWorker
-    };
   },
   data() {
-    return {
+    return { appVersion: packageInfo.version };
-      appVersion: packageInfo.version,
-    };
   },
 
   created() {
@@ -46,8 +38,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles/global.scss';
+@use 'styles/anims';
-@import './styles/anims.scss';
+@use 'styles/colors';
 
 #app {
   color: white;
@@ -66,7 +58,7 @@ export default defineComponent({
   text-align: center;
 
   width: 100%;
-  background-color: $accentCol;
+  background-color: colors.$accentCol;
 
   cursor: pointer;
 }

src/components/Order.vue

@@ -19,11 +19,7 @@ import OrderSVue from './OrderS.vue';
 import OrderFooter from './OrderFooter.vue';
 import OrderOVue from './OrderO.vue';
 
-const orderComponents = {
+const orderComponents = { orderN: OrderNVue, orderS: OrderSVue, orderO: OrderOVue };
-  orderN: OrderNVue,
-  orderS: OrderSVue,
-  orderO: OrderOVue
-};
 
 export default defineComponent({
   components: { OrderNVue, OrderSVue, OrderFooter },
@@ -31,9 +27,7 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    return {
+    return { store };
-      store
-    };
   },
 
   computed: {
@@ -45,9 +39,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../styles/global.scss';
+@use '../styles/colors';
 
-$darkModeBgCol: $bgColDarker;
 $darkModeTextCol: #eee;
 
 .order {
@@ -55,7 +48,7 @@ $darkModeTextCol: #eee;
   color: black;
 
   &.dark {
-    background-color: $darkModeBgCol;
+    background-color: colors.$bgColDarker;
     color: $darkModeTextCol;
   }
 
@@ -70,12 +63,12 @@ $darkModeTextCol: #eee;
   }
 
   textarea:focus-visible {
-    outline: 2px solid $accentCol;
+    outline: 2px solid colors.$accentCol;
   }
 
   input[type='checkbox']:focus-visible,
   input[type='radio']:focus-visible {
-    outline: 2px solid $accentCol;
+    outline: 2px solid colors.$accentCol;
   }
 
   input[type='checkbox'],
@@ -145,7 +138,7 @@ $darkModeTextCol: #eee;
   border-bottom: 2px dotted black;
 
   &:focus-visible {
-    border-bottom: 2px solid $accentCol;
+    border-bottom: 2px solid colors.$accentCol;
   }
 
   &.row-checkbox + input::placeholder {
@@ -160,7 +153,7 @@ $darkModeTextCol: #eee;
     color: $darkModeTextCol !important;
 
     &:focus-visible {
-      border-bottom: 2px solid $accentCol !important;
+      border-bottom: 2px solid colors.$accentCol !important;
     }
 
     &::placeholder {
@@ -173,7 +166,7 @@ $darkModeTextCol: #eee;
     border-color: $darkModeTextCol;
 
     &:focus-visible {
-      border-color: $accentCol;
+      border-color: colors.$accentCol;
     }
   }
 
@@ -181,7 +174,7 @@ $darkModeTextCol: #eee;
   textarea {
     color: $darkModeTextCol !important;
     border-color: $darkModeTextCol !important;
-    background-color: $bgColDarker !important;
+    background-color: colors.$bgColDarker !important;
   }
 
   .horizontal-bar {

src/components/OrderHelper.vue

@@ -34,16 +34,13 @@ import orderHelperData from '../data/orderHelperData.json';
 
 export default defineComponent({
   setup() {
-    return {
+    return { store: useStore(), orderHelperData };
-      store: useStore(),
-      orderHelperData
-    };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@use '../styles/colors';
 
 .content {
   width: 100%;
@@ -66,7 +63,7 @@ ul {
 
   li b {
     font-size: 1.1em;
-    color: $accentCol;
+    color: colors.$accentCol;
   }
 }
 </style>

src/components/OrderList.vue

@@ -105,7 +105,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@use '../styles/colors';
 
 .list {
   &-move,
@@ -146,7 +146,7 @@ h3 {
   margin-bottom: 1em;
   text-align: center;
 
-  background-color: $bgColDarker;
+  background-color: colors.$bgColDarker;
   padding: 1em;
   margin-bottom: 0.5em;
 }
@@ -155,12 +155,12 @@ li {
   text-align: left;
   padding: 1em;
   margin: 0.5em;
-  background-color: $bgColDarker;
+  background-color: colors.$bgColDarker;
 
   cursor: pointer;
 
   &[selected='true'] {
-    outline: 1px solid $accentCol;
+    outline: 1px solid colors.$accentCol;
   }
 
   &.no-orders-warning {
@@ -171,7 +171,7 @@ li {
 }
 
 .wrong-order-indicator {
-  color: $accentCol;
+  color: colors.$accentCol;
   padding: 0 0.25em;
 }
 
@@ -181,14 +181,14 @@ li {
 
   button {
     padding: 0.5em;
-    background-color: $bgColLighter;
+    background-color: colors.$bgColLighter;
 
     &:hover {
       background-color: #666;
     }
 
     &:focus-visible {
-      outline: 2px solid $accentCol;
+      outline: 2px solid colors.$accentCol;
     }
   }
 }

src/components/OrderMessage.vue

@@ -254,7 +254,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@use '../styles/colors';
 
 .order-message {
   h3 {
@@ -272,7 +272,7 @@ export default defineComponent({
   height: 250px;
   overflow: auto;
 
-  background-color: $bgColLighter;
+  background-color: colors.$bgColLighter;
   color: white;
   text-align: justify;
 

src/components/OrderTrainPicker.vue

@@ -260,7 +260,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@use '../styles/colors';
 
 .order-train-picker {
   display: flex;
@@ -277,7 +277,7 @@ export default defineComponent({
   gap: 0.5em;
 
   select {
-    background-color: $bgColDarker;
+    background-color: colors.$bgColDarker;
 
     font-size: 1em;
     width: 100%;
@@ -306,23 +306,23 @@ ul.train-list {
 
   li.no-trains {
     font-weight: bold;
-    background-color: $bgColDarker;
+    background-color: colors.$bgColDarker;
     padding: 0.5em;
     margin-top: 0.5em;
   }
 
   li > button {
     width: 100%;
-    background-color: $bgColDarker;
+    background-color: colors.$bgColDarker;
     padding: 0.5em;
     margin-top: 0.5em;
 
     &:hover {
-      background-color: $bgColLighter;
+      background-color: colors.$bgColLighter;
     }
 
     &:focus-visible {
-      outline: 1px solid $accentCol;
+      outline: 1px solid colors.$accentCol;
     }
   }
 }

src/components/SideBar.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/global.scss';
+@use '../styles/colors';
 
 .sidebar_content {
   display: grid;
@@ -81,7 +81,7 @@ export default defineComponent({
     align-items: center;
 
     color: white;
-    background-color: $bgColDarker;
+    background-color: colors.$bgColDarker;
     width: 50px;
     height: 85px;
 
@@ -100,7 +100,7 @@ export default defineComponent({
     &[data-selected='true'] .bar {
       transform: translateX(0);
 
-      background-color: $accentCol;
+      background-color: colors.$accentCol;
     }
 
     &:hover {
@@ -122,7 +122,7 @@ button.option-save {
   }
 
   &[data-selected='true'] {
-    background-color: $accentCol;
+    background-color: colors.$accentCol;
   }
 }
 

src/styles/_colors.scss

@@ -0,0 +1,6 @@
+$bgCol: #141414;
+$bgColLighter: #292929;
+$bgColDarker: #080808;
+$accentCol: #ff6060;
+$warnCol: #ffe02e;
+$whiteDimmerCol: #ccc;

src/styles/_fonts.scss

@@ -0,0 +1,24 @@
+@font-face {
+   font-family: 'Libre Franklin';
+   src: url('/fonts/LibreFranklin-Bold.woff2') format('woff2');
+   font-weight: 800;
+   font-style: normal;
+   font-display: swap;
+ }
+ 
+ @font-face {
+   font-family: 'Libre Franklin';
+   src: url('/fonts/LibreFranklin-Regular.woff2') format('woff2');
+   font-weight: 500;
+   font-style: normal;
+   font-display: swap;
+ }
+ 
+ @font-face {
+   font-family: 'Libre Franklin';
+   src: url('/fonts/LibreFranklin-SemiBold.woff2') format('woff2');
+   font-weight: 700;
+   font-style: normal;
+   font-display: swap;
+ }
+ 

src/styles/_global.scss

@@ -1,11 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap');
+@use 'fonts';
-
+@use 'colors';
-$bgCol: #141414;
-$bgColLighter: #292929;
-$bgColDarker: #080808;
-$accentCol: #ff6060;
-$warnCol: #ffe02e;
-$whiteDimmerCol: #ccc;
 
 // Global scrollbar style
 ::-webkit-scrollbar {
@@ -29,7 +23,7 @@ html {
   padding: 0;
   margin: 0;
   min-height: 100vh;
-  background-color: $bgCol;
+  background-color: colors.$bgCol;
 
   font-family: 'Libre Franklin', sans-serif;
   font-weight: 500;
@@ -46,7 +40,7 @@ a {
   text-decoration: none;
 
   &:hover {
-    color: $accentCol;
+    color: colors.$accentCol;
   }
 }
 
@@ -74,15 +68,15 @@ button.g-button {
     background-color 100ms ease-in;
 
   &.action {
-    background-color: $bgColDarker;
+    background-color: colors.$bgColDarker;
     padding: 0.5em;
 
     &:focus-visible {
-      outline: 2px solid $accentCol;
+      outline: 2px solid colors.$accentCol;
     }
 
     &:hover:not([data-disabled='true']) {
-      background-color: $bgColLighter;
+      background-color: colors.$bgColLighter;
     }
   }
 
@@ -98,11 +92,11 @@ button.g-button {
       bottom: 0;
       width: 100%;
       height: 2px;
-      background-color: $accentCol;
+      background-color: colors.$accentCol;
     }
 
     &[data-active='true'] {
-      color: $accentCol;
+      color: colors.$accentCol;
     }
   }
 
@@ -110,7 +104,7 @@ button.g-button {
     padding: 0;
 
     &:focus-visible {
-      color: $accentCol;
+      color: colors.$accentCol;
     }
   }
 }
@@ -118,11 +112,11 @@ button.g-button {
 // Text styles
 .text {
   &--accent {
-    color: $accentCol;
+    color: colors.$accentCol;
   }
 
   &--warn {
-    color: $warnCol;
+    color: colors.$warnCol;
   }
 }
 
@@ -146,7 +140,7 @@ select {
   }
 
   &:focus-visible {
-    border-color: $accentCol;
+    border-color: colors.$accentCol;
   }
 }
 

vite.config.ts

@@ -2,11 +2,22 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
 
 export default defineConfig({
   server: {
     port: 8081,
   },
+  css: {
+    preprocessorOptions: {
+      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
   plugins: [
     vue(),
     VitePWA({