diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 94511b2e18..4b59602e14 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -32,7 +32,7 @@ jobs:
         with:
           python-version: '3.x'
           architecture: 'x64'
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: '12'
           check-latest: true
@@ -53,7 +53,7 @@ jobs:
             ${{ runner.os }}-gradle-
 
       - name: Npm cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: ~/.npm
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
@@ -61,7 +61,7 @@ jobs:
             ${{ runner.os }}-npm-
 
       - name: Node cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
           path: node
           key: ${{ runner.os }}-node-${{ hashFiles('ui/*.gradle') }}
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 47e2273ee4..70ac91d8be 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -14561,9 +14561,33 @@
       }
     },
     "node-fetch": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      },
+      "dependencies": {
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
     },
     "node-forge": {
       "version": "0.10.0",
diff --git a/ui/src/components/flows/TriggerAvatar.vue b/ui/src/components/flows/TriggerAvatar.vue
index aba935ac0e..8d9545b83c 100644
--- a/ui/src/components/flows/TriggerAvatar.vue
+++ b/ui/src/components/flows/TriggerAvatar.vue
@@ -64,10 +64,11 @@
 </script>
 
 <style lang="scss" scoped>
+@use "sass:math";
 @import "../../styles/_variable.scss";
 
 .b-avatar {
-    margin-right: $badge-pill-padding-x / 2;
+    margin-right: math.div($badge-pill-padding-x, 2);
 }
 
 </style>
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
index 2dbf5d9bba..fa1ec9ea21 100644
--- a/ui/src/components/inputs/Editor.vue
+++ b/ui/src/components/inputs/Editor.vue
@@ -269,6 +269,7 @@
     };
 </script>
 <style scoped lang="scss">
+@use "sass:math";
 @import "../../styles/variable";
 
 ::v-deep .editor-container {
@@ -313,7 +314,7 @@
         }
 
         p {
-            margin-bottom: $spacer/2;
+            margin-bottom: math.div($spacer, 2);
             &:last-child {
                 display: none;
             }
diff --git a/ui/src/components/layout/BottomLine.vue b/ui/src/components/layout/BottomLine.vue
index f4fa414567..9ac9f16b9e 100644
--- a/ui/src/components/layout/BottomLine.vue
+++ b/ui/src/components/layout/BottomLine.vue
@@ -7,6 +7,7 @@
     export default {}
 </script>
 <style lang="scss" >
+    @use "sass:math";
     @import "../../styles/variable";
 
     .bottom-line {
@@ -24,7 +25,7 @@
             margin-left: $spacer;
 
             span:first-child {
-                margin-right: $spacer / 3;
+                margin-right: math.div($spacer, 3);
             }
         }
     }
diff --git a/ui/src/components/layout/DataTable.vue b/ui/src/components/layout/DataTable.vue
index 350904b00b..1f75a9d624 100644
--- a/ui/src/components/layout/DataTable.vue
+++ b/ui/src/components/layout/DataTable.vue
@@ -50,9 +50,9 @@
 </script>
 
 <style scoped lang="scss">
+@use "sass:math";
 @import "../../styles/variable";
 
-
 small {
     padding: $pagination-padding-y-sm $pagination-padding-x-sm;
     white-space: nowrap;
@@ -65,8 +65,8 @@ small {
 
 ::v-deep .badge {
     font-size: 100%;
-    margin-right: $spacer/4;
-    margin-bottom: $spacer/4;
+    margin-right: math.div($spacer, 4);
+    margin-bottom: math.div($spacer, 4);
     padding: $badge-padding-y $badge-padding-y;
 
     .badge {
diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index a124ad9921..678237df89 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -46,6 +46,7 @@
     };
 </script>
 <style lang="scss" scoped>
+@use "sass:math";
 @import "../../styles/variable";
 
 .menu-collapsed {
@@ -80,7 +81,7 @@
     .navbar-text {
         h1 {
             color: var(--primary);
-            margin-bottom: $headings-margin-bottom / 2;
+            margin-bottom: math.div($headings-margin-bottom, 2);
             font-weight: bold;
 
             .theme-dark & {
diff --git a/ui/src/components/logs/LogLine.vue b/ui/src/components/logs/LogLine.vue
index 600bdd7555..fd43053aee 100644
--- a/ui/src/components/logs/LogLine.vue
+++ b/ui/src/components/logs/LogLine.vue
@@ -70,12 +70,13 @@
     };
 </script>
 <style scoped lang="scss">
+@use "sass:math";
 @import "../../styles/_variable.scss";
 
 div.line {
     white-space: pre-wrap;
     word-break: break-all;
-    padding: 0 $spacer/2;
+    padding: 0 math.div($spacer, 2);
 
     .theme-dark & {
         color: var(--body-color)
@@ -84,7 +85,7 @@ div.line {
     .header-badge {
         display: inline-block;
         font-size: 95%;
-        margin-left: -$spacer/2;
+        margin-left: math.div(-$spacer, 2);
         padding: $badge-padding-y $badge-padding-x;
         font-weight: $font-weight-base;
         line-height: 1;
@@ -98,7 +99,7 @@ div.line {
         }
 
         &.property {
-            padding: $badge-padding-y $badge-padding-x/2;
+            padding: $badge-padding-y math.div($badge-padding-x, 2);
 
             > span {
                 font-family: $font-family-sans-serif;
diff --git a/ui/src/components/plugins/TaskIcon.vue b/ui/src/components/plugins/TaskIcon.vue
index 8e3f2d4c6b..50c78c65c5 100644
--- a/ui/src/components/plugins/TaskIcon.vue
+++ b/ui/src/components/plugins/TaskIcon.vue
@@ -78,6 +78,7 @@
 </script>
 
 <style lang="scss" scoped>
+    @use "sass:math";
     @import "../../styles/_variable.scss";
     div.wrapper {
         height: 100%;
@@ -85,7 +86,7 @@
         font-size: $font-size-xs;
 
         > .icon {
-            margin: $btn-padding-x-sm / 2 ;
+            margin: math.div($btn-padding-x-sm, 2);
             height: calc(100% - 25px);
             display: block;
             background-size: contain;
@@ -106,7 +107,7 @@
             width: 100%;
             bottom: 0;
             text-align: center;
-            padding: $btn-padding-y-sm / 2 1px ;
+            padding: math.div($btn-padding-y-sm, 2) 1px ;
         }
 
         &.flowable {
diff --git a/ui/src/components/plugins/Toc.vue b/ui/src/components/plugins/Toc.vue
index 2df83ba290..f6f04b01b3 100644
--- a/ui/src/components/plugins/Toc.vue
+++ b/ui/src/components/plugins/Toc.vue
@@ -82,6 +82,7 @@
 </script>
 
 <style lang="scss">
+    @use "sass:math";
     @import "../../styles/_variable.scss";
 
     .plugins-list {
@@ -99,7 +100,7 @@
                 margin-left: $spacer;
                 h6 {
                     font-size: $h6-font-size * 0.8;
-                    margin-bottom: $spacer / 3;
+                    margin-bottom: math.div($spacer, 3);
                 }
             }
         }