Deprecation warning sass import rules

packages/survey-creator-core/src/components/button.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-creator-popup.sv-popup--modal {
   .sd-btn.sv-popup__button {

packages/survey-creator-core/src/components/carry-forward-panel.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-carry-forward-panel-wrapper {
   width: 100%;

packages/survey-creator-core/src/components/creator.scss

@@ -1,12 +1,12 @@
-@import "../variables.scss";
-@import "./notifier.scss";
-@import "./popup.scss";
-@import "./button.scss";
-@import "./surface-placeholder.scss";
-@import "../lbr-font-sizes.scss";
-@import "../lbr-sizes.scss";
-@import "../ctr-font-sizes.scss";
-@import "../ctr-sizes.scss";
+@use "../variables" as *;
+@use "./notifier.scss";
+@use "./popup.scss";
+@use "./button.scss";
+@use "./surface-placeholder.scss";
+@use "../lbr-font-sizes.scss";
+@use "../lbr-sizes.scss";
+@use "../ctr-font-sizes.scss";
+@use "../ctr-sizes.scss";
 
 survey-creator,
 .svc-creator {

packages/survey-creator-core/src/components/header/logo-image.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-designer-header .sd-container-modern__title {
   gap: 0;

packages/survey-creator-core/src/components/image-item-value.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-image-item-value-wrapper {
   display: inline-block;

packages/survey-creator-core/src/components/item-value.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-item-value-wrapper {
   position: relative;

packages/survey-creator-core/src/components/link-value.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-link__button {
   @include ctrDefaultBoldFont;

packages/survey-creator-core/src/components/list.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-list {
   width: 100%;

packages/survey-creator-core/src/components/matrix-cell.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 // .svc-question__content {
 //   .sd-table {

packages/survey-creator-core/src/components/notifier.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-notifier.svc-notifier--shown {
   visibility: visible;

packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 svc-page-navigator-item,
 .svc-page-navigator-item {

packages/survey-creator-core/src/components/page-navigator/page-navigator.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 svc-page-navigator,
 .svc-page-navigator {

packages/survey-creator-core/src/components/page.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 svc-page {
   display: block;

packages/survey-creator-core/src/components/popup.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .svc-creator-popup {
   &.sv-popup--modal {
     background-color: var(--ctr-popup-haze-background-color, $background-semitransparent);

packages/survey-creator-core/src/components/property-panel/property-panel-item.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-property-panel__item {
   margin: calcSize(2) 0;

packages/survey-creator-core/src/components/property-panel/property-panel.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-property-grid-placeholder {
   display: flex;

packages/survey-creator-core/src/components/question-dropdown.scss

@@ -1,5 +1,4 @@
-@import "../variables.scss";
-
+@use "../variables" as *;
 
 .svc-question__dropdown-choices {
   margin-top: calcSize(2);

packages/survey-creator-core/src/components/question-image.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-image-question-controls {
   position: absolute;

packages/survey-creator-core/src/components/question-rating.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-rating-question-controls {
   position: absolute;

packages/survey-creator-core/src/components/question.scss

@@ -1,5 +1,5 @@
-@import "../variables.scss";
-@import "./carry-forward-panel.scss";
+@use "../variables" as *;
+@use "./carry-forward-panel.scss" as *;
 
 svc-question {
   display: block;

packages/survey-creator-core/src/components/results.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svd-test-results {
   border-radius: 4px;

packages/survey-creator-core/src/components/row.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-row {
   width: 100%;

packages/survey-creator-core/src/components/scroll.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-scroll__wrapper {
   position: relative;

packages/survey-creator-core/src/components/search.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 .svc-search {
   // TODO remove v2
   --sjs-general-forecolor: rgba(0, 0, 0, 0.91);

packages/survey-creator-core/src/components/side-bar/side-bar.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 $side-bar-enter-duration: var(--svc-side-bar-enter-duration, 500ms);
 $side-bar-leave-duration: var(--svc-side-bar-leave-duration, 500ms);

packages/survey-creator-core/src/components/side-bar/tab-control.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-sidebar-tabs {
   display: flex;

packages/survey-creator-core/src/components/simulator.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svd-simulator {
   position: relative;

packages/survey-creator-core/src/components/string-editor.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .sd-element__header {
   .svc-string-editor {

packages/survey-creator-core/src/components/surface-placeholder.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .svc-surface-placeholder {
   display: flex;

packages/survey-creator-core/src/components/switcher/switcher.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-switcher.spg-action-button {
   align-items: center;

packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu-item.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-tabbed-menu-item {
   display: flex;

packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-tabbed-menu {
   display: flex;

packages/survey-creator-core/src/components/tabs/designer.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 svc-tab-designer {
   width: 100%;

packages/survey-creator-core/src/components/tabs/json-editor-ace.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 svc-tab-json-editor-ace {
   width: 100%;

packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 svc-tab-json-editor-textarea {
   width: 100%;

packages/survey-creator-core/src/components/tabs/logic-ui.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-tab-logic-edit {
   width: 100%;

packages/survey-creator-core/src/components/tabs/logic.scss

@@ -1,5 +1,5 @@
-@import "../../variables.scss";
-@import "../../colors.scss";
+@use "../../variables" as *;
+@use "../../colors.scss" as *;
 
 .sl-table {
   width: 50%;

packages/survey-creator-core/src/components/tabs/test.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 svc-tab-test {
   width: 100%;

packages/survey-creator-core/src/components/tabs/translation.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-tab-translation {
   width: 100%;

packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 $svc-toolbox-fade-in-duration: var(--sjs-svc-toolbox-fade-in-duration, 250ms);
 $svc-toolbox-move-in-duration: var(--sjs-svc-toolbox-move-in-duration, 250ms);
 $svc-toolbox-fade-in-delay: var(--sjs-svc-toolbox-fade-in-delay, 100ms);

packages/survey-creator-core/src/components/toolbox/toolbox-right.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 .svc-creator__toolbox--right,
 [dir="rtl"],
 [style*="direction:rtl"],

packages/survey-creator-core/src/components/toolbox/toolbox-search.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-toolbox {
   .svc-search {

packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss

@@ -1,5 +1,5 @@
-@import "../../variables.scss";
-@import "../../variables-layer.scss";
+@use "../../variables" as *;
+@use "../../variables-layer.scss" as *;
 
 .svc-toolbox__item {
   display: flex;

packages/survey-creator-core/src/components/toolbox/toolbox.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@use "../../variables" as *;
 
 .svc-toolbox {
   --dft-toolbox-item-padding-top: calc(1 * #{$base-unit});

packages/survey-creator-core/src/creator-theme/action-button.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .svc-action-button {
   @include ctrDefaultBoldFont;
   display: inline-block;

packages/survey-creator-core/src/creator-theme/button.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .svc-btn {
   display: flex;
   padding: var(--ctr-button-padding-vertical, calcSize(2)) var(--ctr-button-padding-horizontal, calcSize(6));

packages/survey-creator-core/src/creator-theme/creator.scss

@@ -1,3 +1,2 @@
-@import "../variables.scss";
-@import "./button.scss";
-@import "./action-button.scss";
+@use "./button.scss";
+@use "./action-button.scss";

packages/survey-creator-core/src/ctr-font-sizes.scss

@@ -1,3 +1,5 @@
+@use "./ctr-variables.scss" as *;
+
 .svc-creator {
   --sjs-font-size-x05: calc(#{$font-unit} * 0.5);
   --sjs-font-size-x075: calc(#{$font-unit} * 0.75);

packages/survey-creator-core/src/ctr-sizes.scss

@@ -1,3 +1,5 @@
+@use "./ctr-variables.scss" as *;
+
 .svc-creator {
   --sjs-spacing-x2: calc(#{$spacing-unit} * 2);
   --sjs-spacing-x3: calc(#{$spacing-unit} * 3);

packages/survey-creator-core/src/ctr-variables.scss

@@ -4,10 +4,11 @@ $corner-radius-unit: var(--ctr-corner-radius-unit, 8px);
 $stroke-unit: var(--ctr-stroke-unit, 1px);
 $font-unit: var(--ctr-font-unit, 8px);
 $line-height-unit: var(--ctr-line-height-unit, 8px);
-$font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+$-font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
+$-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin ctrLargeFont {
-  font-family: $font-family;
+  font-family: $-font-family;
   font-size: var(--ctr-font-large-size, 32px);
   font-style: normal;
   font-weight: 400;
@@ -20,10 +21,10 @@ $font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)))
 }
 
 @mixin ctrMediumFont {
-  --thm-medium-bold-font-size: calc(3 * #{$base-unit});
-  --thm-medium-bold-line-height: calc(4 * #{$base-unit});
+  --thm-medium-bold-font-size: calc(3 * #{$-base-unit});
+  --thm-medium-bold-line-height: calc(4 * #{$-base-unit});
 
-  font-family: $font-family;
+  font-family: $-font-family;
   font-size: var(--ctr-font-medium-size, var(--thm-medium-bold-font-size, 24px));
   font-style: normal;
   font-weight: 400;
@@ -36,10 +37,10 @@ $font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)))
 }
 
 @mixin ctrDefaultFont {
-  --thm-default-font-size: var(--sjs-font-size, calc(2 * #{$base-unit}));
+  --thm-default-font-size: var(--sjs-font-size, calc(2 * #{$-base-unit}));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
 
-  font-family: $font-family;
+  font-family: $-font-family;
   font-size: var(--ctr-font-default-size, var(--thm-default-font-size, 16px));
   font-style: normal;
   font-weight: 400;
@@ -70,11 +71,11 @@ $font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)))
 }
 
 @mixin ctrSmallFont {
-  --small-bold-font-size: var(--sjs-font-size, calc(2 * #{$base-unit}));
+  --small-bold-font-size: var(--sjs-font-size, calc(2 * #{$-base-unit}));
   --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
   --ctr-small-bold-line-height: var(--small-bold-font-size);
 
-  font-family: $font-family;
+  font-family: $-font-family;
   font-size: var(--ctr-font-small-size, var(--ctr-small-bold-font-size, 12px));
   font-style: normal;
   font-weight: 400;

packages/survey-creator-core/src/custom-questions/boolean-switch.scss

@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables" as *;
 
 .spg-boolean-switch,
 .spg-boolean-switch * {

packages/survey-creator-core/src/lbr-font-sizes.scss

@@ -1,3 +1,5 @@
+@use "./lbr-variables.scss" as *;
+
 .svc-creator {
   --lbr-line-height-x8: calc(#{$lbr-line-height-unit} * 8);
   --lbr-line-height-x7: calc(#{$lbr-line-height-unit} * 7);

packages/survey-creator-core/src/lbr-sizes.scss

@@ -1,3 +1,5 @@
+@use "./lbr-variables.scss" as *;
+
 .svc-creator {
   --lbr-spacing-x16: calc(#{$lbr-spacing-unit} * 16);
   --lbr-spacing-x15: calc(#{$lbr-spacing-unit} * 15);