fix(style): use variables where appropriate

Signed-off-by: Pedro Lamas <[email protected]>

src/components/common/ManualProbeDialog.vue

@@ -187,6 +187,7 @@ export default class ManualProbeDialog extends Mixins(StateMixin, ToolheadMixin)
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   .bysect-row > .col {

src/components/layout/AppBar.vue

@@ -434,6 +434,7 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin, FilesMixin
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   .toolbar-logo {

src/components/layout/AppNotificationMenu.vue

@@ -250,6 +250,7 @@ export default class AppNotificationMenu extends Mixins(BrowserMixin) {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   :deep(.app-notifications .v-list-item__action.notification-suffix),

src/components/settings/VersionInformationDialog.vue

@@ -120,6 +120,7 @@ export default class VersionInformationDialog extends Vue {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   ol.commit-history {

src/components/ui/AppBtnGroup.vue

@@ -28,6 +28,7 @@ export default class AppBtnGroup extends Vue {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   @include theme(app-btn-group) using ($material) {

src/components/ui/AppCodeView.vue

@@ -64,6 +64,7 @@ export default class AppCodeView extends Vue {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   .theme--light .code-view {

src/components/ui/AppColorPicker.vue

@@ -336,6 +336,7 @@ export default class AppColorPicker extends Vue {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   .color-input div {

src/components/ui/AppNavItem.vue

@@ -71,6 +71,7 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   button {

src/components/widgets/filesystem/FileSystemBrowser.vue

@@ -535,6 +535,7 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   // Lighten up dark mode checkboxes.

src/components/widgets/job-queue/JobQueueBrowser.vue

@@ -121,6 +121,7 @@ export default class JobQueueBrowser extends Mixins(StateMixin) {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   // Lighten up dark mode checkboxes.

src/components/widgets/thermals/TemperatureTargets.vue

@@ -336,6 +336,7 @@ export default class TemperatureTargets extends Mixins(StateMixin) {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   .theme--light :deep(.v-data-table.temperature-table > .v-data-table__wrapper > table) {

src/components/widgets/toolhead/ToolheadControlCircle.vue

@@ -924,6 +924,7 @@ export default class ToolheadControlCircle extends Mixins(StateMixin, ToolheadMi
 </script>
 
 <style lang="scss" scoped>
+  @import '@/scss/variables';
   @import 'vuetify/src/styles/styles.sass';
 
   @include theme(app-circle-control) using ($material) {

src/scss/global.scss

@@ -1,5 +1,5 @@
-@import 'vuetify/src/styles/styles.sass';
 @import './variables';
+@import 'vuetify/src/styles/styles.sass';
 
 /* Import our fonts */
 @import "@fontsource/roboto/300.css";