diff --git a/ui/src/QMarkdown.sass b/ui/src/QMarkdown.sass
index 70e25a3..bc85e90 100644
--- a/ui/src/QMarkdown.sass
+++ b/ui/src/QMarkdown.sass
@@ -1,2 +1,2 @@
-@import './components/QMarkdown.sass'
+@use 'components/QMarkdown.sass'
 
diff --git a/ui/src/components/QMarkdown.sass b/ui/src/components/QMarkdown.sass
index 8cc9fc9..a437fd1 100644
--- a/ui/src/components/QMarkdown.sass
+++ b/ui/src/components/QMarkdown.sass
@@ -1,5 +1,6 @@
-@import './quasar.variables.sass'
-@import './prism-theme.sass'
+@use "sass:color"
+@use 'quasar.variables.sass'
+@use 'prism-theme.sass'
 
 .q-markdown
   position: relative
@@ -8,7 +9,7 @@
     font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace
 
   pre
-    border-radius: $generic-border-radius
+    border-radius: quasar.$generic-border-radius
     padding: 5px
     margin: 0
     background-size: 1.5em 1.5em
@@ -20,8 +21,8 @@
     overflow: auto
     position: relative
     font-size: 12px
-    background: $blue-grey-1
-    color: $grey-10
+    background: quasar.$blue-grey-1
+    color: quasar.$grey-10
     text-align: left
     white-space: pre
     word-spacing: normal
@@ -134,20 +135,20 @@
 
   &--token
     white-space: nowrap
-    background: $grey-1
-    color: $grey-10
-    border: $grey-8 solid 1px
+    background: quasar.$grey-1
+    color: quasar.$grey-10
+    border: quasar.$grey-8 solid 1px
     padding: 1px 2px
     font-family: inherit
-    border-radius: $generic-border-radius
+    border-radius: quasar.$generic-border-radius
 
   &--note
     margin: 14px 0
     padding: 10px
     font-size: 1em
     letter-spacing: .5px
-    background: $blue-grey-1
-    color: $grey-10
+    background: quasar.$blue-grey-1
+    color: quasar.$grey-10
     font-weight: 400
 
     > p:last-child, .q-markdown--note:last-child
@@ -157,50 +158,50 @@
       // color: $grey-2
 
     &--
-      border-left: 10px solid lighten($grey-8, 30%)
+      border-left: 10px solid color.adjust(quasar.$grey-8, $lightness: 30%)
       border-radius: 8px 0 0 8px
       .q-markdown--link
-        color: lighten($grey-8, 10%)
+        color: color.adjust(quasar.$grey-8, $lightness: 10%)
 
     &--info
-      border-left: 10px solid lighten($blue-8, 30%)
+      border-left: 10px solid color.adjust(quasar.$blue-8, $lightness: 30%)
       border-radius: 8px 0 0 8px
-      color: $grey-9
-      background: $blue-2
+      color: quasar.$grey-9
+      background: quasar.$blue-2
       .q-markdown--link
-        color: lighten($blue-8, 10%)
+        color: color.adjust(quasar.$blue-8, $lightness: 10%)
       .q-markdown--note-title
-        color: lighten($blue-8, 10%)
+        color: color.adjust(quasar.$blue-8, $lightness: 10%)
 
     &--tip
-      border-left: 10px solid lighten($green-8, 30%)
+      border-left: 10px solid color.adjust(quasar.$green-8, $lightness: 30%)
       border-radius: 8px 0 0 8px
-      color: $grey-9
-      background: $green-2
+      color: quasar.$grey-9
+      background: quasar.$green-2
       .q-markdown--link
-        color: lighten($green-8, 10%)
+        color: color.adjust(quasar.$green-8, $lightness: 10%)
       .q-markdown--note-title
-        color: lighten($green-8, 10%)
+        color: color.adjust(quasar.$green-8, $lightness: 10%)
 
     &--warning
-      border-left: 10px solid lighten($orange-10, 30%)
+      border-left: 10px solid color.adjust(quasar.$orange-10, $lightness: 30%)
       border-radius: 8px 0 0 8px
-      color: $grey-9
-      background: $orange-2
+      color: quasar.$grey-9
+      background: quasar.$orange-2
       .q-markdown--link
-        color: lighten($orange-10, 10%)
+        color: color.adjust(quasar.$orange-10, $lightness: 10%)
       .q-markdown--note-title
-        color: lighten($orange-10, 10%)
+        color: color.adjust(quasar.$orange-10, $lightness: 10%)
 
     &--danger
-      border-left: 10px solid lighten($negative, 30%)
+      border-left: 10px solid color.adjust(quasar.$negative, $lightness: 30%)
       border-radius: 8px 0 0 8px
-      color: $grey-9
-      background: $red-2
+      color: quasar.$grey-9
+      background: quasar.$red-2
       .q-markdown--link
-        color: lighten($red-8, 10%)
+        color: color.adjust(quasar.$red-8, $lightness: 10%)
       .q-markdown--note-title
-        color: lighten($red-8, 10%)
+        color: color.adjust(quasar.$red-8, $lightness: 10%)
 
     &-title
       font-weight: 800
@@ -216,24 +217,24 @@
     max-width: 100%
     border-width: 1px
     border-style: solid
-    border-color: $grey
+    border-color: quasar.$grey
 
   &--line-numbers-wrapper
     display: flex
     justify-content: flex-start
     font-size: 12px
     margin: 0 0 1.0em 0
-    background: $blue-grey-1
-    color: $grey-10
+    background: quasar.$blue-grey-1
+    color: quasar.$grey-10
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
-    border-radius: $generic-border-radius
+    border-radius: quasar.$generic-border-radius
 
   &--line-numbers
     padding: 5px
     text-align: right
 
   &--line-number
-    color: $grey-6
+    color: quasar.$grey-6
     margin: 0
     position: relative
     text-align: left
@@ -273,20 +274,20 @@
       overflow: auto
 
   &--table
-    border-color: $grey-4
-    background: $grey-1
+    border-color: quasar.$grey-4
+    background: quasar.$grey-1
 
   &--table thead
-    background: $grey-4
+    background: quasar.$grey-4
 
   &--table thead tr th
     padding: 8px
     border-width: 1px
     border-style: solid
-    background: $grey-2
+    background: quasar.$grey-2
 
   &--table tbody
-    background: $grey-1
+    background: quasar.$grey-1
 
   &--table tbody td,
   &--table tbody th
@@ -295,7 +296,7 @@
     border-style: solid
 
   &--table tbody tr:nth-child(odd)
-    background: $grey-4
+    background: quasar.$grey-4
 
 // .q-markdown--page > div, .q-markdown--page > pre
 //   margin-bottom: 22px
@@ -311,7 +312,7 @@ blockquote.q-markdown--note
   border-width: 1px 8px 1px 8px
   border-radius: 8px
   border-style: solid
-  border-color: $grey-6 $teal-6
+  border-color: quasar.$grey-6 quasar.$teal-6
 
 .q-markdown__copy
   position: absolute
@@ -320,11 +321,11 @@ blockquote.q-markdown--note
 
 .body--dark
   .q-markdown
-    color: $grey-2
+    color: quasar.$grey-2
 
     code
-      background: $grey-9
-      color: $grey-2
+      background: quasar.$grey-9
+      color: quasar.$grey-2
 
     .q-markdown--link
       // color: $teal-6
@@ -333,50 +334,50 @@ blockquote.q-markdown--note
         // color: yellow
 
     blockquote.q-markdown--note
-      border-color: $grey-6 $grey-6
-      background: $dark
-      color: $grey-2
+      border-color: quasar.$grey-6 quasar.$grey-6
+      background: quasar.$dark
+      color: quasar.$grey-2
 
     pre, pre code
-      background: $dark
+      background: quasar.$dark
 
     .q-markdown--line-numbers-wrapper
-      background: $dark
-      color: $grey-2
+      background: quasar.$dark
+      color: quasar.$grey-2
 
     .q-markdown--token
-      background: $grey-6
-      color: $grey-10
-      border: $grey-4 solid 1px
+      background: quasar.$grey-6
+      color: quasar.$grey-10
+      border: quasar.$grey-4 solid 1px
 
     .q-markdown--code
-      background: $dark
-      color: $grey-10
+      background: quasar.$dark
+      color: quasar.$grey-10
 
     .q-markdown--note
-      background: $grey-10
+      background: quasar.$grey-10
       color: white
-      border-top: 1px solid $grey-9
-      border-bottom: 1px solid $grey-9
+      border-top: 1px solid quasar.$grey-9
+      border-bottom: 1px solid quasar.$grey-9
 
     .q-markdown--note--
-      border-left: 10px solid $grey-6
+      border-left: 10px solid quasar.$grey-6
 
     .q-markdown--note--info
-      border-left: 10px solid $light-blue-10
+      border-left: 10px solid quasar.$light-blue-10
 
     .q-markdown--note--tip
-      border-left: 10px solid $light-green-10
+      border-left: 10px solid quasar.$light-green-10
 
     .q-markdown--note--warning
-      border-left: 10px solid $orange-10
+      border-left: 10px solid quasar.$orange-10
 
     .q-markdown--note--danger
-      border-left: 10px solid $red-10
+      border-left: 10px solid quasar.$red-10
 
     .q-markdown--table thead tr th,
     .q-markdown--table tbody
-      background-color: $dark
+      background-color: quasar.$dark
 
     .q-markdown--table tbody tr:nth-child(2n+1)
-      background-color: $grey-9
+      background-color: quasar.$grey-9
diff --git a/ui/src/components/quasar.variables.sass b/ui/src/components/quasar.variables.sass
index 046277c..33bd007 100644
--- a/ui/src/components/quasar.variables.sass
+++ b/ui/src/components/quasar.variables.sass
@@ -1,3 +1,4 @@
+@use "sass:map"
 $space-base   : 16px !default
 $space-x-base : $space-base !default
 $space-y-base : $space-base !default
@@ -42,16 +43,16 @@ $sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg':
 $breakpoint-xs-min: 0 !default
 $breakpoint-xs-max: $breakpoint-xs !default
 
-$breakpoint-sm-min: map-get($sizes, "sm") !default
+$breakpoint-sm-min: map.get($sizes, "sm") !default
 $breakpoint-sm-max: $breakpoint-sm !default
 
-$breakpoint-md-min: map-get($sizes, "md") !default
+$breakpoint-md-min: map.get($sizes, "md") !default
 $breakpoint-md-max: $breakpoint-md !default
 
-$breakpoint-lg-min: map-get($sizes, "lg") !default
+$breakpoint-lg-min: map.get($sizes, "lg") !default
 $breakpoint-lg-max: $breakpoint-lg !default
 
-$breakpoint-xl-min: map-get($sizes, "xl") !default
+$breakpoint-xl-min: map.get($sizes, "xl") !default
 $breakpoint-xl-max: 9999px !default
 
 $h1:        (size: 6rem,     line-height: 6rem,     letter-spacing: -.01562em, weight: 300) !default
@@ -71,7 +72,7 @@ $caption:   (size: .75rem,   line-height: 1.25rem,  letter-spacing: .03333em,  w
 $headings: ('h1': $h1, 'h2': $h2, 'h3': $h3, 'h4': $h4, 'h5': $h5, 'h6': $h6, 'subtitle1': $subtitle1, 'subtitle2': $subtitle2, 'body1': $body1, 'body2': $body2, 'overline': $overline, 'caption': $caption) !default
 
 // sorry for long line; we need .sass and it doesn't support multi-line list
-$h-tags: (h1: map-get($headings, "h1"), h2: map-get($headings, "h2"), h3: map-get($headings, "h3"), h4: map-get($headings, "h4"), h5: map-get($headings, "h5"), h6: map-get($headings, "h6")) !default
+$h-tags: (h1: map.get($headings, "h1"), h2: map.get($headings, "h2"), h3: map.get($headings, "h3"), h4: map.get($headings, "h4"), h5: map.get($headings, "h5"), h6: map.get($headings, "h6")) !default
 
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $text-weights: (thin: 100, light: 300, regular: 400, medium: 500, bold: 700, bolder: 900) !default
diff --git a/ui/src/index.sass b/ui/src/index.sass
index 70e25a3..bc85e90 100644
--- a/ui/src/index.sass
+++ b/ui/src/index.sass
@@ -1,2 +1,2 @@
-@import './components/QMarkdown.sass'
+@use 'components/QMarkdown.sass'