Issue/6075-QuestionPage-adorners-issues (#6082)

* #6075 Question/Page adorners issues
Fixes #6075

* #6075 pressed state icon color

* #6075 - fix pressed state

* #6075 fix preview tab button styles

* Revert "#6075 fix preview tab button styles"

This reverts commit 1ddf308.

* #6075 - fixed icon color

* #6075 Question/Page adorners issues
Fixes #6075

* #6075 - screenshots

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

@@ -128,9 +128,11 @@ svc-page {
 }
 
 //hovered state
-.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled,
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, $background-dim);
+}
 .svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):focus:enabled {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selectedd, $background-dim);
 }
 
 //pressed state
@@ -173,6 +175,11 @@ svc-page {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
 }
 
+.svc-page-toolbar__item:active .svc-page-toolbar-item__icon use {
+  fill: black;
+  opacity: 0.5;
+}
+
 .svc-page-toolbar-item__title {
   @include ctrSmallBoldFont;
   color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
@@ -187,7 +194,7 @@ svc-page {
 
 .svc-page__content:focus,
 .svc-hovered.svc-page__content {
-  box-shadow: 0 0 0 2px $secondary-light;
+  box-shadow: 0 0 0 var(--ctr-survey-page-border-width-hovered, 2px) var(--ctr-survey-page-border-color-hovered, $secondary-light);
   background: var(--ctr-survey-page-background-color-hovered, $secondary-backcolor-semi-light);
 }
 
@@ -214,8 +221,8 @@ svc-page {
 }
 
 .svc-page__content--selected.svc-page__content--selected {
-  box-shadow: 0 0 0 2px $secondary;
-  background: $secondary-backcolor-semi-light;
+  box-shadow: 0 0 0 var(--ctr-survey-page-border-width-selected, 2px) var(--ctr-survey-page-border-color-selected, $secondary);
+  background: var(--ctr-survey-page-background-color-selected, $secondary-backcolor-semi-light);
 }
 
 .svc-page__content--animation-running {

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

@@ -135,15 +135,28 @@ svc-question {
   }
 }
 
-//hovered state
-.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):hover:enabled,
-.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):focus:enabled {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+.svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+}
+
+//hovered and focused state
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed){
+  &:hover:enabled {
+    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+  }
+  &:focus:enabled {
+    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
+  }
 }
 
 //pressed state
 .svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):active:enabled {
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, $background-dim);
+  use {
+    fill: black;
+    opacity: 0.45;
+  }
 }
 
 //disabled state
@@ -158,8 +171,12 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item--pressed:not(.svc-survey-element-toolbar__item--active) {
-  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, $background-dim);
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+  use {
+    fill: black;
+    opacity: 0.45;
+  }
 }
 
 .svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:hover,
@@ -185,9 +202,6 @@ svc-question {
   height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
 }
 
-.svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
-  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-}
 
 .svc-survey-element-toolbar-item__title {
   @include ctrSmallBoldFont;
@@ -477,11 +491,11 @@ svc-question {
 
 .svc-question__content:focus,
 .svc-hovered > .svc-question__content {
-  box-shadow: 0 0 0 2px $secondary-light;
+  box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-hovered, 2px) var(--ctr-survey-question-panel-border-color-hovered, $secondary-light);
 }
 
 .svc-question__content--selected:not(.svc-question__content--dragged) {
-  box-shadow: 0 0 0 2px $secondary;
+  box-shadow: 0 0 0 var(--ctr-survey-question-panel-border-width-selected, 2px) var(--ctr-survey-question-panel-border-color-selected, $secondary);
 }
 
 .svc-question__content--collapsed-drag-over-inside:not(.svc-question__content--dragged) {

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

@@ -674,7 +674,14 @@ const Theme = {
     "--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)",
     "--ctr-survey-header-text-description-color-placeholder": "var(--sjs-layer-3-foreground-50)",
+    "--ctr-survey-question-panel-border-color-selected": "var(--sjs-secondary-background-500)",
+    "--ctr-survey-question-panel-border-width-selected": "var(--sjs-stroke-x2)",
     "--ctr-survey-page-border-color-selected": "var(--sjs-secondary-background-500)",
+    "--ctr-survey-page-border-width-selected": "var(--sjs-stroke-x2)",
+    "--ctr-survey-question-panel-border-color-hovered": "var(--sjs-secondary-background-25)",
+    "--ctr-survey-question-panel-border-width-hovered": "var(--sjs-stroke-x2)",
+    "--ctr-survey-page-border-color-hovered": "var(--sjs-secondary-background-25)",
+    "--ctr-survey-page-border-width-hovered": "var(--sjs-stroke-x2)",
     "--ctr-survey-page-header-title-color-placeholder": "var(--sjs-layer-3-foreground-50)",
     "--ctr-survey-page-background-color-hovered": "var(--sjs-special-background)",
     "--ctr-list-search-padding-left": "var(--sjs-spacing-x3)",