diff --git a/webview/src/experiments/components/table/body/branchDivider/styles.module.scss b/webview/src/experiments/components/table/body/branchDivider/styles.module.scss
index 03b7270ff6..a4723e0a6d 100644
--- a/webview/src/experiments/components/table/body/branchDivider/styles.module.scss
+++ b/webview/src/experiments/components/table/body/branchDivider/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../shared/variables';
+@use '../../../../../shared/variables';
 
 .branchName {
   padding: 0 20px;
@@ -9,7 +9,7 @@
 }
 
 .icon {
-  fill: $accent-color;
+  fill: variables.$accent-color;
 }
 
 .branchActions {
diff --git a/webview/src/experiments/components/table/body/commits/styles.module.scss b/webview/src/experiments/components/table/body/commits/styles.module.scss
index b3fb753e71..99704b3373 100644
--- a/webview/src/experiments/components/table/body/commits/styles.module.scss
+++ b/webview/src/experiments/components/table/body/commits/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../shared/variables';
+@use '../../../../../shared/variables';
 
 .commitsNav {
   text-align: left;
@@ -10,7 +10,7 @@
 .commitsButton {
   background: transparent;
   border: none;
-  color: $meta-cell-color;
+  color: variables.$meta-cell-color;
   text-decoration: underline;
   cursor: pointer;
 
diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
index 3cabff0215..6f02dcf325 100644
--- a/webview/src/experiments/components/table/styles.module.scss
+++ b/webview/src/experiments/components/table/styles.module.scss
@@ -2,11 +2,11 @@
 /* stylelint-disable selector-max-class */
 // Variables
 
-@import '../../../shared/variables';
-@import '../../../shared/mixins';
+@use '../../../shared/variables';
+@use '../../../shared/mixins';
 
 $nested-row-padding: 1.35rem;
-$row-border: 1px solid $border-color;
+$row-border: 1px solid variables.$border-color;
 $edge-padding: 0.8rem;
 $cell-padding: 0.5rem;
 $workspace-row-edge-margin: $edge-padding - $cell-padding;
@@ -20,7 +20,7 @@ $badge-size: 0.85rem;
   left: 0;
   display: inline-block;
   position: absolute;
-  border: 2px solid $icon-color;
+  border: 2px solid variables.$icon-color;
   border-top: unset;
   border-left: unset;
   transition:
@@ -93,7 +93,7 @@ $badge-size: 0.85rem;
   width: 100%;
   height: 1px;
   display: block;
-  background-color: $header-border-color;
+  background-color: variables.$header-border-color;
 }
 
 %cellContentsBase {
@@ -106,13 +106,13 @@ $badge-size: 0.85rem;
 }
 
 %iconBox {
-  background-color: $checkbox-background;
-  border-radius: $checkbox-border-radius;
-  border: $checkbox-border-width solid $checkbox-border;
+  background-color: variables.$checkbox-background;
+  border-radius: variables.$checkbox-border-radius;
+  border: variables.$checkbox-border-width solid variables.$checkbox-border;
   cursor: pointer;
   display: flex;
-  height: $checkbox-size;
-  width: $checkbox-size;
+  height: variables.$checkbox-size;
+  width: variables.$checkbox-size;
 }
 
 // Concrete selectors
@@ -175,7 +175,7 @@ $badge-size: 0.85rem;
 
 .experimentsTable.withExpColumnShadow .experimentsTr > *:first-child {
   &::after {
-    box-shadow: 3px 0 3px $shadow;
+    box-shadow: 3px 0 3px variables.$shadow;
   }
 
   > div::after {
@@ -194,10 +194,10 @@ $badge-size: 0.85rem;
   width: 1.5rem;
   height: 1.5rem;
   cursor: pointer;
-  border-radius: $checkbox-border-radius;
+  border-radius: variables.$checkbox-border-radius;
 
   svg {
-    fill: $icon-color;
+    fill: variables.$icon-color;
   }
 
   &:disabled {
@@ -206,19 +206,19 @@ $badge-size: 0.85rem;
   }
 
   &:hover {
-    background-color: $hover-background-color;
+    background-color: variables.$hover-background-color;
   }
 }
 
 .onlyChanged {
-  background-color: $indicator-badge-background;
+  background-color: variables.$indicator-badge-background;
 
   svg {
-    fill: $indicator-badge-foreground;
+    fill: variables.$indicator-badge-foreground;
   }
 
   &:hover {
-    background-color: $indicator-badge-background !important;
+    background-color: variables.$indicator-badge-background !important;
     opacity: 0.8;
   }
 }
@@ -228,8 +228,8 @@ $badge-size: 0.85rem;
   bottom: 3px;
   right: -2px;
   font-weight: bold;
-  background-color: $indicator-badge-background;
-  color: $indicator-badge-foreground;
+  background-color: variables.$indicator-badge-background;
+  color: variables.$indicator-badge-foreground;
   border-radius: 100%;
   width: $badge-size;
   height: $badge-size;
@@ -261,7 +261,7 @@ $badge-size: 0.85rem;
 }
 
 .experimentsThead {
-  background-color: $bg-color;
+  background-color: variables.$bg-color;
   transition: 0.25s all;
   box-shadow: none;
   position: sticky;
@@ -272,12 +272,12 @@ $badge-size: 0.85rem;
 .experimentsTh {
   height: auto;
   font-size: 0.7rem;
-  background-color: $header-bg-color;
+  background-color: variables.$header-bg-color;
 
   &::before {
     @extend %cellBorderLeft;
 
-    background-color: $header-border-color;
+    background-color: variables.$header-border-color;
   }
 
   .cellContents {
@@ -290,7 +290,7 @@ $badge-size: 0.85rem;
     }
 
     span[draggable='true']:hover {
-      background-color: $hover-background-color;
+      background-color: variables.$hover-background-color;
     }
   }
 }
@@ -302,7 +302,7 @@ $badge-size: 0.85rem;
 }
 
 .headerCell {
-  color: $header-fg-color;
+  color: variables.$header-fg-color;
   text-align: center;
   font-weight: 400;
 
@@ -313,7 +313,7 @@ $badge-size: 0.85rem;
     left: 1px;
     width: 100%;
     height: 1px;
-    background-color: $header-border-color;
+    background-color: variables.$header-border-color;
   }
 
   &:first-child {
@@ -337,23 +337,23 @@ $badge-size: 0.85rem;
 .firstLevelHeaderCell {
   .paramHeaderCell,
   &.paramHeaderCell {
-    color: $params-color;
+    color: variables.$params-color;
   }
 
   .metricHeaderCell,
   &.metricHeaderCell {
-    color: $metrics-color;
+    color: variables.$metrics-color;
   }
 
   .depHeaderCell,
   &.depHeaderCell {
-    color: $deps-color;
+    color: variables.$deps-color;
   }
 }
 
 .dropTargetHeaderCell {
-  background: $header-dnd-drop-background;
-  outline: $header-dnd-outline dashed 2px;
+  background: variables.$header-dnd-drop-background;
+  outline: variables.$header-dnd-outline dashed 2px;
   outline-offset: -4px;
 
   .iconMenu ul[role='menu'] {
@@ -378,7 +378,7 @@ $badge-size: 0.85rem;
   padding-bottom: 3.5px;
 
   ul[role='menu'] {
-    background-color: $header-bg-color;
+    background-color: variables.$header-bg-color;
     padding-left: 2px;
     margin: 0 0 0 4px;
     border: none;
@@ -435,7 +435,7 @@ $badge-size: 0.85rem;
   svg {
     width: 16px;
     height: 16px;
-    fill: $accent-color;
+    fill: variables.$accent-color;
   }
 }
 
@@ -472,7 +472,7 @@ $badge-size: 0.85rem;
     left: 50%;
     width: 2px;
     height: 100%;
-    background-color: $header-resizer-color;
+    background-color: variables.$header-resizer-color;
     display: none;
   }
 
@@ -490,7 +490,7 @@ $badge-size: 0.85rem;
   &:hover {
     .experimentsTd:not(.experimentCell):hover::before,
     .experimentsTd:hover + .experimentsTd::before {
-      background-color: $border-color;
+      background-color: variables.$border-color;
     }
   }
 }
@@ -502,7 +502,7 @@ $badge-size: 0.85rem;
   z-index: 4;
 
   &.withShadow {
-    box-shadow: 0 5px 8px -2px $shadow;
+    box-shadow: 0 5px 8px -2px variables.$shadow;
 
     .experimentsTr {
       border-bottom: none;
@@ -525,11 +525,11 @@ $badge-size: 0.85rem;
 }
 
 .rowSelected {
-  border-color: $row-border-selected-color;
+  border-color: variables.$row-border-selected-color;
 
   &:hover {
     &::after {
-      box-shadow: inset 0 0 20px $shadow;
+      box-shadow: inset 0 0 20px variables.$shadow;
       content: '';
       top: 0;
       right: 0;
@@ -542,25 +542,25 @@ $badge-size: 0.85rem;
 
     .experimentsTd:not(.experimentCell):hover::before,
     .experimentsTd:hover + .experimentsTd::before {
-      background-color: $row-border-selected-color;
+      background-color: variables.$row-border-selected-color;
     }
   }
 }
 
 .lastRowGroup {
   & > .experimentsTr:last-child {
-    border-color: $row-bg-color;
+    border-color: variables.$row-bg-color;
 
     &.rowSelected {
-      border-color: $row-bg-selected-color;
+      border-color: variables.$row-bg-selected-color;
     }
   }
 
   .experimentGroup:last-child .experimentsTr:last-child {
-    border-color: $row-bg-color;
+    border-color: variables.$row-bg-color;
 
     &.rowSelected {
-      border-color: $row-bg-selected-color;
+      border-color: variables.$row-bg-selected-color;
     }
   }
 }
@@ -570,7 +570,7 @@ $badge-size: 0.85rem;
   font-size: 0.8rem;
   line-height: 2rem;
   align-items: center;
-  background-color: $row-bg-color;
+  background-color: variables.$row-bg-color;
 
   &:not(.experimentCell)::before {
     @extend %cellBorderLeft;
@@ -578,19 +578,19 @@ $badge-size: 0.85rem;
 
   .rowSelected & {
     &:not(.experimentCell) {
-      color: $row-fg-selected-color;
-      background-color: $row-bg-selected-color;
+      color: variables.$row-fg-selected-color;
+      background-color: variables.$row-bg-selected-color;
     }
 
     &.experimentCell::before {
-      background-color: $row-bg-selected-color;
+      background-color: variables.$row-bg-selected-color;
     }
   }
 
   .bodyRow:not(.rowSelected):hover & {
     &:not(.experimentCell),
     &.experimentCell::before {
-      background-color: $row-hover-background-color;
+      background-color: variables.$row-hover-background-color;
     }
   }
 
@@ -678,15 +678,15 @@ $badge-size: 0.85rem;
   cursor: pointer;
 
   svg {
-    fill: $icon-color;
+    fill: variables.$icon-color;
 
     .rowSelected & {
-      fill: $selected-icon-color;
+      fill: variables.$selected-icon-color;
     }
   }
 
   &[aria-checked='true'] svg {
-    fill: $row-action-star-checked;
+    fill: variables.$row-action-star-checked;
   }
 }
 
@@ -732,7 +732,7 @@ $badge-size: 0.85rem;
 }
 
 .queued {
-  color: $icon-color;
+  color: variables.$icon-color;
   display: flex;
   height: 16px;
   left: 2px;
@@ -761,7 +761,7 @@ $badge-size: 0.85rem;
   bottom: 2px;
 
   .rowSelected & {
-    border-color: $selected-icon-color;
+    border-color: variables.$selected-icon-color;
   }
 }
 
@@ -773,7 +773,7 @@ $badge-size: 0.85rem;
   bottom: 0;
 
   .rowSelected & {
-    border-color: $selected-icon-color;
+    border-color: variables.$selected-icon-color;
   }
 }
 
@@ -796,7 +796,7 @@ $badge-size: 0.85rem;
 }
 
 .experimentCellSecondaryName {
-  color: $meta-cell-color;
+  color: variables.$meta-cell-color;
   font-size: 0.75em;
   display: block;
 
@@ -896,7 +896,7 @@ $badge-size: 0.85rem;
   align-items: center;
 
   svg {
-    fill: $accent-color;
+    fill: variables.$accent-color;
     margin-right: 2px;
     min-width: 13px;
     min-height: 13px;
@@ -930,11 +930,11 @@ $badge-size: 0.85rem;
 
 .workspaceChangeText,
 .depChangeText {
-  color: $changed-color;
+  color: variables.$changed-color;
 }
 
 .errorText {
-  color: $error-color;
+  color: variables.$error-color;
 }
 
 // below table styles
@@ -951,6 +951,6 @@ $badge-size: 0.85rem;
 
   p {
     opacity: 0.6;
-    font-family: $font;
+    font-family: variables.$font;
   }
 }
diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
index 0045e20000..9cab16d4aa 100644
--- a/webview/src/plots/components/comparisonTable/styles.module.scss
+++ b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -1,18 +1,18 @@
-@import '../../../shared/variables';
+@use '../../../shared/variables';
 
 $gap: 4px;
 
 .comparisonTableHeader {
   position: relative;
   z-index: 2;
-  background-color: $bg-color;
+  background-color: variables.$bg-color;
 }
 
 .gripIcon {
   opacity: 0;
   position: absolute;
   z-index: 2;
-  fill: $fg-color;
+  fill: variables.$fg-color;
   left: 0;
   top: 0;
   padding: 5px;
@@ -24,8 +24,8 @@ $gap: 4px;
 
 .header {
   padding: 10px 5px;
-  color: $fg-color;
-  background-color: $fg-transparency-1;
+  color: variables.$fg-color;
+  background-color: variables.$fg-transparency-1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -57,9 +57,9 @@ $gap: 4px;
 
 .bullet {
   display: block;
-  width: $bullet-size;
-  height: $bullet-size;
-  border-radius: $bullet-size;
+  width: variables.$bullet-size;
+  height: variables.$bullet-size;
+  border-radius: variables.$bullet-size;
 }
 
 .pin {
@@ -75,7 +75,7 @@ $gap: 4px;
   cursor: pointer;
 
   path {
-    fill: $fg-color;
+    fill: variables.$fg-color;
   }
 }
 
@@ -91,14 +91,14 @@ $gap: 4px;
 .rowToggler {
   border: none;
   background: none;
-  color: $fg-color;
+  color: variables.$fg-color;
   text-align: left;
   display: flex;
   user-select: text;
   max-width: calc(100% - 20px);
 
   svg {
-    fill: $fg-color;
+    fill: variables.$fg-color;
     min-width: fit-content;
   }
 }
@@ -108,7 +108,7 @@ $gap: 4px;
   position: sticky;
   left: 0;
   z-index: 1;
-  background-color: $bg-color;
+  background-color: variables.$bg-color;
 
   &::before {
     content: '';
@@ -117,7 +117,7 @@ $gap: 4px;
     position: absolute;
     right: 0;
     top: 0;
-    background-color: $bg-color;
+    background-color: variables.$bg-color;
     z-index: 5;
   }
 
@@ -128,7 +128,7 @@ $gap: 4px;
     position: absolute;
     right: 0;
     top: 0;
-    background-color: $fg-transparency-4;
+    background-color: variables.$fg-transparency-4;
     z-index: 5;
   }
 }
@@ -186,19 +186,19 @@ $gap: 4px;
   height: 40px;
   align-items: center;
   justify-content: center;
-  color: $fg-color;
-  background-color: $bg-color;
-  box-shadow: inset 40px 40px $fg-transparency-1;
+  color: variables.$fg-color;
+  background-color: variables.$bg-color;
+  box-shadow: inset 40px 40px variables.$fg-transparency-1;
 }
 
 .experimentName {
-  color: $meta-cell-color;
+  color: variables.$meta-cell-color;
 }
 
 .dropTarget {
   width: 2px;
   height: 100%;
-  border-right: 2px dashed $accent-color;
+  border-right: 2px dashed variables.$accent-color;
 }
 
 .draggedColumn {
@@ -206,9 +206,9 @@ $gap: 4px;
 }
 
 .ghostElem {
-  background-color: $accent-color;
+  background-color: variables.$accent-color;
   opacity: 1;
-  color: $bg-color;
+  color: variables.$bg-color;
 }
 
 .copyButton {
diff --git a/webview/src/plots/components/emptyState/styles.module.scss b/webview/src/plots/components/emptyState/styles.module.scss
index 90e4463253..5c5547e73a 100644
--- a/webview/src/plots/components/emptyState/styles.module.scss
+++ b/webview/src/plots/components/emptyState/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../shared/variables';
+@use '../../../shared/variables';
 
 .emptyStateWrapper {
   display: flex;
@@ -15,7 +15,7 @@
   font-size: 0.8rem;
 
   svg {
-    fill: $accent-color;
+    fill: variables.$accent-color;
     vertical-align: text-bottom;
     margin-right: 4px;
   }
diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss
index 44fcaaca90..31d738c2c4 100644
--- a/webview/src/plots/components/ribbon/styles.module.scss
+++ b/webview/src/plots/components/ribbon/styles.module.scss
@@ -1,5 +1,5 @@
-@import '../../../shared/variables';
-@import '../../../shared/mixins';
+@use '../../../shared/variables';
+@use '../../../shared/mixins';
 
 .copyButton {
   display: none;
@@ -20,15 +20,15 @@
   }
 
   &.depsKey {
-    color: $deps-color;
+    color: variables.$deps-color;
   }
 
   &.metricsKey {
-    color: $metrics-color;
+    color: variables.$metrics-color;
   }
 
   &.paramsKey {
-    color: $params-color;
+    color: variables.$params-color;
   }
 
   svg {
@@ -52,13 +52,13 @@
 
 .tooltipTableDescription {
   margin: 4px 0 0 4px;
-  color: $description-color;
+  color: variables.$description-color;
   font-size: 0.75rem;
   max-width: 250px;
 
   .infoIcon {
     margin-right: 3px;
-    color: $fg-color;
+    color: variables.$fg-color;
     vertical-align: text-top;
     min-width: 14px;
     min-height: 14px;
@@ -77,27 +77,27 @@
   &.addTopBorder {
     margin: 1em 0;
     padding-top: 1em;
-    border-top: 1px solid $tooltip-border;
+    border-top: 1px solid variables.$tooltip-border;
   }
 }
 
 .addBottomBorder {
   padding-bottom: 1em;
-  border-bottom: 1px solid $tooltip-border;
+  border-bottom: 1px solid variables.$tooltip-border;
 }
 
 .block {
   border-left-style: solid;
   border-left-width: 3px;
-  background-color: $plot-block-bg-color;
-  color: $fg-color;
+  background-color: variables.$plot-block-bg-color;
+  color: variables.$fg-color;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.8125rem;
 
   svg {
-    fill: $fg-color;
+    fill: variables.$fg-color;
     display: block;
   }
 
@@ -110,7 +110,7 @@
     margin-left: -4px;
     height: 18px;
     width: 18px;
-    color: $error-color;
+    color: variables.$error-color;
     text-align: center;
   }
 
@@ -130,7 +130,7 @@
   background-color: transparent;
   border: none;
   text-align: left;
-  color: $fg-color;
+  color: variables.$fg-color;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -147,7 +147,7 @@
 }
 
 .subtitle {
-  color: $watermark-color;
+  color: variables.$watermark-color;
   font-size: 0.5625rem;
 }
 
@@ -162,7 +162,7 @@
   }
 
   :hover {
-    background-color: $row-bg-alt-color;
+    background-color: variables.$row-bg-alt-color;
   }
 }
 
@@ -171,12 +171,12 @@
   transition: box-shadow 0.25s;
   z-index: 100;
   top: 0;
-  background-color: $bg-color;
-  border-bottom: 1px solid $border-color;
+  background-color: variables.$bg-color;
+  border-bottom: 1px solid variables.$border-color;
   padding: 10px 15px;
 
   &.withShadow {
-    box-shadow: 0 5px 8px -2px $shadow;
+    box-shadow: 0 5px 8px -2px variables.$shadow;
   }
 }
 
@@ -205,9 +205,9 @@
 
 .errors {
   margin: 10px 0 0;
-  color: $error-color;
-  border-top: 1px solid $error-color;
-  border-bottom: 1px solid $error-color;
+  color: variables.$error-color;
+  border-top: 1px solid variables.$error-color;
+  border-bottom: 1px solid variables.$error-color;
   display: flex;
   width: 100%;
 }
diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
index f14e3fb077..86e0aa0fef 100644
--- a/webview/src/plots/components/styles.module.scss
+++ b/webview/src/plots/components/styles.module.scss
@@ -1,5 +1,5 @@
-@import '../../shared/variables';
-@import '../../shared/styles';
+@use '../../shared/variables';
+@use '../../shared/styles';
 
 $gap: 20px;
 
@@ -26,7 +26,7 @@ $gap: 20px;
 .plot {
   overflow: visible;
   position: relative;
-  background: $fg-transparency-1;
+  background: variables.$fg-transparency-1;
   border: none;
   padding-top: 5px;
 
@@ -64,7 +64,7 @@ $gap: 20px;
 .plotGripIcon {
   position: absolute;
   z-index: 2;
-  fill: $fg-color;
+  fill: variables.$fg-color;
   left: 0;
   top: 0;
   padding: 5px;
@@ -93,7 +93,7 @@ $gap: 20px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
-  background-color: $fg-color;
+  background-color: variables.$fg-color;
   position: absolute;
   top: 10px;
   right: 10px;
@@ -181,7 +181,7 @@ $gap: 20px;
 .dropTarget {
   height: auto;
   opacity: 0.5;
-  border: 3px dashed $accent-color;
+  border: 3px dashed variables.$accent-color;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -194,7 +194,7 @@ $gap: 20px;
 
 .dropIcon {
   border-radius: 100%;
-  border: 3px solid $accent-color;
+  border: 3px solid variables.$accent-color;
   padding: 20px;
 }
 
@@ -212,7 +212,7 @@ $gap: 20px;
   box-sizing: content-box;
 
   path {
-    fill: $accent-color;
+    fill: variables.$accent-color;
   }
 }
 
@@ -239,7 +239,7 @@ $gap: 20px;
 .errorsModal {
   width: 80vw;
   max-height: calc(80vh - 100px);
-  color: $error-color;
+  color: variables.$error-color;
 }
 
 .errorsModalTitle {
@@ -249,7 +249,7 @@ $gap: 20px;
 .errorsModalIcon {
   margin-right: 3px;
   vertical-align: text-bottom;
-  fill: $error-color;
+  fill: variables.$error-color;
 }
 
 .errorsModalPlot {
@@ -277,7 +277,7 @@ $gap: 20px;
   top: 0;
   display: flex;
   justify-content: end;
-  background-color: $bg-color;
+  background-color: variables.$bg-color;
   z-index: 3;
   justify-self: flex-end;
 }
@@ -302,7 +302,7 @@ $gap: 20px;
 .plotTooltipLabel {
   font-weight: bold;
   min-width: 50px;
-  color: $accent-color;
+  color: variables.$accent-color;
 }
 
 /* stylelint-disable selector-class-pattern -- 3rd party selectors */
@@ -311,9 +311,9 @@ $gap: 20px;
   position: absolute;
   bottom: 0;
   width: 100%;
-  box-shadow: inset 250px 250px $fg-transparency-1;
-  background-color: $bg-color;
-  color: $fg-color;
+  box-shadow: inset 250px 250px variables.$fg-transparency-1;
+  background-color: variables.$bg-color;
+  color: variables.$fg-color;
   padding: 10px;
   display: block;
   opacity: 0;
@@ -325,7 +325,7 @@ $gap: 20px;
   }
 
   input {
-    accent-color: $accent-color;
+    accent-color: variables.$accent-color;
     outline: none;
   }
 }
@@ -371,7 +371,7 @@ $gap: 20px;
 }
 
 .pathHighlight {
-  background-color: $fg-transparency-3;
+  background-color: variables.$fg-transparency-3;
 }
 
 :global(.ReactVirtualized__Grid__innerScrollContainer),
@@ -401,20 +401,20 @@ $gap: 20px;
 
 :global(.has-actions) {
   summary {
-    background: $fg-color !important;
+    background: variables.$fg-color !important;
   }
 }
 
 :global(.vega-actions) {
-  background: $fg-color !important;
+  background: variables.$fg-color !important;
 
   &::before,
   &::after {
-    border-bottom-color: $fg-color !important;
+    border-bottom-color: variables.$fg-color !important;
   }
 
   a:hover {
-    background-color: $bg-transparency-1 !important;
+    background-color: variables.$bg-transparency-1 !important;
   }
 }
 
diff --git a/webview/src/setup/components/dvc/styles.module.scss b/webview/src/setup/components/dvc/styles.module.scss
index a9b5e65b1f..1e10abe051 100644
--- a/webview/src/setup/components/dvc/styles.module.scss
+++ b/webview/src/setup/components/dvc/styles.module.scss
@@ -1,9 +1,9 @@
-@import '../../../shared/variables';
-@import '../../../shared/mixins';
+@use '../../../shared/variables';
+@use '../../../shared/mixins';
 
 .inlineWarningSvg {
   vertical-align: middle;
-  fill: $warn-color;
+  fill: variables.$warn-color;
   width: 16px;
   height: 16px;
 }
diff --git a/webview/src/setup/components/experiments/styles.module.scss b/webview/src/setup/components/experiments/styles.module.scss
index 6260a8d58e..46720ad91d 100644
--- a/webview/src/setup/components/experiments/styles.module.scss
+++ b/webview/src/setup/components/experiments/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../shared/variables';
+@use '../../../shared/variables';
 
 .dvcLiveExamples {
   margin-top: 20px;
@@ -12,7 +12,7 @@
 .otherFrameworks {
   white-space: pre-wrap;
   background-color: transparent !important;
-  color: $watermark-color;
+  color: variables.$watermark-color;
   font-family: sans-serif;
   letter-spacing: 0.04em;
   line-height: 1.6;
diff --git a/webview/src/setup/components/remotes/styles.module.scss b/webview/src/setup/components/remotes/styles.module.scss
index 186162dd55..e4b5ae85b5 100644
--- a/webview/src/setup/components/remotes/styles.module.scss
+++ b/webview/src/setup/components/remotes/styles.module.scss
@@ -1,5 +1,5 @@
-@import '../../../shared/variables';
-@import '../../../shared/mixins';
+@use '../../../shared/variables';
+@use '../../../shared/mixins';
 
 .remoteDetails {
   margin: 0 auto;
@@ -46,7 +46,7 @@
 .storageDetails {
   white-space: pre-wrap;
   background-color: transparent !important;
-  color: $watermark-color;
+  color: variables.$watermark-color;
   font-family: sans-serif;
   letter-spacing: 0.04em;
   line-height: 1.6;
@@ -56,11 +56,11 @@
 }
 
 .extensionIcon {
-  fill: $accent-color;
+  fill: variables.$accent-color;
   margin-bottom: -3px;
 }
 
 .warnIcon {
-  fill: $warn-color;
+  fill: variables.$warn-color;
   margin-bottom: -3px;
 }
diff --git a/webview/src/setup/components/shared/styles.module.scss b/webview/src/setup/components/shared/styles.module.scss
index abd780c708..320f2ceda0 100644
--- a/webview/src/setup/components/shared/styles.module.scss
+++ b/webview/src/setup/components/shared/styles.module.scss
@@ -1,5 +1,5 @@
-@import '../../../shared/variables';
-@import '../../../shared/mixins';
+@use '../../../shared/variables';
+@use '../../../shared/mixins';
 
 .codeBlock {
   text-align: left;
@@ -17,7 +17,7 @@
 }
 
 .infoIcon {
-  fill: $accent-color;
+  fill: variables.$accent-color;
   margin-bottom: -3px;
 }
 
diff --git a/webview/src/shared/components/copyButton/styles.module.scss b/webview/src/shared/components/copyButton/styles.module.scss
index fa921cc461..0938dafb7b 100644
--- a/webview/src/shared/components/copyButton/styles.module.scss
+++ b/webview/src/shared/components/copyButton/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../variables';
+@use '../../variables';
 
 .button {
   flex: 0 0 0.8em;
@@ -6,7 +6,7 @@
   display: none;
   border: none;
   background: none;
-  color: $fg-color;
+  color: variables.$fg-color;
   cursor: pointer;
   width: 0.8em;
   height: 0.8em;
diff --git a/webview/src/shared/components/emptyState/styles.module.scss b/webview/src/shared/components/emptyState/styles.module.scss
index bb180e53c9..a0f55dabdf 100644
--- a/webview/src/shared/components/emptyState/styles.module.scss
+++ b/webview/src/shared/components/emptyState/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../variables';
+@use '../../variables';
 
 .emptyScreen {
   width: 100vw;
@@ -15,7 +15,7 @@
   text-align: center;
   opacity: 0.8;
   letter-spacing: 0.04em;
-  color: $watermark-color;
+  color: variables.$watermark-color;
   font-family: sans-serif;
   max-width: 600px;
   line-height: 1.6;
diff --git a/webview/src/shared/components/errorIcon/styles.module.scss b/webview/src/shared/components/errorIcon/styles.module.scss
index e2cfa855bc..43cdbbb251 100644
--- a/webview/src/shared/components/errorIcon/styles.module.scss
+++ b/webview/src/shared/components/errorIcon/styles.module.scss
@@ -1,6 +1,6 @@
-@import '../../variables';
-@import '../../styles';
+@use '../../variables';
+@use '../../styles';
 
 .errorIcon {
-  color: $error-color;
+  color: variables.$error-color;
 }
diff --git a/webview/src/shared/components/iconMenu/styles.module.scss b/webview/src/shared/components/iconMenu/styles.module.scss
index 8a67f555eb..d007abbb9a 100644
--- a/webview/src/shared/components/iconMenu/styles.module.scss
+++ b/webview/src/shared/components/iconMenu/styles.module.scss
@@ -1,12 +1,12 @@
-@import '../../variables';
+@use '../../variables';
 
 .menu {
   list-style: none;
   display: flex;
   padding: 2px;
-  border: 1px solid $fg-transparency-5;
+  border: 1px solid variables.$fg-transparency-5;
   width: max-content;
-  background-color: $bg-color;
+  background-color: variables.$bg-color;
   margin: 0;
 }
 
@@ -20,10 +20,10 @@
   border: none;
   padding: 0;
   background: inherit;
-  color: $fg-color;
+  color: variables.$fg-color;
 
   &:hover {
-    background-color: $fg-transparency-1;
+    background-color: variables.$fg-transparency-1;
   }
 
   &.clickable {
diff --git a/webview/src/shared/components/messageBand/styles.module.scss b/webview/src/shared/components/messageBand/styles.module.scss
index e51e493e34..95e9941360 100644
--- a/webview/src/shared/components/messageBand/styles.module.scss
+++ b/webview/src/shared/components/messageBand/styles.module.scss
@@ -1,8 +1,8 @@
-@import '../../variables';
+@use '../../variables';
 
 .messageBand {
   width: 100%;
-  background-color: $bg-color;
+  background-color: variables.$bg-color;
   height: max-content;
   padding: 20px;
   display: flex;
@@ -13,6 +13,6 @@
 
 .messageBandIcon {
   min-width: 50px;
-  fill: $accent-color;
+  fill: variables.$accent-color;
   margin-right: 20px;
 }
diff --git a/webview/src/shared/components/messagesMenu/styles.module.scss b/webview/src/shared/components/messagesMenu/styles.module.scss
index 506fdbbbab..c5939c12e7 100644
--- a/webview/src/shared/components/messagesMenu/styles.module.scss
+++ b/webview/src/shared/components/messagesMenu/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../shared/variables';
+@use '../../../shared/variables';
 
 .messagesMenu {
   padding: 4px 0;
@@ -11,7 +11,7 @@
   padding: 2px 6px;
 
   &:hover {
-    background-color: $hover-background-color;
+    background-color: variables.$hover-background-color;
   }
 
   &:last-child {
@@ -26,11 +26,11 @@
 }
 
 .disabledItem {
-  opacity: $disabled-opacity;
+  opacity: variables.$disabled-opacity;
   cursor: default;
 
   &:hover {
-    background-color: $bg-color;
+    background-color: variables.$bg-color;
   }
 }
 
diff --git a/webview/src/shared/components/modal/styles.module.scss b/webview/src/shared/components/modal/styles.module.scss
index f3a3a0b8dc..2974f86b00 100644
--- a/webview/src/shared/components/modal/styles.module.scss
+++ b/webview/src/shared/components/modal/styles.module.scss
@@ -1,7 +1,7 @@
-@import '../../variables';
+@use '../../variables';
 
 .backdrop {
-  background-color: $bg-transparency-5;
+  background-color: variables.$bg-transparency-5;
   position: fixed;
   top: 0;
   left: 0;
@@ -15,12 +15,12 @@
 }
 
 .modal {
-  background: $bg-color;
+  background: variables.$bg-color;
   position: relative;
 }
 
 .modalContent {
-  background: $fg-transparency-1;
+  background: variables.$fg-transparency-1;
   padding: 2rem;
 }
 
@@ -32,6 +32,6 @@
   background: none;
 
   svg {
-    fill: $fg-color;
+    fill: variables.$fg-color;
   }
 }
diff --git a/webview/src/shared/components/sectionContainer/styles.module.scss b/webview/src/shared/components/sectionContainer/styles.module.scss
index 382953370e..b1005c0fe8 100644
--- a/webview/src/shared/components/sectionContainer/styles.module.scss
+++ b/webview/src/shared/components/sectionContainer/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../variables';
+@use '../../variables';
 
 $gap: 20px;
 
@@ -11,7 +11,7 @@ $gap: 20px;
 
   summary {
     list-style-type: none;
-    font-family: $font;
+    font-family: variables.$font;
     padding: 14px 10px;
     font-weight: bold;
     font-size: 1.25rem;
@@ -20,7 +20,7 @@ $gap: 20px;
     width: 100%;
     cursor: pointer;
     position: sticky;
-    background-color: $bg-color;
+    background-color: variables.$bg-color;
     z-index: 3;
     gap: $gap;
   }
@@ -39,7 +39,7 @@ $gap: 20px;
 }
 
 .detailsIcon {
-  fill: $fg-color;
+  fill: variables.$fg-color;
   margin-bottom: -4px;
 }
 
@@ -51,19 +51,19 @@ $gap: 20px;
 }
 
 .indicatorIcon {
-  fill: $accent-color;
+  fill: variables.$accent-color;
 }
 
 .completedIcon {
-  fill: $passed-color;
+  fill: variables.$passed-color;
 }
 
 .errorIcon {
-  fill: $error-color;
+  fill: variables.$error-color;
 }
 
 .warningIcon {
-  fill: $warn-color;
+  fill: variables.$warn-color;
 }
 
 .infoTooltip {
diff --git a/webview/src/shared/components/selectMenu/styles.module.scss b/webview/src/shared/components/selectMenu/styles.module.scss
index bd1910d34c..2a23ed1622 100644
--- a/webview/src/shared/components/selectMenu/styles.module.scss
+++ b/webview/src/shared/components/selectMenu/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../../shared/variables';
+@use '../../../shared/variables';
 
 .item {
   display: flex;
@@ -7,7 +7,7 @@
   padding: 2px 6px;
 
   &:hover {
-    background-color: $hover-background-color;
+    background-color: variables.$hover-background-color;
   }
 }
 
diff --git a/webview/src/shared/components/slider/styles.module.scss b/webview/src/shared/components/slider/styles.module.scss
index 3b2dc4e91d..d499e3bc97 100644
--- a/webview/src/shared/components/slider/styles.module.scss
+++ b/webview/src/shared/components/slider/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../variables';
+@use '../../variables';
 
 .wrapper {
   display: flex;
@@ -8,10 +8,10 @@
 .label {
   font-size: 0.6rem;
   margin-right: 10px;
-  color: $fg-color;
+  color: variables.$fg-color;
 }
 
 .slider {
-  accent-color: $accent-color;
+  accent-color: variables.$accent-color;
   outline: none !important;
 }
diff --git a/webview/src/shared/components/tooltip/styles.module.scss b/webview/src/shared/components/tooltip/styles.module.scss
index f224c03b37..ca414428e6 100644
--- a/webview/src/shared/components/tooltip/styles.module.scss
+++ b/webview/src/shared/components/tooltip/styles.module.scss
@@ -1,16 +1,16 @@
-@import '../../variables';
+@use '../../variables';
 
 /* stylelint-disable selector-class-pattern -- third party selectors */
 :global(.tippy-box) {
-  filter: $tooltip-drop-shadow;
-  font-family: $font;
+  filter: variables.$tooltip-drop-shadow;
+  font-family: variables.$font;
   max-width: max-content;
   font-size: 0.8rem;
   transition: none;
   white-space: nowrap;
 
   & > :global(.tippy-arrow) {
-    color: $tooltip-background;
+    color: variables.$tooltip-background;
     z-index: 1;
 
     ::before {
@@ -19,17 +19,17 @@
   }
 
   & > :global(.tippy-content) {
-    color: $tooltip-foreground;
+    color: variables.$tooltip-foreground;
     white-space: nowrap;
     padding: 0;
-    background-color: $tooltip-background;
+    background-color: variables.$tooltip-background;
     z-index: 2;
   }
 }
 /* stylelint-enable selector-class-pattern */
 
 .tooltipContent {
-  border: 1px solid $tooltip-border;
+  border: 1px solid variables.$tooltip-border;
   white-space: pre-wrap;
   padding: 5px;
   display: flex;
diff --git a/webview/src/shared/mixins.scss b/webview/src/shared/mixins.scss
index 74ed3b72dd..867b69479a 100644
--- a/webview/src/shared/mixins.scss
+++ b/webview/src/shared/mixins.scss
@@ -1,9 +1,11 @@
+@use 'variables';
+
 %link {
-  color: $link-fg-color;
+  color: variables.$link-fg-color;
 
   &:hover,
   &:active {
-    color: $link-active-color;
+    color: variables.$link-active-color;
   }
 }
 
diff --git a/webview/src/shared/styles.scss b/webview/src/shared/styles.scss
index 81aba45a6d..960c455642 100644
--- a/webview/src/shared/styles.scss
+++ b/webview/src/shared/styles.scss
@@ -1,5 +1,5 @@
-@import './variables';
-@import './mixins';
+@use 'variables';
+@use 'mixins';
 
 * {
   box-sizing: border-box;
@@ -23,9 +23,9 @@ body {
   border: 0;
   margin: 0;
   padding: 0;
-  background-color: $bg-color;
-  color: $fg-color;
-  font-family: $editor-font;
+  background-color: variables.$bg-color;
+  color: variables.$fg-color;
+  font-family: variables.$editor-font;
 }
 
 .modalOpen {
diff --git a/webview/src/stories/components/styles.module.scss b/webview/src/stories/components/styles.module.scss
index 7580245d23..1f1e0163c6 100644
--- a/webview/src/stories/components/styles.module.scss
+++ b/webview/src/stories/components/styles.module.scss
@@ -1,4 +1,4 @@
-@import '../../shared/variables';
+@use '../../shared/variables';
 
 .iconsWrapper {
   display: flex;
@@ -9,7 +9,7 @@
 
 .iconWrapper {
   padding: 5px;
-  border: 1px solid $fg-color;
+  border: 1px solid variables.$fg-color;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@
   height: 80px;
 
   svg {
-    fill: $fg-color;
+    fill: variables.$fg-color;
     width: 20px;
     height: 20px;
   }