diff --git a/pkg/webui/account/views/front/front.styl b/pkg/webui/account/views/front/front.styl
index 797fae870e..c2803b0d9a 100644
--- a/pkg/webui/account/views/front/front.styl
+++ b/pkg/webui/account/views/front/front.styl
@@ -44,7 +44,7 @@
   background-image: url('../../../assets/img/layout/bg/login-visual.jpg')
   background-size: cover
   background-position: left
-  box-shadow: inset 60px 0 60px rgba(0,0,0,0.08)
+  box-shadow: inset 60px 0 60px rgba(0,0,0,.08)
 
 +media-query($bp.l)
   .visual
@@ -82,9 +82,9 @@
 .title
   color: var(--c-text-brand-normal)
   margin-top: 0
-  background: linear-gradient(right, 0% var(--c-text-brand-normal), var(--c-text-brand-normal-active));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  background: linear-gradient(right, 0% var(--c-text-brand-normal), var(--c-text-brand-normal-active))
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
   font-weight: 200
   font-size: $fs.xl3
   +media-query($bp.s)
@@ -110,8 +110,8 @@
     flex-direction: row
   +media-query($bp.s)
     button, a
-      margin-bottom: $cs.s !important
-      margin-right: 0 !important
+      margin-bottom: $cs.s
+      margin-right: 0
 
 .footer
   position: fixed
diff --git a/pkg/webui/account/views/overview/overview.styl b/pkg/webui/account/views/overview/overview.styl
index 2be13a934a..cbf9ee6b1a 100644
--- a/pkg/webui/account/views/overview/overview.styl
+++ b/pkg/webui/account/views/overview/overview.styl
@@ -14,5 +14,5 @@
 
 .top
   padding: $ls.xl 0
-  diplay: flex
+  display: flex
   justify-content: center
diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl
index e08339c464..a8e62bea38 100644
--- a/pkg/webui/components/button/button.styl
+++ b/pkg/webui/components/button/button.styl
@@ -186,6 +186,7 @@
 
   &.busy:not(.naked),
   &.busy
+    // stylelint-disable-next-line declaration-no-important
     color: transparent !important
     position: relative
     svg
@@ -225,5 +226,7 @@
     margin-right: $cs.xs
 
     +media-query($bp.s)
+      // stylelint-disable declaration-no-important
       margin-bottom: $cs.s !important
       margin-right: 0 !important
+      // stylelint-enable declaration-no-important
diff --git a/pkg/webui/components/checkbox/checkbox.styl b/pkg/webui/components/checkbox/checkbox.styl
index 47d66dbed4..e1ad8377a0 100644
--- a/pkg/webui/components/checkbox/checkbox.styl
+++ b/pkg/webui/components/checkbox/checkbox.styl
@@ -32,7 +32,7 @@
   color: var(--c-text-neutral-light)
 
   .checkbox
-    opacity .4
+    opacity: .4
 
 .checkbox
   position: relative
@@ -63,7 +63,7 @@
   input:checked ~ .checkmark:after
     opacity: 1
     transform: rotate(45deg) scale(1) translate(-50%, -50%)
-    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.40) $ad.xs
+    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.4) $ad.xs
 
   input:focus ~ .checkmark
     border-color: var(--c-text-brand-normal)
diff --git a/pkg/webui/components/dropdown/dropdown.styl b/pkg/webui/components/dropdown/dropdown.styl
index f481796936..c9b784a249 100644
--- a/pkg/webui/components/dropdown/dropdown.styl
+++ b/pkg/webui/components/dropdown/dropdown.styl
@@ -18,7 +18,7 @@ ul.dropdown
   border: 1px solid var(--c-border-neutral-normal)
   list-style-type: none
   background: var(--c-bg-neutral-min)
-  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, .06)
   position: absolute
   padding: $cs.xs
   width: max-content
diff --git a/pkg/webui/components/footer/footer.styl b/pkg/webui/components/footer/footer.styl
index 17d7a42e66..cdd45d43dc 100644
--- a/pkg/webui/components/footer/footer.styl
+++ b/pkg/webui/components/footer/footer.styl
@@ -23,14 +23,14 @@ $fh = 'calc(%s - 1px)' % $footer-height
   flex: none
   background-color: var(--c-bg-neutral-min)
   box-sizing: border-box
-  
+
   +media-query-min($bp.xs)
     padding-left: $cs.xs
     height: $footer-height
   +media-query($bp.xs)
     min-height: $footer-height * 2
     flex-direction: column
-  
+
   .language
     position: relative
     height: 100%
@@ -38,7 +38,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     &-dropdown
       bottom: $fh
       left: 0
-  
+
   &.transparent
     +media-query-min($bp.s)
       .footer-section
@@ -46,10 +46,10 @@ $fh = 'calc(%s - 1px)' % $footer-height
         background-color: transparent
 
         &.interactive:hover
-          background-color: rgba(255,255,2555,0.1)
+          background-color: rgba(255,255,2555,.1)
 
       .right
-          color: var(--c-bg-neutral-min)
+        color: var(--c-bg-neutral-min)
 
 .link
   color: var(--c-text-neutral-light)
@@ -79,7 +79,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     width: 100%
     justify-content: space-between
     align-items: center
-  
+
 .footer-section
   height: $fh
   display: flex
@@ -91,7 +91,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
 
   &:not(.interactive)
     padding: 0 $cs.s
-  
+
   &-button
     reset-button()
     text-decoration: none
@@ -103,7 +103,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     & > div
       display: flex
       align-items: center
-    
+
   &:not(.primary)
     border-normal('left')
     background-color: var(--c-bg-neutral-min)
@@ -113,6 +113,6 @@ $fh = 'calc(%s - 1px)' % $footer-height
   &.primary
     background-color: var(--c-text-brand-normal)
     color: var(--c-bg-neutral-min)
-    
+
     &.interactive:hover
       background-color: hoverize(var(--c-text-brand-normal))
diff --git a/pkg/webui/components/form/field/field.styl b/pkg/webui/components/form/field/field.styl
index 452f4aabb0..ebac98b575 100644
--- a/pkg/webui/components/form/field/field.styl
+++ b/pkg/webui/components/form/field/field.styl
@@ -37,7 +37,7 @@
   &:not(.has-tooltip)
     &.required
       .label::after
-        margin-left: 0.1rem
+        margin-left: .1rem
 
   &.grow
     flex-grow: 1
@@ -132,7 +132,7 @@
 
       &:not(:last-child)
         margin: 0 0 $cs.s 0
-  
+
     .tooltip-links
       display: flex
       justify-content: space-between
@@ -187,4 +187,4 @@
   color: var(--c-text-warning-normal)
 
 .disabled .info-area
-    color: var(--c-text-neutral-light)
+  color: var(--c-text-neutral-light)
diff --git a/pkg/webui/components/icon/story.styl b/pkg/webui/components/icon/story.styl
index e77256732d..56a49bfafd 100644
--- a/pkg/webui/components/icon/story.styl
+++ b/pkg/webui/components/icon/story.styl
@@ -14,7 +14,7 @@
 
 .wrapper
   span:first-child
-      margin-right: .6rem
+    margin-right: .6rem
 
   div
     border-dark()
diff --git a/pkg/webui/components/key-value-map/key-value-map.styl b/pkg/webui/components/key-value-map/key-value-map.styl
index ed958c9dae..a2e63c42ed 100644
--- a/pkg/webui/components/key-value-map/key-value-map.styl
+++ b/pkg/webui/components/key-value-map/key-value-map.styl
@@ -17,4 +17,4 @@
   flex-grow: 1
 
   &-index-as-key
-    flex-grow: 0.25
+    flex-grow: .25
diff --git a/pkg/webui/components/link/link.styl b/pkg/webui/components/link/link.styl
index 9010ced605..426626c58b 100644
--- a/pkg/webui/components/link/link.styl
+++ b/pkg/webui/components/link/link.styl
@@ -52,7 +52,7 @@
   nudge('up', 2px)
   margin-left: .11rem
   margin-right: .1rem
-  font-size: 0.9rem
+  font-size: .9rem
 
 .doc-icon
   nudge('up')
diff --git a/pkg/webui/components/map/map.styl b/pkg/webui/components/map/map.styl
index 7f3257e688..365f4d2e5d 100644
--- a/pkg/webui/components/map/map.styl
+++ b/pkg/webui/components/map/map.styl
@@ -18,6 +18,7 @@
   height: 100%
 
 .click
+  // stylelint-disable-next-line declaration-no-important
   cursor: crosshair !important
 
 .container
@@ -29,6 +30,8 @@
   &.widget
     height: 25rem
 
+// stylelint-disable
+
   :global {
   .leaflet-pane,
   .leaflet-tile,
@@ -618,3 +621,5 @@
     border-right-color: #fff
     }
   }
+
+// stylelint-enable
diff --git a/pkg/webui/components/mobile-menu/mobile-menu.styl b/pkg/webui/components/mobile-menu/mobile-menu.styl
index 462921588a..9bb7744bd0 100644
--- a/pkg/webui/components/mobile-menu/mobile-menu.styl
+++ b/pkg/webui/components/mobile-menu/mobile-menu.styl
@@ -27,7 +27,7 @@ ul.mobile-dropdown
       padding: $cs.l 0
 
   hr
-    height: 0.35rem
+    height: .35rem
     margin: 0
 
 .user-header
@@ -35,7 +35,7 @@ ul.mobile-dropdown
   justify-content: space-between
   padding: $cs.xl $cs.l
   align-items: center
-  border-top: 0.35rem solid var(--c-border-neutral-light)
+  border-top: .35rem solid var(--c-border-neutral-light)
 
 .user-icon
   margin-right: $cs.xs
diff --git a/pkg/webui/components/notification/details/details.styl b/pkg/webui/components/notification/details/details.styl
index 1629ec1b27..06ebea573d 100644
--- a/pkg/webui/components/notification/details/details.styl
+++ b/pkg/webui/components/notification/details/details.styl
@@ -24,11 +24,11 @@
     background-color: var(--c-bg-neutral-semilight)
     color: var(--c-text-neutral-heavy)
     font-size: $fs.s
-    y-overflow: auto
     padding: $cs.s
     color: var(--c-text-neutral-heavy)
     margin: (-1 * $ls.m) 0 0 0
     box-sizing: border-box
 
   &-button
+    // stylelint-disable-next-line declaration-no-important
     margin-right: 0 !important
diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl
index 00cc0cf29d..94ddcfa9e6 100644
--- a/pkg/webui/components/panel/toggle/toggle.styl
+++ b/pkg/webui/components/panel/toggle/toggle.styl
@@ -31,7 +31,7 @@
 
     &-active
       color: var(--c-text-neutral-min)
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .05)
       background: var(--c-bg-neutral-heavy)
       font-weight: $fwv2.regular
 
diff --git a/pkg/webui/components/profile-dropdown/profile-dropdown.styl b/pkg/webui/components/profile-dropdown/profile-dropdown.styl
index aa8afc0d25..6d2460cca6 100644
--- a/pkg/webui/components/profile-dropdown/profile-dropdown.styl
+++ b/pkg/webui/components/profile-dropdown/profile-dropdown.styl
@@ -17,6 +17,7 @@
   position: relative
 
   button
+    // stylelint-disable-next-line declaration-no-important
     padding: 0 $cs.s !important
 
 .brand-logo
diff --git a/pkg/webui/components/radio-button/radio-button.styl b/pkg/webui/components/radio-button/radio-button.styl
index 25269ae80e..e973458f47 100644
--- a/pkg/webui/components/radio-button/radio-button.styl
+++ b/pkg/webui/components/radio-button/radio-button.styl
@@ -30,7 +30,7 @@
   color: var(--c-text-neutral-light)
 
   .dot
-    opacity .4
+    opacity: .4
 
 .radio
   nudge('up')
@@ -61,7 +61,7 @@
   input:checked ~ .dot:after
     opacity: 1
     transform: scale(1)
-    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.40) $ad.xs
+    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.4) $ad.xs
 
   input:focus ~ .dot
     border-color: var(--c-text-brand-normal)
diff --git a/pkg/webui/components/select/select.styl b/pkg/webui/components/select/select.styl
index 94a5bc557f..bcc3d500d2 100644
--- a/pkg/webui/components/select/select.styl
+++ b/pkg/webui/components/select/select.styl
@@ -16,6 +16,7 @@
   input-width-classes()
   // Overwriting react-select styling in global scope.
 
+  // stylelint-disable
   :global(.select__option)
     padding: $cs.xs $cs.s
   :global(.select__option--is-selected)
@@ -65,3 +66,4 @@
 
     .remove-option-button
       float: right
+  // stylelint-enable
diff --git a/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl b/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl
index 92aea11d14..c178e812b1 100644
--- a/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl
+++ b/pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl
@@ -24,13 +24,13 @@
     overflow: hidden
     border-radius: $br.l
     width: 2.5rem
-    transition: 0.3s 0s all cubic-bezier(0.770, 0.000, 0.175, 1.000)
+    transition: .3s 0s all cubic-bezier(.77, , .175, 1)
     top: 0
     left: 0
     z-index: $zi.slight
 
     &:hover
-      transition: 0.3s 0.2s all cubic-bezier(0.770, 0.000, 0.175, 1.000)
+      transition: .3s .2s all cubic-bezier(.77, , .175, 1)
       width: 100%
 
       // Reveal the button label.
@@ -60,7 +60,7 @@
 
   &-button
     border-radius: $br.l
-    padding: 0 $cs.xs 0 0.73rem
+    padding: 0 $cs.xs 0 .73rem
     background-color: var(--c-bg-neutral-heavy)
     position: relative
     display: inline-flex
@@ -79,7 +79,7 @@
     justify-content: flex-start
 
     span:last-child
-      transition: 0.2s 0.2s all ease-in-out
+      transition: .2s .2s all ease-in-out
       opacity: 0
 
     &:not(:disabled)
diff --git a/pkg/webui/components/sidebar/search-button/search-button.styl b/pkg/webui/components/sidebar/search-button/search-button.styl
index a072d8f1ed..c94fb5d478 100644
--- a/pkg/webui/components/sidebar/search-button/search-button.styl
+++ b/pkg/webui/components/sidebar/search-button/search-button.styl
@@ -22,16 +22,16 @@
   align-items: center
   padding: $cs.xxs $cs.xxs
   gap: $cs.xxs
-  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, .06)
   background: var(--c-bg-neutral-min)
   border: 1px solid var(--c-border-neutral-semilight)
   border-radius: $br.l
-  transition: border-color 0.08s linear, box-shadow 0.08s linear, color 0.08s linear
+  transition: border-color .08s linear, box-shadow .08s linear, color .08s linear
 
 
   &:hover
     color: var(--c-text-neutral-min-hover)
-    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08)
+    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .08)
 
   &.is-minimized
     justify-content: center
diff --git a/pkg/webui/components/sidebar/side-footer/side-footer.styl b/pkg/webui/components/sidebar/side-footer/side-footer.styl
index 39c5ae95a2..413c784d66 100644
--- a/pkg/webui/components/sidebar/side-footer/side-footer.styl
+++ b/pkg/webui/components/sidebar/side-footer/side-footer.styl
@@ -47,6 +47,7 @@
     margin-left: $cs.xxs
 
   .support-button > button
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important
     justify-content: flex-start
 
diff --git a/pkg/webui/components/sidebar/switcher/switcher.styl b/pkg/webui/components/sidebar/switcher/switcher.styl
index c827045822..bec63b6254 100644
--- a/pkg/webui/components/sidebar/switcher/switcher.styl
+++ b/pkg/webui/components/sidebar/switcher/switcher.styl
@@ -16,7 +16,7 @@
   border-radius: $br.l
   border: 1px solid var(--c-border-neutral-light)
   background: var(--c-bg-neutral-min)
-  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, .06)
   display: flex
   gap: $cs.xxs
   justify-content: center
diff --git a/pkg/webui/components/status/status.styl b/pkg/webui/components/status/status.styl
index 7db532fd78..e49ffbda43 100644
--- a/pkg/webui/components/status/status.styl
+++ b/pkg/webui/components/status/status.styl
@@ -53,12 +53,6 @@
 .good-pulse:after
   animation: goodPulse 4s infinite
 
-.bad-pulse:after
-  animation: badPulse 4s infinite
-
-.mediocre-pulse:after
-  animation: mediocrePulse 4s infinite
-
 .triggered-good-pulse:after
   animation: triggeredGoodPulse 1.5s ease-out
 
@@ -88,9 +82,5 @@ triggered-pulse-animation($color, $name)
       box-shadow: 0 0 0 0 alpha($color, 0)
 
 pulse-animation($tokens.theme-light.color.icon-info-normal, 'goodPulse')
-pulse-animation($tokens.theme-light.color.icon-error-normal, 'badPulse')
-pulse-animation($tokens.theme-light.color.icon-warning-normal, 'mediocrePulse')
 
 triggered-pulse-animation($tokens.theme-light.color.icon-info-normal, 'triggeredGoodPulse')
-triggered-pulse-animation($tokens.theme-light.color.icon-error-normal, 'triggeredBadPulse')
-triggered-pulse-animation($tokens.theme-light.color.icon-warning-normal, 'triggeredMediocrePulse')
diff --git a/pkg/webui/components/table/sort-button/sort-button.styl b/pkg/webui/components/table/sort-button/sort-button.styl
index 38c5a1e9e2..8a6f52f94f 100644
--- a/pkg/webui/components/table/sort-button/sort-button.styl
+++ b/pkg/webui/components/table/sort-button/sort-button.styl
@@ -25,7 +25,7 @@
     justify-content: center
 
   svg.icon
-    width: 0.75rem
+    width: .75rem
     height: 1rem
     margin-left: 3.5px
 
diff --git a/pkg/webui/components/tag/group/group.styl b/pkg/webui/components/tag/group/group.styl
index 6600523f2d..3799ae2a79 100644
--- a/pkg/webui/components/tag/group/group.styl
+++ b/pkg/webui/components/tag/group/group.styl
@@ -17,7 +17,7 @@
   flex-wrap: no-wrap
   width: 100%
   min-height: 1px
-  gap: $cs.xs 
+  gap: $cs.xs
 
 .left-group
   display: flex
diff --git a/pkg/webui/components/toast/react-toastify.styl b/pkg/webui/components/toast/react-toastify.styl
index c57b9b86c9..fdb18978b2 100644
--- a/pkg/webui/components/toast/react-toastify.styl
+++ b/pkg/webui/components/toast/react-toastify.styl
@@ -19,7 +19,7 @@
     padding: 4px
     width: 320px
     box-sizing: border-box
-    color: #fff
+    color: var(--c-text-neutral-min)
   .Toastify__toast-container--top-left
     top: 1em
     left: 1em
@@ -68,113 +68,6 @@
   .Toastify__slide-exit--bottom-center
     animation-name: Toastify__slideOutDown
 
-  .Toastify__toast
-    position: relative
-    min-height: 64px
-    box-sizing: border-box
-    margin-bottom: 1rem
-    padding: 8px
-    border-radius: 1px
-    display: -ms-flexbox
-    display: flex
-    justify-content: space-between
-    max-height: 800px
-    overflow: hidden
-    font-family: $font-family
-    cursor: pointer
-    direction: ltr
-    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)
-  .Toastify__toast--rtl
-    direction: rtl
-  .Toastify__toast--default
-    color: #aaa
-  .Toastify__toast--info
-    background: #3498db
-  .Toastify__toast--success
-    background: #07bc0c
-  .Toastify__toast--warning
-    background: #f1c40f
-  .Toastify__toast--error
-    background: #e74c3c
-  .Toastify__toast-body
-    margin: auto 0
-    flex: 1
-
-  .Toastify__close-button
-    color: #fff
-    font-weight: bold
-    font-size: 14px
-    background: transparent
-    outline: none
-    border: none
-    padding: 0
-    cursor: pointer
-    opacity: 0.7
-    transition: 0.3s ease
-    align-self: flex-start
-  .Toastify__close-button--default
-    color: #000
-    opacity: 0.3
-  .Toastify__close-button:hover, .Toastify__close-button:focus
-    opacity: 1
-
-  .Toastify__progress-bar
-    position: absolute
-    bottom: 0
-    left: 0
-    width: 100%
-    height: 5px
-    z-index: 9999
-    opacity: 0.7
-    background-color: rgba(255, 255, 255, 0.7)
-    transform-origin: left
-  .Toastify__progress-bar--animated
-    animation: Toastify__trackProgress linear 1 forwards
-  .Toastify__progress-bar--controlled
-    transition: transform .2s
-  .Toastify__progress-bar--rtl
-    right: 0
-    left: initial
-    transform-origin: right
-  .Toastify__progress-bar--default
-    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)
-
-  .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left
-    animation-name: Toastify__bounceInLeft
-
-  .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right
-    animation-name: Toastify__bounceInRight
-
-  .Toastify__bounce-enter--top-center
-    animation-name: Toastify__bounceInDown
-
-  .Toastify__bounce-enter--bottom-center
-    animation-name: Toastify__bounceInUp
-
-  .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left
-    animation-name: Toastify__bounceOutLeft
-
-  .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right
-    animation-name: Toastify__bounceOutRight
-
-  .Toastify__bounce-exit--top-center
-    animation-name: Toastify__bounceOutUp
-
-  .Toastify__bounce-exit--bottom-center
-    animation-name: Toastify__bounceOutDown
-
-  .Toastify__flip-enter
-    animation-name: Toastify__flipIn
-
-  .Toastify__flip-exit
-    animation-name: Toastify__flipOut
-
-  .Toastify__zoom-enter
-    animation-name: Toastify__zoomIn
-
-  .Toastify__zoom-exit
-    animation-name: Toastify__zoomOut
-
 @media only screen and (max-width: 480px)
   :global
     .Toastify__toast-container
@@ -194,224 +87,3 @@
   :global(.Toastify__toast)
     margin-bottom: 0
 
-@keyframes :global(Toastify__trackProgress)
-  0%
-    transform: scaleX(1)
-  100%
-    transform: scaleX(0)
-
-@keyframes :global(Toastify__bounceInRight)
-  from,
-  60%,
-  75%,
-  90%,
-  to
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
-  from
-    opacity: 0
-    transform: translate3d(3000px, 0, 0)
-  60%
-    opacity: 1
-    transform: translate3d(-25px, 0, 0)
-  75%
-    transform: translate3d(10px, 0, 0)
-  90%
-    transform: translate3d(-5px, 0, 0)
-  to
-    transform: none
-
-@keyframes :global(Toastify__bounceOutRight)
-  20%
-    opacity: 1
-    transform: translate3d(-20px, 0, 0)
-  to
-    opacity: 0
-    transform: translate3d(2000px, 0, 0)
-
-@keyframes :global(Toastify__bounceInLeft)
-  from,
-  60%,
-  75%,
-  90%,
-  to
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
-  0%
-    opacity: 0
-    transform: translate3d(-3000px, 0, 0)
-  60%
-    opacity: 1
-    transform: translate3d(25px, 0, 0)
-  75%
-    transform: translate3d(-10px, 0, 0)
-  90%
-    transform: translate3d(5px, 0, 0)
-  to
-    transform: none
-
-@keyframes :global(Toastify__bounceOutLeft)
-  20%
-    opacity: 1
-    transform: translate3d(20px, 0, 0)
-  to
-    opacity: 0
-    transform: translate3d(-2000px, 0, 0)
-
-@keyframes :global(Toastify__bounceInUp)
-  from,
-  60%,
-  75%,
-  90%,
-  to
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
-  from
-    opacity: 0
-    transform: translate3d(0, 3000px, 0)
-  60%
-    opacity: 1
-    transform: translate3d(0, -20px, 0)
-  75%
-    transform: translate3d(0, 10px, 0)
-  90%
-    transform: translate3d(0, -5px, 0)
-  to
-    transform: translate3d(0, 0, 0)
-
-@keyframes :global(Toastify__bounceOutUp)
-  20%
-    transform: translate3d(0, -10px, 0)
-  40%,
-  45%
-    opacity: 1
-    transform: translate3d(0, 20px, 0)
-  to
-    opacity: 0
-    transform: translate3d(0, -2000px, 0)
-
-@keyframes :global(Toastify__bounceInDown)
-  from,
-  60%,
-  75%,
-  90%,
-  to
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
-  0%
-    opacity: 0
-    transform: translate3d(0, -3000px, 0)
-  60%
-    opacity: 1
-    transform: translate3d(0, 25px, 0)
-  75%
-    transform: translate3d(0, -10px, 0)
-  90%
-    transform: translate3d(0, 5px, 0)
-  to
-    transform: none
-
-@keyframes :global(Toastify__bounceOutDown)
-  20%
-    transform: translate3d(0, 10px, 0)
-  40%,
-  45%
-    opacity: 1
-    transform: translate3d(0, -20px, 0)
-  to
-    opacity: 0
-    transform: translate3d(0, 2000px, 0)
-
-@keyframes :global(Toastify__zoomIn)
-  from
-    opacity: 0
-    transform: scale3d(0.3, 0.3, 0.3)
-  50%
-    opacity: 1
-
-@keyframes :global(Toastify__zoomOut)
-  from
-    opacity: 1
-  50%
-    opacity: 0
-    transform: scale3d(0.3, 0.3, 0.3)
-  to
-    opacity: 0
-
-@keyframes :global(Toastify__flipIn)
-  from
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
-    animation-timing-function: ease-in
-    opacity: 0
-  40%
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
-    animation-timing-function: ease-in
-  60%
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg)
-    opacity: 1
-  80%
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
-  to
-    transform: perspective(400px)
-
-@keyframes :global(Toastify__flipOut)
-  from
-    transform: perspective(400px)
-  30%
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
-    opacity: 1
-  to
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
-    opacity: 0
-
-@keyframes :global(Toastify__slideInRight)
-  from
-    transform: translate3d(110%, 0, 0)
-    visibility: visible
-  to
-    transform: translate3d(0, 0, 0)
-
-@keyframes :global(Toastify__slideInLeft)
-  from
-    transform: translate3d(-110%, 0, 0)
-    visibility: visible
-  to
-    transform: translate3d(0, 0, 0)
-
-@keyframes :global(Toastify__slideInUp)
-  from
-    transform: translate3d(0, 110%, 0)
-    visibility: visible
-  to
-    transform: translate3d(0, 0, 0)
-
-@keyframes :global(Toastify__slideInDown)
-  from
-    transform: translate3d(0, -110%, 0)
-    visibility: visible
-  to
-    transform: translate3d(0, 0, 0)
-
-@keyframes :global(Toastify__slideOutRight)
-  from
-    transform: translate3d(0, 0, 0)
-  to
-    visibility: hidden
-    transform: translate3d(110%, 0, 0)
-
-@keyframes :global(Toastify__slideOutLeft)
-  from
-    transform: translate3d(0, 0, 0)
-  to
-    visibility: hidden
-    transform: translate3d(-110%, 0, 0)
-
-@keyframes :global(Toastify__slideOutDown)
-  from
-    transform: translate3d(0, 0, 0)
-  to
-    visibility: hidden
-    transform: translate3d(0, 500px, 0)
-
-@keyframes :global(Toastify__slideOutUp)
-  from
-    transform: translate3d(0, 0, 0)
-  to
-    visibility: hidden
-    transform: translate3d(0, -500px, 0)
diff --git a/pkg/webui/components/toast/toast.styl b/pkg/webui/components/toast/toast.styl
index dffacfdade..c272dc7932 100644
--- a/pkg/webui/components/toast/toast.styl
+++ b/pkg/webui/components/toast/toast.styl
@@ -22,13 +22,13 @@ div.toast
     margin: 0
 
 .slide-in-right
-  animation: slide-in-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both
+  animation: slide-in-right .5s cubic-bezier(.23, 1, .32, 1) both
 
 .slide-out-right
-  animation: slide-in-right 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both reverse
+  animation: slide-in-right .5s cubic-bezier(.23, 1, .32, 1) both reverse
 
 .beat
-  animation: beat 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both
+  animation: beat .5s cubic-bezier(.23, 1, .32, 1) both
 
 @keyframes slide-in-right
   0%
diff --git a/pkg/webui/components/tooltip/tooltip.styl b/pkg/webui/components/tooltip/tooltip.styl
index 59741016d7..00dc457f38 100644
--- a/pkg/webui/components/tooltip/tooltip.styl
+++ b/pkg/webui/components/tooltip/tooltip.styl
@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// stylelint-disable stylus/pythonic
+
 :global {
   .tippy-box {
     border-normal()
@@ -34,7 +36,7 @@
 
 
   .tippy-arrow,
-  .tippy-arrow:before  {
+  .tippy-arrow:before {
     position: absolute
     width: 8px
     height: 8px
@@ -88,5 +90,7 @@
   }
 }
 
+// stylelint-enable stylus/pythonic
+
 .small
   padding: $cs.xxs $cs.s
diff --git a/pkg/webui/components/unit-input/unit-input.styl b/pkg/webui/components/unit-input/unit-input.styl
index ef2076c700..292e74584b 100644
--- a/pkg/webui/components/unit-input/unit-input.styl
+++ b/pkg/webui/components/unit-input/unit-input.styl
@@ -21,7 +21,7 @@
     min-width: 4rem
 
   .number
-    padding-right $cs.xxs
+    padding-right: $cs.xxs
     min-width: 5rem
 
 .notification
diff --git a/pkg/webui/console/components/events/events.styl b/pkg/webui/console/components/events/events.styl
index 22e56c9a2b..777d8f455c 100644
--- a/pkg/webui/console/components/events/events.styl
+++ b/pkg/webui/console/components/events/events.styl
@@ -47,11 +47,11 @@ $event-container-height = 40px
   & > div:not(.cell-preview):not(:last-child)
     font-weight: $fw.bold
     +media-query($bp.s)
-        display: none
+      display: none
 
   .cell-data
     +media-query($bp.l)
-        display: none
+      display: none
 
 .header-cells, .event
   padding: $cs.xxs 0 $cs.xxs $cs.xs
@@ -79,6 +79,7 @@ $event-container-height = 40px
     display: flex
 
   button
+    // stylelint-disable-next-line declaration-no-important
     margin-right: 0 !important
 
 .toggle-container
diff --git a/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl b/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl
index 8b9ab6d2d7..7452ab58a3 100644
--- a/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl
+++ b/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl
@@ -50,8 +50,8 @@
     content: '>'
 
 .highlight
-  line-height: 1.9rem;
-  border: 1px solid var(--c-border-neutral-semilight);
+  line-height: 1.9rem
+  border: 1px solid var(--c-border-neutral-semilight)
   font-family: 'IBM Plex Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
   display: inline
   background-color: var(--c-bg-neutral-min)
diff --git a/pkg/webui/console/components/events/previews/shared/json-payload/json-payload.styl b/pkg/webui/console/components/events/previews/shared/json-payload/json-payload.styl
index 5df76e6d21..bd5d539a5f 100644
--- a/pkg/webui/console/components/events/previews/shared/json-payload/json-payload.styl
+++ b/pkg/webui/console/components/events/previews/shared/json-payload/json-payload.styl
@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-$c-string = #f5a623
-$c-number = #57a700
+$c-string = var(--c-text-info-normal)
+$c-number = var(--c-text-success-normal)
 $c-boolean = $c-number
 $c-invalid = var(--c-bg-error-normal)
 
diff --git a/pkg/webui/console/components/panel-view/panel-view.styl b/pkg/webui/console/components/panel-view/panel-view.styl
index 52706b119d..d09cc96eb0 100644
--- a/pkg/webui/console/components/panel-view/panel-view.styl
+++ b/pkg/webui/console/components/panel-view/panel-view.styl
@@ -56,6 +56,7 @@
       display: block
       height: 100%
       width: 3px
+      // stylelint-disable-next-line declaration-no-important
       background: var(--c-text-brand-normal) !important
 
   &:hover,
diff --git a/pkg/webui/console/components/payload-formatters-form/test-form/test-form.styl b/pkg/webui/console/components/payload-formatters-form/test-form/test-form.styl
index b7fdbd7ae8..65a1cdce0f 100644
--- a/pkg/webui/console/components/payload-formatters-form/test-form/test-form.styl
+++ b/pkg/webui/console/components/payload-formatters-form/test-form/test-form.styl
@@ -47,4 +47,5 @@
   align-items: end
 
   .payload
+    // stylelint-disable-next-line declaration-no-important
     flex-grow: 1 !important
diff --git a/pkg/webui/console/containers/notifications/notifications.styl b/pkg/webui/console/containers/notifications/notifications.styl
index b1053d45d7..140bbee86c 100644
--- a/pkg/webui/console/containers/notifications/notifications.styl
+++ b/pkg/webui/console/containers/notifications/notifications.styl
@@ -22,6 +22,7 @@
   &-change-button
     margin-top: $cs.m
     margin-bottom: $cs.m
+    // stylelint-disable-next-line declaration-no-important
     color: var(--c-text-brand-normal) !important
 
   &.notification-selected
@@ -35,7 +36,7 @@
   align-items: center
   border-bottom: 1px solid var(--c-border-neutral-light)
   padding: $cs.m $cs.s
-  gap: 0.25rem
+  gap: .25rem
 
   +media-query($bp.s)
     padding: $cs.xs
@@ -61,7 +62,7 @@
     border-radius: $br.l
     background-color: var(--c-bg-brand-normal)
     color: var(--c-text-neutral-min)
-    padding: 0 0.45rem
+    padding: 0 .45rem
     margin-left: $cs.xxs
     font-size: $fs.s
     position: relative
diff --git a/pkg/webui/console/containers/sidebar/sidebar.styl b/pkg/webui/console/containers/sidebar/sidebar.styl
index 808085d9ab..759863489f 100644
--- a/pkg/webui/console/containers/sidebar/sidebar.styl
+++ b/pkg/webui/console/containers/sidebar/sidebar.styl
@@ -21,7 +21,7 @@
   box-sizing: border-box
   sidebar-transition(min-width)
   +media-query($bp.m)
-    transition: left .4s cubic-bezier(0.220, 0.005, 0.295, 1.000)
+    transition: left .4s cubic-bezier(.22, .005, .295, 1)
     position: absolute
     top: 0
     left: -90vw
@@ -32,7 +32,7 @@
     z-index: $zi.nav
 
     &-open
-      transition: left .6s cubic-bezier(0.165, 0.840, 0.440, 1.000)
+      transition: left .6s cubic-bezier(.165, .84, .44, 1)
       left: 0
 
       & + .sidebar-backdrop
diff --git a/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl b/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl
index 3e63ee68e4..f2258fe98f 100644
--- a/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl
+++ b/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl
@@ -33,7 +33,7 @@
   background: var(--c-bg-neutral-min)
   box-shadow: 0 4px 30px 0 rgba(0, 0, 0, .08), inset 0 -1px 0 0 rgba(0, 0, 0, .11)
   border-radius: $br.xl
-  transition: box-shadow .4s cubic-bezier(.250, .010, .070, 1), transform .4s cubic-bezier(.250, .010, .070, 1)
+  transition: box-shadow .4s cubic-bezier(.25, .01, .07, 1), transform .4s cubic-bezier(.25, .01, .07, 1)
   +media-query($bp.s)
     box-shadow: 0 4px 30px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 0 rgba(0, 0, 0, .11)
     padding: 1.5rem .8rem
diff --git a/pkg/webui/styles/fonts.styl b/pkg/webui/styles/fonts.styl
index 844b0da850..4ebf7a4234 100644
--- a/pkg/webui/styles/fonts.styl
+++ b/pkg/webui/styles/fonts.styl
@@ -23,10 +23,10 @@
   font-display: fallback
   src: url('../assets/fonts/ibm-plex-mono-regular.eot') // IE9 Compat Modes.
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-      url('../assets/fonts/ibm-plex-mono-regular.woff2') format('woff2'), /* Super Modern Browsers */
-      url('../assets/fonts/ibm-plex-mono-regular.woff') format('woff'), /* Modern Browsers */
-      url('../assets/fonts/ibm-plex-mono-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-      url('../assets/fonts/ibm-plex-mono-regular.svg#IBMPlexMono') format('svg') /* Legacy iOS */
+    url('../assets/fonts/ibm-plex-mono-regular.woff2') format('woff2'),
+    url('../assets/fonts/ibm-plex-mono-regular.woff') format('woff'),
+    url('../assets/fonts/ibm-plex-mono-regular.ttf') format('truetype'),
+    url('../assets/fonts/ibm-plex-mono-regular.svg#IBMPlexMono') format('svg')
 
 @font-face
   font-family: 'Material Symbols Rounded'
@@ -39,7 +39,7 @@
   font-family: 'text-security-disc'
   src: url('../assets/fonts/text-security-disc.eot')
   src: url('../assets/fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
-      url('../assets/fonts/text-security-disc.woff2') format('woff2'),
-      url('../assets/fonts/text-security-disc.woff') format('woff'),
-      url('../assets/fonts/text-security-disc.ttf') format('truetype'),
-      url('../assets/fonts/text-security-disc.svg#text-security') format('svg')
+    url('../assets/fonts/text-security-disc.woff2') format('woff2'),
+    url('../assets/fonts/text-security-disc.woff') format('woff'),
+    url('../assets/fonts/text-security-disc.ttf') format('truetype'),
+    url('../assets/fonts/text-security-disc.svg#text-security') format('svg')
diff --git a/pkg/webui/styles/main.styl b/pkg/webui/styles/main.styl
index d7f1338b5b..99e03bc28d 100644
--- a/pkg/webui/styles/main.styl
+++ b/pkg/webui/styles/main.styl
@@ -74,7 +74,7 @@ code
   font-family: $font-family-mono
   font-size: $fs.s
   background-color: var(--c-bg-neutral-semilight)
-  padding: 0.1rem $cs.xxs
+  padding: .1rem $cs.xxs
   color: var(--c-text-neutral-heavy)
 
 summary
diff --git a/pkg/webui/styles/mixins.styl b/pkg/webui/styles/mixins.styl
index febaaf224d..73c8138b58 100644
--- a/pkg/webui/styles/mixins.styl
+++ b/pkg/webui/styles/mixins.styl
@@ -197,7 +197,7 @@ horizontalize()
   justify-content: space-between
 
 visually-hidden()
-  position: absolute;
+  position: absolute
   width: 1px
   height: 1px
   margin: -1px
@@ -212,12 +212,12 @@ visually-hidden()
 // ================
 
 area-active()
-  background-image: linear-gradient(179deg, rgba(249,249,249,0.6) 0%, rgba(246,246,246,0.6) 100%)
-  box-shadow: inset 0 0 22px 0 rgba(0,0,0,0.05)
+  background-image: linear-gradient(179deg, rgba(249,249,249,.6) 0%, rgba(246,246,246,.6) 100%)
+  box-shadow: inset 0 0 22px 0 rgba(0,0,0,.05)
 
 area-hover()
-  background-image: linear-gradient(179deg, rgba(249,249,249,0.3) 0%, rgba(246,246,246,0.3) 100%)
-  box-shadow: inset 0 0 22px 0 rgba(0,0,0,0.01)
+  background-image: linear-gradient(179deg, rgba(249,249,249,.3) 0%, rgba(246,246,246,.3) 100%)
+  box-shadow: inset 0 0 22px 0 rgba(0,0,0,.01)
 
 
 // RESPONSIVENESS
@@ -285,6 +285,7 @@ material-icon()
 input-width-classes()
   width: 100%
 
+  // stylelint-disable declaration-no-important
   &.input-width-xxs
     max-width: $fiw.xxs !important
 
@@ -302,6 +303,7 @@ input-width-classes()
 
   &.input-width-full
     max-width: none !important
+  // stylelint-enable declaration-no-important
 
 
 // RESETS
diff --git a/pkg/webui/styles/utilities/general.styl b/pkg/webui/styles/utilities/general.styl
index 6552af279a..928311a18f 100644
--- a/pkg/webui/styles/utilities/general.styl
+++ b/pkg/webui/styles/utilities/general.styl
@@ -43,11 +43,11 @@
       +media-query($width)
         for $num in (1..12)
           // Generate responsive grid item overrides.
-          .{$name}\\:item-{$num}
+          .{$name}:item-{$num}
             grid-column-end: span $num
 
           // Generate responsive start-colum (offset) item overrides.
-          .{$name}\\:item-start-{$num}
+          .{$name}:item-start-{$num}
             grid-column-start: $num
 
     &--center
@@ -85,17 +85,17 @@
   // Responsive justification styles.
   for $name, $width in $bp
     +media-query($width)
-      .{$name}\\:j-center
-        justify-content: center !important
+      .{$name}:j-center
+        justify-content: center
 
-      .{$name}\\:j-start
-        justify-content: start !important
+      .{$name}:j-start
+        justify-content: start
 
-      .{$name}\\:end
-        justify-content: end !important
+      .{$name}:end
+        justify-content: end
 
-      .{$name}\\:j-between
-        justify-content: space-between !important
+      .{$name}:j-between
+        justify-content: space-between
 
   // Block justification.
 
@@ -133,27 +133,27 @@
 
     for $name, $width in $bp
       +media-query($width)
-        .{$name}\\:w-{$num}0
+        .{$name}:w-{$num}0
           width: $percentage
 
-        .{$name}\\:h-{$num}0
+        .{$name}:h-{$num}0
           height: $percentage
 
   for $name, $width in $bp
     +media-query($width)
-      .{$name}\\:w-full
+      .{$name}:w-full
         width: 100%
 
-      .{$name}\\:w-auto
+      .{$name}:w-auto
         width: auto
 
-      .{$name}\\:w-content
+      .{$name}:w-content
         width: fit-content
 
-      .{$name}\\:h-full
+      .{$name}:h-full
         height: 100%
 
-      .{$name}\\:h-auto
+      .{$name}:h-auto
         height: auto
 
   // Positioning.
@@ -175,19 +175,19 @@
 
   for $name, $width in $bp
     +media-query($width)
-      .{$name}\\:pos-relative
+      .{$name}:pos-relative
         position: relative
-      .{$name}\\:pos-absolute
+      .{$name}:pos-absolute
         position: absolute
-      .{$name}\\:pos-fixed
+      .{$name}:pos-fixed
         position: fixed
-      .{$name}\\:pos-static
+      .{$name}:pos-static
         position: static
-      .{$name}\\:direction-column
+      .{$name}:direction-column
         flex-direction: column
-      .{$name}\\:direction-row
+      .{$name}:direction-row
         flex-direction: row
-      .{$name}\\:flex-wrap
+      .{$name}:flex-wrap
         flex-wrap: wrap
 
   // Layout shorthands.
@@ -222,11 +222,11 @@
 
   for $name, $width in $bp
     +media-query($width)
-      .{$name}\\:direction-column
-        flex-direction: column !important
+      .{$name}:direction-column
+        flex-direction: column
 
-      .{$name}\\:direction-row
-        flex-direction: row !important
+      .{$name}:direction-row
+        flex-direction: row
 
   // Opacity.
   .opacity-0
@@ -347,54 +347,54 @@
   // Responsive typography styles.
   for $name, $width in $bp
     +media-query($width)
-      .{$name}\\:text-center
-        text-align: center !important
+      .{$name}:text-center
+        text-align: center
 
-      .{$name}\\:text-left
-        text-align: left !important
+      .{$name}:text-left
+        text-align: left
 
-      .{$name}\\:text-right
-        text-align: right !important
+      .{$name}:text-right
+        text-align: right
 
   // DISPLAY UTILITIES.
   .d-flex
-    display: flex !important
+    display: flex
 
   .d-inline
-    display: inline !important
+    display: inline
 
   .d-block
-    display: block !important
+    display: block
 
   .d-none
-    display: none !important
+    display: none
 
   .d-inline-block
-    display: inline-block !important
+    display: inline-block
 
   .d-inline-flex
-    display: inline-flex !important
+    display: inline-flex
 
   // Responsive display styles.
   for $name, $width in $bp
     +media-query($width)
-      .{$name}\\:d-flex
-        display: flex !important
+      .{$name}:d-flex
+        display: flex
 
-      .{$name}\\:d-inline
-        display: inline !important
+      .{$name}:d-inline
+        display: inline
 
-      .{$name}\\:d-block
-        display: block !important
+      .{$name}:d-block
+        display: block
 
-      .{$name}\\:d-none
-        display: none !important
+      .{$name}:d-none
+        display: none
 
-      .{$name}\\:d-inline-block
-        display: inline-block !important
+      .{$name}:d-inline-block
+        display: inline-block
 
-      .{$name}\\:d-inline-flex
-        display: inline-flex !important
+      .{$name}:d-inline-flex
+        display: inline-flex
 
   .br-xs
     border-radius: $br.xs
diff --git a/pkg/webui/styles/utilities/spacing.styl b/pkg/webui/styles/utilities/spacing.styl
index 9abe949aab..6e7a8cacd0 100644
--- a/pkg/webui/styles/utilities/spacing.styl
+++ b/pkg/webui/styles/utilities/spacing.styl
@@ -29,7 +29,7 @@
       $scalesuffix = '-0'
     else
       // Compose property using CSS variables.
-      $property = convert('$' + $scale  + '.' + $size + ' !important')
+      $property = convert('$' + $scale  + '.' + $size)
       $scalesuffix = '-' + $scale + '-' + $size
     // Special case for gap
     if $type == 'gap'
diff --git a/pkg/webui/styles/variables/colors.styl b/pkg/webui/styles/variables/colors.styl
index a46166e710..057fde223b 100644
--- a/pkg/webui/styles/variables/colors.styl
+++ b/pkg/webui/styles/variables/colors.styl
@@ -18,6 +18,8 @@
 // be used only by the tokens.styl file to define design tokens with it.
 // Do not use these values directly but only through the tokens.styl file.
 
+// stylelint-disable color-no-hex
+
 $c = {
 
   // Brand colors
diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl
index 3d058600c1..66a2ee94cb 100644
--- a/pkg/webui/styles/variables/generic.styl
+++ b/pkg/webui/styles/variables/generic.styl
@@ -24,7 +24,7 @@ $cs = {
   'm':   1rem,
   'l':   1.5rem,
   'xl':  2rem,
-  'xxl': 4rem
+  'xxl': 4rem,
 }
 
 
@@ -38,7 +38,7 @@ $ls = {
   'm':   3rem,
   'l':   4rem,
   'xl':  6rem,
-  'xxl': 10rem
+  'xxl': 10rem,
 }
 
 
@@ -67,23 +67,23 @@ $fs = {
   'l': 1.286rem, // ~18p
   'xl': 1.57rem, // ~22px
   'xxl': 1.857rem, // ~26px
-  'xl3': 2.285rem // ~32px
-  'xl4': 3.428rem // ~48px
+  'xl3': 2.285rem, // ~32px
+  'xl4': 3.428rem,
 }
 
 $fsv2 = {
-  's': 0.75rem,
+  's': .75rem,
   'm': 1rem,
-  'l': 1.25rem
+  'l': 1.25rem,
 }
 
 // Corresponding default line heights.
 $lh = {
-  's': $line-height-base
-  'm': $line-height-base
-  'l': 1.6
-  'xl': 1.4
-  'xxl': 1.2
+  's': $line-height-base,
+  'm': $line-height-base,
+  'l': 1.6,
+  'xl': 1.4,
+  'xxl': 1.2,
 }
 
 // Font weights for body copy
@@ -111,14 +111,14 @@ $fwh = {
 // ## Radius
 
 $br = {
-  'xxs': 0.25rem,
-  'xs': 0.3rem,
-  's': 0.4rem,
-  'm': 0.5rem,
-  'l': 0.75rem,
+  'xxs': .25rem,
+  'xs': .3rem,
+  's': .4rem,
+  'm': .5rem,
+  'l': .75rem,
   'xl': 1rem,
   'xxl': 1.25rem,
-  'xl3': 3rem
+  'xl3': 3rem,
 }
 
 
@@ -145,24 +145,24 @@ $bp = {
 // ## Animation durations, only meant as guidance, usage is not enforced.
 
 $ad = {
-  'xs': .05s
-  's': .12s
-  'm': .25s
-  'l': .5s
-  'xl': 1s
+  'xs': .05s,
+  's': .12s,
+  'm': .25s,
+  'l': .5s,
+  'xl': 1s,
 }
 
 // Z-INDEXES
 // =========
 
 $zi = {
-  'modal': 2020
-  'mobile-menu': 2010
-  'nav': 2000
-  'tooltip': 20
-  'overlay': 10
-  'dropdown': 9
-  'slight': 1
+  'modal': 2020,
+  'mobile-menu': 2010,
+  'nav': 2000,
+  'tooltip': 20,
+  'overlay': 10,
+  'dropdown': 9,
+  'slight': 1,
 }
 
 
@@ -172,26 +172,26 @@ $zi = {
 // Form input widths.
 
 $fiw = {
-  'xxs': 5rem
-  'xs': 8rem
-  's': 12rem
-  'm': 30rem
-  'l': 40rem
-  'full': 100%
+  'xxs': 5rem,
+  'xs': 8rem,
+  's': 12rem,
+  'm': 30rem,
+  'l': 40rem,
+  'full': 100%,
 }
 
 // Form field widths (container).
 
 $ffw = {
-  'xxs': 10rem
-  'xs': 15rem
-  's': 20rem
-  'm': 30rem
-  'l': 40rem
-  'full': 100%
-  'half': 50%
-  'third': 33.33%
-  'quarter': 25%
+  'xxs': 10rem,
+  'xs': 15rem,
+  's': 20rem,
+  'm': 30rem,
+  'l': 40rem,
+  'full': 100%,
+  'half': 50%,
+  'third': 33.33%,
+  'quarter': 25%,
 }
 
 // Sizes
@@ -201,7 +201,7 @@ $sz = {
   '1': '0.25rem',
   '1\.5': '0.375rem',
   '2': '0.5rem',
-  '2\.5': '0.625rem'
+  '2\.5': '0.625rem',
   '3': '0.75rem',
   '3\.5': '0.875rem',
   '4': '1rem',
diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl
index 3eceff5fa0..5646081d47 100644
--- a/pkg/webui/styles/variables/tokens.styl
+++ b/pkg/webui/styles/variables/tokens.styl
@@ -29,127 +29,127 @@ $tokens = {
 
       // Neutral
 
-      'bg-neutral-min': $c.neutral-white // Background color for panels, dropdowns, inputs, tab, table, ...
-      'bg-neutral-min-hover': $c.neutral-025 // Background color for panels, dropdowns, inputs, tab, table, ... on hover.
-      'bg-neutral-light': $c.neutral-075 // Background for navigation element items on hover.
-      'bg-neutral-semilight': $c.neutral-100 // Background for the console dashboard.
-      'bg-neutral-heavy': $c.neutral-900 // Background for navigation element items when active.
+      'bg-neutral-min': $c.neutral-white, // Background color for panels, dropdowns, inputs, tab, table, ...
+      'bg-neutral-min-hover': $c.neutral-025, // Background color for panels, dropdowns, inputs, tab, table, ... on hover.
+      'bg-neutral-light': $c.neutral-075, // Background for navigation element items on hover.
+      'bg-neutral-semilight': $c.neutral-100, // Background for the console dashboard.
+      'bg-neutral-heavy': $c.neutral-900, // Background for navigation element items when active.
 
       // Brand
 
-      'bg-brand-extralight': $c.tts-025 // Background for navigation elements background.
-      'bg-brand-light': $c.tts-050 // ?
-      'bg-brand-normal': $c.tts-500 // Background for highlight elements.
-      'bg-brand-normal-hover': $c.tts-600 // Background for highlight elements on hover.
+      'bg-brand-extralight': $c.tts-025, // Background for navigation elements background.
+      'bg-brand-light': $c.tts-050, // ?
+      'bg-brand-normal': $c.tts-500, // Background for highlight elements.
+      'bg-brand-normal-hover': $c.tts-600, // Background for highlight elements on hover.
 
       // Semantic
 
-      'bg-success-light': $c.success-075 // Background for success elements surface.
-      'bg-warning-light': $c.warning-075 // Background for warning elements surface.
-      'bg-error-light': $c.error-075 // Background for error elements surface.
-      'bg-info-light': $c.information-075 // Background for info elements surface.
+      'bg-success-light': $c.success-075, // Background for success elements surface.
+      'bg-warning-light': $c.warning-075, // Background for warning elements surface.
+      'bg-error-light': $c.error-075, // Background for error elements surface.
+      'bg-info-light': $c.information-075, // Background for info elements surface.
 
-      'bg-success-normal': $c.success-600 // Background for success highlight elements.
-      'bg-warning-normal': $c.warning-600 // Background for warning highlight elements.
-      'bg-error-normal': $c.error-600 // Background for error highlight elements.
-      'bg-info-normal': $c.info-600 // Background for info highlight elements.
+      'bg-success-normal': $c.success-600, // Background for success highlight elements.
+      'bg-warning-normal': $c.warning-600, // Background for warning highlight elements.
+      'bg-error-normal': $c.error-600, // Background for error highlight elements.
+      'bg-info-normal': $c.info-600, // Background for info highlight elements.
 
-      'bg-success-normal-hover': $c.success-700 // Background for success highlight elements on hover.
-      'bg-warning-normal-hover': $c.warning-700 // Background for warning highlight elements on hover.
-      'bg-error-normal-hover': $c.error-700 // Background for error highlight elements on hover.
-      'bg-info-normal-hover': $c.info-700 // Background for info highlight elements on hover.
+      'bg-success-normal-hover': $c.success-700, // Background for success highlight elements on hover.
+      'bg-warning-normal-hover': $c.warning-700, // Background for warning highlight elements on hover.
+      'bg-error-normal-hover': $c.error-700, // Background for error highlight elements on hover.
+      'bg-info-normal-hover': $c.info-700, // Background for info highlight elements on hover.
 
       // TEXT COLORS
       // ===========
 
       // Neutral
 
-      'text-neutral-min': $c.neutral-white // Text color on brand color background or active color background.
-      'text-neutral-extralight': $c.neutral-400 // Text color for disable text or darker text on dark background.
-      'text-neutral-light': $c.neutral-500 // Text color for second level information text.
-      'text-neutral-semilight': $c.neutral-600 // Text color for enable text in a menu.
-      'text-neutral-heavy': $c.neutral-900 // Text color for primary information or text when hover.
+      'text-neutral-min': $c.neutral-white, // Text color on brand color background or active color background.
+      'text-neutral-extralight': $c.neutral-400, // Text color for disable text or darker text on dark background.
+      'text-neutral-light': $c.neutral-500, // Text color for second level information text.
+      'text-neutral-semilight': $c.neutral-600, // Text color for enable text in a menu.
+      'text-neutral-heavy': $c.neutral-900, // Text color for primary information or text when hover.
 
       // Brand
 
-      'text-brand-normal': $c.tts-500 // Text color for highlight information.
-      'text-brand-normal-hover': $c.tts-600 // Text color for highlight information on hover.
-      'text-brand-normal-active': $c.tts-700 // Text color for highlight information on active.
+      'text-brand-normal': $c.tts-500, // Text color for highlight information.
+      'text-brand-normal-hover': $c.tts-600, // Text color for highlight information on hover.
+      'text-brand-normal-active': $c.tts-700, // Text color for highlight information on active.
 
       // Semantic
 
-      'text-success-bold': $c.success-800 // Text color for success information on success surface.
-      'text-warning-bold': $c.warning-800 // Text color for warning information on warning surface.
-      'text-error-bold': $c.error-800 // Text color for error information on error surface.
-      'text-info-bold': $c.information-800 // Text color for info information on info surface.
+      'text-success-bold': $c.success-800, // Text color for success information on success surface.
+      'text-warning-bold': $c.warning-800, // Text color for warning information on warning surface.
+      'text-error-bold': $c.error-800, // Text color for error information on error surface.
+      'text-info-bold': $c.information-800, // Text color for info information on info surface.
 
-      'text-success-normal': $c.success-600 // Text color for success information.
-      'text-warning-normal': $c.warning-600 // Text color for warning information.
-      'text-error-normal': $c.error-600 // Text color for error information.
-      'text-info-normal': $c.information-600 // Text color for info information.
+      'text-success-normal': $c.success-600, // Text color for success information.
+      'text-warning-normal': $c.warning-600, // Text color for warning information.
+      'text-error-normal': $c.error-600, // Text color for error information.
+      'text-info-normal': $c.information-600, // Text color for info information.
 
-      'text-success-normal-hover': $c.success-700 // Text color for success information on hover.
-      'text-warning-normal-hover': $c.warning-700 // Text color for warning information on hover.
-      'text-error-normal-hover': $c.error-700 // Text color for error information on hover.
-      'text-info-normal-hover': $c.information-700 // Text color for info information on hover.
+      'text-success-normal-hover': $c.success-700, // Text color for success information on hover.
+      'text-warning-normal-hover': $c.warning-700, // Text color for warning information on hover.
+      'text-error-normal-hover': $c.error-700, // Text color for error information on hover.
+      'text-info-normal-hover': $c.information-700, // Text color for info information on hover.
 
       // ICON COLORS
       // ===========
 
       // Neutral
 
-      'icon-neutral-normal': $c.neutral-700 // Icon color for default icon color.
-      'icon-neutral-light': $c.neutral-500 // Icon color for subtle icon color.
+      'icon-neutral-normal': $c.neutral-700, // Icon color for default icon color.
+      'icon-neutral-light': $c.neutral-500, // Icon color for subtle icon color.
 
       // Brand
 
-      'icon-brand-normal': $c.tts-500 // Icon color for highlight icon color.
-      'icon-brand-normal-hover': $c.tts-600 // Icon color for highlight icon color on hover.
-      'icon-brand-normal-active': $c.tts-700 // Icon color for highlight icon color on active.
+      'icon-brand-normal': $c.tts-500, // Icon color for highlight icon color.
+      'icon-brand-normal-hover': $c.tts-600, // Icon color for highlight icon color on hover.
+      'icon-brand-normal-active': $c.tts-700, // Icon color for highlight icon color on active.
 
       // Semantic
 
-      'icon-success-normal': $c.success-600 // Icon color for success icon color.
-      'icon-warning-normal': $c.warning-600 // Icon color for warning icon color.
-      'icon-error-normal': $c.error-600 // Icon color for error icon color.
-      'icon-info-normal': $c.information-600 // Icon color for info icon color.
+      'icon-success-normal': $c.success-600, // Icon color for success icon color.
+      'icon-warning-normal': $c.warning-600, // Icon color for warning icon color.
+      'icon-error-normal': $c.error-600, // Icon color for error icon color.
+      'icon-info-normal': $c.information-600, // Icon color for info icon color.
 
       // BORDER COLORS
       // =============
 
       // Neutral
 
-      'border-neutral-min': $c.neutral-white // Border that needs to appear as background color.
-      'border-neutral-extralight': $c.neutral-050 // Border for subtle table raws border bottoms.
-      'border-neutral-light': $c.neutral-100 // Border for divider lines and default element borders.
-      'border-neutral-normal': $c.neutral-300 // Border for default input borders.
-      'border-neutral-semibold': $c.neutral-500 // Border for default input borders on hover.
-      'border-neutral-bold': $c.neutral-700 // Border for divider lines and default element borders on dark surface.
+      'border-neutral-min': $c.neutral-white, // Border that needs to appear as background color.
+      'border-neutral-extralight': $c.neutral-050, // Border for subtle table raws border bottoms.
+      'border-neutral-light': $c.neutral-100, // Border for divider lines and default element borders.
+      'border-neutral-normal': $c.neutral-300, // Border for default input borders.
+      'border-neutral-semibold': $c.neutral-500, // Border for default input borders on hover.
+      'border-neutral-bold': $c.neutral-700, // Border for divider lines and default element borders on dark surface.
 
       // Brand
 
-      'border-brand-normal': $c.tts-600 // Border for input element borders on focus.
+      'border-brand-normal': $c.tts-600, // Border for input element borders on focus.
 
       // Semantic
 
-      'border-success-normal': $c.success-600 // Border for success element borders.
-      'border-warning-normal': $c.warning-600 // Border for warning element borders.
-      'border-error-normal': $c.error-600 // Border for error element borders.
-      'border-info-normal': $c.information-600 // Border for info element borders.
+      'border-success-normal': $c.success-600, // Border for success element borders.
+      'border-warning-normal': $c.warning-600, // Border for warning element borders.
+      'border-error-normal': $c.error-600, // Border for error element borders.
+      'border-info-normal': $c.information-600, // Border for info element borders.
 
       // Gradients
 
-      'gradient-neutral-light-01': $c.neutral-100 // First part of gradient for default input borders.
-      'gradient-neutral-light-02': $c.neutral-300 // Second part of gradient for default input borders.
+      'gradient-neutral-light-01': $c.neutral-100, // First part of gradient for default input borders.
+      'gradient-neutral-light-02': $c.neutral-300,
 
     },
 
     shadow: {
-      'box-error-normal': 0 0 3px 2px rgba(219, 35, 40,.2) // Shadow for focused inputs and other elements that have errors.
-      'box-warning-normal': 0 0 3px 2px rgba(219, 118, 0,.2) // Shadow for focused inputs and other elements that have errors.
-      'box-panel-normal': 0px 1px 5px 0px rgba(0, 0, 0, 0.09) // Shadow for panels and large container elements that need elevation.
-    }
+      'box-error-normal': 0 0 3px 2px rgba(219, 35, 40,.2), // Shadow for focused inputs and other elements that have errors.
+      'box-warning-normal': 0 0 3px 2px rgba(219, 118, 0,.2), // Shadow for focused inputs and other elements that have errors.
+      'box-panel-normal': 0px 1px 5px 0px rgba(0, 0, 0, .09),
+    },
 
-  }
+  },
 
 }