remove $background variables

Author: OlgaLarina

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

@@ -147,19 +147,19 @@ survey-creator,
   text-align: center;
 }
 
-.svc-item__banner {
-  position: relative;
-  max-width: 0;
-  overflow: hidden;
-  height: 100%;
-  background-color: $background;
-  /* Shadow / Medium */
-  border-radius: calcSize(12.5);
-  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, var(--sjs-special-glow, #004c441a));
-  transition:
-    max-width 0.1s ease-in-out,
-    padding 0.2s ease-in-out;
-}
+// .svc-item__banner {
+//   position: relative;
+//   max-width: 0;
+//   overflow: hidden;
+//   height: 100%;
+//   background-color: $background;
+//   /* Shadow / Medium */
+//   border-radius: calcSize(12.5);
+//   box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, var(--sjs-special-glow, #004c441a));
+//   transition:
+//     max-width 0.1s ease-in-out,
+//     padding 0.2s ease-in-out;
+// }
 
 .svc-creator__non-commercial-text {
   @include ctrDefaultBoldFont;

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

@@ -37,7 +37,7 @@
 }
 
 .svc-item-value--dragging {
-  background: $background;
+  // background: $background;
   box-shadow: 0px 8px 16px 0px var(--ctr-shadow-large-color, var(--sjs-special-glow, #004c441a));
   border-radius: calcSize(12.5);
   padding-right: calcSize(3);
@@ -158,7 +158,7 @@
   .svc-item-value__item {
     .sd-item__control-label,
     .sv-ranking-item__text {
-      color: $foreground-light;
+      color: var(--ctr-survey-ranking-item-text-color-inactive, rgba(0, 0, 0, 0.5));
     }
 
     .sd-item__decorator {
@@ -167,10 +167,11 @@
   }
 
   .sv-ranking-item__index {
-    background: $background-dim;
+    border-radius: var(--lbr-ranking-item-number-corner-radius, 1024px);
+    background: var(--ctr-survey-ranking-item-digit-background-color-inactive, #f4f4f4);
 
     svg {
-      fill: $foreground-light;
+      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: $primary-foreground;
-    background-color: $primary;
+    color: var(--ctr-list-item-text-color-selected, #fff);
+    background: var(--ctr-list-item-background-color-selected, #19b394);
 
     use {
-      fill: $background;
+      fill: var(--ctr-list-item-icon-color-selected, #ffffff);
     }
   }
 }

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

@@ -145,7 +145,7 @@
 
   &.sv-dropdown-popup.sv-popup--dropdown-overlay {
     .sv-popup__body-footer {
-      background-color: var(--ctr-contextual-menu-footer-background-color, $background-dim);
+      background-color: var(--ctr-contextual-menu-footer-background-color, var(--sjs-layer-3-background-500, var(--background-dim, #f3f3f3)));
     }
   }
 

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

@@ -59,7 +59,6 @@
 
 .svc-image-question__loading-placeholder {
   position: relative;
-  background-color: $background;
   width: 100%;
   height: calcSize(27.5);
   border: var(--ctr-survey-placeholder-border-width, var(--lbr-stroke-x1)) dashed var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #D4D4D4));

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

@@ -34,8 +34,8 @@ svc-question {
         border: none;
 
         &:active {
-          opacity: 0.5;
-          background-color: $background-dim;
+          opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+          background: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, #f5f5f5);
         }
       }
     }
@@ -1253,16 +1253,16 @@ svc-question,
     padding: 0;
   }
 
-  .sd-table__cell--actions {
-    .sv-action-bar-item:disabled {
-      background: $background;
-      opacity: 1;
+  // .sd-table__cell--actions {
+  //   .sv-action-bar-item:disabled {
+  //     background: $background;
+  //     opacity: 1;
 
-      use {
-        fill: $foreground-light;
-      }
-    }
-  }
+  //     use {
+  //       fill: $foreground-light;
+  //     }
+  //   }
+  // }
 
   .sd-table__row-disabled > .sd-table__cell {
     opacity: 1;

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

@@ -1,10 +1,10 @@
 @use "../../variables" as *;
 
-svc-tab-json-editor-ace {
-  width: 100%;
-  height: 100%;
-  background: $background-dim;
-}
+// svc-tab-json-editor-ace {
+//   width: 100%;
+//   height: 100%;
+//   background: $background-dim;
+// }
 
 .svc-json-editor-tab__content {
   position: relative;

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

@@ -51,10 +51,10 @@
   outline: none;
   cursor: pointer;
 
-  option {
-    background: $background;
-    color: $foreground;
-  }
+  // option {
+  //   background: $background;
+  //   color: $foreground;
+  // }
 }
 
 .svc-logic-operator:focus {
@@ -328,7 +328,7 @@
   max-width: 100%;
   box-sizing: border-box;
   margin-top: calcSize(2);
-  background: $background;
+  // 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);

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

@@ -1,28 +1,17 @@
 @use "../../variables" as *;
 
-svc-tab-preview {
-  width: 100%;
-  height: 100%;
-  background: $background-dim;
-}
+// svc-tab-preview {
+//   width: 100%;
+//   height: 100%;
+//   background: $background-dim;
+// }
 
 .svc-test-tab__content {
   align-items: center;
   justify-content: center;
 }
 
 .svc-test-tab__content .svc-plugin-tab__content {
-  .sv-root-modern .sv-completedpage,
-  .sv_default_css .sv_completed_page {
-    margin: 0;
-    border: 0;
-    background-color: $background-dim;
-  }
-
-  .sv_default_css .sv_body {
-    border: 0;
-  }
-
   .svc-preview__test-again {
     width: calcSize(33);
     box-sizing: border-box;

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

@@ -75,7 +75,6 @@
   white-space: nowrap;
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-layer-1-foreground-100, #000000e6));
   transition: opacity $creator-transition-duration;
-  background-color: $background;
   /* Shadow / Medium */
   border-radius: var(--ctr-tooltip-corner-radius, var(--sjs-corner-radius-x075));
   box-shadow:

packages/survey-creator-core/src/property-grid-theme/blocks/spg-color-editor.scss

@@ -43,7 +43,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    fill: $background;
+    fill: var(--ctr-editor-color-swatch-icon-color-stroke, #00000040);
   }
 }
 .spg-question--disabled .spg-color-editor {

packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss

@@ -1,18 +1,18 @@
 @use "../../variables.scss" as *;
 
-.spg-matrixdynamic__drag-element {
-  padding: calcSize(2);
-
-  &:hover {
-    background-color: $background;
-  }
-
-  &:after {
-    content: " ";
-    display: block;
-    height: calcSize(0.5);
-  }
-}
+// .spg-matrixdynamic__drag-element {
+//   padding: calcSize(2);
+
+//   &:hover {
+//     background-color: $background;
+//   }
+
+//   &:after {
+//     content: " ";
+//     display: block;
+//     height: calcSize(0.5);
+//   }
+// }
 
 .spg-drag-element__svg {
   width: var(--ctr-data-table-row-drag-area-icon-width, var(--sjs-font-size-x3));

packages/survey-creator-core/src/property-grid-theme/blocks/spg-table.scss

@@ -113,11 +113,11 @@
   }
 }
 
-.spg-table__cell--actions > .spg-matrixdynamic__drag-element {
-  display: inline-block;
-  margin-top: calcSize(0.5);
-  cursor: move;
-}
+// .spg-table__cell--actions > .spg-matrixdynamic__drag-element {
+//   display: inline-block;
+//   margin-top: calcSize(0.5);
+//   cursor: move;
+// }
 
 .spg-table__cell--header {
   background: var(--ctr-data-table-row-background-color-header, var(--sjs-layer-3-background-500, #f4f4f4ff));

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

@@ -7,13 +7,6 @@ $primary-background-dark: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
 $primary-foreground: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 $primary-foreground-disabled: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(#fff, 0.25)));
 
-$background: var(--sjs-general-backcolor, var(--background, #fff));
-$background-dim: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-$background-dim-light: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
-$background-semitransparent: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-$background-dark: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
-$background-dim-dark: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
-
 $foreground: var(--sjs-general-forecolor, var(--foreground, #161616));
 $foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));