update dependencies

src/components/Chart.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import * as Highcharts from 'highcharts'
-import 'highcharts/css/highcharts.scss'
+import 'highcharts/css/highcharts.css'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
 import type { Window, NavTypes } from '@/utils/types'
@@ -68,8 +68,7 @@ const renderChart = () => {
 }
 </script>
 
-<style lang="scss">
-@import '@/style/_variables.scss';
+<style>
 .chart-container {
   display: flex;
   flex-direction: column;
@@ -90,17 +89,17 @@ const renderChart = () => {
   stroke-width: 3px;
 }
 .highcharts-color-0 {
-  fill: $primary;
-  stroke: $primary;
+  fill: var(--bulma-primary);
+  stroke: var(--bulma-primary);
 }
 .highcharts-axis-line {
-  // stroke-width: 1px !important;
-  stroke: $border !important;
+  /* stroke-width: 1px !important; */
+  stroke: var(--bulma-border) !important;
 }
 .highcharts-grid-line {
   stroke-width: 1px !important;
   stroke-dasharray: 5, 5 !important;
-  stroke: $border !important;
+  stroke: var(--bulma-border) !important;
 }
 text {
   font-size: 0.8rem;

src/components/Loader.vue

@@ -6,8 +6,7 @@
     <div></div>
   </div>
 </template>
-<style scoped lang="scss">
-@import '@/style/_variables.scss';
+<style scoped>
 .lds-ring {
   display: inline-block;
   position: relative;
@@ -21,10 +20,10 @@
   width: 51px;
   height: 51px;
   margin: 6px;
-  border: 6px solid $border;
+  border: 6px solid var(--bulma-border);
   border-radius: 50%;
   animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: $border transparent transparent transparent;
+  border-color: var(--bulma-border) transparent transparent transparent;
 }
 .lds-ring div:nth-child(1) {
   animation-delay: -0.3s;

src/components/NavBar.vue

@@ -4,7 +4,7 @@
       <router-link to="/" class="navbar-item nav-title">dht22</router-link>
       <a
         role="button"
-        class="navbar-burger burger"
+        class="navbar-burger has-text-white"
         aria-label="menu"
         aria-expanded="false"
         data-target="navbar"
@@ -14,6 +14,7 @@
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
       </a>
     </div>
 
@@ -48,12 +49,11 @@ const navTypes: NavTypes[] = ['temperatuur', 'luchtvochtigheid']
 if (!activeType.value) setType(navTypes[0])
 const toggleMenu = () => (toggled.value = !toggled.value)
 </script>
-<style scoped lang="scss">
-@import '@/style/_variables.scss';
+<style scoped>
 .nav-title {
   font-weight: bold;
 }
-@media screen and (max-width: $navbar-breakpoint) {
+@media screen and (max-width: 1024px) {
   .navbar {
     position: relative;
   }
@@ -63,4 +63,8 @@ const toggleMenu = () => (toggled.value = !toggled.value)
     right: 0;
   }
 }
+.navbar-item,
+.navbar-link {
+  color: var(--bulma-white) !important;
+}
 </style>

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 import router from '@/router'
+import 'bulma/css/bulma.css'
 import '@/style/style.scss'
 
 const app = createApp(App)

src/style/_variables.scss

@@ -1,6 +0,0 @@
-$primary: #2ecc71;
-$link: #3498db;
-$family-sans-serif: 'Fira Sans', sans-serif;
-$gap: 32px !default;
-$navbar-breakpoint: 960px + (2 * $gap);
-@import "bulma/sass/utilities/_all.sass";

src/style/style.scss

@@ -1,8 +1,17 @@
 @charset "utf-8";
-@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
+
+:root {
+        --bulma-primary-h: 145deg;
+        --bulma-primary-s: 63%;
+        --bulma-primary-l: 49%;
+        --bulma-link-h: 204deg;
+        --bulma-link-s: 70%;
+        --bulma-link-l: 53%;
+        --bulma-family-primary: 'Fira Sans', sans-serif;
+        --bulma-family-secondary: 'Fira Sans', sans-serif;
+}
+
 html, body {
     height: 100%;
     overflow: auto!important;
 }
-@import "./variables";
-@import "bulma/bulma";