fixed deprecated api when migrating to sass 3 (#549)

package-lock.json

@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@jambonz/ui-kit": "^0.0.21",
+        "@jambonz/ui-kit": "^0.0.22",
         "@stripe/react-stripe-js": "^2.6.2",
         "@stripe/stripe-js": "^3.2.0",
         "dayjs": "^1.11.10",
@@ -1033,9 +1033,10 @@
       "dev": true
     },
     "node_modules/@jambonz/ui-kit": {
-      "version": "0.0.21",
+      "version": "0.0.22",
-      "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.21.tgz",
+      "resolved": "https://registry.npmjs.org/@jambonz/ui-kit/-/ui-kit-0.0.22.tgz",
-      "integrity": "sha512-tv0sPhzxS/ctJbgUxLVNY+7IjJb3OAhqrdYpmeW3lmEHi7+sHxpO2oMjaVTPFCN4vYh+QzyzT4eLQjpEUDd6sA==",
+      "integrity": "sha512-kaO094hexaBojrfN94Tm4NvuVi2I04hFnjcCYqQNl+y2h/Q64Gg/bHuqFetG+nVf4/fDQHSny6rLggs84fM2nQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 14"
       },

package.json

@@ -41,7 +41,7 @@
     "deploy": "npm i && npm run build && npm run pm2"
   },
   "dependencies": {
-    "@jambonz/ui-kit": "^0.0.21",
+    "@jambonz/ui-kit": "^0.0.22",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^3.2.0",
     "dayjs": "^1.11.10",

src/components/forms/selector/styles.scss

@@ -25,7 +25,6 @@
   }
 
   select {
-    @include ui-mixins.m();
     appearance: none;
     padding: ui-vars.$px01 ui-vars.$px02;
     border-radius: ui-vars.$px01;
@@ -33,6 +32,7 @@
     background-color: ui-vars.$white;
     width: 100%;
     max-width: vars.$widthinput;
+    @include ui-mixins.m();
 
     &:focus {
       border-color: ui-vars.$dark;

src/components/forms/typeahead-selector/styles.scss

@@ -28,7 +28,6 @@
 }
 
 @mixin typeahead-input {
-  @include ui-mixins.m();
   appearance: none;
   padding: ui-vars.$px01 ui-vars.$px02;
   border-radius: ui-vars.$px01;
@@ -37,6 +36,7 @@
   max-width: vars.$widthtypeaheadinput;
   transition: border-color 0.2s ease;
   font-family: inherit;
+  @include ui-mixins.m();
 
   &:focus {
     border-color: ui-vars.$dark;
@@ -84,7 +84,6 @@
 }
 
 @mixin typeahead-dropdown {
-  @include ui-mixins.m();
   position: absolute;
   top: 100%;
   left: 0;
@@ -93,6 +92,7 @@
   border: 1px solid ui-vars.$dark;
   max-height: 200px;
   overflow-y: auto;
+  @include ui-mixins.m();
 }
 
 @mixin typeahead-option {
@@ -126,8 +126,8 @@
   width: 100%;
 
   input {
-    @include typeahead-input();
     width: 100%;
+    @include typeahead-input();
   }
 
   span {
@@ -135,8 +135,8 @@
   }
 
   .typeahead-dropdown {
-    @include typeahead-dropdown();
     z-index: 1000;
+    @include typeahead-dropdown();
   }
 
   .typeahead-option {
@@ -149,10 +149,10 @@
   width: auto;
 
   input {
-    @include typeahead-input();
     height: 34px;
     min-width: 370px;
     font-size: var(--mxs-size);
+    @include typeahead-input();
   }
 
   span {
@@ -160,13 +160,13 @@
   }
 
   .typeahead-dropdown {
-    @include typeahead-dropdown();
     width: 100%;
+    @include typeahead-dropdown();
   }
 
   .typeahead-option {
-    @include typeahead-option();
     font-size: var(--mxs-size);
+    @include typeahead-option();
   }
 
   .pointerevents {

src/containers/internal/views/recent-calls/jaeger/styles.scss

@@ -4,7 +4,6 @@
 
 .barGroup {
   border-radius: ui-vars.$px01;
-  @include mixins.code();
   text-align: left;
   padding: ui-vars.$px03;
   color: ui-vars.$pink;
@@ -13,6 +12,7 @@
   margin-top: ui-vars.$px02;
   overflow-x: auto;
   overflow-y: scroll;
+  @include mixins.code();
 
   @media (max-width: 600px) {
     padding: 15px;
@@ -72,7 +72,6 @@
 
 .spanDetailsWrapper {
   border-radius: ui-vars.$px01;
-  @include mixins.code();
   text-align: left;
   padding: ui-vars.$px01;
   background-color: ui-vars.$white;
@@ -82,6 +81,7 @@
   max-width: ui-vars.$width-tablet-2;
   max-height: 500px;
   overflow-y: scroll;
+  @include mixins.code();
 
   &__detailsWrapper {
     height: 100%;

src/styles/_forms.scss

@@ -7,12 +7,12 @@ input[type="text"],
 input[type="email"],
 input[type="number"],
 input[type="password"] {
-  @include ui-mixins.m();
   padding: ui-vars.$px01 ui-vars.$px02;
   border-radius: ui-vars.$px01;
   border: 2px solid ui-vars.$grey;
   background-color: ui-vars.$white;
   color: inherit;
+  @include ui-mixins.m();
 
   &:focus {
     border-color: ui-vars.$dark;
@@ -110,11 +110,11 @@ fieldset {
   }
 
   label {
-    @include ui-mixins.m();
-    @include ui-mixins.font-medium();
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    @include ui-mixins.font-medium();
+    @include ui-mixins.m();
 
     span {
       color: ui-vars.$jambonz;

src/styles/_grid.scss

@@ -21,10 +21,10 @@
   }
 
   &__row {
-    @include ui-mixins.m();
     display: grid;
     padding: ui-vars.$px03;
     align-items: center;
+    @include ui-mixins.m();
 
     @include mixins.small() {
       padding: ui-vars.$px02;

src/styles/_lists.scss

@@ -30,11 +30,11 @@
   }
 
   &__title {
-    @include ui-mixins.p();
     display: flex;
     align-items: center;
     grid-gap: ui-vars.$px02;
     color: ui-vars.$jambonz;
+    @include ui-mixins.p();
 
     + .item__meta {
       @include mixins.small() {

src/styles/index.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "./forms";
 // @use "./cards";
 @use "./lists";
@@ -68,7 +69,7 @@ details {
   &.ok {
     color: ui-vars.$teal;
     border: 2px solid ui-vars.$teal;
-    background-color: mix(ui-vars.$white, ui-vars.$teal, 95%);
+    background-color: color.mix(ui-vars.$white, ui-vars.$teal, 95%);
   }
 
   &.not-tested {
@@ -77,8 +78,8 @@ details {
   }
 
   summary {
-    @include ui-mixins.m();
     cursor: pointer;
+    @include ui-mixins.m();
 
     + * {
       margin-top: ui-vars.$px02;
@@ -160,7 +161,6 @@ details {
 
 /** Used for recent-calls */
 .pre-grid {
-  @include mixins.code();
   display: grid;
   grid-template-columns: auto 1fr;
   grid-row-gap: ui-vars.$px01;
@@ -171,6 +171,7 @@ details {
   background-color: ui-vars.$dark;
   border-radius: ui-vars.$px01;
   margin-top: ui-vars.$px02;
+  @include mixins.code();
 }
 
 .pre-grid-white {

vite.config.ts

@@ -15,6 +15,15 @@ export default defineConfig(() => {
         src: path.resolve(__dirname, "src"),
       },
     },
+
+    // Configure Sass to use the modern API
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler",
+        },
+      },
+    },
   };
 
   return config;