From 44b4bdce73a09989ba9fc733bec8d720e80310b1 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 30 Oct 2024 10:12:24 +0300
Subject: [PATCH 01/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../add-question-type-selector.component.html |  4 +-
 .../src/add-question.component.html           |  2 +-
 .../adorners/image-item-value.component.html  | 10 ++--
 .../src/adorners/item-value.component.html    |  2 +-
 .../src/adorners/matrix-cell.component.html   |  5 +-
 .../adorners/question-image.component.html    |  2 +-
 .../components/question-error.component.html  |  2 +-
 .../src/header/logo-image.component.html      |  4 +-
 .../page-navigator.component.html             |  2 +-
 .../src/page.component.html                   |  2 +-
 .../src/panel.component.html                  |  4 +-
 .../src/question-widget.component.html        |  3 +-
 .../src/question.component.html               |  2 +-
 .../questions/logic-operator.component.html   |  2 +-
 .../src/side-bar/tab-button.component.html    |  2 +-
 .../src/components/item-value.scss            | 13 ++++-
 .../src/components/matrix-cell.scss           | 12 ----
 .../page-navigator/page-navigator.scss        | 13 +++--
 .../src/components/page.scss                  | 32 ++++++++---
 .../src/components/question.scss              |  7 ++-
 .../src/components/side-bar/tab-control.scss  |  5 ++
 .../blocks/spg-question.scss                  | 12 ++--
 .../survey-creator-core/src/themes/default.ts | 56 +++++++++++++++++++
 .../src/utils/context-button.scss             | 15 ++++-
 .../src/action-button.html                    |  4 +-
 .../src/add-question-type-selector.html       |  2 +-
 .../src/add-question.html                     |  2 +-
 .../src/adorners/image-item-value.html        |  9 +--
 .../src/adorners/item-value.html              |  2 +-
 .../src/adorners/matrix-cell.html             |  4 +-
 .../src/adorners/panel.html                   |  4 +-
 .../src/adorners/question-image.html          |  2 +-
 .../src/adorners/question.html                |  2 +-
 .../src/header/logo-image.html                |  4 +-
 .../src/page-navigator/page-navigator.html    |  2 +-
 .../survey-creator-knockout/src/page.html     |  2 +-
 .../src/question-widget.html                  |  2 +-
 .../src/side-bar/tab-button.html              |  2 +-
 .../question-error/question-error.html        |  2 +-
 .../src/AddQuestionButton.tsx                 |  4 +-
 .../src/ImageItemValueWrapper.tsx             |  8 +--
 .../src/ItemValueWrapper.tsx                  |  2 +-
 .../survey-creator-react/src/LogoImage.tsx    |  4 +-
 .../src/MatrixCellWrapper.tsx                 |  4 +-
 .../src/PageNavigator.tsx                     |  2 +-
 .../src/adorners/Page.tsx                     |  2 +-
 .../src/adorners/Panel.tsx                    |  2 +-
 .../src/adorners/QuestionHeader.tsx           |  2 +-
 .../src/adorners/QuestionImage.tsx            |  2 +-
 .../src/side-bar/TabButton.tsx                |  2 +-
 .../src/adorners/CustomWidget.vue             |  2 +-
 .../survey-creator-vue/src/adorners/Image.vue |  2 +-
 .../src/adorners/ImageItemValue.vue           |  8 +--
 .../src/adorners/ItemValue.vue                |  2 +-
 .../src/adorners/MatrixCell.vue               |  4 +-
 .../survey-creator-vue/src/adorners/Panel.vue |  4 +-
 .../src/adorners/QuestionBase.vue             |  2 +-
 .../src/components/QuestionError.vue          |  2 +-
 .../survey-creator-vue/src/header/Logo.vue    |  4 +-
 .../src/page-navigator/PageNavigator.vue      |  2 +-
 .../src/side-bar/TabButton.vue                |  2 +-
 .../src/tabs/designer/AddQuestion.vue         |  2 +-
 .../tabs/designer/AddQuestionTypeSelector.vue |  2 +-
 .../src/tabs/designer/Page.vue                |  2 +-
 64 files changed, 215 insertions(+), 117 deletions(-)

diff --git a/packages/survey-creator-angular/src/add-question-type-selector.component.html b/packages/survey-creator-angular/src/add-question-type-selector.component.html
index a40569c0ff..a2318d2e61 100644
--- a/packages/survey-creator-angular/src/add-question-type-selector.component.html
+++ b/packages/survey-creator-angular/src/add-question-type-selector.component.html
@@ -1,8 +1,8 @@
 <ng-template #template>
   <button type="button" [key2click] (click)="selectQuestionType($event)" [attr.title]="questionTypeSelectorModel.title"
     [attr.aria-label]="questionTypeSelectorModel.title" class="svc-element__question-type-selector">
-    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName" [size]="24"
-      sv-ng-svg-icon></svg>
+    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName"
+      [size]="'auto'" sv-ng-svg-icon></svg>
     <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
   </button>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/add-question.component.html b/packages/survey-creator-angular/src/add-question.component.html
index e371edad46..12f19c5fd8 100644
--- a/packages/survey-creator-angular/src/add-question.component.html
+++ b/packages/survey-creator-angular/src/add-question.component.html
@@ -3,7 +3,7 @@
     (click)="addNewQuestion($event)"
     (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
     data-bind="clickBubble: false">
-    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24" sv-ng-svg-icon></svg>
+    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
     <span class="svc-add-new-item-button__text">
       {{ adorner.addNewQuestionText }}
     </span>
diff --git a/packages/survey-creator-angular/src/adorners/image-item-value.component.html b/packages/survey-creator-angular/src/adorners/image-item-value.component.html
index 9a65299dcf..0a29fe7bb9 100644
--- a/packages/survey-creator-angular/src/adorners/image-item-value.component.html
+++ b/packages/survey-creator-angular/src/adorners/image-item-value.component.html
@@ -14,17 +14,19 @@
         <span *ngIf="adorner.isDraggable && adorner.canRenderControls"
           class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
           (pointerdown)="adorner.onPointerDown($event)" [attr.title]="undefined" [attr.aria-label]="undefined">
-          <svg [iconName]="'icon-drag-area-indicator'" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="'icon-drag-area-indicator'" [size]="'auto'" sv-ng-svg-icon></svg>
         </span>
         <div *ngIf="adorner.canRenderControls" class="svc-context-container svc-image-item-value-controls">
           <ng-container *ngIf="adorner.allowRemove && !adorner.isUploading">
             <span class="svc-context-button" (click)="adorner.chooseFile(adorner)" [key2click] [attr.title]="undefined"
               [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-file'" [size]="24" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-file'" [size]="'auto'" [title]="adorner.selectFileTitle"
+                sv-ng-svg-icon></svg>
             </span>
             <span class="svc-context-button svc-context-button--danger" (click)="adorner.remove(adorner)" [key2click]
               [attr.title]="undefined" [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-delete'" [size]="24" [title]="adorner.removeFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-delete'" [size]="'auto'" [title]="adorner.removeFileTitle"
+                sv-ng-svg-icon></svg>
             </span>
           </ng-container>
         </div>
@@ -48,7 +50,7 @@
           <span class="svc-context-button svc-image-item-value-controls__add"
             *ngIf="adorner.allowAdd && !adorner.isUploading" [key2click] (click)="adorner.chooseNewFile(adorner)"
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-add-lg'" [size]="24" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
+            <svg [iconName]="'icon-add-lg'" [size]="'auto'" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
           </span>
         </div>
       </ng-container>
diff --git a/packages/survey-creator-angular/src/adorners/item-value.component.html b/packages/survey-creator-angular/src/adorners/item-value.component.html
index 70ec6dc2d4..bf19985e35 100644
--- a/packages/survey-creator-angular/src/adorners/item-value.component.html
+++ b/packages/survey-creator-angular/src/adorners/item-value.component.html
@@ -6,7 +6,7 @@
     <div class="svc-item-value__ghost"></div>
     <div class="svc-item-value-controls">
       <span *ngIf="adorner.isDraggable" class="svc-item-value-controls__button svc-item-value-controls__drag">
-        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-area-indicator'" [size]="24"
+        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-area-indicator'" [size]="'auto'"
           [attr.title]="adorner.dragTooltip" sv-ng-svg-icon></svg>
       </span>
       <span *ngIf="adorner.allowAdd" class="svc-item-value-controls__button svc-item-value-controls__add" [key2click]
diff --git a/packages/survey-creator-angular/src/adorners/matrix-cell.component.html b/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
index 12bd370f9b..6fb29dfda8 100644
--- a/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
+++ b/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
@@ -5,8 +5,9 @@
     <div class="svc-matrix-cell--selected" [class.svc-visible]="adorner.isSelected"></div>
     <ng-container *ngTemplateOutlet="contentTempl"></ng-container>
     <div *ngIf="isSupportCellEditor" class="svc-matrix-cell__question-controls">
-      <span class="svc-matrix-cell__question-controls-button" (click)="adorner.editQuestion(adorner, $event)" [key2click]>
-        <svg [iconName]="'icon-edit'" [size]="24" [size]="24" sv-ng-svg-icon></svg>
+      <span class="svc-matrix-cell__question-controls-button svc-context-button"
+        (click)="adorner.editQuestion(adorner, $event)" [key2click]>
+        <svg [iconName]="'icon-edit'" [size]="'auto'" [size]="'auto'" sv-ng-svg-icon></svg>
       </span>
     </div>
   </div>
diff --git a/packages/survey-creator-angular/src/adorners/question-image.component.html b/packages/survey-creator-angular/src/adorners/question-image.component.html
index b7179b990a..49372754e4 100644
--- a/packages/survey-creator-angular/src/adorners/question-image.component.html
+++ b/packages/survey-creator-angular/src/adorners/question-image.component.html
@@ -4,7 +4,7 @@
       <input type="file" aria-hidden="true" tabindex="-1" [accept]="adorner.acceptedTypes"
         class="svc-choose-file-input" />
       <span class="svc-context-button" [key2click] [attr.title]="undefined" [attr.aria-label]="undefined">
-        <svg [iconName]="'icon-file'" [size]="24" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
+        <svg [iconName]="'icon-file'" [size]="'auto'" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
       </span>
     </ng-container>
   </div>
diff --git a/packages/survey-creator-angular/src/components/question-error.component.html b/packages/survey-creator-angular/src/components/question-error.component.html
index 0e5e5dbf76..0aaf80df21 100644
--- a/packages/survey-creator-angular/src/components/question-error.component.html
+++ b/packages/survey-creator-angular/src/components/question-error.component.html
@@ -1,5 +1,5 @@
 <div>
-  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="24" sv-ng-svg-icon></svg>
+  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
   <span [class]="cssClasses ? cssClasses.error.item : 'panel-error-item'" [model]="error.locText" sv-ng-string>
   </span>
 </div>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/header/logo-image.component.html b/packages/survey-creator-angular/src/header/logo-image.component.html
index d009201eec..9c732b0a7b 100644
--- a/packages/survey-creator-angular/src/header/logo-image.component.html
+++ b/packages/survey-creator-angular/src/header/logo-image.component.html
@@ -15,11 +15,11 @@
         <div class="svc-context-container svc-logo-image-controls">
           <span class="svc-context-button" (click)="model.chooseFile(model)" [key2click] [attr.title]="undefined"
             [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-file'" [size]="24" sv-ng-svg-icon></svg>
+            <svg [iconName]="'icon-file'" [size]="'auto'" sv-ng-svg-icon></svg>
           </span>
           <span class="svc-context-button svc-context-button--danger" (click)="model.remove(model)" [key2click]
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-clear'" [size]="24" sv-ng-svg-icon></svg>
+            <svg [iconName]="'icon-clear'" [size]="'auto'" sv-ng-svg-icon></svg>
           </span>
         </div>
         <sv-logo-image [data]="survey"></sv-logo-image>
diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
index 141076c7fd..b1eb6ef05e 100644
--- a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
+++ b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
@@ -2,7 +2,7 @@
   <div class="svc-page-navigator" #container [visible]="model.visible">
       <div class="svc-page-navigator__selector"
           (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__selector--opened]="model.isPopupOpened">
-          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="24" sv-ng-svg-icon></svg>
+          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
           <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
       </div>
       <div>
diff --git a/packages/survey-creator-angular/src/page.component.html b/packages/survey-creator-angular/src/page.component.html
index c789b33fbb..f26defcfcd 100644
--- a/packages/survey-creator-angular/src/page.component.html
+++ b/packages/survey-creator-angular/src/page.component.html
@@ -6,7 +6,7 @@
   <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
   <div *ngIf="adorner.allowDragging && !adorner.isGhost" class="svc-question__drag-area"
     (pointerdown)="adorner.onPointerDown($event)">
-    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
       sv-ng-svg-icon></svg>
     <div class="svc-page__content-actions">
       <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html
index 0759598990..9c61065b3d 100644
--- a/packages/survey-creator-angular/src/panel.component.html
+++ b/packages/survey-creator-angular/src/panel.component.html
@@ -16,7 +16,7 @@
       <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging && adorner.element.isInteractiveDesignElement" class="svc-question__drag-area"
         (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
           sv-ng-svg-icon></svg>
         <div class="svc-question__top-actions">
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
@@ -29,7 +29,7 @@
           <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
           <div *ngIf="adorner.showAddQuestionButton" class="svc-panel__add-new-question svc-action-button" [key2click]
             (click)="addNewQuestion($event)">
-            <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24"
+            <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'"
               sv-ng-svg-icon></svg>
             <span class="svc-add-new-item-button__text">
               {{ adorner.addNewQuestionText }}
diff --git a/packages/survey-creator-angular/src/question-widget.component.html b/packages/survey-creator-angular/src/question-widget.component.html
index 2ea5c9cd54..c19791ede9 100644
--- a/packages/survey-creator-angular/src/question-widget.component.html
+++ b/packages/survey-creator-angular/src/question-widget.component.html
@@ -2,7 +2,8 @@
   <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()" (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)" [attr.data-sv-drop-target-survey-element]="adorner.element.name || null">
     <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content" [class]="adorner.css()" [key2click] (click)="adorner.select(adorner, $event)" data-bind="clickBubble: false" #container>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24" sv-ng-svg-icon></svg>
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
+          sv-ng-svg-icon></svg>
       </div>
       <div class="svc-widget__content">
         <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
index 9da82574ea..afa04630ae 100644
--- a/packages/survey-creator-angular/src/question.component.html
+++ b/packages/survey-creator-angular/src/question.component.html
@@ -14,7 +14,7 @@
       <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
       <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
           sv-ng-svg-icon></svg>
         <div class="svc-question__top-actions">
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
diff --git a/packages/survey-creator-angular/src/questions/logic-operator.component.html b/packages/survey-creator-angular/src/questions/logic-operator.component.html
index 02f1c9c5d3..62864bf3e0 100644
--- a/packages/survey-creator-angular/src/questions/logic-operator.component.html
+++ b/packages/survey-creator-angular/src/questions/logic-operator.component.html
@@ -17,7 +17,7 @@
           <div>{{model.readOnlyText}}</div>
         </div>
         <div *ngIf="model.allowClear && model.cssClasses.cleanButtonIconId" [class]="model.cssClasses.cleanButton" (click)="clear" [visible]="!model.isEmpty()">
-          <svg [class]="model.cssClasses.cleanButtonSvg" [iconName]="model.cssClasses.cleanButtonIconId" [size]="'auto'" [title]="model.clearCaption" [size]="24" sv-ng-svg-icon></svg>
+          <svg [class]="model.cssClasses.cleanButtonSvg" [iconName]="model.cssClasses.cleanButtonIconId" [size]="'auto'" [title]="model.clearCaption" sv-ng-svg-icon></svg>
         </div>
       </div>
         <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
diff --git a/packages/survey-creator-angular/src/side-bar/tab-button.component.html b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
index 86fc3f2336..d4c0ee2f29 100644
--- a/packages/survey-creator-angular/src/side-bar/tab-button.component.html
+++ b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
@@ -3,7 +3,7 @@
     <div [class]="model.buttonClassName" [attr.title]="model.tooltip" (click)="model.action()">
       <div class="svc-menu-action__icon">
         <div class="svc-menu-action__icon-container">
-          <svg [iconName]="model.iconName" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="model.iconName" [size]="'auto'" sv-ng-svg-icon></svg>
         </div>
       </div>
     </div>
diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss
index 73681f2e46..0c6a01ba96 100644
--- a/packages/survey-creator-core/src/components/item-value.scss
+++ b/packages/survey-creator-core/src/components/item-value.scss
@@ -78,6 +78,13 @@
 .svc-item-value-controls__drag-icon {
   display: block;
   transition: opacity $creator-transition-duration;
+  width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
+
+  .sv-svg-icon {
+    width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+    height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
+  }
 }
 
 .svc-item-value-wrapper:hover:not(.svc-item-value--ghost),
@@ -88,7 +95,11 @@
 }
 
 .svc-item-value-controls__drag {
-  padding: calcSize(0.5) calcSize(1);
+  padding: var(--ctr-survey-item-actionbar-drag-indicator-padding-top, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-right,  calcSize(1))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-left,  calcSize(1));
+
   cursor: move;
   opacity: 0.25;
 
diff --git a/packages/survey-creator-core/src/components/matrix-cell.scss b/packages/survey-creator-core/src/components/matrix-cell.scss
index aae70c76ee..c8dd9304c0 100644
--- a/packages/survey-creator-core/src/components/matrix-cell.scss
+++ b/packages/survey-creator-core/src/components/matrix-cell.scss
@@ -53,19 +53,7 @@
 }
 
 .svc-matrix-cell__question-controls-button {
-  display: block;
-  width: calcSize(6);
-  height: calcSize(6);
-  background: $background;
   border: 1px solid $border;
-  box-sizing: border-box;
-  border-radius: 50%;
-  padding: calcSize(1.5);
-  cursor: pointer;
-
-  use {
-    fill: $foreground-light;
-  }
 }
 
 .svc-matrix-cell:hover .svc-matrix-cell__question-controls {
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
index 2cb9bd5545..21a3ce2ef6 100644
--- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
+++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
@@ -8,13 +8,18 @@ svc-page-navigator,
 
 .svc-page-navigator__navigator-icon {
   display: block;
-  height: calcSize(3);
-  width: calcSize(3);
-  padding: calcSize(1.25);
-  border-radius: 50%;
+  width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
+  height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
+  padding: var(--ctr-page-navigator-button-padding, calcSize(1.25));
+  border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
   cursor: pointer;
   transition: background-color $creator-transition-duration;
 
+  .sv-svg-icon {
+    width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
+    height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
+  }
+
   use {
     fill: var(--ctr-page-navigator-button-icon-color, $foreground-light);
     transition: fill $creator-transition-duration;
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 0de0f9b642..054dd952f8 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -140,6 +140,8 @@ svc-page {
     z-index: 1;
 
     .svc-question__drag-element {
+      width: var(--ctr-survey-page-drag-indicator-width, calcSize(3));
+      height: var(--ctr-survey-page-drag-indicator-height, calcSize(2));
       opacity: var(--ctr-survey-page-drag-indicator-opacity, 0.5);
     }
   }
@@ -245,6 +247,7 @@ svc-page {
 
 .svc-element__add-new-question {
   -webkit-tap-highlight-color: transparent;
+  height: auto;
 }
 
 .svc-add-new-item-button__text {
@@ -255,21 +258,20 @@ svc-page {
 .svc-element__question-type-selector {
   appearance: none;
   display: flex;
-  height: calcSize(5);
-  padding: calcSize(1);
+  padding: var(--ctr-button-contextual-button-padding-top, calcSize(1))
+    var(--ctr-button-contextual-button-padding-right, calcSize(1))
+    var(--ctr-button-contextual-button-padding-bottom, calcSize(1))
+    var(--ctr-button-contextual-button-padding-left, calcSize(1));
+  border-radius: var(--ctr-button-contextual-button-corner-radius, 2px);
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
   background-color: transparent;
   cursor: pointer;
-  margin-inline-end: calcSize(1); // margin-right
+  margin: var(--ctr-button-contextual-button-margin-vertical, calcSize(1))
+    var(--ctr-button-contextual-button-margin-horizontal, calcSize(1));
   outline: none;
   transition: background-color $creator-transition-duration;
 
-  use {
-    fill: var(--ctr-library-contextual-button-icon-color, $foreground-light);
-  }
-
   &:hover {
     background-color: var(--ctr-button-contextual-button-background-color-hovered, $background-dim);
   }
@@ -279,6 +281,20 @@ svc-page {
   }
 }
 
+.svc-element__question-type-selector-icon {
+  width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+  height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+
+  .sv-svg-icon {
+    width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+    height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+  }
+
+  use {
+    fill: var(--ctr-button-contextual-button-icon-color, $foreground-light);
+  }
+}
+
 .svc-page--drag-over-empty:after {
   content: " ";
   position: absolute;
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index be611a3a64..fab2701669 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -736,11 +736,11 @@ svc-question,
 // EO reset styles for drag-drop-ghost-survey-element to avoid layout jumping while dragging
 
 .svc-hovered > .svc-question__content > .svc-question__drag-area > .svc-question__drag-element {
-  opacity: 0.5;
+  opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
 }
 
 .svc-question__content.svc-question__content--selected > .svc-question__drag-area > .svc-question__drag-element {
-  opacity: 0.5;
+  opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
   z-index: 1;
 }
 .svc-element__header--hidden {
@@ -868,9 +868,10 @@ svc-question,
 
 .svc-question__drag-element {
   width: 100%;
-  height: calcSize(4);
   opacity: 0;
   transition: opacity $creator-transition-duration;
+  width: var(--ctr-survey-question-panel-drag-area-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-question-panel-drag-area-drag-indicator-height, calcSize(2));
 
   use {
     fill: var(--ctr-survey-question-panel-drag-area-drag-indicator-color, $foreground-light);
diff --git a/packages/survey-creator-core/src/components/side-bar/tab-control.scss b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
index de511e956c..cef088bd22 100644
--- a/packages/survey-creator-core/src/components/side-bar/tab-control.scss
+++ b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
@@ -160,6 +160,11 @@
   justify-content: center;
   align-items: center;
 
+  .sv-svg-icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, 24px);
+    height: var(--ctr-menu-toolbar-button-icon-height, 24px);
+  }
+
   use {
     fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
   }
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
index 376b522fcb..528ecd4222 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
@@ -129,10 +129,12 @@
 
 .spg-question__erbox {
   @include ctrDefaultFont;
-  padding: calcSize(1) calcSize(1.5) calcSize(1) calcSize(1.5);
+  padding: var(--ctr-error-message-padding-top, calcSize(1)) var(--ctr-error-message-padding-right, calcSize(1.5))
+    var(--ctr-error-message-padding-bottom, calcSize(1)) var(--ctr-error-message-padding-left, calcSize(1.5));
+
   color: var(--ctr-error-message-text-color, $foreground);
   background-color: var(--ctr-error-message-background-color, $red-light);
-  border-radius: calcSize(0.5);
+  border-radius: var(--ctr-error-message-corner-radius, calcSize(0.5));
 }
 
 .spg-question__erbox,
@@ -140,15 +142,15 @@
 sv-question-error {
   & > div {
     display: flex;
-    gap: calcSize(1);
+    gap: var(--ctr-error-message-gap, calcSize(1));
   }
 }
 
-
-
 .spg-question__erbox-icon {
   .sv-svg-icon {
     vertical-align: top;
+    width: var(--ctr-error-message-icon-width, calcSize(3));
+    height: var(--ctr-error-message-icon-height, calcSize(3));
   }
 
   use {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index 5237a94d71..1f961f04c4 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -49,6 +49,7 @@ const Theme = {
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
+    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": "50px",
     "--ctr-survey-action-button-opacity-disabled": 0.25,
     "--ctr-property-grid-form-border-width-bottom": "0px",
     "--lbr-shadow-x-large-offset-y": "32px",
@@ -56,6 +57,7 @@ const Theme = {
     "--lbr-shadow-large-offset-y": "16px",
     "--lbr-shadow-large-blur": "32px",
     "--lbr-shadow-medium-blur": "8px",
+    "--ctr-button-group-item-text-opacity-disabled": 0.25,
     "--ctr-toolbox-item-shadow-hovered-1-color": "#00000000",
     "--ctr-toolbox-item-shadow-pressed-color": "#00000000",
     "--ctr-toolbox-item-shadow-hovered-2-color": "#00000000",
@@ -102,6 +104,7 @@ const Theme = {
     "--ctr-editor-background-color-disabled": "var(--sjs-layer-1-background-500)",
     "--ctr-editor-button-icon-color": "var(--sjs-layer-3-foreground-75)",
     "--ctr-editor-button-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-button-group-item-background-color-selected": "var(--sjs-layer-1-background-500)",
     "--ctr-radio-button-background-color": "var(--sjs-layer-3-background-500)",
     "--ctr-radio-button-border-color": "var(--sjs-border-10)",
     "--ctr-checkbox-background-color": "var(--sjs-layer-3-background-500)",
@@ -119,6 +122,7 @@ const Theme = {
     "--ctr-actionbar-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-popup-menu-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-popup-menu-footer-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-icon-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-button-group-item-background-color-disabled": "var(--sjs-layer-1-background-500)",
     "--ctr-radio-button-background-color-selected-hovered": "var(--sjs-layer-1-background-500)",
     "--ctr-checkbox-background-color-selected-hovered": "var(--sjs-layer-1-background-500)",
@@ -129,8 +133,11 @@ const Theme = {
     "--ctr-button-group-background-color": "var(--sjs-layer-3-background-500)",
     "--ctr-button-group-border-color": "var(--sjs-border-10)",
     "--ctr-button-group-border-width": "var(--sjs-stroke-x1)",
+    "--ctr-button-group-item-border-width-selected": "var(--sjs-stroke-x1)",
+    "--ctr-button-group-item-padding-horizontal": "var(--sjs-spacing-x2)",
     "--ctr-button-group-item-padding-vertical": "var(--sjs-spacing-x1)",
     "--ctr-button-group-border-color-focused": "var(--sjs-primary-background-500)",
+    "--ctr-button-group-border-width-focused": "var(--sjs-stroke-x2)",
     "--ctr-button-group-item-text-color-disabled": "var(--sjs-layer-3-foreground-100)",
     "--ctr-survey-page-background-color-selected": "var(--sjs-special-background)",
     "--ctr-surface-background-color": "var(--sjs-special-background)",
@@ -139,6 +146,8 @@ const Theme = {
     "--ctr-popup-corner-radius": "var(--sjs-corner-radius-x2)",
     "--ctr-shadow-large-color": "var(--sjs-special-glow)",
     "--ctr-shadow-medium-color": "var(--sjs-special-glow)",
+    "--ctr-button-contextual-button-margin-horizontal": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-margin-vertical": "var(--sjs-spacing-x1)",
     "--ctr-button-padding-horizontal-small": "var(--sjs-spacing-x4)",
     "--ctr-button-padding-vertical-small": "var(--sjs-spacing-x150)",
     "--ctr-button-corner-radius": "var(--sjs-corner-radius-x075)",
@@ -250,6 +259,9 @@ const Theme = {
     "--ctr-page-navigator-item-background-color-hovered": "var(--sjs-layer-1-background-500)",
     "--ctr-page-navigator-item-text-color-hovered": "var(--sjs-layer-1-foreground-100)",
     "--ctr-page-navigator-item-corner-radius": "var(--sjs-corner-radius-x075)",
+    "--ctr-page-navigator-button-padding": "var(--sjs-spacing-x125)",
+    "--ctr-page-navigator-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-page-navigator-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)",
     "--ctr-button-background-color": "var(--sjs-layer-1-background-500)",
@@ -320,6 +332,10 @@ const Theme = {
     "--ctr-notification-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-notification-text-color-error": "var(--sjs-semantic-red-foreground-100)",
     "--ctr-notification-background-color-error": "var(--sjs-semantic-red-background-500)",
+    "--ctr-string-table-row-padding-left": "var(--sjs-spacing-x3)",
+    "--ctr-string-table-row-padding-right": "var(--sjs-spacing-x3)",
+    "--ctr-string-table-row-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-string-table-row-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-string-table-row-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-string-table-row-border-color": "var(--sjs-border-10)",
     "--ctr-string-table-row-text-color-title": "var(--sjs-layer-1-foreground-100)",
@@ -339,6 +355,8 @@ const Theme = {
     "--ctr-property-grid-header-border-width-bottom": "var(--sjs-stroke-x2)",
     "--ctr-caption-with-actions-description-text-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-caption-with-actions-description-text-color-disabled": "var(--sjs-layer-1-foreground-100)",
+    "--ctr-data-table-cell-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)",
     "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)",
     "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)",
@@ -346,8 +364,18 @@ const Theme = {
     "--ctr-data-table-row-background-color-header": "var(--sjs-layer-3-background-500)",
     "--ctr-data-table-row-border-color": "var(--sjs-border-10)",
     "--ctr-data-table-row-drag-area-icon-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-data-table-row-padding-top-header": "var(--sjs-spacing-x1)",
+    "--ctr-data-table-row-padding-bottom-header": "var(--sjs-spacing-x1)",
     "--ctr-data-table-row-background-color-drop-spot": "var(--sjs-layer-1-background-400)",
     "--ctr-error-message-background-color": "var(--sjs-semantic-red-background-10)",
+    "--ctr-error-message-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-error-message-gap": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-error-message-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-error-message-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-icon-width": "var(--sjs-size-x3)",
+    "--ctr-error-message-icon-height": "var(--sjs-size-x3)",
     "--ctr-error-message-icon-color": "var(--sjs-semantic-red-background-500)",
     "--ctr-error-message-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-separator-color": "var(--sjs-border-25)",
@@ -359,7 +387,14 @@ const Theme = {
     "--ctr-toolbox-group-gap": "var(--sjs-spacing-x05)",
     "--ctr-toolbox-group-padding-left": "var(--sjs-spacing-x150)",
     "--ctr-toolbox-group-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-button-contextual-button-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-button-contextual-button-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-button-contextual-button-background-color-hovered": "var(--sjs-layer-3-background-500)",
+    "--ctr-button-contextual-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-button-contextual-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-button-contextual-button-background-color-focused": "var(--sjs-primary-background-10)",
     "--ctr-survey-question-panel-toolbar-item-background-color-hovered": "var(--sjs-layer-1-background-400)",
     "--ctr-survey-question-panel-toolbar-item-icon-color": "var(--sjs-secondary-background-500)",
@@ -369,6 +404,8 @@ const Theme = {
     "--ctr-survey-page-toolbar-item-text-color": "var(--sjs-layer-3-foreground-100)",
     "--ctr-survey-page-toolbar-item-background-color-selected": "var(--sjs-primary-background-10)",
     "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-preview-pager-border-color": "var(--sjs-border-25)",
     "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)",
@@ -406,6 +443,12 @@ const Theme = {
     "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)",
     "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)",
     "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)",
+    "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)",
+    "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-top": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-bottom": "var(--sjs-spacing-x150)",
     "--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)",
@@ -418,6 +461,12 @@ const Theme = {
     "--ctr-survey-image-picker-drop-spot-color": "var(--sjs-layer-2-background-500)",
     "--ctr-data-table-row-corner-radius-floating": "var(--sjs-corner-radius-x05)",
     "--ctr-survey-item-actionbar-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-bottom": "var(--sjs-spacing-x05)",
+    "--ctr-survey-item-actionbar-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-item-actionbar-drag-indicator-height": "var(--sjs-size-x3)",
     "--ctr-toolbox-search-padding-left": "var(--sjs-spacing-x3)",
     "--ctr-toolbox-search-padding-right": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
@@ -435,12 +484,16 @@ const Theme = {
     "--ctr-toolbox-group-header-margin-bottom": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-separator-padding-left-compact": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-separator-padding-right-compact": "var(--sjs-spacing-x2)",
+    "--ctr-font-large-size": "var(--sjs-font-size-x4)",
+    "--ctr-font-large-line-height": "var(--sjs-line-height-x5)",
     "--ctr-font-medium-size": "var(--sjs-font-size-x3)",
     "--ctr-font-medium-line-height": "var(--sjs-line-height-x4)",
     "--ctr-font-default-size": "var(--sjs-font-size-x2)",
     "--ctr-font-default-line-height": "var(--sjs-line-height-x3)",
     "--ctr-font-small-size": "var(--sjs-font-size-x150)",
     "--ctr-font-small-line-height": "var(--sjs-line-height-x2)",
+    "--ctr-font-code-size": "var(--sjs-font-size-x2)",
+    "--ctr-font-code-line-height": "var(--sjs-line-height-x3)",
     "--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
     "--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
     "--ctr-survey-radio-button-group-item-background-color-floating": "var(--sjs-layer-1-background-500)",
@@ -500,6 +553,7 @@ const Theme = {
     "--ctr-toolbox-item-background-color-submenu": "var(--sjs-layer-1-background-500)",
     "--ctr-toolbox-item-text-color-submenu": "var(--sjs-layer-2-foreground-100)",
     "--ctr-toolbox-min-width": "var(--sjs-size-x32)",
+    "--ctr-font-default-line-height-all-caps": "var(--sjs-line-height-x2)",
     "--ctr-page-banner-background-color": "var(--sjs-secondary-background-500)",
     "--ctr-page-banner-text-color": "var(--sjs-secondary-foreground-100)",
     "--ctr-toolbox-group-padding-left-compact": "var(--sjs-spacing-x150)",
@@ -546,6 +600,8 @@ const Theme = {
     "--ctr-data-table-form-border-color": "var(--sjs-border-10)",
     "--ctr-menu-toolbar-button-padding-left-with-description": "var(--sjs-spacing-x150)",
     "--ctr-menu-toolbar-button-padding-right-with-description": "var(--sjs-spacing-x150)",
+    "--ctr-survey-page-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-page-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-survey-resize-frame-grip-width": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-grip-height": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-margin": "var(--sjs-spacing-x1n)",
diff --git a/packages/survey-creator-core/src/utils/context-button.scss b/packages/survey-creator-core/src/utils/context-button.scss
index 02a47801ee..4446eeeb4d 100644
--- a/packages/survey-creator-core/src/utils/context-button.scss
+++ b/packages/survey-creator-core/src/utils/context-button.scss
@@ -11,12 +11,21 @@
   box-sizing: border-box;
   background-color: $background;
   border-radius: 50%;
-  width: calcSize(6);
-  height: calcSize(6);
+  width: var(--ctr-survey-contextual-button-width, calcSize(6));
+  height: var(--ctr-survey-contextual-button-height, calcSize(6));
+  padding: var(--ctr-survey-contextual-button-padding-top, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-right, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-bottom, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-left, calcSize(1.5));
+
   cursor: pointer;
-  padding: calcSize(1.5);
   outline: none;
 
+  .sv-svg-icon {
+    width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+    height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+  }
+
   use {
     fill: $foreground-light;
     transition: fill $creator-transition-duration;
diff --git a/packages/survey-creator-knockout/src/action-button.html b/packages/survey-creator-knockout/src/action-button.html
index ed4c2989be..2cf6acb09b 100644
--- a/packages/survey-creator-knockout/src/action-button.html
+++ b/packages/survey-creator-knockout/src/action-button.html
@@ -12,13 +12,13 @@
 <!-- ko if: data.iconName-->
 <!-- ko if: data.disabled -->
 <sv-svg-icon class="svc-action-button svc-action-button--disabled svc-action-button--icon"
-  data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: 24">
+  data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: 'auto'">
 </sv-svg-icon>
 <!-- /ko -->
 <!-- ko ifnot: data.disabled -->
 <sv-svg-icon class="svc-action-button svc-action-button--icon"
   data-bind="click: onClick, key2click, attr: { title: data.title, 'aria-label': data.text }, class: data.classes, css:{'svc-action-button--selected':data.selected}"
-  params="iconName: data.iconName, size: 24">
+  params="iconName: data.iconName, size: 'auto'">
 </sv-svg-icon>
 <!-- /ko -->
 <!-- /ko -->
\ No newline at end of file
diff --git a/packages/survey-creator-knockout/src/add-question-type-selector.html b/packages/survey-creator-knockout/src/add-question-type-selector.html
index 57100cb35d..81c7a425e8 100644
--- a/packages/survey-creator-knockout/src/add-question-type-selector.html
+++ b/packages/survey-creator-knockout/src/add-question-type-selector.html
@@ -2,7 +2,7 @@
 <button type="button"
   data-bind="click: action, key2click, clickBubble: false, attr: { title: title, 'aria-label': title }"
   class="svc-element__question-type-selector">
-  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: 24, title: title">
+  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: 'auto', title: title">
   </sv-svg-icon>
   <!-- ko if: $parent.renderPopup -->
   <sv-popup params="model: popupModel"></sv-popup>
diff --git a/packages/survey-creator-knockout/src/add-question.html b/packages/survey-creator-knockout/src/add-question.html
index c78fec2cdd..df6e1ead56 100644
--- a/packages/survey-creator-knockout/src/add-question.html
+++ b/packages/survey-creator-knockout/src/add-question.html
@@ -1,6 +1,6 @@
 <div
   data-bind="css: 'svc-element__add-new-question ' + buttonClass, click: data.addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { data.hoverStopper && data.hoverStopper(e, $element); }}">
-  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 24 } } -->
+  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
   <!-- /ko -->
   <span class="svc-add-new-item-button__text" data-bind="text: data.addNewQuestionText">
   </span>
diff --git a/packages/survey-creator-knockout/src/adorners/image-item-value.html b/packages/survey-creator-knockout/src/adorners/image-item-value.html
index 702c958de3..92eb859c82 100644
--- a/packages/survey-creator-knockout/src/adorners/image-item-value.html
+++ b/packages/survey-creator-knockout/src/adorners/image-item-value.html
@@ -15,7 +15,7 @@
     <!-- ko if: isDraggable && canRenderControls-->
     <sv-svg-icon class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
       data-bind="event: { pointerdown: function(model, event) { onPointerDown(event); } }"
-      params="iconName: 'icon-drag-area-indicator', size: 24">
+      params="iconName: 'icon-drag-area-indicator', size: 'auto'">
     </sv-svg-icon>
     <!-- /ko -->
 
@@ -23,9 +23,9 @@
     <div class="svc-context-container svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">
       <!-- ko if: allowRemove && !isUploading -->
       <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-        params="iconName: 'icon-file', size: 24, title: selectFileTitle" role="button"></sv-svg-icon>
+        params="iconName: 'icon-file', size: 'auto', title: selectFileTitle" role="button"></sv-svg-icon>
       <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click"
-        params="iconName: 'icon-delete', size: 24, title: removeFileTitle" role="button"></sv-svg-icon>
+        params="iconName: 'icon-delete', size: 'auto', title: removeFileTitle" role="button"></sv-svg-icon>
       <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -50,7 +50,8 @@
     <div class="svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">
       <!-- ko if: allowAdd && !isUploading -->
       <sv-svg-icon class="svc-context-button svc-image-item-value-controls__add"
-        data-bind="click: chooseNewFile, key2click, clickBubble: false" params="iconName: 'icon-add-lg', size: 24, title: addFileTitle">
+        data-bind="click: chooseNewFile, key2click, clickBubble: false"
+        params="iconName: 'icon-add-lg', size: 'auto', title: addFileTitle">
       </sv-svg-icon>
       <!-- /ko -->
     </div>
diff --git a/packages/survey-creator-knockout/src/adorners/item-value.html b/packages/survey-creator-knockout/src/adorners/item-value.html
index b8715f6b50..b31b1f3a82 100644
--- a/packages/survey-creator-knockout/src/adorners/item-value.html
+++ b/packages/survey-creator-knockout/src/adorners/item-value.html
@@ -5,7 +5,7 @@
     <!-- ko if: isDraggable -->
     <span class="svc-item-value-controls__button svc-item-value-controls__drag">
       <sv-svg-icon class="svc-item-value-controls__drag-icon"
-        params="iconName: 'icon-drag-area-indicator', size: 24, title: dragTooltip"></sv-svg-icon>
+        params="iconName: 'icon-drag-area-indicator', size: 'auto', title: dragTooltip"></sv-svg-icon>
     </span>
     <!-- /ko -->
     <!-- ko if: allowAdd -->
diff --git a/packages/survey-creator-knockout/src/adorners/matrix-cell.html b/packages/survey-creator-knockout/src/adorners/matrix-cell.html
index 53fb4612a5..39c08f864d 100644
--- a/packages/survey-creator-knockout/src/adorners/matrix-cell.html
+++ b/packages/survey-creator-knockout/src/adorners/matrix-cell.html
@@ -7,8 +7,8 @@
 
   <!-- ko if: $data.isSupportCellEditor -->
   <div class="svc-matrix-cell__question-controls">
-    <sv-svg-icon class="svc-matrix-cell__question-controls-button" data-bind="click: editQuestion, key2click"
-      params="iconName: 'icon-edit', size: 24"></sv-svg-icon>
+    <sv-svg-icon class="svc-matrix-cell__question-controls-button svc-context-button" data-bind="click: editQuestion, key2click"
+      params="iconName: 'icon-edit', size: 'auto'"></sv-svg-icon>
   </div>
   <!-- /ko -->
 
diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html
index 9259948d6f..42257aae48 100644
--- a/packages/survey-creator-knockout/src/adorners/panel.html
+++ b/packages/survey-creator-knockout/src/adorners/panel.html
@@ -20,7 +20,7 @@
     <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
     <!-- ko if: allowDragging && $data.element.isInteractiveDesignElement -->
     <div class="svc-question__drag-area" data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event) } }">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
       <div class="svc-question__top-actions">
         <!-- ko component: { name: 'sv-action-bar', params: { model: topActionContainer, handleClick: false } } -->
@@ -37,7 +37,7 @@
         <!-- ko if: showAddQuestionButton -->
         <div class="svc-panel__add-new-question svc-action-button"
           data-bind="click: addNewQuestion, key2click, clickBubble: false">
-          <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 24 } } -->
+          <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
           <!-- /ko -->
           <span class="svc-add-new-item-button__text" data-bind="text: $data.addNewQuestionText">
           </span>
diff --git a/packages/survey-creator-knockout/src/adorners/question-image.html b/packages/survey-creator-knockout/src/adorners/question-image.html
index ab06b08d9a..cbc04c649c 100644
--- a/packages/survey-creator-knockout/src/adorners/question-image.html
+++ b/packages/survey-creator-knockout/src/adorners/question-image.html
@@ -4,7 +4,7 @@
   <input type="file" aria-hidden="true" tabindex="-1" class="svc-choose-file-input"
     data-bind="attr: { accept: acceptedTypes }" />
   <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-    params="iconName: 'icon-file', size: 24"></sv-svg-icon>
+    params="iconName: 'icon-file', size: 'auto'"></sv-svg-icon>
   <!-- /ko -->
 </div>
 <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html
index 80a6e02a1d..a7733a399c 100644
--- a/packages/survey-creator-knockout/src/adorners/question.html
+++ b/packages/survey-creator-knockout/src/adorners/question.html
@@ -20,7 +20,7 @@
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
       <div class="svc-question__top-actions">
         <!-- ko component: { name: 'sv-action-bar', params: { model: topActionContainer, handleClick: false } } -->
diff --git a/packages/survey-creator-knockout/src/header/logo-image.html b/packages/survey-creator-knockout/src/header/logo-image.html
index 5a0bbc44bc..22fa633383 100644
--- a/packages/survey-creator-knockout/src/header/logo-image.html
+++ b/packages/survey-creator-knockout/src/header/logo-image.html
@@ -14,9 +14,9 @@
   <div data-bind="css: containerCss">
     <div class="svc-context-container svc-logo-image-controls">
       <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-        params="iconName: 'icon-file', size: 24"></sv-svg-icon>
+        params="iconName: 'icon-file', size: 'auto'"></sv-svg-icon>
       <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click"
-        params="iconName: 'icon-clear', size: 24"></sv-svg-icon>
+        params="iconName: 'icon-clear', size: 'auto'"></sv-svg-icon>
     </div>
     <!-- ko component: { name: 'sv-logo-image', params: survey } -->
     <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
index 98b73b1674..043cf56614 100644
--- a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
+++ b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
@@ -2,7 +2,7 @@
 <div class="svc-page-navigator">
     <div class="svc-page-navigator__selector"
         data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { 'svc-page-navigator__selector--opened': isPopupOpened }">
-        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 24"></sv-svg-icon>
+        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 'auto'"></sv-svg-icon>
         <sv-popup params="model: popupModel, cssClass: 'svc-page-navigator__popup'"></sv-popup>
     </div>
     <div>
diff --git a/packages/survey-creator-knockout/src/page.html b/packages/survey-creator-knockout/src/page.html
index 7e28e7d256..755ab55001 100644
--- a/packages/survey-creator-knockout/src/page.html
+++ b/packages/survey-creator-knockout/src/page.html
@@ -6,7 +6,7 @@
   <!-- ko if: allowDragging && !isGhost -->
   <div class="svc-question__drag-area"
     data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">
-    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
     <!-- /ko -->
     <div class="svc-page__content-actions">
       <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer } } -->
diff --git a/packages/survey-creator-knockout/src/question-widget.html b/packages/survey-creator-knockout/src/question-widget.html
index a8e4a23b98..3ff6e83db0 100644
--- a/packages/survey-creator-knockout/src/question-widget.html
+++ b/packages/survey-creator-knockout/src/question-widget.html
@@ -5,7 +5,7 @@
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="visible:allowDragging, event: {pointerdown: (model, event)=>{onPointerDown(event)}}">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
     </div>
     <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/side-bar/tab-button.html b/packages/survey-creator-knockout/src/side-bar/tab-button.html
index 9f19f105c8..a9fcfc20c5 100644
--- a/packages/survey-creator-knockout/src/side-bar/tab-button.html
+++ b/packages/survey-creator-knockout/src/side-bar/tab-button.html
@@ -4,7 +4,7 @@
     attr: { title: model.tooltip }">
     <div class="svc-menu-action__icon">
       <div class="svc-menu-action__icon-container">
-        <!-- ko component: { name: 'sv-svg-icon', params: { iconName: model.iconName, size: 24 } } -->
+        <!-- ko component: { name: 'sv-svg-icon', params: { iconName: model.iconName, size: 'auto' } } -->
         <!-- /ko -->
       </div>
     </div>
diff --git a/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html b/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
index ee6f860b40..ef311ebdb2 100644
--- a/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
+++ b/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
@@ -1,6 +1,6 @@
 <div>
   <sv-svg-icon aria-hidden="true" data-bind="css: cssClasses.error.icon"
-    params="iconName: 'icon-alert_24x24', size: 24">
+    params="iconName: 'icon-alert_24x24', size: 'auto'">
   </sv-svg-icon>
   <span data-bind="css: cssClasses.error.item">
     <!-- ko template: { name: 'survey-string', data: error.locText } --><!-- /ko -->
diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx
index 80d65da20d..3c52187948 100644
--- a/packages/survey-creator-react/src/AddQuestionButton.tsx
+++ b/packages/survey-creator-react/src/AddQuestionButton.tsx
@@ -29,7 +29,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
       <span className="svc-element__question-type-selector-icon">
         <SvgIcon
           iconName={questionTypeSelectorModel.iconName}
-          size={24}
+          size={"auto"}
           title={this.model.addNewQuestionText}
         ></SvgIcon>
       </span>
@@ -52,7 +52,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
         <SvgIcon
           className={"svc-panel__add-new-question-icon"}
           iconName={"icon-add_24x24"}
-          size={24}
+          size={"auto"}
         ></SvgIcon>
         <span className="svc-add-new-item-button__text">
           {this.model.addNewQuestionText}
diff --git a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
index 3a9fef3ecc..e4542cea64 100644
--- a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
+++ b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
@@ -84,7 +84,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
 
         <div className="svc-image-item-value-controls">
           {this.model.allowAdd && !this.model.isUploading ? attachKey2click(<span className="svc-context-button svc-image-item-value-controls__add" onClick={() => this.model.chooseNewFile(this.model)}>
-            <SvgIcon size={24} iconName={"icon-add-lg"} title={this.model.addFileTitle}></SvgIcon>
+            <SvgIcon size={"auto"} iconName={"icon-add-lg"} title={this.model.addFileTitle}></SvgIcon>
           </span>) : null}
         </div>
       </>);
@@ -100,7 +100,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
               <span className="svc-context-button svc-image-item-value-controls__drag-area-indicator"
                 onPointerDown={(event: any) => this.model.onPointerDown(event)}
               >
-                <SvgIcon size={24} iconName={"icon-drag-area-indicator"}></SvgIcon>
+                <SvgIcon size={"auto"} iconName={"icon-drag-area-indicator"}></SvgIcon>
               </span>
               : null
           }
@@ -112,13 +112,13 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
                   className="svc-context-button"
                   onClick={() => this.model.chooseFile(this.model)}
                 >
-                  <SvgIcon role="button" size={24} iconName={"icon-file"} title={this.model.selectFileTitle}></SvgIcon>
+                  <SvgIcon role="button" size={"auto"} iconName={"icon-file"} title={this.model.selectFileTitle}></SvgIcon>
                 </span>) : null}
                 {this.model.allowRemove && !this.model.isUploading ? attachKey2click(<span
                   className="svc-context-button svc-context-button--danger"
                   onClick={() => this.model.remove(this.model)}
                 >
-                  <SvgIcon role="button" size={24} iconName={"icon-delete"} title={this.model.removeFileTitle}></SvgIcon>
+                  <SvgIcon role="button" size={"auto"} iconName={"icon-delete"} title={this.model.removeFileTitle}></SvgIcon>
                 </span>) : null}
               </div>
               : null
diff --git a/packages/survey-creator-react/src/ItemValueWrapper.tsx b/packages/survey-creator-react/src/ItemValueWrapper.tsx
index 0bd48aca14..21431e6490 100644
--- a/packages/survey-creator-react/src/ItemValueWrapper.tsx
+++ b/packages/survey-creator-react/src/ItemValueWrapper.tsx
@@ -79,7 +79,7 @@ export class ItemValueAdornerComponent extends CreatorModelElement<
           <span
             className="svc-item-value-controls__button svc-item-value-controls__drag"
           >
-            <SvgIcon className="svc-item-value-controls__drag-icon" size={24} iconName={"icon-drag-area-indicator"} title={this.model.dragTooltip}></SvgIcon>
+            <SvgIcon className="svc-item-value-controls__drag-icon" size={"auto"} iconName={"icon-drag-area-indicator"} title={this.model.dragTooltip}></SvgIcon>
           </span>
         ) : null}
         {this.model.allowRemove ? attachKey2click(<span
diff --git a/packages/survey-creator-react/src/LogoImage.tsx b/packages/survey-creator-react/src/LogoImage.tsx
index 4acb4c2898..30680920e5 100644
--- a/packages/survey-creator-react/src/LogoImage.tsx
+++ b/packages/survey-creator-react/src/LogoImage.tsx
@@ -37,7 +37,7 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
       className="svc-context-button"
       onClick={() => this.model.chooseFile(this.model)}
     >
-      <SvgIcon size={24} iconName={"icon-file"}></SvgIcon>
+      <SvgIcon size={"auto"} iconName={"icon-file"}></SvgIcon>
     </span>);
   }
   renderClearButton() {
@@ -45,7 +45,7 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
       className="svc-context-button svc-context-button--danger"
       onClick={() => this.model.remove(this.model)}
     >
-      <SvgIcon size={24} iconName={"icon-clear"}></SvgIcon>
+      <SvgIcon size={"auto"} iconName={"icon-clear"}></SvgIcon>
     </span>);
   }
   renderButtons() {
diff --git a/packages/survey-creator-react/src/MatrixCellWrapper.tsx b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
index 1b8b717aa5..19f852aa1a 100644
--- a/packages/survey-creator-react/src/MatrixCellWrapper.tsx
+++ b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
@@ -54,8 +54,8 @@ export class MatrixCellAdornerComponent extends CreatorModelElement<
     let controls = null;
     if (!!this.model.isSupportCellEditor) {
       controls = <div className="svc-matrix-cell__question-controls">
-        {attachKey2click(<span className="svc-matrix-cell__question-controls-button" onClick={(event: any) => this.model.editQuestion(this.model, event)}>
-          <SvgIcon size={24} iconName={"icon-edit"}></SvgIcon>
+        {attachKey2click(<span className="svc-matrix-cell__question-controls-button svc-context-button" onClick={(event: any) => this.model.editQuestion(this.model, event)}>
+          <SvgIcon size={"auto"} iconName={"icon-edit"}></SvgIcon>
         </span>)}
       </div>;
     }
diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
index 7424f69de2..bf1112ad61 100644
--- a/packages/survey-creator-react/src/PageNavigator.tsx
+++ b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -88,7 +88,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
           <SvgIcon
             className="svc-page-navigator__navigator-icon"
             iconName={this.model.icon}
-            size={24}
+            size={"auto"}
             title={this.model.pageSelectorCaption}
           ></SvgIcon>
 
diff --git a/packages/survey-creator-react/src/adorners/Page.tsx b/packages/survey-creator-react/src/adorners/Page.tsx
index b74ce18c66..3df26f2e24 100644
--- a/packages/survey-creator-react/src/adorners/Page.tsx
+++ b/packages/survey-creator-react/src/adorners/Page.tsx
@@ -116,7 +116,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
       <div className={"svc-question__drag-area"}
         onPointerDown={(event: any) => this.model.onPointerDown(event)}
       >
-        <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SvgIcon className="svc-question__drag-element" size={"auto"} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
         {actions}
       </div>
     );
diff --git a/packages/survey-creator-react/src/adorners/Panel.tsx b/packages/survey-creator-react/src/adorners/Panel.tsx
index 174abf1307..bba1a5339f 100644
--- a/packages/survey-creator-react/src/adorners/Panel.tsx
+++ b/packages/survey-creator-react/src/adorners/Panel.tsx
@@ -35,7 +35,7 @@ export class PanelAdornerComponent extends QuestionAdornerComponent {
             <SvgIcon
               className={"svc-panel__add-new-question-icon"}
               iconName={"icon-add_24x24"}
-              size={24}
+              size={"auto"}
             ></SvgIcon>
             <span className="svc-add-new-item-button__text">
               {this.model.addNewQuestionText}
diff --git a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
index e88c0dcc33..592b957787 100644
--- a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
@@ -26,7 +26,7 @@ export class QuestionWrapperHeader extends React.Component<QuestionWrapperHeader
           this.props.model.onPointerDown(event)
         }
       >
-        <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SvgIcon className="svc-question__drag-element" size={"auto"} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
         <div className="svc-question__top-actions">
           <SurveyActionBar model={this.props.model.topActionContainer} handleClick={false}></SurveyActionBar>
         </div>
diff --git a/packages/survey-creator-react/src/adorners/QuestionImage.tsx b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
index c6cd51ea88..f1c3ac3350 100644
--- a/packages/survey-creator-react/src/adorners/QuestionImage.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
@@ -53,7 +53,7 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
         className="svc-context-button"
         onClick={() => this.imageModel.chooseFile(this.imageModel)}
       >
-        <SvgIcon size={24} iconName={"icon-file"}></SvgIcon>
+        <SvgIcon size={"auto"} iconName={"icon-file"}></SvgIcon>
       </span>) : null}
     </div>);
   }
diff --git a/packages/survey-creator-react/src/side-bar/TabButton.tsx b/packages/survey-creator-react/src/side-bar/TabButton.tsx
index 0a4d8f3d9c..db006c79a6 100644
--- a/packages/survey-creator-react/src/side-bar/TabButton.tsx
+++ b/packages/survey-creator-react/src/side-bar/TabButton.tsx
@@ -23,7 +23,7 @@ export class TabButtonComponent extends SurveyElementBase<{ model: MenuButton },
         >
           <div className="svc-menu-action__icon">
             <div className="svc-menu-action__icon-container">
-              <SvgIcon iconName={this.props.model.iconName} size={24}></SvgIcon>
+              <SvgIcon iconName={this.props.model.iconName} size={"auto"}></SvgIcon>
             </div>
           </div>
         </div>
diff --git a/packages/survey-creator-vue/src/adorners/CustomWidget.vue b/packages/survey-creator-vue/src/adorners/CustomWidget.vue
index 4715e6a7bd..c8dda0be6b 100644
--- a/packages/survey-creator-vue/src/adorners/CustomWidget.vue
+++ b/packages/survey-creator-vue/src/adorners/CustomWidget.vue
@@ -25,7 +25,7 @@
           :is="'sv-svg-icon'"
           class="svc-question__drag-element"
           :iconName="'icon-drag-area-indicator_24x16'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
       </div>
       <div class="svc-widget__content">
diff --git a/packages/survey-creator-vue/src/adorners/Image.vue b/packages/survey-creator-vue/src/adorners/Image.vue
index 20993e2cfc..3af5fd9999 100644
--- a/packages/survey-creator-vue/src/adorners/Image.vue
+++ b/packages/survey-creator-vue/src/adorners/Image.vue
@@ -20,7 +20,7 @@
         <SvComponent
           :is="'sv-svg-icon'"
           :iconName="'icon-file'"
-          :size="24"
+          :size="'auto'"
           @click="model.chooseFile(model)"
         ></SvComponent>
       </span>
diff --git a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
index 23fe6ee531..50abb4fd39 100644
--- a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
+++ b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
@@ -33,7 +33,7 @@
           <SvComponent
             :is="'sv-svg-icon'"
             :iconName="'icon-drag-area-indicator'"
-            :size="24"
+            :size="'auto'"
           ></SvComponent>
         </span>
         <div
@@ -51,7 +51,7 @@
               :is="'sv-svg-icon'"
               role="button"
               :iconName="'icon-file'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.selectFileTitle"
             ></SvComponent>
           </span>
@@ -66,7 +66,7 @@
               :is="'sv-svg-icon'"
               role="button"
               :iconName="'icon-delete'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.removeFileTitle"
             ></SvComponent>
           </span>
@@ -109,7 +109,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-add-lg'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.addFileTitle"
             ></SvComponent>
           </span>
diff --git a/packages/survey-creator-vue/src/adorners/ItemValue.vue b/packages/survey-creator-vue/src/adorners/ItemValue.vue
index b3057ce330..dfd54eb667 100644
--- a/packages/survey-creator-vue/src/adorners/ItemValue.vue
+++ b/packages/survey-creator-vue/src/adorners/ItemValue.vue
@@ -22,7 +22,7 @@
           :is="'sv-svg-icon'"
           class="svc-item-value-controls__drag-icon"
           :iconName="'icon-drag-area-indicator'"
-          :size="24"
+          :size="'auto'"
           :title="adorner.dragTooltip"
         ></SvComponent>
       </span>
diff --git a/packages/survey-creator-vue/src/adorners/MatrixCell.vue b/packages/survey-creator-vue/src/adorners/MatrixCell.vue
index bc7dfc1c83..d1251219de 100644
--- a/packages/survey-creator-vue/src/adorners/MatrixCell.vue
+++ b/packages/survey-creator-vue/src/adorners/MatrixCell.vue
@@ -16,14 +16,14 @@
       class="svc-matrix-cell__question-controls"
     >
       <span
-        class="svc-matrix-cell__question-controls-button"
+        class="svc-matrix-cell__question-controls-button svc-context-button"
         @click="adorner.editQuestion(adorner, $event)"
         v-key2click
       >
         <SvComponent
           :is="'sv-svg-icon'"
           :iconName="'icon-edit'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
       </span>
     </div>
diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue
index b871154b1e..6f973d00ff 100644
--- a/packages/survey-creator-vue/src/adorners/Panel.vue
+++ b/packages/survey-creator-vue/src/adorners/Panel.vue
@@ -54,7 +54,7 @@
           :is="'sv-svg-icon'"
           class="svc-question__drag-element"
           :iconName="'icon-drag-area-indicator_24x16'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
         <div class="svc-question__top-actions">
           <SvComponent
@@ -83,7 +83,7 @@
               :is="'sv-svg-icon'"
               class="svc-panel__add-new-question-icon"
               :iconName="'icon-add_24x24'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
             <span class="svc-add-new-item-button__text">
               {{ adorner.addNewQuestionText }}
diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
index 138f57a6cc..3162f27580 100644
--- a/packages/survey-creator-vue/src/adorners/QuestionBase.vue
+++ b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
@@ -53,7 +53,7 @@
           v-bind="{
             css: 'svc-question__drag-element',
             iconName: 'icon-drag-area-indicator_24x16',
-            size: 24,
+            size: 'auto',
           }"
         ></SvComponent>
         <div class="svc-question__top-actions">
diff --git a/packages/survey-creator-vue/src/components/QuestionError.vue b/packages/survey-creator-vue/src/components/QuestionError.vue
index d66ebd0ffd..8c42f22f42 100644
--- a/packages/survey-creator-vue/src/components/QuestionError.vue
+++ b/packages/survey-creator-vue/src/components/QuestionError.vue
@@ -4,7 +4,7 @@
       :is="'sv-svg-icon'"
       :class="cssClasses.error.icon"
       :iconName="'icon-alert_24x24'"
-      :size="24"
+      :size="'auto'"
     ></SvComponent>
     <span
       :class="
diff --git a/packages/survey-creator-vue/src/header/Logo.vue b/packages/survey-creator-vue/src/header/Logo.vue
index 8d012c68b7..f6bf33c634 100644
--- a/packages/survey-creator-vue/src/header/Logo.vue
+++ b/packages/survey-creator-vue/src/header/Logo.vue
@@ -33,7 +33,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-file'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
           </span>
           <span
@@ -46,7 +46,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-clear'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
           </span>
         </div>
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
index 4632388b96..acf00e8d14 100644
--- a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
+++ b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
@@ -11,7 +11,7 @@
         :is="'sv-svg-icon'"
         class="svc-page-navigator__navigator-icon"
         :iconName="model.icon"
-        :size="24"
+        :size="'auto'"
       ></SvComponent>
       <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>
     </div>
diff --git a/packages/survey-creator-vue/src/side-bar/TabButton.vue b/packages/survey-creator-vue/src/side-bar/TabButton.vue
index 39ab32d441..5bb8ae77fb 100644
--- a/packages/survey-creator-vue/src/side-bar/TabButton.vue
+++ b/packages/survey-creator-vue/src/side-bar/TabButton.vue
@@ -10,7 +10,7 @@
           <SvComponent
             :is="'sv-svg-icon'"
             :iconName="model.iconName"
-            :size="24"
+            :size="'auto'"
           ></SvComponent>
         </div>
       </div>
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
index fc713d44e9..bb1832203a 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
@@ -14,7 +14,7 @@
       :is="'sv-svg-icon'"
       class="svc-panel__add-new-question-icon"
       :iconName="'icon-add_24x24'"
-      :size="24"
+      :size="'auto'"
     ></SvComponent>
     <span class="svc-add-new-item-button__text">
       {{ item.data.addNewQuestionText }}
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
index 30d040a279..6febb79215 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
@@ -16,7 +16,7 @@
       class="svc-element__question-type-selector-icon"
       v-bind="{
         iconName: questionTypeSelectorModel.iconName,
-        size: 24,
+        size: 'auto',
         title: questionTypeSelectorModel.title,
       }"
     ></SvComponent>
diff --git a/packages/survey-creator-vue/src/tabs/designer/Page.vue b/packages/survey-creator-vue/src/tabs/designer/Page.vue
index 4168df1276..b2778a16cc 100644
--- a/packages/survey-creator-vue/src/tabs/designer/Page.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/Page.vue
@@ -35,7 +35,7 @@
         v-bind="{
           css: 'svc-question__drag-element',
           iconName: 'icon-drag-area-indicator_24x16',
-          size: 24,
+          size: 'auto',
         }"
       ></SvComponent>
       <div class="svc-page__content-actions">

From 2b6777242b5b329f1bafec83462815133005b209 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 30 Oct 2024 19:04:09 +0300
Subject: [PATCH 02/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../src/components/side-bar/side-bar-model.ts |  2 ++
 .../src/components/side-bar/side-bar.scss     | 12 ++++++++-
 .../src/components/tabs/designer-plugin.ts    |  7 +++++
 .../src/components/tabs/json-editor-plugin.ts |  5 +++-
 .../components/tabs/json-editor-textarea.scss |  2 ++
 .../src/components/tabs/logic-plugin.ts       |  1 +
 .../src/components/tabs/logic-ui.scss         | 27 +++++++++++--------
 .../src/components/tabs/test-plugin.ts        |  8 ++++++
 .../src/components/tabs/theme-plugin.ts       | 13 +++++++++
 .../src/components/tabs/translation.ts        |  6 ++++-
 .../plugins/undo-redo/undo-redo-controller.ts |  2 ++
 .../blocks/spg-action-bar.scss                | 10 ++++++-
 .../property-grid-theme/property-grid.scss    | 12 +++++++--
 .../src/property-grid/index.ts                |  4 ++-
 .../survey-creator-core/src/themes/default.ts | 26 ++++++++++++++++++
 .../survey-creator-core/src/utils/layout.scss | 11 ++++++++
 16 files changed, 130 insertions(+), 18 deletions(-)

diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
index 000d44a4e4..4e68c6eca4 100644
--- a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
+++ b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
@@ -123,6 +123,7 @@ export class SidebarModel extends Base {
     this._collapseAction = new Action({
       id: "svd-grid-hide",
       iconName: "icon-collapse-panel",
+      iconSize: "auto",
       css: "svd-grid-hide",
       locTitleName: "ed.hidePanel",
       showTitle: false,
@@ -147,6 +148,7 @@ export class SidebarModel extends Base {
       this._expandAction = new Action({
         id: "svd-grid-expand",
         iconName: "icon-expand-panel",
+        iconSize: "auto",
         css: "svd-grid-expand",
         needSeparator: true,
         action: () => {
diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar.scss b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
index 2f58724b06..6295a1533f 100644
--- a/packages/survey-creator-core/src/components/side-bar/side-bar.scss
+++ b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
@@ -326,9 +326,19 @@ $tabs-width: calc(var(--ctr-menu-toolbar-button-padding-left, 8px) + var(--ctr-m
   }
 }
 
-
 .svd-grid-hide {
   margin-inline-end: auto;
+
+  .sv-action-bar-item--icon {
+    padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-right, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+  }
+  .sv-svg-icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+    height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+  }
 }
 
 .svc-side-bar {
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
index 140a44d35d..469dafae8d 100644
--- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -158,6 +158,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       id: "theme-settings",
       locTooltipName: "pe.tabs.creatorSettingTitle",
       iconName: "icon-config",
+      iconSize: "auto",
       pressed: false,
       action: () => {
         this.creator.sidebar.expandSidebar();
@@ -240,6 +241,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
           id: p.name,
           tooltip: p.title,
           iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
+          iconSize: "auto",
           active: this.activePageIsPropertyGrid && p.name === this.propertyGrid.survey.currentPage.name,
           pressed: false,
           action: () => {
@@ -309,6 +311,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     const toolboxAction = new Action({
       id: "svd-toolbox",
       iconName: "icon-toolbox",
+      iconSize: "auto",
       needSeparator: true,
       action: () => {
         if (!this.creator.showSidebar) {
@@ -327,6 +330,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.surveySettingsAction = new Action({
       id: "svd-settings",
       iconName: "icon-settings",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return notShortCircuitAnd(this.creator.toolboxLocation !== "sidebar", !this.creator.isMobileView);
       }),
@@ -349,6 +353,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.saveSurveyAction = new Action({
       id: "svd-save",
       iconName: "icon-save",
+      iconSize: "auto",
       action: () => this.creator.saveSurveyActionHandler(),
       active: false,
       enabled: false,
@@ -363,6 +368,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       visible: this.createVisibleUpdater(),
       active: true,
       locTitleName: "ed.designer",
@@ -373,6 +379,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       action: () => {
         this.creator.makeNewViewActive(this.creator.showThemeTab ? "theme" : "test");
       },
diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts b/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
index 0659c4393a..e8f861b26f 100644
--- a/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
@@ -96,7 +96,7 @@ export abstract class JsonEditorBaseModel extends Base {
         title: title,
         tooltip: error.text,
         iconName: "icon-error",
-        iconSize: 16,
+        iconSize: "auto",
         data: {
           error: error,
           showFixButton: error.isFixable,
@@ -162,6 +162,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.importAction = new Action({
       id: "svc-json-import",
       iconName: "icon-load",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonImportButton",
       locTooltipName: "ed.surveyJsonImportButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
@@ -188,6 +189,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.exportAction = new Action({
       id: "svc-json-export",
       iconName: "icon-download",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonExportButton",
       locTooltipName: "ed.surveyJsonExportButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
@@ -202,6 +204,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.copyAction = new Action({
       id: "svc-json-copy",
       iconName: "icon-copy",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonCopyButton",
       locTooltipName: "ed.surveyJsonCopyButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
index d7153c7222..6dee6ad8ae 100644
--- a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
+++ b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
@@ -98,6 +98,8 @@ svc-tab-json-editor-textarea {
 
 .svc-json-error__icon {
   fill: $red;
+  width: var(--ctr-code-viewer-code-error-row-icon-width, calcSize(2));
+  height: var(--ctr-code-viewer-code-error-row-icon-height, calcSize(2));
 }
 
 .svc-json-error__container {
diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
index a05636f04b..71438ae3d1 100644
--- a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
@@ -146,6 +146,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
       this.fastEntryAction = new Action({
         id: "svc-logic-fast-entry",
         iconName: "icon-fast-entry",
+        iconSize: "auto",
         locTitleName: "pe.fastEntry",
         visible: false,
         component: "sv-action-bar-item",
diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.scss b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
index 1b6f200e80..4cea173cfe 100644
--- a/packages/survey-creator-core/src/components/tabs/logic-ui.scss
+++ b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
@@ -141,24 +141,29 @@
 }
 
 .svc-logic-condition-remove.svc-icon-remove {
-  display: none;
-  width: calcSize(5);
-  height: calcSize(5);
-  background-repeat: no-repeat;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
-  background-size: calcSize(3) calcSize(3);
-  background-position: center;
+  // display: none;
+  // width: calcSize(5);
+  // height: calcSize(5);
+  // background-repeat: no-repeat;
+  // background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
+  // background-size: calcSize(3) calcSize(3);
+  // background-position: center;
 }
 
 .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
   display: none;
-  width: calcSize(5);
-  height: calcSize(5);
   background: none;
   justify-content: center;
   align-items: center;
-  padding: 0;
-
+  padding: var(--ctr-survey-action-button-padding-top, calcSize(1))
+    var(--ctr-survey-action-button-padding-right-icon-only, calcSize(1))
+    var(--ctr-survey-action-button-padding-bottom, calcSize(1))
+    var(--ctr-survey-action-button-padding-left-icon-only, calcSize(1));
+
+  .sv-svg-icon {
+    width: var(--ctr-survey-action-button-icon-width, calcSize(3));
+    height: var(--ctr-survey-action-button-icon-height, calcSize(3));
+  }
   use {
     fill: var(--ctr-survey-action-button-icon-color-negative, $red);
   }
diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
index cf9f5153f5..2172b02723 100644
--- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -149,6 +149,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.deviceSelectorAction = createDropdownActionModel({
         id: "deviceSelector",
         iconName: "icon-device-desktop",
+        iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
           return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
@@ -167,6 +168,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.orientationSelectorAction = new Action({
         id: "orientationSelector",
         iconName: "icon-device-rotate",
+        iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
           return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
@@ -182,6 +184,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.invisibleToggleAction = new Action({
         id: "showInvisible",
         iconName: "icon-invisible-items",
+        iconSize: "auto",
         mode: "small",
         needSeparator: <any>new ComputedUpdater<boolean>(() => {
           return !this.creator.isMobileView;
@@ -235,6 +238,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.changeThemeAction = new Action({
         id: "themeSwitcher",
         iconName: "icon-theme",
+        iconSize: "auto",
         component: "sv-action-bar-item-dropdown",
         mode: "large",
         locTitleName: this.getThemeLocName(getStartThemeName()),
@@ -275,6 +279,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       action: () => { this.creator.makeNewViewActive("designer"); },
       visible: this.createVisibleUpdater(),
       locTitleName: "ed.designer",
@@ -284,6 +289,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       active: true,
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",
@@ -294,6 +300,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.prevPageAction = new Action({
       id: "prevPage",
       iconName: "icon-arrow-left_16x16",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return this.creator.isMobileView;
       }),
@@ -303,6 +310,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.nextPageAction = new Action({
       id: "nextPage",
       iconName: "icon-arrow-right_16x16",
+      iconSize: "auto",
       visible: false
     });
     return items;
diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
index 537946e9e7..f3afe2d7b4 100644
--- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -499,6 +499,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       action: () => { this.creator.makeNewViewActive("designer"); },
       visible: this.createVisibleUpdater(),
       locTitleName: "ed.designer",
@@ -508,6 +509,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.prevPageAction = new Action({
       id: "prevPage",
       iconName: "icon-arrow-left_16x16",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return this.creator.isMobileView;
       }),
@@ -517,12 +519,14 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.nextPageAction = new Action({
       id: "nextPage",
       iconName: "icon-arrow-right_16x16",
+      iconSize: "auto",
       visible: false
     });
 
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       active: true,
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",
@@ -533,6 +537,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.testAgainAction = new Action({
       id: "testSurveyAgain",
       visible: false,
+      iconSize: "auto",
       locTitleName: "ed.testSurveyAgain",
       action: () => {
         this.model.testAgain();
@@ -542,6 +547,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.undoAction = new Action({
       id: "action-undo-theme",
       iconName: "icon-undo",
+      iconSize: "auto",
       locTitleName: "ed.undo",
       showTitle: false,
       visible: this.createVisibleUpdater(),
@@ -550,6 +556,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.redoAction = new Action({
       id: "action-redo-theme",
       iconName: "icon-redo",
+      iconSize: "auto",
       locTitleName: "ed.redo",
       showTitle: false,
       visible: this.createVisibleUpdater(),
@@ -561,6 +568,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.saveThemeAction = new Action({
       id: "svd-save-theme",
       iconName: "icon-save",
+      iconSize: "auto",
       action: () => {
         this.creator.saveThemeActionHandler();
         this.saveThemeAction.enabled = false;
@@ -579,6 +587,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.resetTheme = new Action({
       id: "svc-reset-theme",
       iconName: "icon-reset",
+      iconSize: "auto",
       locTitleName: "ed.themeResetButton",
       locTooltipName: "ed.themeResetButton",
       mode: "small",
@@ -596,6 +605,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.themeSettingsAction = new Action({
       id: "svc-theme-settings",
       iconName: "icon-theme",
+      iconSize: "auto",
       action: () => {
         if (!this.creator.showSidebar) {
           this.creator.setShowSidebar(true, true);
@@ -613,6 +623,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.importAction = new Action({
       id: "svc-theme-import",
       iconName: "icon-load",
+      iconSize: "auto",
       locTitleName: "ed.themeImportButton",
       locTooltipName: "ed.themeImportButton",
       visible: this.createVisibleUpdater(),
@@ -639,6 +650,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.exportAction = new Action({
       id: "svc-theme-export",
       iconName: "icon-download",
+      iconSize: "auto",
       locTitleName: "ed.themeExportButton",
       locTooltipName: "ed.themeExportButton",
       visible: this.createVisibleUpdater(),
@@ -654,6 +666,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
       this.invisibleToggleAction = new Action({
         id: "showInvisible",
         iconName: "icon-invisible-items",
+        iconSize: "auto",
         mode: "small",
         locTitleName: "ts.showInvisibleElements",
         visible: false,
diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
index 8590c045a5..f56b808801 100644
--- a/packages/survey-creator-core/src/components/tabs/translation.ts
+++ b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -771,6 +771,7 @@ export class Translation extends Base implements ITranslationLocales {
           const locale = q.value[rowIndex].name;
           options.actions.splice(0, 0, new Action({
             iconName: "icon-language",
+            iconSize: "auto",
             locTooltipName: "ed.translateUsigAI",
             location: "end",
             action: () => this.showTranslationEditor(locale)
@@ -1085,6 +1086,7 @@ export class Translation extends Base implements ITranslationLocales {
     this.addLanguageAction = createDropdownActionModel({
       id: "svc-translation-choose-language",
       iconName: "icon-add",
+      iconSize: "auto",
       enabled: <any>(new ComputedUpdater(() => this.isChooseLanguageEnabled && !this.readOnly)),
     }, {
       items: this.chooseLanguageActions,
@@ -1580,6 +1582,7 @@ export class TranslationEditor {
       survey.addNavigationItem(new Action({
         id: "svc-translation-machine",
         iconName: "icon-language",
+        iconSize: "auto",
         css: actionCss,
         locTitleName: "ed.translateUsigAI",
         component: "sv-action-bar-item",
@@ -1644,7 +1647,6 @@ export class TranslationEditor {
       css: "st-translation-machine-from",
       location: "start",
       title: defaultLocaleTitle,
-      iconSize: "auto",
       innerCss: "st-translation-machine-from__btn",
       data: {
         additionalTitleCss: "st-translation-machine-from__title",
@@ -1678,6 +1680,7 @@ export function createImportCSVAction(action: () => void, needSeparator: boolean
   return new Action({
     id: "svc-translation-import",
     iconName: "icon-load",
+    iconSize: "auto",
     locTitleName: "ed.translationImportFromSCVButton",
     locTooltipName: "ed.translationImportFromSCVButton",
     mode: isInEditor ? "large" : "small",
@@ -1690,6 +1693,7 @@ export function createExportCSVAction(action: () => void, isInEditor: boolean =
   return new Action({
     id: "svc-translation-export",
     iconName: "icon-download",
+    iconSize: "auto",
     locTitleName: "ed.translationExportToSCVButton",
     locTooltipName: "ed.translationExportToSCVButton",
     mode: isInEditor ? "large" : "small",
diff --git a/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts b/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
index 6352ee4008..6853836326 100644
--- a/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
+++ b/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
@@ -156,6 +156,7 @@ export class UndoRedoController extends Base {
     this.undoAction = new Action({
       id: "action-undo",
       iconName: "icon-undo",
+      iconSize: "auto",
       locTitleName: "ed.undo",
       showTitle: false,
       visible: <any>new ComputedUpdater(() => this.creator.activeTab === "designer"),
@@ -167,6 +168,7 @@ export class UndoRedoController extends Base {
     this.redoAction = new Action({
       id: "action-redo",
       iconName: "icon-redo",
+      iconSize: "auto",
       locTitleName: "ed.redo",
       showTitle: false,
       visible: <any>new ComputedUpdater(() => this.creator.activeTab === "designer"),
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
index e24cd90390..276096fb80 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
@@ -23,7 +23,7 @@
   box-sizing: border-box;
   border: none;
   color: var(--ctr-actionbar-button-text-color, $primary);
-  border-radius: calcSize(12.5);
+  border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5));
   background-color: transparent;
   cursor: pointer;
   transition: background-color $creator-transition-duration, opacity $creator-transition-duration;
@@ -40,8 +40,16 @@
   }
 }
 
+.spg-action-button--icon {
+  padding: var(--ctr-actionbar-button-padding-top-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-right-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-bottom-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-left-large-icon, calcSize(1));
+}
 .spg-action-button__icon {
   display: block;
+  width: var(--ctr-actionbar-button-icon-width, calcSize(3));
+  height: var(--ctr-actionbar-button-icon-height, calcSize(3));
 
   use {
     fill: var(--ctr-actionbar-button-icon-color, $foreground-light);
diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
index 92170b380a..2c0003ecce 100644
--- a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
@@ -127,8 +127,11 @@
     flex-grow: 1;
 
     .spg-action-button--icon {
-      opacity: 0.5;
-      padding: calcSize(0.5);
+      padding: var(--ctr-actionbar-button-padding-top-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-right-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-bottom-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-left-small-icon, calcSize(0.5));
+      opacity: var(--ctr-actionbar-button-opacity-muted, 0.5);
     }
 
     .spg-action-button--icon:focus,
@@ -140,6 +143,11 @@
       opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
     }
 
+    .spg-action-button__icon {
+      width: var(--ctr-actionbar-button-icon-width-small, calcSize(2));
+      height: var(--ctr-actionbar-button-icon-height-small, calcSize(2));
+    }
+
     svg {
       fill: $foreground-dim-light;
     }
diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts
index 05681308b2..6ac859f4d4 100644
--- a/packages/survey-creator-core/src/property-grid/index.ts
+++ b/packages/survey-creator-core/src/property-grid/index.ts
@@ -373,7 +373,6 @@ export class PropertyGridTitleActionsCreator {
     if (!!helpAction) {
       actions.unshift(helpAction);
       question.getTitleToolbar().containerCss += " spg-title-toolobar--single-help-action";
-      helpAction.iconSize = 16;
     }
     if (actions.length > 0) {
       options.titleActions = actions;
@@ -390,6 +389,7 @@ export class PropertyGridTitleActionsCreator {
       title: getLocString("pe.clear"),
       showTitle: false,
       iconName: "icon-clear",
+      iconSize: "auto",
       innerCss: "spg-action-button--danger",
       enabled: enabled,
       visible: <any>new ComputedUpdater<boolean>(() => {
@@ -428,6 +428,7 @@ export class PropertyGridTitleActionsCreator {
     var setupAction = {
       id: "property-grid-setup",
       iconName: property.isArray ? "icon-fast-entry" : "icon-wizard",
+      iconSize: "auto",
       enabled: enabled,
       title: getLocString("pe.edit"),
       showTitle: false,
@@ -444,6 +445,7 @@ export class PropertyGridTitleActionsCreator {
       tooltip: question.description,
       id: "property-grid-help",
       iconName: this.getHelpActionIconName(question),
+      iconSize: "auto",
       css: "spg-help-action",
       showTitle: false,
       action: () => {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index 1f961f04c4..53a710c7ae 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -211,8 +211,16 @@ const Theme = {
     "--ctr-radio-button-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-checkbox-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-checkbox-description-text-color": "var(--sjs-layer-1-foreground-75)",
+    "--ctr-actionbar-button-padding-left-large-icon": "var(--sjs-spacing-x1)",
+    "--ctr-actionbar-button-padding-right-large-icon": "var(--sjs-spacing-x1)",
+    "--ctr-actionbar-button-padding-top-large-icon": "var(--sjs-spacing-x1)",
+    "--ctr-actionbar-button-padding-bottom-large-icon": "var(--sjs-spacing-x1)",
     "--ctr-actionbar-button-text-color": "var(--sjs-primary-background-500)",
     "--ctr-actionbar-button-background-color-hovered": "var(--sjs-primary-background-10)",
+    "--ctr-actionbar-button-padding-left-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-right-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-top-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-bottom-small-icon": "var(--sjs-spacing-x05)",
     "--ctr-actionbar-button-text-color-disabled": "var(--sjs-layer-1-foreground-100)",
     "--ctr-list-item-background-color-hovered": "var(--sjs-layer-1-background-400)",
     "--ctr-list-item-background-color-selected": "var(--sjs-primary-background-500)",
@@ -223,6 +231,10 @@ const Theme = {
     "--ctr-list-item-icon-color-hovered": "var(--sjs-primary-background-500)",
     "--ctr-list-item-contextual-buttons-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-list-item-color-swatch-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-actionbar-button-icon-width-small": "var(--sjs-size-x2)",
+    "--ctr-actionbar-button-icon-height-small": "var(--sjs-size-x2)",
+    "--ctr-actionbar-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-actionbar-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-menu-item-icon-width": "var(--sjs-size-x3)",
     "--ctr-menu-item-icon-height": "var(--sjs-size-x3)",
     "--ctr-menu-item-text-color": "var(--sjs-layer-1-foreground-100)",
@@ -397,6 +409,12 @@ const Theme = {
     "--ctr-button-contextual-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-button-contextual-button-background-color-focused": "var(--sjs-primary-background-10)",
     "--ctr-survey-question-panel-toolbar-item-background-color-hovered": "var(--sjs-layer-1-background-400)",
+    "--ctr-survey-question-panel-toolbar-item-icon-container-width": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-toolbar-item-icon-container-height": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-left": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-right": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-survey-question-panel-toolbar-item-icon-color": "var(--sjs-secondary-background-500)",
     "--ctr-survey-question-panel-toolbar-item-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-survey-question-panel-toolbar-item-background-color-selected": "var(--sjs-secondary-background-10)",
@@ -408,6 +426,8 @@ const Theme = {
     "--ctr-survey-question-panel-drag-area-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-preview-pager-border-color": "var(--sjs-border-25)",
+    "--ctr-code-viewer-code-error-row-icon-width": "var(--sjs-size-x2)",
+    "--ctr-code-viewer-code-error-row-icon-height": "var(--sjs-size-x2)",
     "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-code-viewer-line-number-panel-text-color": "var(--sjs-layer-2-foreground-50)",
     "--ctr-property-grid-group-caption-text-color": "var(--sjs-layer-1-foreground-100)",
@@ -436,6 +456,10 @@ const Theme = {
     "--ctr-scrollbar-background-color": "var(--sjs-border-10)",
     "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)",
+    "--ctr-survey-action-button-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-survey-action-button-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-survey-action-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-survey-action-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)",
     "--ctr-survey-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)",
     "--ctr-survey-action-button-text-color-positive": "var(--sjs-primary-background-500)",
@@ -443,6 +467,8 @@ const Theme = {
     "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)",
     "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)",
     "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-action-button-padding-left-icon-only": "var(--sjs-spacing-x1)",
+    "--ctr-survey-action-button-padding-right-icon-only": "var(--sjs-spacing-x1)",
     "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)",
     "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)",
     "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)",
diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss
index 05a9e6679c..1d897ef7c4 100644
--- a/packages/survey-creator-core/src/utils/layout.scss
+++ b/packages/survey-creator-core/src/utils/layout.scss
@@ -92,7 +92,18 @@
     height: auto;
   }
 
+  .sv-action-bar-item--icon {
+    padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-right, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+    border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
+  }
+
   .sv-action-bar-item__icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+    height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+
     use {
       fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
     }

From bf3fba76382f3af541256830b326928f07e40a4f Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 31 Oct 2024 16:18:44 +0300
Subject: [PATCH 03/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../components/action-container-view-model.ts |   8 +-
 .../src/components/page.scss                  |  97 +++++++++++-------
 .../src/components/page.ts                    |   8 ++
 .../src/components/question.scss              |  12 +++
 .../src/components/question.ts                |  10 +-
 .../survey-creator-core/src/creator-base.ts   |   1 +
 .../survey-creator-core/src/utils/layout.scss |   5 +
 .../survey-creator-core/src/variables.scss    |  11 ++
 .../etalons/matrix-cell-edit-bool.png         | Bin 4841 -> 4926 bytes
 9 files changed, 103 insertions(+), 49 deletions(-)

diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
index e9bdd7bb35..96e669efaf 100644
--- a/packages/survey-creator-core/src/components/action-container-view-model.ts
+++ b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -360,7 +360,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       id: "collapse",
       css: "sv-action-bar-item--secondary sv-action-bar-item--collapse",
       iconName: new ComputedUpdater<string>(() => this.collapsed ? expandIcon : collapseIcon) as any,
-      iconSize: 16,
+      iconSize: "auto",
       action: () => {
         this.collapsed = !this.collapsed;
       }
@@ -425,7 +425,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
         css: "svc-action-bar-item--right sv-action-bar-item--secondary",
         title: this.creator.getLocString("survey.duplicate"),
         visibleIndex: 10,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => this.duplicate(),
         onFocus: (isMouse: boolean, event: any) => this.disableActionFocusing(isMouse, event)
       })
@@ -439,7 +439,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
         title: this.creator.getLocString("ed.settings"),
         locTooltipName: "ed.settingsTooltip",
         visibleIndex: 20,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => {
           this.creator.setShowSidebar(true, true);
           if (!this.creator.isMobileView) {
@@ -459,7 +459,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
         //needSeparator: items.length > 0,
         title: this.creator.getLocString("pe.delete"),
         visibleIndex: 30,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => {
           this.delete();
         },
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 054dd952f8..39a003b506 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -67,57 +67,76 @@ svc-page {
   }
 }
 
-.svc-page__content-actions {
-  .sv-action-bar-item {
-    border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, 4px);
-    background-color: transparent;
-    color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
-    transition: background-color $creator-transition-duration;
-  }
+.svc-page-toolbar__item {
+  @include defaultActionButtonSettings;
 
-  .sv-action-bar-item__icon {
-    use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+  justify-content: center;
+  align-items: center;
 
-  //hovered state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
-  }
+  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
+  background-color: transparent;
+  transition: background-color $creator-transition-duration;
 
-  //pressed state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  }
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+}
 
-  //disabled state
-  .sv-action-bar-item:disabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-  }
+.svc-page-toolbar__item--with-text {
+  color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+//hovered state
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled,
+.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);
+}
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+//pressed state
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
 
-  .sv-action-bar-item--active {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
+//disabled state
+.svc-page-toolbar__item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
+
+.svc-page-toolbar__item-icon {
+  box-sizing: border-box;
+  width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+  height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
+}
+
+.svc-page-toolbar__item-icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+}
+
+.svc-page-toolbar__item--active {
+  .svc-page-toolbar__item-icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
+}
+
+.svc-page-toolbar__item--pressed:not(.svc-page-toolbar__item--active) {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
 
+.svc-page__content-actions {
   .sv-action-bar-item-dropdown {
     border-radius: calcCornerRadius(0.5);
     background-color: transparent;
   }
-
-  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-    background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
-  }
 }
 
 .svc-page__content:focus,
diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
index 86e012a7c5..d009aa5382 100644
--- a/packages/survey-creator-core/src/components/page.ts
+++ b/packages/survey-creator-core/src/components/page.ts
@@ -156,6 +156,14 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
   protected createActionContainer(): ActionContainer<Action> {
     const container = new ActionContainer();
     container.sizeMode = "small";
+    container.cssClasses = {
+      root: "svc-page-toolbar sv-action-bar",
+      item: "svc-page-toolbar__item",
+      itemWithTitle: "svc-page-toolbar__item--with-text",
+      itemActive: "svc-page-toolbar__item--active",
+      itemPressed: "svc-page-toolbar__item--pressed",
+      itemIcon: "svc-page-toolbar__item-icon",
+    };
     return container;
   }
   protected getExpandCollapseAction(): IAction {
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index fab2701669..1f60d77cb1 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -85,6 +85,16 @@ svc-question {
   }
 
   .sv-action-bar-item--secondary {
+    .sv-svg-icon {
+      box-sizing: border-box;
+      width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+      height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
+      padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
+    }
+
     .sv-action-bar-item__icon use {
       fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
     }
@@ -1168,6 +1178,8 @@ svc-question,
   .svc-panel__add-new-question-container {
     .svc-panel__add-new-question-icon {
       display: block;
+      width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+      height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
     }
 
     .svc-element__question-type-selector {
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index 6ef3e02f4d..c8faea04e2 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -470,7 +470,8 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       enabled: allowChangeType,
       visibleIndex: 0,
       title: actionTitle,
-      iconName: "icon-chevron_16x16"
+      iconName: "icon-chevron_16x16",
+      iconSize: "auto"
     };
     const newAction = this.createDropdownModel({
       actionData: actionData,
@@ -485,9 +486,6 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       }
       return "icon-chevron_16x16";
     });
-    newAction.iconSize = <any>new ComputedUpdater(() => {
-      return newAction.mode === "small" ? 24 : 16;
-    });
     newAction.disableHide = true;
     return newAction;
   }
@@ -624,7 +622,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       id: options.actionData.id,
       css: "sv-action--convertTo sv-action-bar-item--secondary",
       iconName: options.actionData.iconName,
-      iconSize: 16,
+      iconSize: "auto",
       title: options.actionData.title,
       enabled: options.actionData.enabled,
       visibleIndex: options.actionData.visibleIndex,
@@ -660,7 +658,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       title: this.creator.getLocString("pe.isRequired"),
       visibleIndex: 20,
       iconName: "icon-required",
-      iconSize: 16,
+      iconSize: "auto",
       action: () => {
         if (
           this.creator.isCanModifyProperty(
diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
index 7a5a6a71ec..a53010a2ce 100644
--- a/packages/survey-creator-core/src/creator-base.ts
+++ b/packages/survey-creator-core/src/creator-base.ts
@@ -3718,6 +3718,7 @@ export class SurveyCreatorModel extends Base
       title: item.title,
       id: item.name,
       iconName: item.iconName,
+      iconSize: "auto",
       visible: item.visible,
       enabled: item.enabled,
       needSeparator: needSeparator
diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss
index 1d897ef7c4..4dc2ad2556 100644
--- a/packages/survey-creator-core/src/utils/layout.scss
+++ b/packages/survey-creator-core/src/utils/layout.scss
@@ -162,5 +162,10 @@
       border-top: 1px solid $border;
       box-sizing: border-box;
     }
+
+    .sv-action-bar-item__icon {
+      width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+      height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/variables.scss b/packages/survey-creator-core/src/variables.scss
index 6caf1fdda9..7e2c1e494c 100644
--- a/packages/survey-creator-core/src/variables.scss
+++ b/packages/survey-creator-core/src/variables.scss
@@ -83,6 +83,17 @@ $tab-min-height: var(--tab-min-height, auto);
   text-overflow: ellipsis;
 }
 
+@mixin defaultActionButtonSettings {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
 @mixin disableUserSelect {
   -moz-user-select: none;
   -webkit-user-select: none;
diff --git a/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png b/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png
index dcc776d86d8f0065746d55d5eec604642763880d..24943e0291a20f21ecfc97b756254bd429135151 100644
GIT binary patch
literal 4926
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

literal 4841
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


From c13e885ab494555e3678002755540400a198df46 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 31 Oct 2024 16:48:02 +0300
Subject: [PATCH 04/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../survey-creator-core/src/components/page.scss     | 12 +++++++++---
 packages/survey-creator-core/src/components/page.ts  |  3 ++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 39a003b506..3f3e13650d 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -69,6 +69,8 @@ svc-page {
 
 .svc-page-toolbar__item {
   @include defaultActionButtonSettings;
+  --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
 
   justify-content: center;
   align-items: center;
@@ -107,7 +109,11 @@ svc-page {
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
 }
 
-.svc-page-toolbar__item-icon {
+.svc-page-toolbar-item__title {
+  @include ctrSmallBoldFont;
+}
+
+.svc-page-toolbar-item__icon {
   box-sizing: border-box;
   width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
   height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
@@ -117,12 +123,12 @@ svc-page {
     var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
 }
 
-.svc-page-toolbar__item-icon use {
+.svc-page-toolbar-item__icon use {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
 }
 
 .svc-page-toolbar__item--active {
-  .svc-page-toolbar__item-icon use {
+  .svc-page-toolbar-item__icon use {
     fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
 }
diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
index d009aa5382..9bfbf9526e 100644
--- a/packages/survey-creator-core/src/components/page.ts
+++ b/packages/survey-creator-core/src/components/page.ts
@@ -162,7 +162,8 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       itemWithTitle: "svc-page-toolbar__item--with-text",
       itemActive: "svc-page-toolbar__item--active",
       itemPressed: "svc-page-toolbar__item--pressed",
-      itemIcon: "svc-page-toolbar__item-icon",
+      itemIcon: "svc-page-toolbar-item__icon",
+      itemTitle: "svc-page-toolbar-item__title",
     };
     return container;
   }

From bf0683aa1f359cadf2da85d8d6e8813a0a0065da Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 1 Nov 2024 12:11:50 +0300
Subject: [PATCH 05/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../components/action-container-view-model.ts |   9 +-
 .../src/components/page.scss                  |  38 ++---
 .../src/components/question.scss              | 151 ++++++++++--------
 .../src/components/question.ts                |  22 ++-
 .../src/components/tabs/translation.ts        |   2 +-
 .../property-grid/property-grid-view-model.ts |   2 +-
 6 files changed, 126 insertions(+), 98 deletions(-)

diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
index 96e669efaf..f225a235cd 100644
--- a/packages/survey-creator-core/src/components/action-container-view-model.ts
+++ b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -220,7 +220,6 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
 
   protected createActionContainer(): ActionContainer {
     const actionContainer = new SurveyElementActionContainer();
-    actionContainer.dotsItem.iconSize = 16;
     actionContainer.dotsItem.popupModel.horizontalPosition = "center";
     return actionContainer;
   }
@@ -358,7 +357,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     const expandIcon = "icon-restore_16x16";
     return {
       id: "collapse",
-      css: "sv-action-bar-item--secondary sv-action-bar-item--collapse",
+      css: "sv-action-bar-item--collapse",
       iconName: new ComputedUpdater<string>(() => this.collapsed ? expandIcon : collapseIcon) as any,
       iconSize: "auto",
       action: () => {
@@ -422,7 +421,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "duplicate",
         iconName: "icon-duplicate_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         title: this.creator.getLocString("survey.duplicate"),
         visibleIndex: 10,
         iconSize: "auto",
@@ -435,7 +434,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "settings",
         iconName: "icon-settings_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         title: this.creator.getLocString("ed.settings"),
         locTooltipName: "ed.settingsTooltip",
         visibleIndex: 20,
@@ -455,7 +454,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "delete",
         iconName: "icon-delete_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         //needSeparator: items.length > 0,
         title: this.creator.getLocString("pe.delete"),
         visibleIndex: 30,
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 3f3e13650d..3cd40f9708 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -71,28 +71,26 @@ svc-page {
   @include defaultActionButtonSettings;
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
-
-  justify-content: center;
-  align-items: center;
-
   border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
-  background-color: transparent;
-  transition: background-color $creator-transition-duration;
-
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  justify-content: center;
+  align-items: center;
+
+  background-color: transparent;
+  transition: background-color $creator-transition-duration;
 }
 
 .svc-page-toolbar__item--with-text {
-  color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
   gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
+
 //hovered state
 .svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled,
 .svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):focus:enabled {
@@ -109,8 +107,15 @@ svc-page {
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
 }
 
-.svc-page-toolbar-item__title {
-  @include ctrSmallBoldFont;
+.svc-page-toolbar__item--active {
+  .svc-page-toolbar-item__icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+  }
+}
+
+.svc-page-toolbar__item--pressed:not(.svc-page-toolbar__item--active) {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
 }
 
 .svc-page-toolbar-item__icon {
@@ -127,15 +132,9 @@ 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: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-  }
-}
-
-.svc-page-toolbar__item--pressed:not(.svc-page-toolbar__item--active) {
-  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
-  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+.svc-page-toolbar-item__title {
+  @include ctrSmallBoldFont;
+  color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
 }
 
 .svc-page__content-actions {
@@ -294,6 +293,7 @@ svc-page {
   cursor: pointer;
   margin: var(--ctr-button-contextual-button-margin-vertical, calcSize(1))
     var(--ctr-button-contextual-button-margin-horizontal, calcSize(1));
+  margin-inline-start: 0; // TODO
   outline: none;
   transition: background-color $creator-transition-duration;
 
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 1b9737c620..6d731878d3 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -52,73 +52,96 @@ svc-question {
   }
 }
 
-.svc-question__adorner {
-  .sv-action-bar-item {
-    background-color: transparent;
-    color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
-    transition:
-      background $creator-transition-duration,
-      color $creator-transition-duration,
-      opacity $creator-transition-duration;
-  }
+.svc-survey-element-toolbar__item {
+  @include defaultActionButtonSettings;
+  --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.25));
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.5));
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  justify-content: center;
+  align-items: center;
 
-  .sv-action-bar-item__icon {
-    use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+  background-color: transparent;
+  transition:
+    background $creator-transition-duration,
+    color $creator-transition-duration,
+    opacity $creator-transition-duration;
+}
 
-  //hovered state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
-  }
+.svc-survey-element-toolbar__item--with-text {
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
 
-  //pressed state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  }
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
+  flex-direction: row-reverse;
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, calcSize(1));
+}
 
-  //disabled state
-  .sv-action-bar-item:disabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-  }
+//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);
+}
 
-  .sv-action-bar-item--secondary {
-    .sv-svg-icon {
-      box-sizing: border-box;
-      width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
-      height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
-      padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
-        var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
-        var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
-        var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
-    }
+//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);
+}
 
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+//disabled state
+.svc-survey-element-toolbar__item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
 
-  .sv-action-bar-item--active {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
+.svc-survey-element-toolbar__item--active {
+  .svc-survey-element-toolbar-item__icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
+}
 
-  .sv-action-bar-item-dropdown {
-    background-color: transparent;
-  }
+.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);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
 
-  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
-  }
+.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:hover,
+.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:focus,
+.svc-survey-element-toolbar__item--active {
+  background-color: $secondary-backcolor-semi-light;
+}
+
+.svc-survey-element-toolbar-item__icon {
+  box-sizing: border-box;
+  width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+  height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
+}
 
-  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:hover,
-  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:focus,
-  .sv-action-bar-item.sv-action-bar-item--active {
-    background-color: $secondary-backcolor-semi-light;
+.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;
+  color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
+}
+
+.svc-question__adorner {
+  .sv-action-bar-item-dropdown {
+    background-color: transparent;
   }
 }
 
@@ -313,7 +336,7 @@ svc-question {
     margin-top: calcSize(2);
   }
 
-  .sv-action--convertTo {
+  .svc-dropdown-action--convertTo {
     max-width: max-content;
 
     .sv-action-bar-item {
@@ -343,18 +366,13 @@ svc-question {
         fill: $primary;
       }
     }
-
-    .sv-action-bar-item__title--with-icon {
-      margin-inline-start: 0; // margin-left
-      margin-inline-end: 0; // margin-right
-    }
   }
 
-  .sv-action--convertTo.sv-action--hidden {
+  .svc-dropdown-action--convertTo.sv-action--hidden {
     min-width: 0;
   }
 
-  .sv-action--convertTo-last {
+  .svc-dropdown-action--convertTo-last {
     margin-inline-end: auto; // margin-right
   }
 
@@ -1197,11 +1215,6 @@ svc-question,
   }
 }
 
-.sv-list__container .sv-action-bar-item--secondary {
-  .sv-list__item-icon use {
-    fill: $secondary;
-  }
-}
 
 .sd-panel {
   .svc-row {
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index 91505dae68..bf4b7a03c8 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -293,8 +293,24 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   }
   protected createActionContainers(): void {
     super.createActionContainers();
+    const defaultCssClasses = {
+      root: "svc-survey-element-toolbar sv-action-bar",
+      // defaultSizeMode: "sv-action-bar--default-size-mode",
+      // smallSizeMode: "sv-action-bar--small-size-mode",
+      item: "svc-survey-element-toolbar__item",
+      itemWithTitle: "svc-survey-element-toolbar__item--with-text",
+      // itemAsIcon: "sv-action-bar-item--icon",
+      itemActive: "svc-survey-element-toolbar__item--active",
+      itemPressed: "svc-survey-element-toolbar__item--pressed",
+      itemIcon: "svc-survey-element-toolbar-item__icon",
+      itemTitle: "svc-survey-element-toolbar-item__title",
+      itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+    };
+
     this.actionContainer.sizeMode = "small";
+    this.actionContainer.cssClasses = defaultCssClasses;
     this.topActionContainer = new ActionContainer();
+    this.topActionContainer.cssClasses = defaultCssClasses;
     this.topActionContainer.sizeMode = "small";
     this.topActionContainer.setItems([this.expandCollapseAction]);
   }
@@ -625,7 +641,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   private createDropdownModel(options: { actionData: IAction, items: Array<IAction>, updateListModel: (listModel: ListModel) => void }): Action {
     const newAction = createDropdownActionModel({
       id: options.actionData.id,
-      css: "sv-action--convertTo sv-action-bar-item--secondary",
+      css: "svc-dropdown-action--convertTo",
       iconName: options.actionData.iconName,
       iconSize: "auto",
       title: options.actionData.title,
@@ -662,7 +678,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       id: "isrequired",
       ariaChecked: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       ariaRole: "checkbox",
-      css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+      css: "svc-action-bar-item--right",
       innerCss: "svc-required-action",
       title: this.creator.getLocString("pe.isRequired"),
       visibleIndex: 20,
@@ -704,7 +720,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     if (!!inputTypeConverter) {
       items.push(inputTypeConverter);
     }
-    items[items.length - 1].css += " sv-action--convertTo-last";
+    items[items.length - 1].css += " svc-dropdown-action--convertTo-last";
     if (
       typeof element["isRequired"] !== "undefined" &&
       propertyExists(element, "isRequired") &&
diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
index 1dbbed9dd4..43b57cee7e 100644
--- a/packages/survey-creator-core/src/components/tabs/translation.ts
+++ b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -1577,7 +1577,7 @@ export class TranslationEditor {
     navigationBar.cssClasses = survey.css.actionBar;
     navigationBar.containerCss = survey.css.footer;
     survey.addNavigationItem(this.createLocaleFromAction());
-    const actionCss = "svc-action-bar-item--right sv-action-bar-item--secondary";
+    const actionCss = "svc-action-bar-item--right";
     if (this.options.getHasMachineTranslation()) {
       survey.addNavigationItem(new Action({
         id: "svc-translation-machine",
diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
index 24127617dc..e5b3cedaee 100644
--- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
+++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
@@ -159,7 +159,7 @@ export class PropertyGridViewModel extends Base {
     this.objectSelectionAction = new MenuButton({
       id: "svd-grid-object-selector",
       title: this.selectedElementName,
-      css: "sv-action--object-selector sv-action-bar-item--secondary",
+      css: "sv-action--object-selector",
       component: "sv-action-bar-item-dropdown",
       disableHide: true,
       pressed: false,

From ecbd1f1e9c8d7627a6b25239d2e5a9e45dd14409 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 1 Nov 2024 13:00:33 +0300
Subject: [PATCH 06/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 functionalTests/designer/responsiveness.ts         |  4 ----
 .../survey-creator-core/src/components/popup.scss  |  9 ++++++---
 .../src/components/question.scss                   |  2 +-
 .../src/components/tabs/logic-ui.scss              | 14 +++++++-------
 packages/survey-creator-core/src/themes/default.ts |  4 ++++
 packages/survey-creator-core/src/utils/layout.scss |  5 -----
 .../tests/creator-base.tests.ts                    |  6 +++---
 7 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
index a6ad2a146b..7b0774ed1e 100644
--- a/functionalTests/designer/responsiveness.ts
+++ b/functionalTests/designer/responsiveness.ts
@@ -245,17 +245,13 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).notOk()
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).notOk()
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()
diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
index 22e08e8c93..382a2493c3 100644
--- a/packages/survey-creator-core/src/components/popup.scss
+++ b/packages/survey-creator-core/src/components/popup.scss
@@ -141,13 +141,16 @@
 
     &.sv-list__item--group {
       & > .sv-list__item-body {
-        background: var(--ctr-list-item-background-color-selected, $primary-light);
-        color: var(--ctr-list-item-text-color-selected, $foreground);
+        background: var(--ctr-list-item-background-color-selected-submenu, $primary-light);
+        color: var(--ctr-list-item-text-color-selected-submenu, $foreground);
         font-weight: 400;
       }
 
       .sv-list__item-icon use {
-        fill: var(--ctr-list-item-icon-color-hovered, $foreground-light);
+        fill: var(--ctr-list-item-icon-color-selected-submenu, $foreground-light);
+      }
+      .sv-list-item__marker-icon use {
+        fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, $foreground-light);
       }
     }
   }
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 6d731878d3..613bc8aff2 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -67,7 +67,6 @@ svc-question {
   background-color: transparent;
   transition:
     background $creator-transition-duration,
-    color $creator-transition-duration,
     opacity $creator-transition-duration;
 }
 
@@ -137,6 +136,7 @@ svc-question {
 .svc-survey-element-toolbar-item__title {
   @include ctrSmallBoldFont;
   color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
+  transition: color $creator-transition-duration,
 }
 
 .svc-question__adorner {
diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.scss b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
index 4d481dcae3..eda3c1c506 100644
--- a/packages/survey-creator-core/src/components/tabs/logic-ui.scss
+++ b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
@@ -145,13 +145,13 @@
 }
 
 .svc-logic-condition-remove.svc-icon-remove {
-  // display: none;
-  // width: calcSize(5);
-  // height: calcSize(5);
-  // background-repeat: no-repeat;
-  // background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
-  // background-size: calcSize(3) calcSize(3);
-  // background-position: center;
+  display: none;
+  width: calcSize(5);
+  height: calcSize(5);
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
+  background-size: calcSize(3) calcSize(3);
+  background-position: center;
 }
 
 .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index f6f65296e7..3d30310005 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -501,6 +501,7 @@ const Theme = {
     "--ctr-survey-question-panel-toolbar-item-background-color-selected": "var(--sjs-secondary-background-10)",
     "--ctr-survey-page-toolbar-item-icon-color-pressed": "var(--sjs-layer-3-foreground-50)",
     "--ctr-survey-page-toolbar-item-text-color": "var(--sjs-layer-3-foreground-100)",
+    "--ctr-survey-question-panel-toolbar-item-padding-left-with-text": "var(--sjs-spacing-x1)",
     "--ctr-survey-question-panel-toolbar-item-padding-right-with-text": "var(--sjs-spacing-x1)",
     "--ctr-survey-page-toolbar-item-background-color-selected": "var(--sjs-primary-background-10)",
     "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
@@ -564,6 +565,7 @@ const Theme = {
     "--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)",
     "--ctr-property-grid-search-count-text-color": "var(--sjs-layer-3-foreground-50)",
     "--ctr-scrollbar-background-color": "var(--sjs-border-10)",
+    "--ctr-survey-question-panel-toolbar-gap": "var(--sjs-spacing-x1)",
     "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)",
     "--ctr-survey-action-button-padding-top": "var(--sjs-spacing-x1)",
@@ -752,6 +754,8 @@ const Theme = {
     "--ctr-toolbox-submenu-shadow-2-spread": "var(--ctr-shadow-large-spread)",
     "--ctr-toolbox-submenu-shadow-2-color": "var(--ctr-shadow-large-color)",
     "--ctr-toolbox-submenu-margin-top": "var(--sjs-spacing-x1n)",
+    "--ctr-list-item-background-color-selected-submenu": "var(--sjs-primary-background-10)",
+    "--ctr-list-item-text-color-selected-submenu": "var(--sjs-layer-1-foreground-100)",
     "--ctr-list-item-icon-color-selected-submenu": "var(--sjs-primary-background-500)",
     "--ctr-list-item-submenu-arrow-color-selected-item-submenu": "var(--sjs-layer-1-foreground-75)",
     "--ctr-menu-item-padding-left-icon": "var(--sjs-spacing-x2)",
diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss
index c53290b6cc..9070a3e537 100644
--- a/packages/survey-creator-core/src/utils/layout.scss
+++ b/packages/survey-creator-core/src/utils/layout.scss
@@ -139,11 +139,6 @@
     opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
   }
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: $secondary;
-    }
-  }
 
   .sv-action-bar-item--active {
     .sv-action-bar-item__icon use {
diff --git a/packages/survey-creator-core/tests/creator-base.tests.ts b/packages/survey-creator-core/tests/creator-base.tests.ts
index fde6f91e1a..a5d1e093b1 100644
--- a/packages/survey-creator-core/tests/creator-base.tests.ts
+++ b/packages/survey-creator-core/tests/creator-base.tests.ts
@@ -2477,16 +2477,16 @@ test("convertInputType, change inputType for a text question", (): any => {
   expect(questionModel.getActionById("convertInputType")).toBeFalsy();
   let action = questionModel.getActionById("convertTo");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeTruthy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeTruthy();
   question = creator.survey.getQuestionByName("q2");
   creator.selectElement(question);
   questionModel = new QuestionAdornerViewModel(creator, question, undefined);
   action = questionModel.getActionById("convertTo");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeFalsy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeFalsy();
   action = questionModel.getActionById("convertInputType");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeTruthy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeTruthy();
   expect(action.title).toBe("Text");
   let popup = action.popupModel;
   let popupViewModel = new PopupDropdownViewModel(popup); // need for popupModel.onShow

From c19cbfcd5ea3ee28a10f795165f10d2c709873d0 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 1 Nov 2024 17:04:42 +0300
Subject: [PATCH 07/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 functionalTests/designer/add-new-question.ts  |   4 +-
 functionalTests/designer/creator.ts           |  20 +--
 functionalTests/designer/hovers.ts            |   2 +-
 functionalTests/designer/question-wrapper.ts  |   8 +-
 functionalTests/designer/responsiveness.ts    |  14 +-
 functionalTests/designer/toolbox.ts           |   2 +-
 .../components/action-container-view-model.ts |   1 +
 .../src/components/page.scss                  |  23 +++-
 .../src/components/page.ts                    |   1 +
 .../src/components/question.scss              | 128 ++++++++++--------
 .../src/components/question.ts                |   4 +-
 .../src/components/tabs/preview.ts            |   6 -
 .../survey-creator-core/src/variables.scss    |   1 +
 13 files changed, 115 insertions(+), 99 deletions(-)

diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts
index bcce2a348d..ebc5ceba3c 100644
--- a/functionalTests/designer/add-new-question.ts
+++ b/functionalTests/designer/add-new-question.ts
@@ -137,8 +137,8 @@ test("Add New Question with sub type", async t => {
     .wait(400)
     .click(getListItemByText("Stars").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Stars");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Stars");
 
   let expectedJson = {
     "logoPosition": "right",
diff --git a/functionalTests/designer/creator.ts b/functionalTests/designer/creator.ts
index 3acc0b6d57..a0e142de2e 100644
--- a/functionalTests/designer/creator.ts
+++ b/functionalTests/designer/creator.ts
@@ -71,27 +71,27 @@ test("Keyboard tab navigation between questions", async (t) => {
     .click(Selector(".sv-string-editor").withText("question2"))
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("shift+tab")
     .expect(Selector(".sv-string-editor").withText("question1").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("tab")
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok();
 });
diff --git a/functionalTests/designer/hovers.ts b/functionalTests/designer/hovers.ts
index 50f62ca39e..d0416790d3 100644
--- a/functionalTests/designer/hovers.ts
+++ b/functionalTests/designer/hovers.ts
@@ -117,7 +117,7 @@ test("Question hover and events", async t => {
   await t
     .maximizeWindow();
   const questionTitle = Selector(".svc-string-editor").withText("string_editor");
-  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .sv-action-bar-item[title=Delete]");
+  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .svc-survey-element-toolbar__item[title=Delete]");
   await t
     .hover(questionTitle, { offsetX: 5, offsetY: 5 })
     .wait(300)
diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
index 141da12156..26d8da671f 100644
--- a/functionalTests/designer/question-wrapper.ts
+++ b/functionalTests/designer/question-wrapper.ts
@@ -163,13 +163,13 @@ test("Single input question wrapper action change require", async (t) => {
   let title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).notOk()
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).notOk()
 
     .click(requiredActionButton);
   title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1 *")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).ok();
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).ok();
 });
 
 test("Single input question wrapper action delete", async (t) => {
@@ -243,9 +243,9 @@ test("Rating question required property", async (t) => {
     .hover(getToolboxItemByText("Rating Scale"))
     .click(getToolboxItemByText("Rating Scale"))
     .expect(isrequiredButton.visible).ok()
-    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("sv-action-bar-item--active")
+    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("svc-survey-element-toolbar__item--active")
     .click(isrequiredButton)
-    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("sv-action-bar-item--active");
+    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("svc-survey-element-toolbar__item--active");
 });
 
 fixture`${title}`.page`${urlDropdownCollapseView}`.beforeEach(async (t) => {
diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
index 7b0774ed1e..9d8b4ea5fa 100644
--- a/functionalTests/designer/responsiveness.ts
+++ b/functionalTests/designer/responsiveness.ts
@@ -195,7 +195,7 @@ test("property grid for mobile devices", async (t) => {
 
     .click(Selector(".svd-grid-hide"))
     .click(getAddNewQuestionButton())
-    .click(getBarItemByTitle("Open settings").filterVisible().nth(0))
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible().nth(0))
     .expect(Selector(selectedObjectTextSelector).innerText).eql("question1")
 
     .resizeWindow(1920, 900)
@@ -244,14 +244,14 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(0).id).eql("svd-designer")
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
-    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
+    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(true)
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
-    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
+    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(false)
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
-    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
-    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
+    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(false)
+    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(true)
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()
@@ -291,10 +291,10 @@ test("Property grid editor popup", async (t) => {
     .expect(Selector(".sv-popup--modal").visible).ok()
     .click(Selector("button").withExactText("Cancel"))
     .resizeWindow(380, 600)
-    .click(Selector(".sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector(".svd-grid-hide"))
     .click(question1, { offsetX: 5, offsetY: 5 })
-    .click(Selector(".svc-question__content-actions .sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-question__content-actions .svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector("span").withExactText("Set Default Answer"))
     .expect(Selector(".sv-popup--overlay").visible).ok();
 });
diff --git a/functionalTests/designer/toolbox.ts b/functionalTests/designer/toolbox.ts
index 02e0835339..c76c1c9ed6 100644
--- a/functionalTests/designer/toolbox.ts
+++ b/functionalTests/designer/toolbox.ts
@@ -338,7 +338,7 @@ test("toolbar responsiveness in compact mode", async (t) => {
     .expect(Selector(".svc-toolbox__category>.svc-toolbox__tool").count).eql(22)
 
     .click(".svc-question__content--text", { offsetX: 200, offsetY: 20 })
-    .click(Selector(".sv-action-bar-item__title").withText("Save as Toolbox Item"))
+    .click(Selector(".svc-survey-element-toolbar-item__title").withText("Save as Toolbox Item"))
 
     .expect(Selector(".svc-toolbox .sv-dots__item").visible).ok()
     .expect(Selector(".svc-toolbox__container").clientHeight).lte(510)
diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
index f225a235cd..803d72fd97 100644
--- a/packages/survey-creator-core/src/components/action-container-view-model.ts
+++ b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -220,6 +220,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
 
   protected createActionContainer(): ActionContainer {
     const actionContainer = new SurveyElementActionContainer();
+    actionContainer.dotsItem.iconSize = "auto" as any;
     actionContainer.dotsItem.popupModel.horizontalPosition = "center";
     return actionContainer;
   }
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 3cd40f9708..3c3415fdba 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -119,13 +119,22 @@ svc-page {
 }
 
 .svc-page-toolbar-item__icon {
-  box-sizing: border-box;
-  width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
-  height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
+  --ctr-survey-page-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --ctr-survey-page-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  width: var(----ctr-survey-page-toolbar-item-icon-width, calcSize(2));
+  height: var(--ctr-survey-page-toolbar-item-icon-height, calcSize(2));
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0)
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0)
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, 0)
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, 0);
 }
 
 .svc-page-toolbar-item__icon use {
diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
index 9bfbf9526e..490e860247 100644
--- a/packages/survey-creator-core/src/components/page.ts
+++ b/packages/survey-creator-core/src/components/page.ts
@@ -164,6 +164,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       itemPressed: "svc-page-toolbar__item--pressed",
       itemIcon: "svc-page-toolbar-item__icon",
       itemTitle: "svc-page-toolbar-item__title",
+      itemTitleWithIcon: "svc-page-toolbar-item__title--with-icon",
     };
     return container;
   }
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 613bc8aff2..dffa4a3516 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -52,7 +52,8 @@ svc-question {
   }
 }
 
-.svc-survey-element-toolbar__item {
+.svc-survey-element-toolbar__item,
+.svc-survey-element-toolbar__dots-item {
   @include defaultActionButtonSettings;
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.25));
@@ -119,14 +120,25 @@ svc-question {
   background-color: $secondary-backcolor-semi-light;
 }
 
-.svc-survey-element-toolbar-item__icon {
-  box-sizing: border-box;
-  width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
-  height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
+.svc-survey-element-toolbar-item__icon,
+.svc-survey-element-toolbar__dots-item .sv-svg-icon {
+  --ctr-survey-question-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --ctr-survey-question-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+
+  width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+  height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0)
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0)
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, 0)
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, 0);
 }
 
 .svc-survey-element-toolbar-item__icon use {
@@ -136,7 +148,7 @@ svc-question {
 .svc-survey-element-toolbar-item__title {
   @include ctrSmallBoldFont;
   color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
-  transition: color $creator-transition-duration,
+  transition: color $creator-transition-duration;
 }
 
 .svc-question__adorner {
@@ -336,78 +348,74 @@ svc-question {
     margin-top: calcSize(2);
   }
 
-  .svc-dropdown-action--convertTo {
-    max-width: max-content;
+  .svc-action-bar-item--right:first-of-type {
+    margin-inline-start: auto;
+  }
+}
 
-    .sv-action-bar-item {
-      flex-direction: row-reverse;
-    }
+.svc-dropdown-action--convertTo {
+  max-width: max-content;
 
-    .sv-action-bar-item--icon {
-      max-width: 100%;
-      padding: calcSize(0.5);
-    }
+  .svc-survey-element-toolbar__item {
+    flex-direction: row-reverse;
+  }
 
-    .sv-action-bar-item__title {
-      display: inline-block;
-      justify-content: left;
-    }
+  .sv-action-bar-item--icon {
+    max-width: 100%;
+    padding: calcSize(0.5);
+  }
 
-    .sv-action-bar-item__icon {
-      margin-inline-start: calcSize(0.5);
+  .svc-survey-element-toolbar-item__title {
+    display: inline-block;
+    justify-content: left;
+  }
 
-      &:last-child {
-        margin-inline-start: 0;
-      }
-    }
+  .svc-survey-element-toolbar-item__icon {
+    margin-inline-start: calcSize(0.5);
 
-    .sv-action-bar-item__icon:last-child {
-      use {
-        fill: $primary;
-      }
+    &:last-child {
+      margin-inline-start: 0;
     }
   }
 
-  .svc-dropdown-action--convertTo.sv-action--hidden {
-    min-width: 0;
-  }
-
-  .svc-dropdown-action--convertTo-last {
-    margin-inline-end: auto; // margin-right
+  .svc-survey-element-toolbar-item__icon:last-child {
+    use {
+      fill: $primary;
+    }
   }
+}
 
-  .svc-action-bar-item--right:first-of-type {
-    margin-inline-start: auto;
-  }
+.svc-dropdown-action--convertTo.sv-action--hidden {
+  min-width: 0;
+}
 
-  .sv-dots {
-    width: calcSize(4);
-    margin-left: calcSize(1);
-    margin-right: calcSize(0.5);
+.svc-dropdown-action--convertTo-last {
+  margin-inline-end: auto; // margin-right
+}
 
-    &.sv-action--hidden {
-      width: 0;
-      margin: 0;
+.svc-survey-element-toolbar__dots-item {
+  width: calcSize(4);
+  margin-left: calcSize(1);
+  margin-right: calcSize(0.5);
 
-      .sv-action__content {
-        display: none;
-      }
-    }
+  &.sv-action--hidden {
+    width: 0;
+    margin: 0;
 
-    .sv-dots__item {
-      margin-left: 0;
+    .sv-action__content {
+      display: none;
     }
   }
 
   .sv-dots__item {
-    //border-radius: calcSize(0.5);
-
-    use {
-      fill: $secondary;
-    }
+    margin-left: 0;
   }
 }
 
+.svc-survey-element-toolbar__dots-item use {
+  fill: $secondary;
+}
+
 .svc-question__content:focus,
 .svc-hovered > .svc-question__content {
   box-shadow: 0 0 0 2px $secondary-light;
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index bf4b7a03c8..e64e40ee5b 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -34,7 +34,7 @@ import {
   propertyExists,
   toggleHovered
 } from "../utils/utils";
-import { SurveyElementAdornerBase } from "./action-container-view-model";
+import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action-container-view-model";
 require("./question.scss");
 import { settings } from "../creator-settings";
 import { StringEditorConnector, StringItemsNavigatorBase } from "./string-editor";
@@ -309,6 +309,8 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
 
     this.actionContainer.sizeMode = "small";
     this.actionContainer.cssClasses = defaultCssClasses;
+    (<SurveyElementActionContainer>this.actionContainer).dotsItem.css += " svc-survey-element-toolbar__dots-item";
+    (<SurveyElementActionContainer>this.actionContainer).dotsItem.innerCss += " svc-survey-element-toolbar__item";
     this.topActionContainer = new ActionContainer();
     this.topActionContainer.cssClasses = defaultCssClasses;
     this.topActionContainer.sizeMode = "small";
diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts
index 649639839c..7d84f12b5b 100644
--- a/packages/survey-creator-core/src/components/tabs/preview.ts
+++ b/packages/survey-creator-core/src/components/tabs/preview.ts
@@ -239,9 +239,6 @@ export class PreviewViewModel extends Base {
       this.prevPageAction.iconName = <any>new ComputedUpdater<string>(() => {
         return this.surveyProvider.isMobileView ? "icon-arrow-left" : "icon-arrow-left_16x16";
       });
-      this.prevPageAction.iconSize = <any>new ComputedUpdater<number>(() => {
-        return this.surveyProvider.isMobileView ? 24 : 16;
-      });
       this.prevPageAction.action = () => setNearPage(false);
       pageActions.push(this.prevPageAction);
     }
@@ -278,9 +275,6 @@ export class PreviewViewModel extends Base {
       this.nextPageAction.iconName = <any>new ComputedUpdater<string>(() => {
         return this.surveyProvider.isMobileView ? "icon-arrow-right" : "icon-arrow-right_16x16";
       });
-      this.nextPageAction.iconSize = <any>new ComputedUpdater<number>(() => {
-        return this.surveyProvider.isMobileView ? 24 : 16;
-      });
       this.nextPageAction.action = () => setNearPage(true);
       pageActions.push(this.nextPageAction);
     }
diff --git a/packages/survey-creator-core/src/variables.scss b/packages/survey-creator-core/src/variables.scss
index 7e2c1e494c..1d1fac10a2 100644
--- a/packages/survey-creator-core/src/variables.scss
+++ b/packages/survey-creator-core/src/variables.scss
@@ -87,6 +87,7 @@ $tab-min-height: var(--tab-min-height, auto);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  outline: none;
   display: flex;
   box-sizing: border-box;
   border: none;

From 1071ea77ae892bd034c638e48091852af0e61fea Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 1 Nov 2024 18:12:31 +0300
Subject: [PATCH 08/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../src/components/page.scss                  | 14 ++++++------
 .../src/components/question.scss              | 22 +++++++++----------
 .../src/components/tabs/designer.ts           |  2 ++
 .../src/components/tabs/logic-ui.scss         | 13 ++++-------
 4 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 3c3415fdba..02d47586d6 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -72,10 +72,10 @@ svc-page {
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
   justify-content: center;
   align-items: center;
 
@@ -86,9 +86,9 @@ svc-page {
 .svc-page-toolbar__item--with-text {
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(1));
 }
 
 //hovered state
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index dffa4a3516..5530e0dfd1 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -58,10 +58,10 @@ svc-question {
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.25));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.5));
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
   justify-content: center;
   align-items: center;
 
@@ -72,18 +72,18 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(1));
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
   flex-direction: row-reverse;
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, calcSize(1));
 }
 
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
index 9c75cb313b..d6b53cbe29 100644
--- a/packages/survey-creator-core/src/components/tabs/designer.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -95,11 +95,13 @@ export class TabDesignerViewModel extends Base {
       id: "collapseAll",
       locTooltipName: "ed.collapseAllTooltip",
       iconName: "icon-collapseall-24x24",
+      iconSize: "auto",
       action: action
     }, {
       id: "expandAll",
       locTooltipName: "ed.expandAllTooltip",
       iconName: "icon-expandall-24x24",
+      iconSize: "auto",
       action: action
     }]);
   }
diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.scss b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
index eda3c1c506..0178ffe906 100644
--- a/packages/survey-creator-core/src/components/tabs/logic-ui.scss
+++ b/packages/survey-creator-core/src/components/tabs/logic-ui.scss
@@ -156,18 +156,13 @@
 
 .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
   display: none;
+  width: calcSize(5);
+  height: calcSize(5);
   background: none;
   justify-content: center;
   align-items: center;
-  padding: var(--ctr-survey-action-button-padding-top, calcSize(1))
-    var(--ctr-survey-action-button-padding-right-icon-only, calcSize(1))
-    var(--ctr-survey-action-button-padding-bottom, calcSize(1))
-    var(--ctr-survey-action-button-padding-left-icon-only, calcSize(1));
-
-  .sv-svg-icon {
-    width: var(--ctr-survey-action-button-icon-width, calcSize(3));
-    height: var(--ctr-survey-action-button-icon-height, calcSize(3));
-  }
+  padding: 0;
+
   use {
     fill: var(--ctr-survey-action-button-icon-color-negative, $red);
   }

From c98cf6caf225756c2f65b47d111567e36ab6a80b Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 4 Nov 2024 16:57:43 +0300
Subject: [PATCH 09/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../survey-creator-core/src/components/page.scss | 12 ++++++++++--
 .../src/components/question.scss                 | 16 +++++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 02d47586d6..ebc3db087a 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -84,11 +84,19 @@ svc-page {
 }
 
 .svc-page-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(1));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+
+.svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item--with-text {
+  margin-inline-end: 0;
+}
+
+.svc-page-toolbar .sv-action:first-of-type .svc-page-toolbar__item--with-text {
+  margin-inline-start: 0;
 }
 
 //hovered state
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 5530e0dfd1..787e974382 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -53,10 +53,10 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item,
-.svc-survey-element-toolbar__dots-item {
+.svc-survey-element-toolbar__dots-item .sv-dots__item {
   @include defaultActionButtonSettings;
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
-  margin: 0 var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.25));
+  margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.5));
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
@@ -76,7 +76,15 @@ svc-question {
     var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(1));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+
+.svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item--with-text {
+  margin-inline-end: 0;
+}
+
+.svc-survey-element-toolbar .sv-action:first-of-type .svc-survey-element-toolbar__item--with-text {
+  margin-inline-start: 0;
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
@@ -371,8 +379,6 @@ svc-question {
   }
 
   .svc-survey-element-toolbar-item__icon {
-    margin-inline-start: calcSize(0.5);
-
     &:last-child {
       margin-inline-start: 0;
     }

From 2f0d935b49367777c73c2cd24cd5447a5e24d32e Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 6 Nov 2024 15:14:28 +0300
Subject: [PATCH 10/22] fix dots item popup styles for adaptive container

---
 .../components/action-container-view-model.ts |   1 +
 .../src/components/popup.scss                 |  30 ++++++++++++------
 .../src/components/question.scss              |   6 ----
 .../src/components/tabs/designer-plugin.ts    |   4 +--
 .../survey-creator-core/src/tabbed-menu.ts    |   1 +
 .../survey-creator-core/src/themes/default.ts |   6 ++++
 packages/survey-creator-core/src/toolbox.ts   |   2 +-
 .../toolbox-search-compact_mask.png.png       | Bin 5789 -> 0 bytes
 8 files changed, 32 insertions(+), 18 deletions(-)
 delete mode 100644 visualRegressionTests/tests/designer/etalons/toolbox-search-compact_mask.png.png

diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
index 3fb5eef861..0c98b6d243 100644
--- a/packages/survey-creator-core/src/components/action-container-view-model.ts
+++ b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -222,6 +222,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     const actionContainer = new SurveyElementActionContainer();
     actionContainer.dotsItem.iconSize = 16;
     actionContainer.dotsItem.popupModel.horizontalPosition = "center";
+    actionContainer.dotsItem.popupModel.cssClass += " svc-creator-popup";
     return actionContainer;
   }
   private dragCollapsedTimer;
diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
index 22e08e8c93..d8b6655da3 100644
--- a/packages/survey-creator-core/src/components/popup.scss
+++ b/packages/survey-creator-core/src/components/popup.scss
@@ -51,10 +51,14 @@
   .sv-popup__pointer {
     &:after {
       content: " ";
-      border-bottom: calcSize(1) solid var(--ctr-contextual-menu-pointer-color, $background);
+      border-bottom: calcSize(1) solid var(--ctr-popup-menu-pointer-color, $background);
     }
   }
 
+  .sv-popup__container {
+    background-color: transparent;
+  }
+
   .sv-popup__body-header {
     @include ctrMediumBoldFont;
     color: var(--ctr-popup-title-color, $foreground);
@@ -73,7 +77,7 @@
 
   &.sv-popup--dropdown {
     .sv-popup__body-content {
-      background-color: var(--ctr-contextual-menu-background-color, $background);
+      background-color: var(--ctr-popup-menu-background-color, $background);
     }
   }
 
@@ -89,7 +93,6 @@
   }
 
   .sv-list__filter {
-    background-color: var(--ctr-contextual-menu-background-color, $background);
     border-bottom: 1px solid var(--ctr-list-search-border-color, $border-inside);
 
     .sv-list__input {
@@ -118,6 +121,8 @@
     fill: var(--ctr-list-item-icon-color, $foreground-light);
   }
 
+  .sv-list__item:focus > .sv-list__item-body,
+  .sv-list__item:hover > .sv-list__item-body,
   .sv-list__item--hovered > .sv-list__item-body {
     color: var(--ctr-list-item-text-color-hovered, $foreground);
     background: var(--ctr-list-item-background-color-hovered, $background-dark);
@@ -128,6 +133,8 @@
   }
 
   .sv-list__item--selected,
+  .sv-list__item--selected:hover,
+  .sv-list__item--selected:focus,
   .sv-list__item.sv-list__item--selected:hover {
     & > .sv-list__item-body {
       @include ctrDefaultBoldFont;
@@ -141,17 +148,25 @@
 
     &.sv-list__item--group {
       & > .sv-list__item-body {
-        background: var(--ctr-list-item-background-color-selected, $primary-light);
-        color: var(--ctr-list-item-text-color-selected, $foreground);
+        background: var(--ctr-list-item-background-color-selected-submenu, $primary-light);
+        color: var(--ctr-list-item-text-color-selected-submenu, $foreground);
         font-weight: 400;
       }
 
       .sv-list__item-icon use {
-        fill: var(--ctr-list-item-icon-color-hovered, $foreground-light);
+        fill: var(--ctr-list-item-icon-color-selected-submenu, $foreground-light);
       }
     }
   }
 
+  .sv-list__item.sv-action-bar-item--secondary:focus,
+  .sv-list__item.sv-action-bar-item--secondary:hover,
+  .sv-list__item.sv-action-bar-item--secondary {
+    .sv-list__item-icon use {
+      fill: $secondary;
+    }
+  }
+
   //styles for dropdown overlay
   &.sv-popup--dropdown-overlay {
     .sv-popup__button.sv-popup__button {
@@ -170,9 +185,6 @@
         var(--ctr-popup-menu-footer-padding-bottom, calcSize(1)) var(--ctr-popup-menu-footer-padding-left, 0);
     }
 
-    .sv-list__empty-container {
-      background-color: var(--ctr-contextual-menu-background-color, $background);
-    }
 
     .sv-popup__button:disabled {
       color: var(--ctr-actionbar-button-text-color-disabled, $foreground);
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index f3fd4077a4..a66781ca45 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -1184,12 +1184,6 @@ svc-question,
   }
 }
 
-.sv-list__container .sv-action-bar-item--secondary {
-  .sv-list__item-icon use {
-    fill: $secondary;
-  }
-}
-
 .sd-panel {
   .svc-row {
     margin-top: calcSize(1);
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
index 140a44d35d..b11d08dd3d 100644
--- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -156,8 +156,8 @@ export class TabDesignerPlugin implements ICreatorPlugin {
 
     const settingsAction = new MenuButton({
       id: "theme-settings",
-      locTooltipName: "pe.tabs.creatorSettingTitle",
-      iconName: "icon-config",
+      locTooltipName: "ed.creatorSettingTitle",
+      iconName: "gear-24x24",
       pressed: false,
       action: () => {
         this.creator.sidebar.expandSidebar();
diff --git a/packages/survey-creator-core/src/tabbed-menu.ts b/packages/survey-creator-core/src/tabbed-menu.ts
index bdb9589e9c..53523837f1 100644
--- a/packages/survey-creator-core/src/tabbed-menu.ts
+++ b/packages/survey-creator-core/src/tabbed-menu.ts
@@ -51,6 +51,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
   constructor(private creator: CreatorBase) {
     super();
     this.dotsItem.popupModel.horizontalPosition = "center";
+    this.dotsItem.popupModel.cssClass += " svc-tabbed-menu-item__popup svc-creator-popup";
     this.minVisibleItemsCount = 1;
   }
   public addTab(name: string,
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index 6cec96e155..ccc3cb432b 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -55,6 +55,7 @@ const Theme = {
     "--ctr-toolbox-group-header-border-width-left": "0px",
     "--ctr-toolbox-group-header-border-width-right": "0px",
     "--ctr-data-table-row-padding-left": "0px",
+    "--ctr-data-table-row-border-width-last-row": "0px",
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
@@ -317,6 +318,8 @@ const Theme = {
     "--ctr-page-navigator-button-padding": "var(--sjs-spacing-x125)",
     "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)",
+    "--ctr-popup-menu-background-color": "var(--sjs-layer-1-background-500)",
+    "--ctr-popup-menu-pointer-color": "var(--sjs-layer-1-background-500)",
     "--ctr-button-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-button-text-color": "var(--sjs-primary-background-500)",
     "--ctr-button-gap": "var(--sjs-spacing-x4)",
@@ -432,6 +435,7 @@ const Theme = {
     "--ctr-data-table-row-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-data-table-row-background-color-header": "var(--sjs-layer-3-background-500)",
     "--ctr-data-table-row-border-color": "var(--sjs-border-10)",
+    "--ctr-data-table-row-border-width": "var(--sjs-stroke-x1)",
     "--ctr-data-table-row-padding-top": "var(--sjs-spacing-x05)",
     "--ctr-data-table-row-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-data-table-row-padding-right": "var(--sjs-spacing-x05)",
@@ -695,6 +699,8 @@ const Theme = {
     "--ctr-toolbox-submenu-shadow-2-spread": "var(--ctr-shadow-large-spread)",
     "--ctr-toolbox-submenu-shadow-2-color": "var(--ctr-shadow-large-color)",
     "--ctr-toolbox-submenu-margin-top": "var(--sjs-spacing-x1n)",
+    "--ctr-list-item-background-color-selected-submenu": "var(--sjs-primary-background-10)",
+    "--ctr-list-item-text-color-selected-submenu": "var(--sjs-layer-1-foreground-100)",
     "--ctr-list-item-icon-color-selected-submenu": "var(--sjs-primary-background-500)",
     "--ctr-list-item-submenu-arrow-color-selected-item-submenu": "var(--sjs-layer-1-foreground-75)",
     "--ctr-menu-item-padding-left-icon": "var(--sjs-spacing-x2)",
diff --git a/packages/survey-creator-core/src/toolbox.ts b/packages/survey-creator-core/src/toolbox.ts
index 7e31dd64ff..9a5e6a2ce3 100644
--- a/packages/survey-creator-core/src/toolbox.ts
+++ b/packages/survey-creator-core/src/toolbox.ts
@@ -599,7 +599,7 @@ export class QuestionToolbox
         this.dragOrClickHelper.onPointerDown(pointerDownEvent, item);
       }
     };
-    this.dotsItem.popupModel.cssClass = "svc-toolbox-popup";
+    this.dotsItem.popupModel.cssClass += " svc-toolbox-popup svc-creator-popup";
   }
   private getDefaultQuestionCategories() {
     const questionCategoryMap = {};
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-search-compact_mask.png.png b/visualRegressionTests/tests/designer/etalons/toolbox-search-compact_mask.png.png
deleted file mode 100644
index aceead6cd636a471b22f540bca4c2b195278f877..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5789
zcmeAS@N?(olHy`uVBq!ia0y~yV7bA-z^ul>1{6{6w3!X07>k44ofy`glX(f`u%tWs
zIx;Y9?C1WI$O`0h7I;J!GcX91fH32|H2De!1~DT~7srr_xVJYpGBy|p9NA#=`#q0{
zfkQ#(l{;r2Smt-<8h^F{>Sg%%reYfJBPkG5zmXS2F^y8AK`@#MMl-@_Suk20j@AgH
zwc%)OI9eNy)`p|C;b?6*S{shmhNHFNXl*!J8;;h7qqX5^Z8&^tL%ZnLOiRMK{1Q%_
Qc??R~p00i_>zopr0LGm2yZ`_I


From 0ff5e51a06871617cc6172533e6e50ff864eac2e Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 6 Nov 2024 16:47:21 +0300
Subject: [PATCH 11/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../survey-creator-core/creator-themes-import.js   |  2 +-
 .../src/custom-questions/question-color.ts         |  1 +
 packages/survey-creator-core/src/themes/default.ts | 14 +++++---------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
index bc4de6e162..c29968231c 100644
--- a/packages/survey-creator-core/creator-themes-import.js
+++ b/packages/survey-creator-core/creator-themes-import.js
@@ -69,7 +69,7 @@ function capitalizedFirstLetter(word) {
 }
 
 function getCorrectValue(variableKey, value) {
-  if(variableKey.indexOf("-opacity-") > -1) {
+  if(variableKey.indexOf("-opacity") > -1) {
     return parseInt(value) / 100;
   } else {
     return value;
diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts
index bc985f4425..cafc78e7b3 100644
--- a/packages/survey-creator-core/src/custom-questions/question-color.ts
+++ b/packages/survey-creator-core/src/custom-questions/question-color.ts
@@ -151,6 +151,7 @@ export class QuestionColorModel extends QuestionTextModel {
     const dropdownAction = this.dropdownAction;
     dropdownAction.cssClasses = { item: classes.colorDropdown };
     dropdownAction.iconName = classes.colorDropdownIcon;
+    dropdownAction.iconSize = "auto" as any;
     const listModel = <ListModel<ItemValue>>dropdownAction.popupModel.contentComponentData.model;
     listModel.cssClasses = {};
     listModel.cssClasses = {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index a2cad4f185..b4cc4fcece 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -49,17 +49,18 @@ const Theme = {
     "--ctr-toolbox-item-text-opacity-disabled": 0.25,
     "--ctr-page-navigator-button-opacity-pressed": 0.5,
     "--ctr-button-text-opacity-disabled": 0.25,
-    "--ctr-notification-opacity": "75px",
+    "--ctr-notification-opacity": 0.75,
     "--ctr-notification-opacity-error": 1,
     "--ctr-toolbox-group-header-border-width-top": "0px",
     "--ctr-toolbox-group-header-border-width-left": "0px",
     "--ctr-toolbox-group-header-border-width-right": "0px",
+    "--ctr-data-table-cell-drop-down-arrow-opacity": 0.5,
     "--ctr-data-table-row-padding-left": "0px",
     "--ctr-data-table-row-border-width-last-row": "0px",
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
-    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": "50px",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": 0.5,
     "--ctr-label-padding-left": "0px",
     "--ctr-label-padding-right": "0px",
     "--ctr-survey-action-button-opacity-disabled": 0.25,
@@ -92,7 +93,7 @@ const Theme = {
     "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000",
     "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000",
     "--ctr-toolbox-submenu-margin-left": "0px",
-    "--ctr-survey-page-drag-indicator-opacity": "50px",
+    "--ctr-survey-page-drag-indicator-opacity": 0.5,
     "--ctr-toggle-button-thumb-border-width": "0px",
     "--ctr-line-height-unit": "8px",
     "--ctr-font-unit": "8px",
@@ -441,6 +442,7 @@ const Theme = {
     "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-top": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-data-table-cell-drop-down-arrow-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)",
     "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)",
     "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)",
@@ -573,10 +575,6 @@ const Theme = {
     "--ctr-survey-question-panel-toolbar-gap": "var(--sjs-spacing-x1)",
     "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)",
-    "--ctr-survey-action-button-padding-top": "var(--sjs-spacing-x1)",
-    "--ctr-survey-action-button-padding-bottom": "var(--sjs-spacing-x1)",
-    "--ctr-survey-action-button-icon-width": "var(--sjs-size-x3)",
-    "--ctr-survey-action-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)",
     "--ctr-survey-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)",
     "--ctr-survey-action-button-text-color-positive": "var(--sjs-primary-background-500)",
@@ -584,8 +582,6 @@ const Theme = {
     "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)",
     "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)",
     "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)",
-    "--ctr-survey-action-button-padding-left-icon-only": "var(--sjs-spacing-x1)",
-    "--ctr-survey-action-button-padding-right-icon-only": "var(--sjs-spacing-x1)",
     "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)",
     "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)",
     "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)",

From eb4773224df7ad0a23880bea8df181ccb9d15b24 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 6 Nov 2024 16:47:21 +0300
Subject: [PATCH 12/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../survey-creator-core/creator-themes-import.js   |  2 +-
 .../survey-creator-core/src/components/page.scss   |  2 +-
 .../src/custom-questions/question-color.ts         |  1 +
 packages/survey-creator-core/src/themes/default.ts | 14 +++++---------
 packages/survey-creator-core/src/utils/layout.scss |  8 ++++++++
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
index bc4de6e162..c29968231c 100644
--- a/packages/survey-creator-core/creator-themes-import.js
+++ b/packages/survey-creator-core/creator-themes-import.js
@@ -69,7 +69,7 @@ function capitalizedFirstLetter(word) {
 }
 
 function getCorrectValue(variableKey, value) {
-  if(variableKey.indexOf("-opacity-") > -1) {
+  if(variableKey.indexOf("-opacity") > -1) {
     return parseInt(value) / 100;
   } else {
     return value;
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index ebc3db087a..3d35d50958 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -137,7 +137,7 @@ svc-page {
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
   );
-  width: var(----ctr-survey-page-toolbar-item-icon-width, calcSize(2));
+  width: var(--ctr-survey-page-toolbar-item-icon-width, calcSize(2));
   height: var(--ctr-survey-page-toolbar-item-icon-height, calcSize(2));
   padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0)
     var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0)
diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts
index bc985f4425..cafc78e7b3 100644
--- a/packages/survey-creator-core/src/custom-questions/question-color.ts
+++ b/packages/survey-creator-core/src/custom-questions/question-color.ts
@@ -151,6 +151,7 @@ export class QuestionColorModel extends QuestionTextModel {
     const dropdownAction = this.dropdownAction;
     dropdownAction.cssClasses = { item: classes.colorDropdown };
     dropdownAction.iconName = classes.colorDropdownIcon;
+    dropdownAction.iconSize = "auto" as any;
     const listModel = <ListModel<ItemValue>>dropdownAction.popupModel.contentComponentData.model;
     listModel.cssClasses = {};
     listModel.cssClasses = {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index a2cad4f185..b4cc4fcece 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -49,17 +49,18 @@ const Theme = {
     "--ctr-toolbox-item-text-opacity-disabled": 0.25,
     "--ctr-page-navigator-button-opacity-pressed": 0.5,
     "--ctr-button-text-opacity-disabled": 0.25,
-    "--ctr-notification-opacity": "75px",
+    "--ctr-notification-opacity": 0.75,
     "--ctr-notification-opacity-error": 1,
     "--ctr-toolbox-group-header-border-width-top": "0px",
     "--ctr-toolbox-group-header-border-width-left": "0px",
     "--ctr-toolbox-group-header-border-width-right": "0px",
+    "--ctr-data-table-cell-drop-down-arrow-opacity": 0.5,
     "--ctr-data-table-row-padding-left": "0px",
     "--ctr-data-table-row-border-width-last-row": "0px",
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
-    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": "50px",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": 0.5,
     "--ctr-label-padding-left": "0px",
     "--ctr-label-padding-right": "0px",
     "--ctr-survey-action-button-opacity-disabled": 0.25,
@@ -92,7 +93,7 @@ const Theme = {
     "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000",
     "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000",
     "--ctr-toolbox-submenu-margin-left": "0px",
-    "--ctr-survey-page-drag-indicator-opacity": "50px",
+    "--ctr-survey-page-drag-indicator-opacity": 0.5,
     "--ctr-toggle-button-thumb-border-width": "0px",
     "--ctr-line-height-unit": "8px",
     "--ctr-font-unit": "8px",
@@ -441,6 +442,7 @@ const Theme = {
     "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-top": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-data-table-cell-drop-down-arrow-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)",
     "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)",
     "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)",
@@ -573,10 +575,6 @@ const Theme = {
     "--ctr-survey-question-panel-toolbar-gap": "var(--sjs-spacing-x1)",
     "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)",
-    "--ctr-survey-action-button-padding-top": "var(--sjs-spacing-x1)",
-    "--ctr-survey-action-button-padding-bottom": "var(--sjs-spacing-x1)",
-    "--ctr-survey-action-button-icon-width": "var(--sjs-size-x3)",
-    "--ctr-survey-action-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)",
     "--ctr-survey-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)",
     "--ctr-survey-action-button-text-color-positive": "var(--sjs-primary-background-500)",
@@ -584,8 +582,6 @@ const Theme = {
     "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)",
     "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)",
     "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)",
-    "--ctr-survey-action-button-padding-left-icon-only": "var(--sjs-spacing-x1)",
-    "--ctr-survey-action-button-padding-right-icon-only": "var(--sjs-spacing-x1)",
     "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)",
     "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)",
     "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)",
diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss
index 9070a3e537..405ac68f6d 100644
--- a/packages/survey-creator-core/src/utils/layout.scss
+++ b/packages/survey-creator-core/src/utils/layout.scss
@@ -35,10 +35,18 @@
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
   height: calcSize(5);
 }
+.sv-action-bar--default-size-mode .sv-action-bar-item {
+  height: auto;
+  width: auto;
+}
 
 .sv-action-bar--small-size-mode .sv-action-bar-separator {
   height: calcSize(4);
 }
+.sv-action-bar--small-size-mode .sv-action-bar-item {
+  height: auto;
+  width: auto;
+}
 
 .svc-creator--mobile {
   .sv-action-bar-separator {

From d466b230292a22e1bc37b83824c1da3ea26e48ea Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 7 Nov 2024 10:09:54 +0300
Subject: [PATCH 13/22] page-navigation

---
 .../page-navigator.component.html             |  6 +-
 .../designer/designer-survey.component.html   |  2 +-
 .../page-navigator/page-navigator.scss        | 66 +++++++++----------
 .../src/components/tabs/designer.scss         | 12 ++--
 .../src/components/tabs/designer.ts           | 14 ++--
 .../survey-creator-core/src/themes/default.ts | 10 +++
 .../tests/tabs/designer.test.ts               |  4 +-
 .../src/page-navigator/page-navigator.html    |  6 +-
 .../src/tabs/designer.html                    |  2 +-
 .../src/PageNavigator.tsx                     |  6 +-
 .../src/tabs/Designer.tsx                     |  2 +-
 .../src/page-navigator/PageNavigator.vue      |  6 +-
 .../src/tabs/designer/Designer.vue            |  2 +-
 13 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
index b1eb6ef05e..f670d44207 100644
--- a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
+++ b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
@@ -1,8 +1,8 @@
 <ng-template #template>
   <div class="svc-page-navigator" #container [visible]="model.visible">
-      <div class="svc-page-navigator__selector"
-          (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__selector--opened]="model.isPopupOpened">
-          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
+      <div class="svc-page-navigator__selector svc-page-navigator__button"
+          (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__button--pressed]="model.isPopupOpened">
+          <svg class="svc-page-navigator__button-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
           <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
       </div>
       <div>
diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
index cda65bffab..90f45b3e15 100644
--- a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
+++ b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html
@@ -26,7 +26,7 @@
     </svc-page-navigator>
   </div>
   <div *ngIf="model.hasToolbar" class="svc-tab-designer__toolbar">
-    <sv-action-bar [model]="model.actionContainer"></sv-action-bar>
+    <sv-action-bar [model]="model.surfaceToolbar"></sv-action-bar>
   </div>
 </ng-template>
 
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
index 21a3ce2ef6..e8af19d80f 100644
--- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
+++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
@@ -6,13 +6,12 @@ svc-page-navigator,
   flex-direction: column;
 }
 
-.svc-page-navigator__navigator-icon {
+.svc-page-navigator__button-icon {
   display: block;
   width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
   height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
   padding: var(--ctr-page-navigator-button-padding, calcSize(1.25));
   border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
-  cursor: pointer;
   transition: background-color $creator-transition-duration;
 
   .sv-svg-icon {
@@ -26,36 +25,38 @@ svc-page-navigator,
   }
 }
 
-.svc-page-navigator__selector {
-  width: calcSize(5.5);
-  height: calcSize(5.5);
-  min-height: calcSize(5.5);
-}
+.svc-page-navigator__button {
+  --ctr-page-navigator-button-double-padding: calc(2 * var(--ctr-page-navigator-button-padding));
+  --ctr-page-navigator-button-width: calc(
+    var(--ctr-page-navigator-button-icon-width) + var(--ctr-page-navigator-button-double-padding)
+  );
+  --ctr-page-navigator-button-height: calc(
+    var(--ctr-page-navigator-button-icon-height) + var(--ctr-page-navigator-button-double-padding)
+  );
+  width: var(--ctr-page-navigator-button-width, calcSize(5.5));
+  height: var(--ctr-page-navigator-button-height, calcSize(5.5));
+
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  &:hover,
+  &:focus {
+    outline: none;
+
+    .svc-page-navigator__button-icon {
+      background-color: var(--ctr-page-navigator-button-background-color-hovered, $primary-light);
 
-survey-creator,
-.svc-creator {
-  .svc-page-navigator__selector {
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    &:hover,
-    &:focus {
-      outline: none;
-
-      .svc-page-navigator__navigator-icon {
-        background-color: var(--ctr-page-navigator-button-background-color-hovered, $primary-light);
-
-        use {
-          fill: var(--ctr-page-navigator-button-icon-color-hovered, $primary);
-        }
+      use {
+        fill: var(--ctr-page-navigator-button-icon-color-hovered, $primary);
       }
     }
   }
 }
 
-.svc-page-navigator__selector--opened {
-  .svc-page-navigator__navigator-icon {
-    background-color: $primary-light;
+.svc-page-navigator__button--pressed {
+  .svc-page-navigator__button-icon {
+    background: var(--ctr-page-navigator-button-background-color-pressed, $primary-light);
     opacity: var(--ctr-page-navigator-button-opacity-pressed, 0.5);
 
     use {
@@ -80,13 +81,12 @@ survey-creator,
   padding: calcSize(16.5) 0;
   top: 0;
   bottom: 0;
-  right: calcSize(1.5);
+  right: var(--ctr-page-navigator-padding-right, calcSize(1.5));
 }
 
 .svc-page-navigator {
-  padding: calcSize(1.5);
-  padding-right: 0;
-  width: calcSize(5.5);
+  padding: var(--ctr-page-navigator-padding-top, calcSize(1.5)) 0
+    var(--ctr-page-navigator-padding-bottom, calcSize(1.5)) var(--ctr-page-navigator-padding-left, calcSize(1.5));
 }
 
 .svc-creator__toolbox--right,
@@ -102,12 +102,12 @@ survey-creator,
 
   .svc-tab-designer__page-navigator {
     right: unset;
-    left: calcSize(1.5);
+    left: var(--ctr-page-navigator-padding-left, calcSize(1.5));
   }
 
   .svc-page-navigator {
-    padding: calcSize(1.5);
-    padding-left: 0;
+    padding: var(--ctr-page-navigator-padding-top, calcSize(1.5)) var(--ctr-page-navigator-padding-right, calcSize(1.5))
+      var(--ctr-page-navigator-padding-bottom, calcSize(1.5)) 0;
   }
 }
 
diff --git a/packages/survey-creator-core/src/components/tabs/designer.scss b/packages/survey-creator-core/src/components/tabs/designer.scss
index 24c58325f0..3adc1eef84 100644
--- a/packages/survey-creator-core/src/components/tabs/designer.scss
+++ b/packages/survey-creator-core/src/components/tabs/designer.scss
@@ -127,10 +127,12 @@ svc-tab-designer {
   position: absolute;
   bottom: calcSize(0);
   right: 0;
+}
 
-  .sv-action-bar {
-    padding: calcSize(1.5);
-    gap: calcSize(1);
-    flex-direction: column;
-  }
+.svc-tab-designer__surface-toolbar {
+  padding: var(--ctr-surface-toolbar-padding-top, calcSize(1.5))
+    var(--ctr-surface-toolbar-padding-right, calcSize(1.5)) var(--ctr-surface-toolbar-padding-bottom, calcSize(1.5))
+    var(--ctr-surface-toolbar-padding-left, calcSize(1.5));
+  gap: var(--ctr-surface-toolbar-gap, calcSize(1));
+  flex-direction: column;
 }
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
index d6b53cbe29..7f17d1c676 100644
--- a/packages/survey-creator-core/src/components/tabs/designer.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -19,7 +19,7 @@ export class TabDesignerViewModel extends Base {
   @property() showPlaceholder: boolean;
   public creator: SurveyCreatorModel;
 
-  public actionContainer: ActionContainer;
+  public surfaceToolbar: ActionContainer;
 
   public get displayPageDropTarget() {
     return this.pagesController.page2Display === this.newPage ? "newGhostPage" : this.pagesController.page2Display.name;
@@ -74,24 +74,24 @@ export class TabDesignerViewModel extends Base {
     this.initSurvey();
   }
   private initToolbar() {
-    this.actionContainer = new ActionContainer();
+    this.surfaceToolbar = new ActionContainer();
     const action = (action) => { this.creator.onSurfaceToolbarActionExecuted.fire(this.creator, { action: action }); };
 
     let defaultActionBarCss = {
-      root: "sv-action-bar",
+      root: "sv-action-bar svc-tab-designer__surface-toolbar",
       defaultSizeMode: "",
       smallSizeMode: "",
-      item: "svc-page-navigator__selector",
+      item: "svc-page-navigator__button",
       itemWithTitle: "",
       itemAsIcon: "",
       itemActive: "",
       itemPressed: "",
-      itemIcon: "svc-page-navigator__navigator-icon",
+      itemIcon: "svc-page-navigator__button-icon",
       itemTitleWithIcon: "",
     };
-    this.actionContainer.cssClasses = defaultActionBarCss;
+    this.surfaceToolbar.cssClasses = defaultActionBarCss;
 
-    this.actionContainer.setItems([{
+    this.surfaceToolbar.setItems([{
       id: "collapseAll",
       locTooltipName: "ed.collapseAllTooltip",
       iconName: "icon-collapseall-24x24",
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index b4cc4fcece..7321dc345a 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -333,6 +333,7 @@ const Theme = {
     "--ctr-page-navigator-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)",
+    "--ctr-page-navigator-button-background-color-pressed": "var(--sjs-primary-background-10)",
     "--ctr-button-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-button-text-color": "var(--sjs-primary-background-500)",
     "--ctr-button-gap": "var(--sjs-spacing-x4)",
@@ -606,6 +607,10 @@ const Theme = {
     "--ctr-survey-item-actionbar-drag-indicator-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-survey-item-actionbar-drag-indicator-width": "var(--sjs-size-x3)",
     "--ctr-survey-item-actionbar-drag-indicator-height": "var(--sjs-size-x3)",
+    "--ctr-page-navigator-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-page-navigator-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-page-navigator-padding-top": "var(--sjs-spacing-x150)",
+    "--ctr-page-navigator-padding-bottom": "var(--sjs-spacing-x150)",
     "--ctr-toolbox-search-padding-left": "var(--sjs-spacing-x3)",
     "--ctr-toolbox-search-padding-right": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
@@ -783,6 +788,11 @@ const Theme = {
     "--ctr-survey-resize-frame-grip-width": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-grip-height": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-margin": "var(--sjs-spacing-x1n)",
+    "--ctr-surface-toolbar-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-surface-toolbar-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-surface-toolbar-padding-top": "var(--sjs-spacing-x150)",
+    "--ctr-surface-toolbar-padding-bottom": "var(--sjs-spacing-x150)",
+    "--ctr-surface-toolbar-gap": "var(--sjs-spacing-x1)",
     "--ctr-toggle-button-thumb-background-color-active": "var(--sjs-layer-3-foreground-75)",
     "--ctr-toggle-button-thumb-corner-radius": "var(--sjs-corner-radius-round)",
     "--ctr-toggle-button-corner-radius": "var(--sjs-corner-radius-round)",
diff --git a/packages/survey-creator-core/tests/tabs/designer.test.ts b/packages/survey-creator-core/tests/tabs/designer.test.ts
index 07c3080a82..697845c2bd 100644
--- a/packages/survey-creator-core/tests/tabs/designer.test.ts
+++ b/packages/survey-creator-core/tests/tabs/designer.test.ts
@@ -332,13 +332,13 @@ test("expand all and collapse all", () => {
   expect(questionAdorner.collapsed).toBeFalsy();
   expect(panelAdorner.collapsed).toBeFalsy();
 
-  designerPlugin.model.actionContainer.actions[0].action(designerPlugin.model.actionContainer.actions[0]);
+  designerPlugin.model.surfaceToolbar.actions[0].action(designerPlugin.model.surfaceToolbar.actions[0]);
   expect(page1Adorner.collapsed).toBeTruthy();
   expect(page2Adorner.collapsed).toBeTruthy();
   expect(questionAdorner.collapsed).toBeTruthy();
   expect(panelAdorner.collapsed).toBeTruthy();
 
-  designerPlugin.model.actionContainer.actions[1].action(designerPlugin.model.actionContainer.actions[1]);
+  designerPlugin.model.surfaceToolbar.actions[1].action(designerPlugin.model.surfaceToolbar.actions[1]);
   expect(page1Adorner.collapsed).toBeFalsy();
   expect(page2Adorner.collapsed).toBeFalsy();
   expect(questionAdorner.collapsed).toBeFalsy();
diff --git a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
index 043cf56614..0b1c948ebf 100644
--- a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
+++ b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
@@ -1,8 +1,8 @@
 <!-- ko if: visible -->
 <div class="svc-page-navigator">
-    <div class="svc-page-navigator__selector"
-        data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { 'svc-page-navigator__selector--opened': isPopupOpened }">
-        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 'auto'"></sv-svg-icon>
+    <div class="svc-page-navigator__selector svc-page-navigator__button"
+        data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { 'svc-page-navigator__button--pressed': isPopupOpened }">
+        <sv-svg-icon class="svc-page-navigator__button-icon" params="iconName: icon, size: 'auto'"></sv-svg-icon>
         <sv-popup params="model: popupModel, cssClass: 'svc-page-navigator__popup'"></sv-popup>
     </div>
     <div>
diff --git a/packages/survey-creator-knockout/src/tabs/designer.html b/packages/survey-creator-knockout/src/tabs/designer.html
index b10f50e4cc..582b63c996 100644
--- a/packages/survey-creator-knockout/src/tabs/designer.html
+++ b/packages/survey-creator-knockout/src/tabs/designer.html
@@ -68,7 +68,7 @@
     <!-- /ko -->
     <!-- ko if: hasToolbar -->
     <div class="svc-tab-designer__toolbar">
-      <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer, handleClick: false } } -->
+      <!-- ko component: { name: 'sv-action-bar', params: { model: surfaceToolbar, handleClick: false } } -->
       <!-- /ko -->
     </div>
     <!-- /ko -->
diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
index bf1112ad61..d4a3d6b8df 100644
--- a/packages/survey-creator-react/src/PageNavigator.tsx
+++ b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -75,9 +75,9 @@ export class SurveyPageNavigator extends CreatorModelElement<
     this.model.setScrollableContainer(undefined);
   }
   renderElement(): JSX.Element {
-    let className = "svc-page-navigator__selector";
+    let className = "svc-page-navigator__selector svc-page-navigator__button";
     if (this.model.isPopupOpened)
-      className += " svc-page-navigator__selector--opened";
+      className += " svc-page-navigator__button--pressed";
     return (
       <div className="svc-page-navigator" ref={this.containerRef} style={{ display: this.model.visible ? "flex" : "none" }}>
         {attachKey2click(<div
@@ -86,7 +86,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
           title={this.model.pageSelectorCaption}
         >
           <SvgIcon
-            className="svc-page-navigator__navigator-icon"
+            className="svc-page-navigator__button-icon"
             iconName={this.model.icon}
             size={"auto"}
             title={this.model.pageSelectorCaption}
diff --git a/packages/survey-creator-react/src/tabs/Designer.tsx b/packages/survey-creator-react/src/tabs/Designer.tsx
index 36465913cf..93de1a5509 100644
--- a/packages/survey-creator-react/src/tabs/Designer.tsx
+++ b/packages/survey-creator-react/src/tabs/Designer.tsx
@@ -171,7 +171,7 @@ export class TabDesignerComponent extends SurveyElementBase<ITabDesignerComponen
       }
       {this.model.hasToolbar ?
         <div className="svc-tab-designer__toolbar">
-          <SurveyActionBar model={this.model.actionContainer} handleClick={false}></SurveyActionBar></div>
+          <SurveyActionBar model={this.model.surfaceToolbar} handleClick={false}></SurveyActionBar></div>
         : null
       }
     </React.Fragment>);
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
index acf00e8d14..d3dbff64cd 100644
--- a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
+++ b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="svc-page-navigator" v-show="model.visible" ref="root">
     <div
-      class="svc-page-navigator__selector"
+      class="svc-page-navigator__selector svc-page-navigator__button"
       @click="model.togglePageSelector($event)"
       v-key2click
       :title="model.pageSelectorCaption"
-      :class="{ 'svc-page-navigator__selector--opened': model.isPopupOpened }"
+      :class="{ 'svc-page-navigator__button--pressed': model.isPopupOpened }"
     >
       <SvComponent
         :is="'sv-svg-icon'"
-        class="svc-page-navigator__navigator-icon"
+        class="svc-page-navigator__button-icon"
         :iconName="model.icon"
         :size="'auto'"
       ></SvComponent>
diff --git a/packages/survey-creator-vue/src/tabs/designer/Designer.vue b/packages/survey-creator-vue/src/tabs/designer/Designer.vue
index ff602eafcd..73b3f37b78 100644
--- a/packages/survey-creator-vue/src/tabs/designer/Designer.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/Designer.vue
@@ -117,7 +117,7 @@
           />
         </div>
         <div v-if="model.hasToolbar" class="svc-tab-designer__toolbar">
-          <SvComponent :is="'sv-action-bar'" :model="model.actionContainer" />
+          <SvComponent :is="'sv-action-bar'" :model="model.surfaceToolbar" />
         </div>
       </template>
     </div>

From d1fb431117b8e6a9b14691edb0042c52e7f63bd3 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 7 Nov 2024 11:00:33 +0300
Subject: [PATCH 14/22] work for
 https://github.com/surveyjs/private-tasks/issues/380

---
 packages/survey-creator-core/src/components/popup.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
index 911963bcb3..1af61f7bcd 100644
--- a/packages/survey-creator-core/src/components/popup.scss
+++ b/packages/survey-creator-core/src/components/popup.scss
@@ -167,7 +167,7 @@
   .sv-list__item.sv-action-bar-item--secondary:hover,
   .sv-list__item.sv-action-bar-item--secondary {
     .sv-list__item-icon use {
-      fill: $secondary;
+      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
     }
   }
 

From 8a8636b4c04fa9843f49ec8ed892111a75d7906a Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Thu, 7 Nov 2024 16:12:27 +0300
Subject: [PATCH 15/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../src/components/page.scss                  |  4 +-
 .../src/components/question.scss              | 96 ++++++++++++-------
 .../src/components/question.ts                | 12 ++-
 .../src/components/tabs/preview.ts            |  6 ++
 .../src/components/tabs/translation.ts        |  1 +
 .../survey-creator-core/src/themes/default.ts |  1 +
 .../tests/designer/translation-tab.ts         |  2 +-
 7 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 3d35d50958..5f362949a3 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -91,11 +91,11 @@ svc-page {
   gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
-.svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item--with-text {
+.svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
   margin-inline-end: 0;
 }
 
-.svc-page-toolbar .sv-action:first-of-type .svc-page-toolbar__item--with-text {
+.svc-page-toolbar .sv-action:first-of-type .svc-page-toolbar__item {
   margin-inline-start: 0;
 }
 
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 787e974382..f60c83cbf7 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -52,8 +52,7 @@ svc-question {
   }
 }
 
-.svc-survey-element-toolbar__item,
-.svc-survey-element-toolbar__dots-item .sv-dots__item {
+.svc-survey-element-toolbar__item {
   @include defaultActionButtonSettings;
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
@@ -62,6 +61,7 @@ svc-question {
     var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+
   justify-content: center;
   align-items: center;
 
@@ -72,29 +72,45 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  gap: var(--ctr-survey-question-panel-toolbar-item-gap, 0);
 }
 
-.svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item--with-text {
+.sv-dots__item.svc-survey-element-toolbar__item,
+.svc-survey-element-toolbar__item--icon {
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+}
+
+.svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
   margin-inline-end: 0;
 }
 
-.svc-survey-element-toolbar .sv-action:first-of-type .svc-survey-element-toolbar__item--with-text {
+.svc-survey-element-toolbar .sv-action:first-of-type .svc-survey-element-toolbar__item {
   margin-inline-start: 0;
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
   flex-direction: row-reverse;
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, calcSize(1));
 }
 
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
+  .svc-survey-element-toolbar-item__icon {
+    padding: 0;
+    width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+    height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
+  }
+}
+
 //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 {
@@ -129,7 +145,7 @@ svc-question {
 }
 
 .svc-survey-element-toolbar-item__icon,
-.svc-survey-element-toolbar__dots-item .sv-svg-icon {
+.svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
   --ctr-survey-question-toolbar-item-icon-width: calc(
     var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
@@ -143,13 +159,13 @@ svc-question {
 
   width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
   height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, 0);
+  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
 }
 
-.svc-survey-element-toolbar-item__icon use {
+.svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
 }
 
@@ -416,10 +432,26 @@ svc-question {
   .sv-dots__item {
     margin-left: 0;
   }
-}
 
-.svc-survey-element-toolbar__dots-item use {
-  fill: $secondary;
+  .sv-list__item-icon {
+    --ctr-survey-question-toolbar-item-icon-width: calc(
+      var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+    );
+    --ctr-survey-question-toolbar-item-icon-height: calc(
+      var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+    );
+
+    width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+    height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
+  }
+
+  use {
+    fill: $secondary;
+  }
 }
 
 .svc-question__content:focus,
@@ -1372,21 +1404,21 @@ svc-question,
   top: 0;
   right: 0;
   visibility: hidden;
+}
 
-  .sv-action-bar-item {
-    margin: 0;
-    padding: calcSize(0.5);
-    opacity: 0.5;
-    height: 24px;
+.svc-survey-element-top-toolbar__item {
+  @include defaultActionButtonSettings;
+  padding: 0;
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 4px);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
 
-    &:hover,
-    &:focus {
-      opacity: initial;
-    }
+  &:hover,
+  &:focus {
+    opacity: initial;
+  }
 
-    .sv-action-bar-item__icon use {
-      fill: $foreground-dim-light;
-    }
+  use {
+    fill: $foreground-dim-light;
   }
 }
 
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index e64e40ee5b..7276b0425e 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -295,11 +295,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     super.createActionContainers();
     const defaultCssClasses = {
       root: "svc-survey-element-toolbar sv-action-bar",
-      // defaultSizeMode: "sv-action-bar--default-size-mode",
-      // smallSizeMode: "sv-action-bar--small-size-mode",
       item: "svc-survey-element-toolbar__item",
       itemWithTitle: "svc-survey-element-toolbar__item--with-text",
-      // itemAsIcon: "sv-action-bar-item--icon",
+      itemAsIcon: "svc-survey-element-toolbar__item--icon",
       itemActive: "svc-survey-element-toolbar__item--active",
       itemPressed: "svc-survey-element-toolbar__item--pressed",
       itemIcon: "svc-survey-element-toolbar-item__icon",
@@ -312,7 +310,13 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     (<SurveyElementActionContainer>this.actionContainer).dotsItem.css += " svc-survey-element-toolbar__dots-item";
     (<SurveyElementActionContainer>this.actionContainer).dotsItem.innerCss += " svc-survey-element-toolbar__item";
     this.topActionContainer = new ActionContainer();
-    this.topActionContainer.cssClasses = defaultCssClasses;
+    this.topActionContainer.cssClasses = {
+      root: "svc-survey-element-top-toolbar sv-action-bar",
+      item: "svc-survey-element-top-toolbar__item",
+      itemIcon: "svc-survey-element-toolbar-item__icon",
+      itemTitle: "svc-survey-element-toolbar-item__title",
+      itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+    };
     this.topActionContainer.sizeMode = "small";
     this.topActionContainer.setItems([this.expandCollapseAction]);
   }
diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts
index 7d84f12b5b..aeebf6a159 100644
--- a/packages/survey-creator-core/src/components/tabs/preview.ts
+++ b/packages/survey-creator-core/src/components/tabs/preview.ts
@@ -73,6 +73,12 @@ export class PreviewViewModel extends Base {
   constructor(protected surveyProvider: SurveyCreatorModel, private startThemeClasses: any = defaultV2Css) {
     super();
     this.simulator = new SurveySimulatorModel(surveyProvider);
+    this.pages.cssClasses = {
+      root: "sv-action-bar svc-pages-toolbar",
+      item: "sv-action-bar-item svc-survey-element-toolbar__item",
+      itemAsIcon: "svc-survey-element-toolbar__item--icon",
+      itemIcon: "sv-action-bar-item__icon svc-survey-element-toolbar-item__icon",
+    };
   }
 
   public get isMobileView() {
diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
index c9bc207c79..1a2c0a671b 100644
--- a/packages/survey-creator-core/src/components/tabs/translation.ts
+++ b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -1667,6 +1667,7 @@ export class TranslationEditor {
     if(!!action) {
       action.enabled = this.fromLocales.length > 0;
       action.iconName = action.enabled ? "icon-chevron_16x16" : undefined;
+      action.iconSize = "auto";
       action.data.containerCss = new CssClassBuilder()
         .append("st-translation-machine-from__container")
         .append("st-translation-machine-from__container--disabled", !action.enabled)
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index b4cc4fcece..55be7b38b1 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -60,6 +60,7 @@ const Theme = {
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
+    "--ctr-survey-question-panel-toolbar-item-opacity-muted": 0.5,
     "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": 0.5,
     "--ctr-label-padding-left": "0px",
     "--ctr-label-padding-right": "0px",
diff --git a/visualRegressionTests/tests/designer/translation-tab.ts b/visualRegressionTests/tests/designer/translation-tab.ts
index 14ab4c1542..e43ed3bbe7 100644
--- a/visualRegressionTests/tests/designer/translation-tab.ts
+++ b/visualRegressionTests/tests/designer/translation-tab.ts
@@ -77,7 +77,7 @@ test("tranlation property grid", async (t) => {
   });
 });
 
-test("tranlation property grid", async (t) => {
+test("tranlation property grid + onMachineTranslate", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(2560, 1440);
     await ClientFunction(() => {

From 409ed5c39087d2f1484383d78779bafc792b47e1 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Fri, 8 Nov 2024 10:01:24 +0300
Subject: [PATCH 16/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 packages/survey-creator-core/src/components/question.scss | 6 ++++--
 packages/survey-creator-core/src/themes/default.ts        | 5 +++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index eb87b892ac..bead07243f 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -56,7 +56,7 @@ svc-question {
   @include defaultActionButtonSettings;
   --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
   margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
-  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.5));
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25));
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
@@ -1409,12 +1409,14 @@ svc-question,
 .svc-survey-element-top-toolbar__item {
   @include defaultActionButtonSettings;
   padding: 0;
-  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 4px);
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
+  background-color: transparent;
 
   &:hover,
   &:focus {
     opacity: initial;
+    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
   }
 
   use {
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index 55be7b38b1..3e14c6d5a6 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -566,6 +566,8 @@ const Theme = {
     "--ctr-search-button-padding-vertical": "var(--sjs-spacing-x05)",
     "--ctr-search-button-padding-horizontal": "var(--sjs-spacing-x05)",
     "--ctr-search-button-background-color-hovered": "var(--sjs-layer-1-background-400)",
+    "--ctr-search-button-icon-width": "var(--sjs-size-x2)",
+    "--ctr-search-button-icon-height": "var(--sjs-size-x2)",
     "--ctr-property-grid-search-button-icon-color": "var(--sjs-layer-3-foreground-50)",
     "--ctr-property-grid-search-button-background-color-hovered": "var(--sjs-layer-3-background-400)",
     "--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)",
@@ -612,6 +614,7 @@ const Theme = {
     "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
     "--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)",
+    "--ctr-toolbox-search-gap": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-search-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)",
     "--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
@@ -666,6 +669,8 @@ const Theme = {
     "--ctr-list-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-property-grid-search-icon-width": "var(--sjs-size-x3)",
     "--ctr-property-grid-search-icon-height": "var(--sjs-size-x3)",
+    "--ctr-toolbox-search-icon-width": "var(--sjs-size-x3)",
+    "--ctr-toolbox-search-icon-height": "var(--sjs-size-x3)",
     "--ctr-expression-item-padding-left-button": "var(--sjs-spacing-x4)",
     "--ctr-expression-item-padding-right-button": "var(--sjs-spacing-x4)",
     "--ctr-toolbox-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)",

From 386972270a3ddd6b00852f54e21656f0b098e9bb Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 11 Nov 2024 13:37:29 +0300
Subject: [PATCH 17/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 functionalTests/designer/add-new-question.ts  | 14 ++--
 functionalTests/designer/question-wrapper.ts  |  2 +-
 functionalTests/designer/responsiveness.ts    |  8 +--
 functionalTests/designer/surface.ts           |  6 +-
 functionalTests/helper.ts                     |  3 +
 .../src/components/page.scss                  | 56 ++++++++++-----
 .../src/components/question.scss              | 72 ++++++++++++-------
 .../survey-creator-core/src/responsivity.scss | 12 ++--
 8 files changed, 107 insertions(+), 66 deletions(-)

diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts
index ebc5ceba3c..252a468b3c 100644
--- a/functionalTests/designer/add-new-question.ts
+++ b/functionalTests/designer/add-new-question.ts
@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON } from "../helper";
+import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON, getQuestionBarItemByTitle } from "../helper";
 
 const title = "Add new question";
 
@@ -159,13 +159,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Rating Scale"))
+    .click(getQuestionBarItemByTitle("Rating Scale"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Password").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Single-Line Input")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Password");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Single-Line Input")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Password");
 
   expectedJson = <any>{
     "logoPosition": "right",
@@ -186,13 +186,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Single-Line Input"))
+    .click(getQuestionBarItemByTitle("Single-Line Input"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Rating Scale"))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Labels");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Labels");
 
   expectedJson = <any>{
     "logoPosition": "right",
diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
index e30c01ec14..5d6237939a 100644
--- a/functionalTests/designer/question-wrapper.ts
+++ b/functionalTests/designer/question-wrapper.ts
@@ -377,7 +377,7 @@ test("No tab stop in dynamic panel", async (t) => {
     .expect(Selector(".svc-question__content--panel .svc-action-button").withText("Add Question").focused).ok()
     .pressKey("tab")
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok();
+    .expect(Selector(".svc-question__content--panel .svc-survey-element-toolbar__item").withText("Panel").focused).ok();
 });
 
 test("Question adorner - collapse button in differen modes", async (t) => {
diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
index 9d8b4ea5fa..169df6fd90 100644
--- a/functionalTests/designer/responsiveness.ts
+++ b/functionalTests/designer/responsiveness.ts
@@ -244,14 +244,14 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(0).id).eql("svd-designer")
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(true)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(false)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(false)
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(true)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()
diff --git a/functionalTests/designer/surface.ts b/functionalTests/designer/surface.ts
index ced35609e0..a435d972e3 100644
--- a/functionalTests/designer/surface.ts
+++ b/functionalTests/designer/surface.ts
@@ -390,9 +390,9 @@ test("Check page adorner state is restored after shrink and stretch", async (t)
   };
   await setJSON(json);
   await t.click(".svc-page", { offsetX: 3, offsetY: 3 });
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
   await t.resizeWindow(500, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).notOk();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk();
   await t.resizeWindow(1920, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
 });
\ No newline at end of file
diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts
index 215437304b..db6e760a32 100644
--- a/functionalTests/helper.ts
+++ b/functionalTests/helper.ts
@@ -119,6 +119,9 @@ export function getPropertyGridCategory(categoryName) {
 export function getBarItemByTitle(text: string) {
   return Selector(".sv-action-bar-item[title=\"" + text + "\"]");
 }
+export function getQuestionBarItemByTitle(text: string) {
+  return Selector(".svc-survey-element-toolbar__item[title=\"" + text + "\"]");
+}
 export function getListItemByText(text) {
   return Selector(".sv-popup__content .sv-list .sv-list__item").withText(text).filterVisible();
 }
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 5f362949a3..fc53562886 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -69,13 +69,30 @@ svc-page {
 
 .svc-page-toolbar__item {
   @include defaultActionButtonSettings;
-  --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
-  margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
   justify-content: center;
   align-items: center;
 
@@ -84,11 +101,16 @@ svc-page {
 }
 
 .svc-page-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
@@ -127,22 +149,18 @@ svc-page {
 }
 
 .svc-page-toolbar-item__icon {
-  --ctr-survey-page-toolbar-item-icon-width: calc(
+  --thm-survey-page-toolbar-item-icon-width: calc(
     var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
   );
-  --ctr-survey-page-toolbar-item-icon-height: calc(
+  --thm-survey-page-toolbar-item-icon-height: calc(
     var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
   );
-  width: var(--ctr-survey-page-toolbar-item-icon-width, calcSize(2));
-  height: var(--ctr-survey-page-toolbar-item-icon-height, calcSize(2));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, 0);
+  width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2));
+  height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2));
 }
 
 .svc-page-toolbar-item__icon use {
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index bead07243f..7c97fd9ba1 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -54,13 +54,30 @@ svc-question {
 
 .svc-survey-element-toolbar__item {
   @include defaultActionButtonSettings;
-  --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
-  margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25));
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
 
   justify-content: center;
   align-items: center;
@@ -72,19 +89,15 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, 0);
-}
-
-.sv-dots__item.svc-survey-element-toolbar__item,
-.svc-survey-element-toolbar__item--icon {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
@@ -96,14 +109,25 @@ svc-question {
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
   flex-direction: row-reverse;
+  padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, calcSize(1));
-}
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
 
-.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
   .svc-survey-element-toolbar-item__icon {
     padding: 0;
     width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
@@ -159,10 +183,6 @@ svc-question {
 
   width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
   height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
 }
 
 .svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
diff --git a/packages/survey-creator-core/src/responsivity.scss b/packages/survey-creator-core/src/responsivity.scss
index e768c7a026..7fd4e418d1 100644
--- a/packages/survey-creator-core/src/responsivity.scss
+++ b/packages/survey-creator-core/src/responsivity.scss
@@ -117,24 +117,24 @@
   .svc-question__content-actions {
     width: calc(100% + 3 * #{$base-unit});
 
-    .sv-action-bar-item {
+    .svc-survey-element-toolbar__item {
       border: 0;
     }
   }
 
   .svc-page__content-actions {
-    .sv-action-bar {
+    .svc-page-toolbar {
       padding-right: calcSize(1);
 
       .sv-action {
         .sv-action__content {
           padding-right: 0;
-
-          .sv-action-bar-item__title--with-icon {
-            display: none;
-          }
         }
       }
     }
   }
+
+  .svc-page-toolbar-item__title--with-icon {
+    display: none;
+  }
 }
\ No newline at end of file

From 37f2f4b7af385e01d85ebbab003f985261833dcf Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 11 Nov 2024 15:30:57 +0300
Subject: [PATCH 18/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 packages/survey-creator-core/src/components/question.scss | 5 ++++-
 visualRegressionTests/tests/designer/pg-editors.ts        | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 7c97fd9ba1..f6dc907314 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -1428,7 +1428,10 @@ svc-question,
 
 .svc-survey-element-top-toolbar__item {
   @include defaultActionButtonSettings;
-  padding: 0;
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left-small, calcSize(0.5));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
   background-color: transparent;
diff --git a/visualRegressionTests/tests/designer/pg-editors.ts b/visualRegressionTests/tests/designer/pg-editors.ts
index ec6ee171aa..a364a53899 100644
--- a/visualRegressionTests/tests/designer/pg-editors.ts
+++ b/visualRegressionTests/tests/designer/pg-editors.ts
@@ -1,4 +1,4 @@
-import { url, setJSON, takeElementScreenshot, getPropertyGridCategory, generalGroupName, wrapVisualTest, addQuestionByAddQuestionButton, resetHoverToCreator, surveySettingsButtonSelector, inputMaskSettingsGroupName, getListItemByText, getVisibleElement, changeToolboxSearchEnabled, getToolboxItemByAriaLabel } from "../../helper";
+import { url, setJSON, takeElementScreenshot, getPropertyGridCategory, generalGroupName, wrapVisualTest, addQuestionByAddQuestionButton, resetHoverToCreator, surveySettingsButtonSelector, inputMaskSettingsGroupName, getListItemByText, getVisibleElement, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, getQuestionBarItemByTitle } from "../../helper";
 import { ClientFunction, Selector } from "testcafe";
 const title = "Property Grid Editors";
 
@@ -830,7 +830,7 @@ test("popup overlay in property grid", async (t) => {
 
     await t
       .click("div[data-sv-drop-target-survey-element='question1']", { offsetX: 200, offsetY: 30 })
-      .click(getVisibleElement(".sv-action-bar-item[title='Open settings']"))
+      .click(getQuestionBarItemByTitle("Open settings"))
       .click(Selector(".spg-dropdown[aria-label='Input type']"));
 
     await takeElementScreenshot("pg-overlay-popup.png", getVisibleElement(".sv-popup .sv-popup__container"), t, comparer);

From bb3a5416b559c19cf2332efb67fbb76506a6a0f1 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Mon, 11 Nov 2024 16:41:37 +0300
Subject: [PATCH 19/22] work for #5991 Replace the icon size with 'auto' and
 write css styles for them

---
 .../src/property-grid-theme/blocks/spg-question.scss           | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
index 52f0e179b0..ad23f727c3 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
@@ -164,6 +164,9 @@ sv-question-error {
 }
 
 .spg-question__erbox-icon {
+  width: var(--ctr-error-message-icon-width, calcSize(3));
+  height: var(--ctr-error-message-icon-height, calcSize(3));
+  
   .sv-svg-icon {
     vertical-align: top;
     width: var(--ctr-error-message-icon-width, calcSize(3));

From 57dc819b74bec7b23c5b7ecff1601714f0ebbe37 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Tue, 12 Nov 2024 18:04:19 +0300
Subject: [PATCH 20/22] work for
 https://github.com/surveyjs/private-tasks/issues/380

---
 packages/survey-creator-core/src/components/popup.scss    | 7 +++----
 packages/survey-creator-core/src/components/question.scss | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
index 1af61f7bcd..bf5c2afd16 100644
--- a/packages/survey-creator-core/src/components/popup.scss
+++ b/packages/survey-creator-core/src/components/popup.scss
@@ -32,11 +32,10 @@
     }
   }
 
+  &.sv-popup--overlay .sv-popup__container {
+    background-color: var(--ctr-popup-haze-background-color, $background-semitransparent);
+  }
   &.sv-popup--overlay:not(.sv-popup--dropdown-overlay) {
-    .sv-popup__container {
-      background: var(--ctr-popup-haze-background-color, $background-semitransparent);
-    }
-
     .sv-popup__body-content {
       background-color: var(--ctr-popup-background-color, $background-dim);
     }
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index bd0fe39b87..bdfccc20b5 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -469,7 +469,8 @@ svc-question {
     height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
   }
 
-  use {
+  .sv-list__item:hover > .sv-list__item-body .sv-svg-icon use,
+  .sv-svg-icon use {
     fill: $secondary;
   }
 }

From 70cc5d5cc9ff0802223221190f36a35a8616ef5e Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 13 Nov 2024 16:05:04 +0300
Subject: [PATCH 21/22] fix height after zoom in

---
 .../src/components/side-bar/tab-control.scss             | 9 +++++++++
 .../src/components/tabbed-menu/tabbed-menu-item.scss     | 5 ++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/survey-creator-core/src/components/side-bar/tab-control.scss b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
index efb7509550..c7a0848d27 100644
--- a/packages/survey-creator-core/src/components/side-bar/tab-control.scss
+++ b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
@@ -110,6 +110,15 @@
   width: 100%;
 }
 
+.svc-sidebar__header--tabbed,
+.svc-sidebar__header-container {
+  min-height: calc(
+    var(--ctr-menu-toolbar-button-icon-height) + var(--ctr-menu-toolbar-button-padding-top) +
+      var(--ctr-menu-toolbar-button-padding-bottom) + var(--ctr-menu-toolbar-padding-vertical) +
+      var(--ctr-menu-toolbar-padding-vertical)
+  );
+}
+
 .svc-sidebar__header-container.svc-sidebar__header-container--with-subtitle {
   padding: var(--ctr-property-grid-header-padding-top-with-subtitle, 6px)
     var(--ctr-property-grid-header-padding-right, 16px)
diff --git a/packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu-item.scss b/packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu-item.scss
index 80abdd8146..0eb6ee8af9 100644
--- a/packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu-item.scss
+++ b/packages/survey-creator-core/src/components/tabbed-menu/tabbed-menu-item.scss
@@ -1,6 +1,9 @@
 @import "../../variables.scss";
 
 .svc-tabbed-menu-item {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--ctr-menu-toolbar-button-icon-height) + var(--ctr-menu-item-padding-top) + var(--ctr-menu-item-padding-bottom));
   padding: var(--ctr-menu-item-padding-top, 20px) var(--ctr-menu-item-padding-right, 24px) var(--ctr-menu-item-padding-bottom, 20px) var(--ctr-menu-item-padding-left, 24px) ;
   box-sizing: border-box;
   cursor: pointer;
@@ -9,7 +12,7 @@
   &:hover,
   &:focus {
     background-color: var(--ctr-menu-item-background-color-hovered, $background-dim);
-    box-shadow: inset 0px -1px 0px $border;
+    box-shadow: inset 0px -1px 0px var(--ctr-menu-border-color, $border);
     outline: none;
   }
 }

From 05a9f5d22c137b0118d7babf2a53a67f4ff2a3cf Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 13 Nov 2024 17:53:32 +0300
Subject: [PATCH 22/22] merge master

---
 packages/survey-creator-core/tests/tabs/designer.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-creator-core/tests/tabs/designer.test.ts b/packages/survey-creator-core/tests/tabs/designer.test.ts
index 53f999f603..c77bc8a926 100644
--- a/packages/survey-creator-core/tests/tabs/designer.test.ts
+++ b/packages/survey-creator-core/tests/tabs/designer.test.ts
@@ -498,7 +498,7 @@ test("expand/collapse event - loading", () => {
   expect(questionAdorner.collapsed).toBeTruthy();
   expect(panelAdorner.collapsed).toBeFalsy();
 
-  const collapseAll = designerPlugin.model.actionContainer.getActionById("collapseAll");
+  const collapseAll = designerPlugin.model.surfaceToolbar.getActionById("collapseAll");
   collapseAll.action(collapseAll);
 
   expect(page1Adorner.collapsed).toBeTruthy();
@@ -506,7 +506,7 @@ test("expand/collapse event - loading", () => {
   expect(questionAdorner.collapsed).toBeFalsy();
   expect(panelAdorner.collapsed).toBeTruthy();
 
-  const expandAll = designerPlugin.model.actionContainer.getActionById("expandAll");
+  const expandAll = designerPlugin.model.surfaceToolbar.getActionById("expandAll");
   expandAll.action(expandAll);
 
   expect(page1Adorner.collapsed).toBeFalsy();