fix(sass): update @import to @use

docs/.vitepress/theme/index.scss

@@ -1,8 +1,8 @@
 // Import predefined CSS variable overrides of the default VitePress theme
 // https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
-@import "./variables";
-@import "./overrides";
-@import "./percy";
+@use "./variables";
+@use "./overrides";
+@use "./percy";
 
 html,
 body {

docs/guide/usage.md

@@ -109,7 +109,7 @@ export default defineComponent({
 
 <style>
 /* Import Kongponents styles here, or in the <script> tag */
-@import '@kong/kongponents/dist/style.css';
+@use '@kong/kongponents/dist/style.css';
 /* If using Vue-CLI and webpack, you can likely use
 this path instead: import '~@kong/kongponents/dist/style.css' */
 </style>

docs/vite.config.ts

@@ -29,9 +29,8 @@ export default defineConfig({
         // Inject the @kong/design-tokens SCSS variables, kongponents variables and mixins to make them available for all components.
         // This is not needed in host applications.
         additionalData: `
-          @import "@kong/design-tokens/tokens/scss/variables";
-          @import "@/styles/vars";
-          @import "@/styles/mixins";
+          @use "@/styles/vars";
+          @use "@/styles/mixins";
         `,
       },
     },

package.json

@@ -111,7 +111,7 @@
     "postcss-html": "^1.7.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.79.5",
+    "sass": "^1.80.2",
     "semantic-release": "^24.1.2",
     "shx": "^0.3.4",
     "stylelint": "^16.9.0",

src/styles/_mixins.scss

@@ -1,11 +1,11 @@
-@import "@/styles/mixins/inputs";
-@import "@/styles/mixins/label";
-@import "@/styles/mixins/input-select";
-@import "@/styles/mixins/cards";
-@import "@/styles/mixins/badges";
-@import "@/styles/mixins/loaders";
-@import "@/styles/mixins/buttons";
-@import "@/styles/mixins/tables";
+@use "@/styles/mixins/inputs";
+@use "@/styles/mixins/label";
+@use "@/styles/mixins/input-select";
+@use "@/styles/mixins/cards";
+@use "@/styles/mixins/badges";
+@use "@/styles/mixins/loaders";
+@use "@/styles/mixins/buttons";
+@use "@/styles/mixins/tables";
 
 /* Common mixins for all components */
 

src/styles/_transitions.scss

@@ -1,4 +1,4 @@
-@import "vars";
+@use "vars";
 
 /*
 Kongponents Transitions 

src/styles/_vars.scss

@@ -1,3 +1,6 @@
+// Add to the global Sass namespace
+@use "@kong/design-tokens/tokens/scss/variables";
+
 /*
 Shared SCSS variables that are used in Kongponents styles but are not exported.
 Each must start with `$kongponents` prefix to avoid conflicts with other libraries.

src/styles/mixins/_inputs.scss

@@ -1,7 +1,7 @@
 /* This file imports mixins with styles used in all types of inputs and contains some shared mixins */
 
-@import "@/styles/mixins/input-text";
-@import "@/styles/mixins/input-radio-checkbox";
+@use "@/styles/mixins/input-text";
+@use "@/styles/mixins/input-radio-checkbox";
 
 /* Common mixins */
 

src/styles/styles.scss

@@ -1,7 +1,8 @@
 /*! KONGPONENTS_STYLES */
 // Do not remove the comment above - allows other apps to identify the style block
 
-@import "transitions";
+@use "vars";
+@use "transitions";
 
 :root {
   body {

vite.config.ts

@@ -35,9 +35,8 @@ export default defineConfig({
         // Inject the @kong/design-tokens SCSS variables, kongponents variables and mixins to make them available for all components.
         // This is not needed in host applications.
         additionalData: `
-          @import "@kong/design-tokens/tokens/scss/variables";
-          @import "@/styles/vars";
-          @import "@/styles/mixins";
+          @use "@/styles/vars";
+          @use "@/styles/mixins";
         `,
       },
     },