remove $foreground variable

Author: OlgaLarina

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

@@ -144,11 +144,4 @@ svc-page-navigator-item,
 
     .svc-page-navigator-item__dot {}
   }
-}
-
-.svc-page-navigator-item--disabled {
-  .svc-page-navigator-item__banner {
-    color: $foreground;
-    opacity: 0.25;
-  }
 }

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

@@ -65,6 +65,13 @@ svc-page-navigator,
   }
 }
 
+.svc-page-navigator-item--disabled {
+  .svc-page-navigator-item__banner {
+    color: var(--ctr-page-navigator-button-icon-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
+    opacity: var(--ctr-page-navigator-button-icon-opacity-disabled, 0.25);
+  }
+}
+
 .svc-page-navigator__button--pressed,
 .svc-page-navigator__button:active {
   .svc-page-navigator__button-icon {

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

@@ -246,19 +246,10 @@ svc-question {
     overflow-x: initial;
   }
 
-  .sd-multipletext__item-title {
-    color: $foreground;
-  }
-
   .sd-multipletext__item-container.sd-input:focus-within {
     // box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.149)); // #00000026
   }
 
-  .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
-    color: $foreground;
-    opacity: 0.25;
-  }
-
   .sjs_sp_placeholder {
     user-select: all;
     pointer-events: all;
@@ -400,7 +391,7 @@ svc-question {
     margin-inline-start: 0;
 
     use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
+      fill: var(--ctr-list-item-icon-color, var(--sjs-primary-background-500, #19b394));
     }
   }
 }
@@ -446,7 +437,7 @@ svc-question {
 
   .svc-list__item:hover > .svc-list__item-body .sv-svg-icon use,
   .sv-svg-icon use {
-    fill: var(--sjs-secondary-background-500, #19B394FF);
+    fill: var(--sjs-secondary-background-500, #19b394ff);
   }
 }
 
@@ -462,14 +453,9 @@ svc-question {
 }
 
 .svc-question__content--collapsed-drag-over-inside:not(.svc-question__content--dragged) {
-  box-shadow: var(--ctr-survey-panel-border-width-overing, var(--lbr-stroke-x2)) solid
-    var(--ctr-survey-panel-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
-  background: linear-gradient(
-      0deg,
-      var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 0%,
-      var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 100%
-    ),
-    var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
+  box-shadow: 0 0 0 var(--ctr-survey-placeholder-border-width-hovered, var(--lbr-stroke-x2))
+    var(--ctr-survey-placeholder-border-color-hovered, var(--sjs-primary-background-500, #19b394ff));
+  background: var(--ctr-survey-placeholder-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
 
   animation: collapsed-drag-over-inside-blinking 1s;
 }
@@ -618,7 +604,10 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut--has-icon {
-  padding: var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2)) var(--ctr-toolbox-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-toolbox-item-padding-left, var(--sjs-spacing-x150));
+  padding: var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1))
+    var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2))
+    var(--ctr-toolbox-item-padding-bottom, var(--sjs-spacing-x1))
+    var(--ctr-toolbox-item-padding-left, var(--sjs-spacing-x150));
   display: flex;
   gap: var(--ctr-toolbox-item-gap, var(--sjs-spacing-x1));
   justify-content: center;
@@ -641,14 +630,9 @@ svc-question {
 .svc-question__content--drag-over-inside,
 .svc-hovered > .svc-question__content--drag-over-inside {
   .svc-panel__placeholder_frame {
-    box-shadow: 0 0 0 1px var(--ctr-survey-panel-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
-    border: 1px solid var(--ctr-survey-panel-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
-    background: linear-gradient(
-        0deg,
-        var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 0%,
-        var(--ctr-survey-panel-background-color-overing, var(--sjs-primary-background-10, #19b3941a)) 100%
-      ),
-      var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
+    box-shadow: 0 0 0 1px var(--ctr-survey-placeholder-border-color-hovered, var(--sjs-primary-background-500, #19b394ff));
+    border: 1px solid var(--ctr-survey-placeholder-border-color-hovered, var(--sjs-primary-background-500, #19b394ff));
+    background: var(--ctr-survey-placeholder-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
 
     & > .svc-question__content-actions {
       opacity: 1;

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

@@ -59,15 +59,15 @@
 }
 
 .svc-remaining-character-counter {
-  @include ctrSmallFont;
+  @include lbrSmallFont;
   display: none;
   position: relative;
   outline: none;
   z-index: 20;
   padding: 0px;
   vertical-align: top;
   margin-inline-start: calcSize(2);
-  color: var(--ctr-text-decor-text-color-limitation, var(--sjs-layer-1-foreground-50, #00000080));
+  color: var(--ctr-text-decor-text-color-placeholder, var(--sjs-layer-1-foreground-50, #00000080));
 }
 
 .svc-string-editor__border {

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

@@ -83,13 +83,6 @@
 
   .svc-page-selector {
     max-width: 50%;
-
-    .sv-action-bar-item__title {
-      @include textEllipsis;
-
-      color: $foreground;
-      display: inline-block;
-    }
   }
 }
 
@@ -109,7 +102,7 @@
 }
 .svc-test-tab__content .sd-body--empty {
   @include ctrDefaultFont;
-  color: $foreground;
+  color: var(--sjs-layer-1-foreground-100, #000000E6);
   text-align: center;
   overflow: hidden;
   position: static;

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

@@ -236,7 +236,7 @@
 
 .svc-toolbox__category-title {
   @include ctrSmallBoldFont;
-  color: $foreground;
+  color: var(--ctr-toolbox-group-header-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
   vertical-align: middle;
   display: block;
   flex-grow: 1;

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

@@ -1,8 +1,6 @@
 @forward "./lbr-variables.scss";
 @forward "./ctr-variables.scss";
 
-$foreground: var(--sjs-general-forecolor, var(--foreground, #161616));
-
 $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 $sd-panel-normal-min-width: 496px;

visualRegressionTests-V2/tests/designer/etalons/design-surface-matrixdynamic-with-drag-drop.png

@@ -71,7 +71,7 @@ test("Check list item styles into logic popup", async (t) => {
 
     await t.click(sectionContentElement.find(".spg-action-button").nth(2))
       .click(Selector(".sl-dropdown"))
-      .click(getListItemByText("region"))
+      .click(getListItemByText("region"), { offsetX: 10, offsetY: 20 })
       .wait(1000)
       .pressKey("tab")
       .pressKey("tab")