remove $background variables

Author: OlgaLarina

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

@@ -158,7 +158,7 @@
   .svc-item-value__item {
     .sd-item__control-label,
     .sv-ranking-item__text {
-      color: var(--ctr-survey-ranking-item-text-color-inactive, rgba(0, 0, 0, 0.5));
+      color: var(--ctr-survey-ranking-item-text-color-inactive, var(--sjs-layer-1-foreground-50, #00000080));
     }
 
     .sd-item__decorator {
@@ -167,8 +167,8 @@
   }
 
   .sv-ranking-item__index {
-    border-radius: var(--lbr-ranking-item-number-corner-radius, 1024px);
-    background: var(--ctr-survey-ranking-item-digit-background-color-inactive, #f4f4f4);
+    border-radius: var(--lbr-ranking-item-number-corner-radius, var(--lbr-corner-radius-round));
+    background: var(--ctr-survey-ranking-item-digit-background-color-inactive, var(--sjs-layer-3-background-500, #f4f4f4ff));
 
     svg {
       fill: var(--ctr-survey-ranking-item-digit-text-color-inactive, var(--sjs-layer-3-foreground-50, #00000080));

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

@@ -265,11 +265,11 @@
 
   .svc-list__item--group-selected > .svc-list__item-body {
     @include ctrDefaultBoldFont;
-    color: var(--ctr-list-item-text-color-selected, #fff);
-    background: var(--ctr-list-item-background-color-selected, #19b394);
+    color: var(--ctr-list-item-text-color-selected, var(--sjs-primary-foreground-100, #ffffffff));
+    background: var(--ctr-list-item-background-color-selected, var(--sjs-primary-background-500, #19b394ff));
 
     use {
-      fill: var(--ctr-list-item-icon-color-selected, #ffffff);
+      fill: var(--ctr-list-item-icon-color-selected, var(--sjs-primary-foreground-100, #ffffffff));
     }
   }
 }

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

@@ -35,7 +35,7 @@ svc-question {
 
         &:active {
           opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-          background: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, #f5f5f5);
+          background: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
         }
       }
     }

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

@@ -268,7 +268,7 @@
     padding: 0;
     background: none;
     box-shadow: none;
-    
+
     border-radius: 0;
     overflow: visible;
   }
@@ -321,17 +321,17 @@
   white-space: nowrap;
 }
 
-
 .svc-logic-placeholder {
   width: calcSize(78);
   min-width: 100%;
   max-width: 100%;
   box-sizing: border-box;
-  margin-top: calcSize(2);
-  // background: $background;
-  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, var(--sjs-special-shadow, #00000040));
-  border-radius: calcSize(0.5);
-  padding: calcSize(4) calcSize(5) calcSize(5);
+  margin-top: var(--lbr-question-panel-header-padding-bottom, 16px);
+  border-radius: var(--lbr-question-panel-corner-radius, 4px);
+  background: var(--lbr-question-panel-background-color, #fff);
+  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px)
+    var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px)
+    var(--lbr-question-panel-shadow-color, rgba(0, 0, 0, 0.15));
 }
 
 .sv-popup--overlay {
@@ -341,11 +341,12 @@
 }
 
 .svc-logic-placeholder__text.svc-logic-placeholder__text {
-  @include ctrDefaultFont;
+  @include lbrDefaultFont;
+  color: var(--lbr-placeholder-text-color, rgba(0, 0, 0, 0.45));
   text-align: center;
-  color: $foreground-light;
   display: block;
-  padding: calcSize(4) calcSize(8);
+  padding: var(--lbr-placeholder-padding-top, 16px) var(--lbr-placeholder-padding-right, 64px)
+    var(--lbr-placeholder-padding-bottom, 16px) var(--lbr-placeholder-padding-left, 64px);
 }
 
 .svc-logic-tab__leave-apply-button {