From 7fa378462442693dff395737150a42e0862825b7 Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Wed, 23 Oct 2024 22:42:27 +0800
Subject: [PATCH] chore(deps): update to sass@1.80 and switch to @use (#1734)

* chore(deps): update to sass@1.80 and switch to @use

* fix(*): base -> globals
---
 package.json                                  |   2 +-
 .../sandbox/pages/BarChartDemo.vue            |   2 +-
 .../sandbox/pages/ChartDemoSimple.vue         |   2 +-
 .../sandbox/pages/DonutChartDemo.vue          |   2 +-
 .../sandbox/pages/TimeSeriesChartDemo.vue     |   2 +-
 .../src/components/AnalyticsChart.vue         |   4 +-
 .../src/components/SimpleChart.vue            |   4 +-
 .../src/components/TopNTable.vue              |   3 +-
 .../components/chart-plugins/ChartLegend.vue  |   3 +-
 .../components/chart-plugins/ChartTooltip.vue |   2 +-
 .../components/chart-types/DoughnutChart.vue  |   4 +-
 .../src/components/chart-types/GaugeChart.vue |   4 +-
 .../chart-types/StackedBarChart.vue           |   4 +-
 .../chart-types/TimeSeriesChart.vue           |   4 +-
 .../analytics-chart/src/styles/base.scss      |   1 -
 .../src/styles/chart-shell.scss               |   2 +
 .../analytics-chart/src/styles/chart.scss     |   2 +
 .../analytics-chart/src/styles/globals.scss   |   2 +
 .../analytics-chart/src/styles/mixins.scss    |   2 +
 .../src/components/MetricCardContainer.vue    |   2 +-
 .../display/MetricCardLoadingSkeleton.vue     |   3 +-
 .../src/components/display/MetricsCard.vue    |   4 +-
 .../src/styles/_mixins.scss                   |   2 +
 .../src/styles/base.scss                      |   1 -
 .../src/styles/globals.scss                   |   2 +
 .../src/components/MetricCardContainer.vue    |   2 +-
 .../display/MetricCardLoadingSkeleton.vue     |   3 +-
 .../src/components/display/MetricsCard.vue    |   5 +-
 .../metric-cards/src/styles/base.scss         |   1 -
 .../metric-cards/src/styles/globals.scss      |   2 +
 .../app-layout/src/components/AppLayout.vue   |   4 +-
 .../src/components/errors/AppError.vue        |   2 +-
 .../src/components/navbar/AppNavbar.vue       |   2 +-
 .../src/components/sidebar/AppSidebar.vue     |   4 +-
 .../src/components/sidebar/SidebarItem.vue    |   4 +-
 .../src/components/sidebar/SidebarToggle.vue  |   2 +-
 .../core/app-layout/src/styles/_base.scss     |   2 +
 .../app-layout/src/styles/_variables.scss     |   5 +-
 .../app-layout/src/styles/app-layout.scss     |   3 +-
 .../src/styles/variables/_app-navbar.scss     |   2 +
 .../src/styles/variables/_app-sidebar.scss    |   2 +
 .../src/components/ConsumerCredentialList.vue |   1 -
 .../src/components/RouteForm.vue              |   2 +-
 .../RouteFormDestinationsFields.vue           |   2 +-
 .../src/components/RouteFormHeadersFields.vue |   2 +-
 .../src/components/RouteFormHostsFields.vue   |   2 +-
 .../src/components/RouteFormMethodsFields.vue |   2 +-
 .../src/components/RouteFormPathsFields.vue   |   2 +-
 .../src/components/RouteFormSnisFields.vue    |   2 +-
 .../src/components/RouteFormSourcesFields.vue |   2 +-
 .../entities-routes/src/styles/_mixins.scss   |   2 +
 pnpm-lock.yaml                                | 280 +++++++++---------
 vite.config.shared.ts                         |   2 +-
 53 files changed, 217 insertions(+), 194 deletions(-)
 delete mode 100644 packages/analytics/analytics-chart/src/styles/base.scss
 create mode 100644 packages/analytics/analytics-chart/src/styles/globals.scss
 delete mode 100644 packages/analytics/analytics-metric-provider/src/styles/base.scss
 create mode 100644 packages/analytics/analytics-metric-provider/src/styles/globals.scss
 delete mode 100644 packages/analytics/metric-cards/src/styles/base.scss
 create mode 100644 packages/analytics/metric-cards/src/styles/globals.scss

diff --git a/package.json b/package.json
index b4457c66d5..cb87bbbc3a 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "postcss-html": "^1.7.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.79.5",
+    "sass": "^1.80.3",
     "stylelint": "^16.9.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-scss": "^14.1.0",
diff --git a/packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue
index 340edc7e95..c80a9660bb 100644
--- a/packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue
+++ b/packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue
@@ -392,7 +392,7 @@ watch(multiDimensionToggle, () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 
 .chart-container {
   height: 500px;
diff --git a/packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue b/packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue
index fa89df2c3a..4da3224fc4 100644
--- a/packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue
+++ b/packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue
@@ -503,5 +503,5 @@ watch(isGaugeChart, () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 </style>
diff --git a/packages/analytics/analytics-chart/sandbox/pages/DonutChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/DonutChartDemo.vue
index 5c5d5863a2..98989dc4d3 100644
--- a/packages/analytics/analytics-chart/sandbox/pages/DonutChartDemo.vue
+++ b/packages/analytics/analytics-chart/sandbox/pages/DonutChartDemo.vue
@@ -276,5 +276,5 @@ const onMetricSelected = (item: any) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 </style>
diff --git a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
index 36b7733eed..e50e982a9b 100644
--- a/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
+++ b/packages/analytics/analytics-chart/sandbox/pages/TimeSeriesChartDemo.vue
@@ -418,5 +418,5 @@ watch(multiDimensionToggle, () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/charts-sandbox';
+@use "../styles/charts-sandbox";
 </style>
diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
index 03dcd64c95..b1b3dba506 100644
--- a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
+++ b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -367,8 +367,8 @@ provide('legendPosition', toRef(props, 'legendPosition'))
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/base';
-@import '../styles/chart-shell';
+@use "../styles/globals" as *;
+@use "../styles/chart-shell";
 
 .analytics-chart-shell {
   height: 100%;
diff --git a/packages/analytics/analytics-chart/src/components/SimpleChart.vue b/packages/analytics/analytics-chart/src/components/SimpleChart.vue
index 453a70e0f5..8151f58fd9 100644
--- a/packages/analytics/analytics-chart/src/components/SimpleChart.vue
+++ b/packages/analytics/analytics-chart/src/components/SimpleChart.vue
@@ -109,8 +109,8 @@ const hasValidChartData = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/base';
-@import '../styles/chart-shell';
+@use "../styles/globals" as *;
+@use "../styles/chart-shell";
 
 .simple-chart-shell {
   margin: var(--kui-space-0, $kui-space-0);
diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
index 67617a9ea4..f1a1afba81 100644
--- a/packages/analytics/analytics-chart/src/components/TopNTable.vue
+++ b/packages/analytics/analytics-chart/src/components/TopNTable.vue
@@ -230,7 +230,8 @@ const getValue = (record: AnalyticsExploreRecord): string => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/base';
+@use "../styles/globals" as *;
+
 .kong-ui-public-top-n-table {
   border: none !important;
   height: 100%;
diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
index 8ded5e7eb3..80257131ec 100644
--- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -232,7 +232,8 @@ const positionToClass = (position: `${ChartLegendPosition}`) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
+@use "../../styles/globals" as *;
+
 .legend-container {
   display: flex;
   margin: $kui-space-30 0 0 0;
diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
index 5b679ace5b..8ef419021b 100644
--- a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
@@ -201,7 +201,7 @@ function handleMouseUp() {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
+@use "../../styles/globals" as *;
 
 .locked {
   cursor: move;
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue
index b60720f491..759653aaf6 100644
--- a/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue
@@ -171,6 +171,6 @@ const tooltipDimensions = ({ width, height }: { width: number, height: number })
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 </style>
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue
index 8f027645e0..6f10176eaa 100644
--- a/packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue
@@ -156,8 +156,8 @@ const showMetricSmall = computed(() => props.metricDisplay === ChartMetricDispla
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 
 .chart-parent {
   height: auto;
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
index a4f079441c..beab916d2b 100644
--- a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
@@ -562,8 +562,8 @@ const handleChartClick = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 
 .chart-container {
   overflow: auto;
diff --git a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
index bd006173de..fe2003cf19 100644
--- a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
+++ b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
@@ -284,6 +284,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/base';
-@import '../../styles/chart';
+@use "../../styles/globals" as *;
+@use "../../styles/chart";
 </style>
diff --git a/packages/analytics/analytics-chart/src/styles/base.scss b/packages/analytics/analytics-chart/src/styles/base.scss
deleted file mode 100644
index b5e5990e9b..0000000000
--- a/packages/analytics/analytics-chart/src/styles/base.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./mixins";
diff --git a/packages/analytics/analytics-chart/src/styles/chart-shell.scss b/packages/analytics/analytics-chart/src/styles/chart-shell.scss
index 53743d5181..abeccb9898 100644
--- a/packages/analytics/analytics-chart/src/styles/chart-shell.scss
+++ b/packages/analytics/analytics-chart/src/styles/chart-shell.scss
@@ -1,3 +1,5 @@
+@use "./globals" as *;
+
 // Styles common to both AnalticsChart and SimpleChart
 .analytics-chart-shell,
 .simple-chart-shell {
diff --git a/packages/analytics/analytics-chart/src/styles/chart.scss b/packages/analytics/analytics-chart/src/styles/chart.scss
index 0005f0b9ce..bca6423236 100644
--- a/packages/analytics/analytics-chart/src/styles/chart.scss
+++ b/packages/analytics/analytics-chart/src/styles/chart.scss
@@ -1,3 +1,5 @@
+@use "./globals" as *;
+
 $legend-height: $kui-space-110;
 
 .chart-parent {
diff --git a/packages/analytics/analytics-chart/src/styles/globals.scss b/packages/analytics/analytics-chart/src/styles/globals.scss
new file mode 100644
index 0000000000..0f5081801c
--- /dev/null
+++ b/packages/analytics/analytics-chart/src/styles/globals.scss
@@ -0,0 +1,2 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
diff --git a/packages/analytics/analytics-chart/src/styles/mixins.scss b/packages/analytics/analytics-chart/src/styles/mixins.scss
index 8d4c192fe0..bf306dec41 100644
--- a/packages/analytics/analytics-chart/src/styles/mixins.scss
+++ b/packages/analytics/analytics-chart/src/styles/mixins.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 @mixin scrollbarBase($size: var(--kui-space, 40, $kui-space-40)) {
   -ms-overflow-style: thin;
   scrollbar-color: var(--kui-color-background-disabled, $kui-color-background-disabled) var(--kui-color-background-transparent, $kui-color-background-transparent);
diff --git a/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue b/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
index d1e3246fad..60ac9e3c13 100644
--- a/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
+++ b/packages/analytics/analytics-metric-provider/src/components/MetricCardContainer.vue
@@ -130,7 +130,7 @@ const formatCardValues = (card: MetricCardDef): MetricCardDisplayValue => {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/base";
+@use "../styles/globals" as *;
 
 .kong-ui-public-metric-card-container {
   background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
diff --git a/packages/analytics/analytics-metric-provider/src/components/display/MetricCardLoadingSkeleton.vue b/packages/analytics/analytics-metric-provider/src/components/display/MetricCardLoadingSkeleton.vue
index c842511602..f4eaa1dca3 100644
--- a/packages/analytics/analytics-metric-provider/src/components/display/MetricCardLoadingSkeleton.vue
+++ b/packages/analytics/analytics-metric-provider/src/components/display/MetricCardLoadingSkeleton.vue
@@ -10,7 +10,8 @@
 </template>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
+
 .loading-tabs {
   display: flex;
   flex-direction: column;
diff --git a/packages/analytics/analytics-metric-provider/src/components/display/MetricsCard.vue b/packages/analytics/analytics-metric-provider/src/components/display/MetricsCard.vue
index 8d98c7ced2..8d8c9fbefa 100644
--- a/packages/analytics/analytics-metric-provider/src/components/display/MetricsCard.vue
+++ b/packages/analytics/analytics-metric-provider/src/components/display/MetricsCard.vue
@@ -216,7 +216,7 @@ const hideTitleIcon = [MetricCardSize.Small].includes(props.cardSize)
 </script>
 
 <style lang="scss">
-@import "../../styles/base";
+@use "../../styles/globals" as *;
 
 .metricscard-tooltip {
   @include pointer-events-all;
@@ -233,7 +233,7 @@ const hideTitleIcon = [MetricCardSize.Small].includes(props.cardSize)
 </style>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
 
 .metricscard {
   display: flex;
diff --git a/packages/analytics/analytics-metric-provider/src/styles/_mixins.scss b/packages/analytics/analytics-metric-provider/src/styles/_mixins.scss
index d24fedf0d4..2bce0bfdba 100644
--- a/packages/analytics/analytics-metric-provider/src/styles/_mixins.scss
+++ b/packages/analytics/analytics-metric-provider/src/styles/_mixins.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 @mixin pointer-events-none {
   pointer-events: none;
 }
diff --git a/packages/analytics/analytics-metric-provider/src/styles/base.scss b/packages/analytics/analytics-metric-provider/src/styles/base.scss
deleted file mode 100644
index b5e5990e9b..0000000000
--- a/packages/analytics/analytics-metric-provider/src/styles/base.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./mixins";
diff --git a/packages/analytics/analytics-metric-provider/src/styles/globals.scss b/packages/analytics/analytics-metric-provider/src/styles/globals.scss
new file mode 100644
index 0000000000..0f5081801c
--- /dev/null
+++ b/packages/analytics/analytics-metric-provider/src/styles/globals.scss
@@ -0,0 +1,2 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
diff --git a/packages/analytics/metric-cards/src/components/MetricCardContainer.vue b/packages/analytics/metric-cards/src/components/MetricCardContainer.vue
index 0e7b1445de..a788dbbfd9 100644
--- a/packages/analytics/metric-cards/src/components/MetricCardContainer.vue
+++ b/packages/analytics/metric-cards/src/components/MetricCardContainer.vue
@@ -130,7 +130,7 @@ const formatCardValues = (card: MetricCardDef): MetricCardDisplayValue => {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/base";
+@use "../styles/globals" as *;
 
 .kong-ui-public-metric-card-container {
   background-color: var(--kong-ui-metric-card-background, transparent);
diff --git a/packages/analytics/metric-cards/src/components/display/MetricCardLoadingSkeleton.vue b/packages/analytics/metric-cards/src/components/display/MetricCardLoadingSkeleton.vue
index c842511602..f4eaa1dca3 100644
--- a/packages/analytics/metric-cards/src/components/display/MetricCardLoadingSkeleton.vue
+++ b/packages/analytics/metric-cards/src/components/display/MetricCardLoadingSkeleton.vue
@@ -10,7 +10,8 @@
 </template>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
+
 .loading-tabs {
   display: flex;
   flex-direction: column;
diff --git a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
index 65cc14d14b..dc3a8b4239 100644
--- a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
+++ b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
@@ -224,7 +224,7 @@ const hideTitleIcon = [MetricCardSize.Small, MetricCardSize.LargeCompact].includ
 </script>
 
 <style lang="scss">
-@import "../../styles/base";
+@use "../../styles/globals" as *;
 
 .metricscard-tooltip {
   @include pointer-events-all;
@@ -241,7 +241,8 @@ const hideTitleIcon = [MetricCardSize.Small, MetricCardSize.LargeCompact].includ
 </style>
 
 <style lang="scss" scoped>
-@import "../../styles/base";
+@use "../../styles/globals" as *;
+
 $row-gap-size: 12px;
 
 .metricscard {
diff --git a/packages/analytics/metric-cards/src/styles/base.scss b/packages/analytics/metric-cards/src/styles/base.scss
deleted file mode 100644
index b5e5990e9b..0000000000
--- a/packages/analytics/metric-cards/src/styles/base.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./mixins";
diff --git a/packages/analytics/metric-cards/src/styles/globals.scss b/packages/analytics/metric-cards/src/styles/globals.scss
new file mode 100644
index 0000000000..0f5081801c
--- /dev/null
+++ b/packages/analytics/metric-cards/src/styles/globals.scss
@@ -0,0 +1,2 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
diff --git a/packages/core/app-layout/src/components/AppLayout.vue b/packages/core/app-layout/src/components/AppLayout.vue
index 1d781a84f8..62e9249886 100644
--- a/packages/core/app-layout/src/components/AppLayout.vue
+++ b/packages/core/app-layout/src/components/AppLayout.vue
@@ -292,11 +292,11 @@ onBeforeUnmount(() => {
 // Leave unscoped
 // Importing all styles just for this entry component.
 // Any other component in this package should only import the `_variables.scss` file.
-@import "../styles/app-layout";
+@use "../styles/app-layout";
 </style>
 
 <style lang="scss" scoped>
-@import "../styles/variables";
+@use "../styles/variables" as *;
 
 .kong-ui-app-layout {
   background: $kui-color-background-inverse;
diff --git a/packages/core/app-layout/src/components/errors/AppError.vue b/packages/core/app-layout/src/components/errors/AppError.vue
index 3ab431d8b9..13908c0224 100644
--- a/packages/core/app-layout/src/components/errors/AppError.vue
+++ b/packages/core/app-layout/src/components/errors/AppError.vue
@@ -18,7 +18,7 @@ import BananaSplit from '../icons/BananaSplit.vue'
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .kong-ui-app-error {
   align-items: center;
diff --git a/packages/core/app-layout/src/components/navbar/AppNavbar.vue b/packages/core/app-layout/src/components/navbar/AppNavbar.vue
index e47d15c7f5..10682d9e8c 100644
--- a/packages/core/app-layout/src/components/navbar/AppNavbar.vue
+++ b/packages/core/app-layout/src/components/navbar/AppNavbar.vue
@@ -70,7 +70,7 @@ const headerStyles = computed(() => ({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .kong-ui-app-navbar {
   background: var(--kong-ui-app-navbar-background, $kui-color-background-inverse);
diff --git a/packages/core/app-layout/src/components/sidebar/AppSidebar.vue b/packages/core/app-layout/src/components/sidebar/AppSidebar.vue
index 784eaf03a5..fd4d31f4fe 100644
--- a/packages/core/app-layout/src/components/sidebar/AppSidebar.vue
+++ b/packages/core/app-layout/src/components/sidebar/AppSidebar.vue
@@ -364,7 +364,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .kong-ui-app-sidebar {
   background: $kui-color-background-inverse;
@@ -574,7 +574,7 @@ onBeforeUnmount(() => {
 </style>
 
 <style lang="scss">
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 // Scope with wrapper class intead of using `scoped` so these styles will apply to child components
 .kong-ui-app-sidebar {
diff --git a/packages/core/app-layout/src/components/sidebar/SidebarItem.vue b/packages/core/app-layout/src/components/sidebar/SidebarItem.vue
index ca49e8fcf9..c7cf78f367 100644
--- a/packages/core/app-layout/src/components/sidebar/SidebarItem.vue
+++ b/packages/core/app-layout/src/components/sidebar/SidebarItem.vue
@@ -139,7 +139,7 @@ const navigate = (event: Event, item: SidebarPrimaryItem | SidebarSecondaryItem,
 </script>
 
 <style lang="scss">
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 // Scope with wrapper class intead of using `scoped` so these styles will apply to child components
 .kong-ui-app-sidebar {
@@ -241,7 +241,7 @@ const navigate = (event: Event, item: SidebarPrimaryItem | SidebarSecondaryItem,
 </style>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 // Primary-level nav item
 .sidebar-item-primary {
diff --git a/packages/core/app-layout/src/components/sidebar/SidebarToggle.vue b/packages/core/app-layout/src/components/sidebar/SidebarToggle.vue
index b83a540e34..21e9303546 100644
--- a/packages/core/app-layout/src/components/sidebar/SidebarToggle.vue
+++ b/packages/core/app-layout/src/components/sidebar/SidebarToggle.vue
@@ -38,7 +38,7 @@ watch(() => props.active, (active) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables";
+@use "../../styles/variables" as *;
 
 .sidebar-menu-toggle {
   border-radius: $kui-border-radius-20;
diff --git a/packages/core/app-layout/src/styles/_base.scss b/packages/core/app-layout/src/styles/_base.scss
index eb560cf04f..9d76269246 100644
--- a/packages/core/app-layout/src/styles/_base.scss
+++ b/packages/core/app-layout/src/styles/_base.scss
@@ -1,3 +1,5 @@
+@use "./variables" as *;
+
 .kong-ui-app-layout-html,
 .kong-ui-app-layout-body,
 .kong-ui-app-sidebar,
diff --git a/packages/core/app-layout/src/styles/_variables.scss b/packages/core/app-layout/src/styles/_variables.scss
index 028927b1e8..04bda34037 100644
--- a/packages/core/app-layout/src/styles/_variables.scss
+++ b/packages/core/app-layout/src/styles/_variables.scss
@@ -1,2 +1,3 @@
-@import "./variables/app-navbar";
-@import "./variables/app-sidebar";
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./variables/app-navbar";
+@forward "./variables/app-sidebar";
diff --git a/packages/core/app-layout/src/styles/app-layout.scss b/packages/core/app-layout/src/styles/app-layout.scss
index 461146c5d1..a1cc550c7f 100644
--- a/packages/core/app-layout/src/styles/app-layout.scss
+++ b/packages/core/app-layout/src/styles/app-layout.scss
@@ -1,2 +1 @@
-@import "./variables";
-@import "./base";
+@use "./base";
diff --git a/packages/core/app-layout/src/styles/variables/_app-navbar.scss b/packages/core/app-layout/src/styles/variables/_app-navbar.scss
index bffe18b23b..4ef2d2dc78 100644
--- a/packages/core/app-layout/src/styles/variables/_app-navbar.scss
+++ b/packages/core/app-layout/src/styles/variables/_app-navbar.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 // AppNavbar
 $navbar-height: 60px;
 $header-item-gap: $kui-space-60;
diff --git a/packages/core/app-layout/src/styles/variables/_app-sidebar.scss b/packages/core/app-layout/src/styles/variables/_app-sidebar.scss
index e069cfd8f1..c2c946ad3b 100644
--- a/packages/core/app-layout/src/styles/variables/_app-sidebar.scss
+++ b/packages/core/app-layout/src/styles/variables/_app-sidebar.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 $sidebar-width: 240px; // token set here to standardize
 $sidebar-header-spacing: $kui-space-40; // token set here to standardize
 $sidebar-item-font-size: $kui-font-size-30; // token set here to standardize
diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
index 935ecc10fa..659dfad664 100644
--- a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
+++ b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -408,7 +408,6 @@ const deleteModalError = ref<string>('')
 const buildDeleteUrl = useDeleteUrlBuilder(props.config, fetcherBaseUrl.value)
 
 const deleteModelEntityType = computed<EntityTypes>(() => {
-  // @ts-ignore
   return EntityTypes[props.config.plugin]
 })
 
diff --git a/packages/entities/entities-routes/src/components/RouteForm.vue b/packages/entities/entities-routes/src/components/RouteForm.vue
index 93e9098093..ddd1ad5ba1 100644
--- a/packages/entities/entities-routes/src/components/RouteForm.vue
+++ b/packages/entities/entities-routes/src/components/RouteForm.vue
@@ -1344,7 +1344,7 @@ defineExpose({ saveFormData, getPayload })
 </style>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .kong-ui-entities-route-form {
   width: 100%;
diff --git a/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue b/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue
index b7d7b68c15..9aa094dd9f 100644
--- a/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue
@@ -74,7 +74,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue b/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue
index 20ca4c0159..30882688b0 100644
--- a/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue
@@ -71,7 +71,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue b/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue
index 0f9ea963d4..9f0c72b02d 100644
--- a/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue
@@ -65,7 +65,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
index 5b57e03c75..2c17169180 100644
--- a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
@@ -126,7 +126,7 @@ watch(customMethodsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue b/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue
index 2aa93fe939..11c6207109 100644
--- a/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue
@@ -62,7 +62,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue b/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue
index 8f0daa969f..5fba0a75ff 100644
--- a/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue
@@ -65,7 +65,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue b/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue
index 0bf70eb4dd..d33f0376a4 100644
--- a/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue
@@ -74,7 +74,7 @@ watch(fieldsValue, (value) => {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/mixins';
+@use "../styles/mixins" as *;
 
 .routing-rule {
   @include routing-rule;
diff --git a/packages/entities/entities-routes/src/styles/_mixins.scss b/packages/entities/entities-routes/src/styles/_mixins.scss
index addd1a1704..2ad678c8f4 100644
--- a/packages/entities/entities-routes/src/styles/_mixins.scss
+++ b/packages/entities/entities-routes/src/styles/_mixins.scss
@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 @mixin hr() {
   border: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d783ef597..7921635ccc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,10 +55,10 @@ importers:
         version: 10.0.0
       '@vitejs/plugin-vue':
         specifier: ^5.1.4
-        version: 5.1.4(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
+        version: 5.1.4(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.0.1
-        version: 4.0.1(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
+        version: 4.0.1(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
       '@vitest/ui':
         specifier: ^2.1.2
         version: 2.1.3(vitest@2.1.3)
@@ -114,8 +114,8 @@ importers:
         specifier: ^5.12.0
         version: 5.12.0(rollup@4.22.4)
       sass:
-        specifier: ^1.79.5
-        version: 1.79.5
+        specifier: ^1.80.3
+        version: 1.80.3
       stylelint:
         specifier: ^16.9.0
         version: 16.9.0(typescript@5.6.3)
@@ -154,16 +154,16 @@ importers:
         version: 10.0.0
       vite:
         specifier: ^5.4.8
-        version: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+        version: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
       vite-plugin-externals:
         specifier: ^0.6.2
-        version: 0.6.2(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+        version: 0.6.2(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
       vite-plugin-vue-devtools:
         specifier: ^7.4.6
-        version: 7.4.6(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
+        version: 7.4.6(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
       vitest:
         specifier: ^2.1.2
-        version: 2.1.3(@types/node@18.19.57)(@vitest/ui@2.1.3)(jsdom@25.0.1)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+        version: 2.1.3(@types/node@18.19.57)(@vitest/ui@2.1.3)(jsdom@25.0.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
       vue:
         specifier: ^3.5.11
         version: 3.5.12(typescript@5.6.3)
@@ -581,10 +581,10 @@ importers:
         version: 1.1.0(monaco-editor@0.52.0)
       vite-plugin-top-level-await:
         specifier: ^1.4.4
-        version: 1.4.4(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+        version: 1.4.4(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
       vite-plugin-wasm:
         specifier: ^3.3.0
-        version: 3.3.0(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+        version: 3.3.0(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
       vue:
         specifier: ^3.5.11
         version: 3.5.12(typescript@5.6.3)
@@ -1105,7 +1105,7 @@ importers:
         version: 1.26.4
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.0.1
-        version: 4.0.1(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
+        version: 4.0.1(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
       vue:
         specifier: ^3.5.11
         version: 3.5.12(typescript@5.6.3)
@@ -1136,7 +1136,7 @@ importers:
         version: 9.12.1(axios@1.7.7)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
       '@modyfi/vite-plugin-yaml':
         specifier: ^1.1.0
-        version: 1.1.0(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+        version: 1.1.0(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
       '@types/lodash.clonedeep':
         specifier: ^4.5.9
         version: 4.5.9
@@ -8088,133 +8088,133 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass-embedded-android-arm64@1.79.5:
-    resolution: {integrity: sha512-pq1RJTENkRmEUMLiVuSGYwuLk8zXovWzrjQxlWZTF/Jn5F7Ypi/3v5huMmgJF5n+etsxjio1PN1idaQ5tPLBmg==}
+  sass-embedded-android-arm64@1.80.3:
+    resolution: {integrity: sha512-uaEKdi+PaFc1V87vj2eCUB8B2ThNvEYYu9Qs5sCtx1atEQDtvp/smHYlXOVrg2M4+g2YASkDBQewyk+auZtG0g==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [android]
 
-  sass-embedded-android-arm@1.79.5:
-    resolution: {integrity: sha512-gYtpQAE2uNFa5IBKBIzUq5ETDS6gnVRmhP5j+N5JGrOThYaGPcG4KrjlU9R3BfCmc7zP5WvlHFZsxSz+2JRT2w==}
+  sass-embedded-android-arm@1.80.3:
+    resolution: {integrity: sha512-i87crav7sfShzY7AyUneXvs4SWdJ93QlYIpo/2OQPTJV5MjJF8wUp0o9NT8Oo6sUJ26kfgsb64FwqQh1wO5uBg==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [android]
 
-  sass-embedded-android-ia32@1.79.5:
-    resolution: {integrity: sha512-CgJZjLxYRkgjTP/76WumLlF7+1aW0LA+DSEJhkVaCxe5avndRCmPrNcX0PrtYSDvUgeQDvY7xF+fT9QXN1+NgQ==}
+  sass-embedded-android-ia32@1.80.3:
+    resolution: {integrity: sha512-XCa4Se7vqWuV5tFLZuYWidPLUCeK7n1AgugircJl/9QPThCGZ2mSRF0Ipj3lv+Qw4GG9kkhCqJIrksTGbSFypw==}
     engines: {node: '>=14.0.0'}
     cpu: [ia32]
     os: [android]
 
-  sass-embedded-android-riscv64@1.79.5:
-    resolution: {integrity: sha512-OLbdmDSM/eOjO01PUYbS54BQOCM/HHHHWk/4M8HHdxwF3ojy5eqQaA63R1YQ3IJvLEE7dnudofOXmL01B5+yvQ==}
+  sass-embedded-android-riscv64@1.80.3:
+    resolution: {integrity: sha512-Dn3hYh5rchfivnPrHoff2pWutuFYJRddzEXcjfb0JhgF7JmTA/6Dxaym0pqVpS1RmYDiAYnmoX5OeFtEkdVytA==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [android]
 
-  sass-embedded-android-x64@1.79.5:
-    resolution: {integrity: sha512-UbXxk/rdR3aVBkB7Fh/eAUL7oUADWgQrYpLe9Xu5A0gmthw0/zo/pu7kweBSrbgHnPfWIt/uxwmW4eEAmqqZWQ==}
+  sass-embedded-android-x64@1.80.3:
+    resolution: {integrity: sha512-QWOTHKPznYJnrP3HrlFYnAQOZ/c2am4ctK1cFIMtjQNGaFra8z94LZSQzAd6eeu6mITKwQbJuff36RpICZpgHA==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [android]
 
-  sass-embedded-darwin-arm64@1.79.5:
-    resolution: {integrity: sha512-qeEl9XhYetZSY1j4nqvh3hB8tfYOAGsOQyVOCaxyX1bubMRSGPvPNIyftm14QzK7EDrE/K/0+FwCvflarOV4NQ==}
+  sass-embedded-darwin-arm64@1.80.3:
+    resolution: {integrity: sha512-NqJXHzZGqVOarr36X5MIv0UCQHYVhOFXGe7kDhNqMQCiNApkVydseB5TM1C2lVaiWy2JaseRD/dUNS/o2ICKXw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  sass-embedded-darwin-x64@1.79.5:
-    resolution: {integrity: sha512-y4pvkYCQhgruxlncub/2j+cZSmlpsZX9Rp1aTRIKvlNagqFStYzFZ6kX3CErlfCEAMYwRVEhP8z/OOoDqnjaZA==}
+  sass-embedded-darwin-x64@1.80.3:
+    resolution: {integrity: sha512-6dmNn+oNxXE5uGThfAsHgz7Jg1oDhXHHQyPAnIIaMOM5dXv0D/nLmrlFbFajK0HtbzGaTVBTE6wkJwjASuP0Uw==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  sass-embedded-linux-arm64@1.79.5:
-    resolution: {integrity: sha512-kiUbrLiNAA7vOe6kpdukRhCad1u7ebwhB0ZE63+IgF5HFZ/Qo6GkhHIrVM9AfeLxUT3N6Z4BNtgdcRa9na4Pwg==}
+  sass-embedded-linux-arm64@1.80.3:
+    resolution: {integrity: sha512-a9IILen4I6oFFb5qMHOiFqIAoztPuvJ6VHNaFbktP8SUvH4FX63ZutR/qKisN9DoudzSXMZijv/aG/bTh0Kccw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  sass-embedded-linux-arm@1.79.5:
-    resolution: {integrity: sha512-rX6qAR8pE1pevYhGzbCpGFexdH4z6QMnw3IeiCNmkpJ4zMXNEN336xl6SZN0xaPiGuNDhUFcq0wgSq3RDKS5vQ==}
+  sass-embedded-linux-arm@1.80.3:
+    resolution: {integrity: sha512-nZ7Y8gZgr+/fYrbsX3L8BfIafWXGVBcc0gKLoujad+axlFGv1MetO17S3vzrOQ1wuhjvDLVxceA/jtcta1qxoA==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [linux]
 
-  sass-embedded-linux-ia32@1.79.5:
-    resolution: {integrity: sha512-12pj3fBV0+VAX/RI6uYFxi/MoUoihRKP7iVpo9MaT/m+EtvN6mYsDpi/T4pTq2dKQYljoaFq8Rb6tR+FinS1zg==}
+  sass-embedded-linux-ia32@1.80.3:
+    resolution: {integrity: sha512-yKy4N0L9WfGokpBMHOhxzaS3jyzrHUg1+5Idi6J88onwxfpEhqOgdMcoqgOqvryMPrmKN7kW5d3iNpUYOniPnw==}
     engines: {node: '>=14.0.0'}
     cpu: [ia32]
     os: [linux]
 
-  sass-embedded-linux-musl-arm64@1.79.5:
-    resolution: {integrity: sha512-Qg1HuQ+ebz3wfPT7xty2G8BpDLXdyfMk7WqKd+X1DlFEcY/kcNapwMVFXS2fCYTTR3gcbIZ4p7eUiQySlkj93A==}
+  sass-embedded-linux-musl-arm64@1.80.3:
+    resolution: {integrity: sha512-mw4BPe42wlAwg6vgmGkg+MDDyXZBexvAWC+QigtfMjTVHuSAB527UVWhIyv4jAkKLp71mPowsXXsfa4UHzyBaA==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  sass-embedded-linux-musl-arm@1.79.5:
-    resolution: {integrity: sha512-EHFrbTgRymEFTf3JnjHzC24PO0WHFjLUEWUJqSuWKZw0+BCL7120MvYIrfkYymPp5UYk+STIjj+Fd9dYSWBrAg==}
+  sass-embedded-linux-musl-arm@1.80.3:
+    resolution: {integrity: sha512-yB7iSoS/phNHKFsZRW0rTRwoCTtOBELG/UYpIa2qATWZsDASSjdBitGsKS3nEliweveuGIVlUqG2kUKaq9M39g==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [linux]
 
-  sass-embedded-linux-musl-ia32@1.79.5:
-    resolution: {integrity: sha512-2qdsGIcdCnpsw8Ijuq8uk4RifxV/lTd1mqjrfge7AfFBtQIExbxZoYBtbSrcY63ONa+UWEf9Z1p6rZ3QySKWlg==}
+  sass-embedded-linux-musl-ia32@1.80.3:
+    resolution: {integrity: sha512-eyg5L9IFisCYYMXEZ/56X8k8wdhpfK06/j9MFAINE9U4C5NxQXrVWmMTEqgyfpmca8hziBlvbRrjdquteyXWfw==}
     engines: {node: '>=14.0.0'}
     cpu: [ia32]
     os: [linux]
 
-  sass-embedded-linux-musl-riscv64@1.79.5:
-    resolution: {integrity: sha512-wrc6s8YQt95koSkaLoP5HtvAAKxTPWqYZVxnoqp2bHgkKWlr4ymJll9vMcdU3//VxTgJbuH83U5ajzNCtHd0NQ==}
+  sass-embedded-linux-musl-riscv64@1.80.3:
+    resolution: {integrity: sha512-0VThiW7Gwo5UNgKyETYID6F2prHvOCH8fQQKM0sS/JSbTu1poTwD35yEptVxBpiTvyWwxI7K5Cbn0gtxobaqzA==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
 
-  sass-embedded-linux-musl-x64@1.79.5:
-    resolution: {integrity: sha512-1J6JrGpVp07GsBEzEGj/9u6UkVUuga2U7kpfkQxIdYOLmXmXmni6zNx89VehaP7X5OSscwJc/Zufh++6VcRQHw==}
+  sass-embedded-linux-musl-x64@1.80.3:
+    resolution: {integrity: sha512-ALSKlhTQdNS0cayyaXD8huNd+DRjWgCjDqyjvwSgemfLL+wtmVCO8h9rGu1MCwR8GHP6ceZCT2fBmjfcGHk0DQ==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
 
-  sass-embedded-linux-riscv64@1.79.5:
-    resolution: {integrity: sha512-G45UKRAUgvxXhLROowTgVmyIVyGtRZoCMVH1vPi0EG5SePy43AkhjQVaUb6Ol6lfRRNpQqBFKw3UabxaMCM0Ow==}
+  sass-embedded-linux-riscv64@1.80.3:
+    resolution: {integrity: sha512-/1JvuQi137BNO7iTvNNraGYEt9mh3ch44cabJBTxLn3IZV5vNblENI+Hrj9J8/VWIsJumwPQGZSUrMbZcgB0tg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
 
-  sass-embedded-linux-x64@1.79.5:
-    resolution: {integrity: sha512-EOk6pULzxM9b5B8uuuZbQXqfg2BQheAovQeYAw4ueHikaFoESOfaA8OG4kl0v1m5v5tKqAHOjy7xFhtpbEpqEw==}
+  sass-embedded-linux-x64@1.80.3:
+    resolution: {integrity: sha512-ISQUnl9oFA0PFPtgOpgotfKQ8guUBIYcTpkHEF9lQ4PyFIxkXppk5CwQ8l0VQcQaKhOD2HQAucoqM51U7FABqA==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
 
-  sass-embedded-win32-arm64@1.79.5:
-    resolution: {integrity: sha512-KdkJOmJSe5lhR4Kxn522GbZo4jRUnQ+V4JQSaIbyxKndBpD81NGPYhDs0ikpJciqrwbmiBxVD5Qqeim6B1gdxA==}
+  sass-embedded-win32-arm64@1.80.3:
+    resolution: {integrity: sha512-RFT/OsWHVagPYa/9v+KfVM99QgzwzwnT2maapRfulEH39v0uPGOIFNXmnhaN3E5gNLIjIn3CTnR9KjTC145E8Q==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  sass-embedded-win32-ia32@1.79.5:
-    resolution: {integrity: sha512-1YX4TVw6j3eqxRyPK3t45V5WSyAzql6EgKIEtjPQ0+ByRyqLRuHXlotHPX6KOcc0rA3LMUHmdskN1o08sRIDhA==}
+  sass-embedded-win32-ia32@1.80.3:
+    resolution: {integrity: sha512-Is0eeX+UlWW7yPfDqc2Z2n9ql2rkA1uDaAkbHWWx5APc8CKYtds1w4B3Tyoy6lHnopEifgzgsnp6QSyOHHzPBg==}
     engines: {node: '>=14.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  sass-embedded-win32-x64@1.79.5:
-    resolution: {integrity: sha512-8Tj9hBpOd6e+j23uTDecFb1ezQhvjQ+jvgKdVg9VlvwKUWmEStnHKA0x1uIQTThIM3dLCsYe63b/wX43gP8tBA==}
+  sass-embedded-win32-x64@1.80.3:
+    resolution: {integrity: sha512-wehVA0atPloc6NKof/ctpW0agM+k7kiBLIpQs3/mi9FAlmTjxNnvntBPZIbl8n7AAExiLEir+x/LHC0yGhTfkg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [win32]
 
-  sass-embedded@1.79.5:
-    resolution: {integrity: sha512-QFdalnjGFkbNvb6/uQGmP4OIN+GQ5/R77eu0PsXduDB1YP5JW5DSWFVDAyK6l6C54P+3J3eXkjuPYC0mcwX+AA==}
+  sass-embedded@1.80.3:
+    resolution: {integrity: sha512-aTxTl4ToSAWg7ILFgAe+kMenj+zNlwHmHK/ZNPrOM8+HTef1Q6zuxolptYLijmHdZHKSMOkWYHgo5MMN6+GIyg==}
     engines: {node: '>=16.0.0'}
     hasBin: true
 
-  sass@1.79.5:
-    resolution: {integrity: sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==}
+  sass@1.80.3:
+    resolution: {integrity: sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -10899,12 +10899,12 @@ snapshots:
     dependencies:
       langium: 3.0.0
 
-  '@modyfi/vite-plugin-yaml@1.1.0(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))':
+  '@modyfi/vite-plugin-yaml@1.1.0(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
       js-yaml: 4.1.0
       tosource: 2.0.0-alpha.3
-      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
     transitivePeerDependencies:
       - rollup
 
@@ -12299,29 +12299,29 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
-      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
       vue: 3.5.12(typescript@5.6.3)
 
   '@vitest/expect@2.1.3':
@@ -12331,13 +12331,13 @@ snapshots:
       chai: 5.1.1
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.3(@vitest/spy@2.1.3)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))':
+  '@vitest/mocker@2.1.3(@vitest/spy@2.1.3)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))':
     dependencies:
       '@vitest/spy': 2.1.3
       estree-walker: 3.0.3
       magic-string: 0.30.11
     optionalDependencies:
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
 
   '@vitest/pretty-format@2.1.3':
     dependencies:
@@ -12367,7 +12367,7 @@ snapshots:
       sirv: 2.0.4
       tinyglobby: 0.2.6
       tinyrainbow: 1.2.0
-      vitest: 2.1.3(@types/node@18.19.57)(@vitest/ui@2.1.3)(jsdom@25.0.1)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vitest: 2.1.3(@types/node@18.19.57)(@vitest/ui@2.1.3)(jsdom@25.0.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
 
   '@vitest/utils@2.1.3':
     dependencies:
@@ -12545,14 +12545,14 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.4.6(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vue/devtools-core@7.4.6(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@vue/devtools-kit': 7.4.6
       '@vue/devtools-shared': 7.4.6
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
-      vite-hot-client: 0.2.3(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+      vite-hot-client: 0.2.3(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - vite
@@ -18124,67 +18124,67 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass-embedded-android-arm64@1.79.5:
+  sass-embedded-android-arm64@1.80.3:
     optional: true
 
-  sass-embedded-android-arm@1.79.5:
+  sass-embedded-android-arm@1.80.3:
     optional: true
 
-  sass-embedded-android-ia32@1.79.5:
+  sass-embedded-android-ia32@1.80.3:
     optional: true
 
-  sass-embedded-android-riscv64@1.79.5:
+  sass-embedded-android-riscv64@1.80.3:
     optional: true
 
-  sass-embedded-android-x64@1.79.5:
+  sass-embedded-android-x64@1.80.3:
     optional: true
 
-  sass-embedded-darwin-arm64@1.79.5:
+  sass-embedded-darwin-arm64@1.80.3:
     optional: true
 
-  sass-embedded-darwin-x64@1.79.5:
+  sass-embedded-darwin-x64@1.80.3:
     optional: true
 
-  sass-embedded-linux-arm64@1.79.5:
+  sass-embedded-linux-arm64@1.80.3:
     optional: true
 
-  sass-embedded-linux-arm@1.79.5:
+  sass-embedded-linux-arm@1.80.3:
     optional: true
 
-  sass-embedded-linux-ia32@1.79.5:
+  sass-embedded-linux-ia32@1.80.3:
     optional: true
 
-  sass-embedded-linux-musl-arm64@1.79.5:
+  sass-embedded-linux-musl-arm64@1.80.3:
     optional: true
 
-  sass-embedded-linux-musl-arm@1.79.5:
+  sass-embedded-linux-musl-arm@1.80.3:
     optional: true
 
-  sass-embedded-linux-musl-ia32@1.79.5:
+  sass-embedded-linux-musl-ia32@1.80.3:
     optional: true
 
-  sass-embedded-linux-musl-riscv64@1.79.5:
+  sass-embedded-linux-musl-riscv64@1.80.3:
     optional: true
 
-  sass-embedded-linux-musl-x64@1.79.5:
+  sass-embedded-linux-musl-x64@1.80.3:
     optional: true
 
-  sass-embedded-linux-riscv64@1.79.5:
+  sass-embedded-linux-riscv64@1.80.3:
     optional: true
 
-  sass-embedded-linux-x64@1.79.5:
+  sass-embedded-linux-x64@1.80.3:
     optional: true
 
-  sass-embedded-win32-arm64@1.79.5:
+  sass-embedded-win32-arm64@1.80.3:
     optional: true
 
-  sass-embedded-win32-ia32@1.79.5:
+  sass-embedded-win32-ia32@1.80.3:
     optional: true
 
-  sass-embedded-win32-x64@1.79.5:
+  sass-embedded-win32-x64@1.80.3:
     optional: true
 
-  sass-embedded@1.79.5:
+  sass-embedded@1.80.3:
     dependencies:
       '@bufbuild/protobuf': 2.2.0
       buffer-builder: 0.2.0
@@ -18194,29 +18194,29 @@ snapshots:
       supports-color: 8.1.1
       varint: 6.0.0
     optionalDependencies:
-      sass-embedded-android-arm: 1.79.5
-      sass-embedded-android-arm64: 1.79.5
-      sass-embedded-android-ia32: 1.79.5
-      sass-embedded-android-riscv64: 1.79.5
-      sass-embedded-android-x64: 1.79.5
-      sass-embedded-darwin-arm64: 1.79.5
-      sass-embedded-darwin-x64: 1.79.5
-      sass-embedded-linux-arm: 1.79.5
-      sass-embedded-linux-arm64: 1.79.5
-      sass-embedded-linux-ia32: 1.79.5
-      sass-embedded-linux-musl-arm: 1.79.5
-      sass-embedded-linux-musl-arm64: 1.79.5
-      sass-embedded-linux-musl-ia32: 1.79.5
-      sass-embedded-linux-musl-riscv64: 1.79.5
-      sass-embedded-linux-musl-x64: 1.79.5
-      sass-embedded-linux-riscv64: 1.79.5
-      sass-embedded-linux-x64: 1.79.5
-      sass-embedded-win32-arm64: 1.79.5
-      sass-embedded-win32-ia32: 1.79.5
-      sass-embedded-win32-x64: 1.79.5
+      sass-embedded-android-arm: 1.80.3
+      sass-embedded-android-arm64: 1.80.3
+      sass-embedded-android-ia32: 1.80.3
+      sass-embedded-android-riscv64: 1.80.3
+      sass-embedded-android-x64: 1.80.3
+      sass-embedded-darwin-arm64: 1.80.3
+      sass-embedded-darwin-x64: 1.80.3
+      sass-embedded-linux-arm: 1.80.3
+      sass-embedded-linux-arm64: 1.80.3
+      sass-embedded-linux-ia32: 1.80.3
+      sass-embedded-linux-musl-arm: 1.80.3
+      sass-embedded-linux-musl-arm64: 1.80.3
+      sass-embedded-linux-musl-ia32: 1.80.3
+      sass-embedded-linux-musl-riscv64: 1.80.3
+      sass-embedded-linux-musl-x64: 1.80.3
+      sass-embedded-linux-riscv64: 1.80.3
+      sass-embedded-linux-x64: 1.80.3
+      sass-embedded-win32-arm64: 1.80.3
+      sass-embedded-win32-ia32: 1.80.3
+      sass-embedded-win32-x64: 1.80.3
     optional: true
 
-  sass@1.79.5:
+  sass@1.80.3:
     dependencies:
       '@parcel/watcher': 2.4.1
       chokidar: 4.0.1
@@ -19452,16 +19452,16 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-hot-client@0.2.3(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)):
+  vite-hot-client@0.2.3(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)):
     dependencies:
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
 
-  vite-node@2.1.3(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0):
+  vite-node@2.1.3(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7(supports-color@8.1.1)
       pathe: 1.1.2
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -19473,15 +19473,15 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-externals@0.6.2(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)):
+  vite-plugin-externals@0.6.2(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)):
     dependencies:
       acorn: 8.8.2
       es-module-lexer: 0.4.1
       fs-extra: 10.1.0
       magic-string: 0.25.9
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
 
-  vite-plugin-inspect@0.8.7(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)):
+  vite-plugin-inspect@0.8.7(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.2(rollup@4.22.4)
@@ -19492,7 +19492,7 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.0
       sirv: 2.0.4
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -19501,33 +19501,33 @@ snapshots:
     dependencies:
       monaco-editor: 0.52.0
 
-  vite-plugin-top-level-await@1.4.4(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)):
+  vite-plugin-top-level-await@1.4.4(rollup@4.22.4)(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)):
     dependencies:
       '@rollup/plugin-virtual': 3.0.2(rollup@4.22.4)
       '@swc/core': 1.7.26
       uuid: 10.0.0
-      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
     transitivePeerDependencies:
       - '@swc/helpers'
       - rollup
 
-  vite-plugin-vue-devtools@7.4.6(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3)):
+  vite-plugin-vue-devtools@7.4.6(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3)):
     dependencies:
-      '@vue/devtools-core': 7.4.6(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
+      '@vue/devtools-core': 7.4.6(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))(vue@3.5.12(typescript@5.6.3))
       '@vue/devtools-kit': 7.4.6
       '@vue/devtools-shared': 7.4.6
       execa: 8.0.1
       sirv: 2.0.4
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
-      vite-plugin-inspect: 0.8.7(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
-      vite-plugin-vue-inspector: 5.2.0(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
+      vite-plugin-inspect: 0.8.7(rollup@4.22.4)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
+      vite-plugin-vue-inspector: 5.2.0(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.2.0(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)):
+  vite-plugin-vue-inspector@5.2.0(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)):
     dependencies:
       '@babel/core': 7.25.2
       '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
@@ -19538,15 +19538,15 @@ snapshots:
       '@vue/compiler-dom': 3.5.8
       kolorist: 1.8.0
       magic-string: 0.30.11
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-wasm@3.3.0(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)):
+  vite-plugin-wasm@3.3.0(vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)):
     dependencies:
-      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
 
-  vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0):
+  vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -19554,11 +19554,11 @@ snapshots:
     optionalDependencies:
       '@types/node': 18.19.57
       fsevents: 2.3.3
-      sass: 1.79.5
-      sass-embedded: 1.79.5
+      sass: 1.80.3
+      sass-embedded: 1.80.3
       terser: 5.26.0
 
-  vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0):
+  vite@5.4.8(@types/node@22.7.0)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -19566,14 +19566,14 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.7.0
       fsevents: 2.3.3
-      sass: 1.79.5
-      sass-embedded: 1.79.5
+      sass: 1.80.3
+      sass-embedded: 1.80.3
       terser: 5.26.0
 
-  vitest@2.1.3(@types/node@18.19.57)(@vitest/ui@2.1.3)(jsdom@25.0.1)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0):
+  vitest@2.1.3(@types/node@18.19.57)(@vitest/ui@2.1.3)(jsdom@25.0.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0):
     dependencies:
       '@vitest/expect': 2.1.3
-      '@vitest/mocker': 2.1.3(@vitest/spy@2.1.3)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0))
+      '@vitest/mocker': 2.1.3(@vitest/spy@2.1.3)(vite@5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0))
       '@vitest/pretty-format': 2.1.3
       '@vitest/runner': 2.1.3
       '@vitest/snapshot': 2.1.3
@@ -19588,8 +19588,8 @@ snapshots:
       tinyexec: 0.3.0
       tinypool: 1.0.1
       tinyrainbow: 1.2.0
-      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
-      vite-node: 2.1.3(@types/node@18.19.57)(sass-embedded@1.79.5)(sass@1.79.5)(terser@5.26.0)
+      vite: 5.4.8(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
+      vite-node: 2.1.3(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.26.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 18.19.57
diff --git a/vite.config.shared.ts b/vite.config.shared.ts
index 49448044f8..c6f910947f 100644
--- a/vite.config.shared.ts
+++ b/vite.config.shared.ts
@@ -59,7 +59,7 @@ export default defineConfig({
       scss: {
         api: 'modern',
         // Inject the @kong/design-tokens SCSS variables to make them available for all components.
-        additionalData: '@import "@kong/design-tokens/tokens/scss/variables";',
+        additionalData: '@use "@kong/design-tokens/tokens/scss/variables" as *;',
       },
     },
   },