fix wrong colors

functionalTests/helper.ts

@@ -180,6 +180,22 @@ export async function setShowSidebar(newVal: boolean) {
     window["creator"].showSidebar = newVal;
   })(newVal);
 }
+export async function setShowAddQuestionButton(newVal: boolean) {
+  await ClientFunction((newVal) => {
+    window["creator"].showAddQuestionButton = newVal;
+  })(newVal);
+}
+export async function setAllowEditSurveyTitle(newVal: boolean) {
+  await ClientFunction((newVal) => {
+    window["creator"].allowEditSurveyTitle = newVal;
+  })(newVal);
+}
+export async function setExpandCollapseButtonVisibility(newVal: string) {
+  await ClientFunction((newVal) => {
+    window["creator"].expandCollapseButtonVisibility = newVal;
+  })(newVal);
+}
+
 export const explicitErrorHandler = ClientFunction(() => {
   window.addEventListener("error", e => {
     if (e.message === "ResizeObserver loop completed with undelivered notifications." ||

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

@@ -36,7 +36,7 @@
 .svc-logo-image-placeholder {
   @include ctrLargeFont;
   color: $foreground-light;
-  opacity: 0.25;
+  opacity: var(--ctr-survey-header-logo-placeholder-icon-opacity, 0.25);
   white-space: nowrap;
   word-break: keep-all;
   padding: 0;
@@ -46,7 +46,7 @@
   justify-content: center;
   align-items: center;
   margin-right: calcSize(-2);
-  border-radius: calcSize(4);
+  border-radius: var(--ctr-survey-header-logo-placeholder-corner-radius, calcSize(4));
   transition: background-color $creator-transition-duration, opacity $creator-transition-duration;
 
   &:hover {
@@ -59,8 +59,8 @@
   }
 
   svg {
-    width: calcSize(6);
-    height: calcSize(6);
+    width: var(--ctr-survey-header-logo-placeholder-icon-width, calcSize(6));
+    height: var(--ctr-survey-header-logo-placeholder-icon-height, calcSize(6));
   }
 }
 

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

@@ -271,7 +271,7 @@
 
 .svc-item-value__ghost {
   display: none;
-  background: $background-dim;
+  background: var(--ctr-survey-radio-button-group-item-background-color-drop-spot, $background-dim);
   border-radius: var(--ctr-survey-radio-button-group-item-corner-radius-floating, calcSize(12.5));
   width: calcSize(25);
   height: 40px;

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

@@ -10,7 +10,7 @@ export class TabControlModel extends Base {
   private updateExpandCollapseAction() {
     this.expandCollapseAction.iconName = this.sidePanel.visible ? "icon-collapse-panel" : "icon-expand-panel";
     this.expandCollapseAction.css = this.sidePanel.visible ? "svd-grid-hide" : "svd-grid-expand";
-    this.expandCollapseAction.locTitleName = this.sidePanel.visible ? "ed.hidePanel" : "ed.showPanel";
+    this.expandCollapseAction.locTooltipName = this.sidePanel.visible ? "ed.hidePanel" : "ed.showPanel";
   }
 
   private createToggleAction() {

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

@@ -42,6 +42,7 @@
 
 .spg-boolean-switch__button--checked {
   background: var(--ctr-toggle-button-background-color-checked, #19b394);
+  box-shadow: none;
 
   .spg-boolean-switch__thumb--left {
     background: none;

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

@@ -79,6 +79,7 @@
   .sd-body,
   .sl-body {
     min-width: calcSize(78);
+    padding: 0;
   }
 }
 

packages/survey-creator-core/src/themes/default.ts

@@ -86,6 +86,7 @@ const Theme = {
     "--lbr-shadow-small-blur": "2px",
     "--lbr-shadow-small-spread": "0px",
     "--ctr-button-group-item-text-opacity-disabled": 0.25,
+    "--ctr-survey-header-logo-placeholder-icon-opacity": 0.5,
     "--ctr-toolbox-item-shadow-hovered-1-color": "#00000000",
     "--ctr-toolbox-item-shadow-pressed-color": "#00000000",
     "--ctr-toolbox-item-shadow-hovered-2-color": "#00000000",
@@ -602,6 +603,8 @@ const Theme = {
     "--lbr-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)",
     "--ctr-property-grid-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-survey-header-logo-placeholder-icon-color": "var(--sjs-layer-3-foreground-50)",
+    "--ctr-survey-header-logo-placeholder-icon-width": "var(--sjs-size-x6)",
+    "--ctr-survey-header-logo-placeholder-icon-height": "var(--sjs-size-x6)",
     "--lbr-notification-padding-left": "var(--sjs-spacing-x2)",
     "--lbr-notification-padding-right": "var(--sjs-spacing-x2)",
     "--lbr-notification-button-corner-radius": "var(--sjs-corner-radius-x1)",
@@ -670,6 +673,7 @@ const Theme = {
     "--ctr-survey-radio-button-group-item-shadow-floating-2-spread": "var(--ctr-shadow-medium-spread)",
     "--ctr-survey-radio-button-group-item-shadow-floating-2-color": "var(--ctr-shadow-medium-color)",
     "--ctr-survey-ranking-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
+    "--ctr-survey-header-logo-placeholder-corner-radius": "var(--sjs-corner-radius-round)",
     "--ctr-survey-header-logo-placeholder-background-color-hovered": "var(--sjs-primary-background-10)",
     "--ctr-survey-header-logo-placeholder-icon-color-hovered": "var(--sjs-primary-background-500)",
     "--ctr-survey-header-text-title-color-placeholder": "var(--sjs-layer-3-foreground-50)",

visualRegressionTests-V2/tests/designer/surface.ts

@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel } from "../../helper";
+import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setShowAddQuestionButton, setAllowEditSurveyTitle, setExpandCollapseButtonVisibility } from "../../helper";
 
 const title = "Designer surface";
 
@@ -2144,9 +2144,7 @@ test("Question adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2198,9 +2196,7 @@ test("Question adorner - no title collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2221,7 +2217,7 @@ test("Question adorner - no title collapsed", async (t) => {
 
 test("Page adorner - collapsed", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await t.resizeWindow(1652, 500);
+    await t.resizeWindow(1000, 500);
     const json = {
       elements: [
         {
@@ -2230,9 +2226,9 @@ test("Page adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-page__content");
     const qCollapseButton = Selector(".svc-page__content #collapse");
@@ -2241,7 +2237,7 @@ test("Page adorner - collapsed", async (t) => {
     await takeElementScreenshot("page-adorner-expanded.png", ".svc-tab-designer_content", t, comparer);
     await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 });
     await t.click(qCollapseButton.filterVisible());
-    await t.hover(".svc-toolbox", { speed: 0.1 });
+    await resetHoverToCreator(t);
     await takeElementScreenshot("page-adorner-collapsed-selected.png", ".svc-tab-designer_content", t, comparer);
     await t.click(".svc-tab-designer_content", { offsetX: 1, offsetY: 1 });
     await takeElementScreenshot("page-adorner-collapsed.png", ".svc-tab-designer_content", t, comparer);
@@ -2263,9 +2259,7 @@ test("Question adorner - collapsed mobile", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2335,9 +2329,7 @@ test("Collapse all and expand all toolbar", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     await t.hover("#collapseAll");
     await takeElementScreenshot("design-surface-toolbar.png", Selector(".svc-tab-designer"), t, comparer);

visualRegressionTests/tests/designer/surface.ts

@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel } from "../../helper";
+import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setAllowEditSurveyTitle, setShowAddQuestionButton, setExpandCollapseButtonVisibility } from "../../helper";
 
 const title = "Designer surface";
 
@@ -2144,9 +2144,7 @@ test("Question adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2198,9 +2196,7 @@ test("Question adorner - no title collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2221,7 +2217,7 @@ test("Question adorner - no title collapsed", async (t) => {
 
 test("Page adorner - collapsed", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await t.resizeWindow(1652, 500);
+    await t.resizeWindow(1000, 500);
     const json = {
       elements: [
         {
@@ -2230,9 +2226,9 @@ test("Page adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-page__content");
     const qCollapseButton = Selector(".svc-page__content #collapse");
@@ -2241,7 +2237,7 @@ test("Page adorner - collapsed", async (t) => {
     await takeElementScreenshot("page-adorner-expanded.png", ".svc-tab-designer_content", t, comparer);
     await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 });
     await t.click(qCollapseButton.filterVisible());
-    await t.hover(".svc-toolbox", { speed: 0.1 });
+    await resetHoverToCreator(t);
     await takeElementScreenshot("page-adorner-collapsed-selected.png", ".svc-tab-designer_content", t, comparer);
     await t.click(".svc-tab-designer_content", { offsetX: 1, offsetY: 1 });
     await takeElementScreenshot("page-adorner-collapsed.png", ".svc-tab-designer_content", t, comparer);
@@ -2263,9 +2259,7 @@ test("Question adorner - collapsed mobile", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2335,9 +2329,7 @@ test("Collapse all and expand all toolbar", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     await t.hover("#collapseAll");
     await takeElementScreenshot("design-surface-toolbar.png", Selector(".svc-tab-designer"), t, comparer);