Issue/6398-DarkMode-incorrect-toolbar-styles (#6403)

* #6398 DarkMode: incorrect toolbar styles
Fixes #6398

* DarkMode: incorrect toolbar styles #6398

* #6398 DarkMode: incorrect toolbar styles
Fixes #6398

* #6398 - fixed separator padding

* update screenshots #6398

packages/survey-creator-core/src/creator-base.ts

@@ -95,7 +95,23 @@ export interface IKeyboardShortcut {
 export class CreatorAction extends Action {
 }
 
-export class ToolbarActionContainer extends ActionContainer {
+export class FooterToolbarActionContainer extends ActionContainer {
+  protected getDefaultCssClasses() {
+    const defaultCss = super.getDefaultCssClasses();
+    return {
+      root: defaultCss.root + " svc-toolbar sv-action-bar sv-action-bar--default-size-mode",
+      item: defaultCss.item + " svc-toolbar__item",
+      itemWithTitle: defaultCss.itemWithTitle + " svc-toolbar__item--with-text",
+      itemAsIcon: defaultCss.itemAsIcon + " svc-toolbar__item--icon",
+      itemActive: defaultCss.itemActive + " svc-toolbar__item--active",
+      itemPressed: defaultCss.itemPressed + " svc-toolbar__item--pressed",
+      itemIcon: defaultCss.itemIcon + " svc-toolbar-item__icon",
+      itemTitle: defaultCss.itemTitle + " svc-toolbar-item__title",
+      itemTitleWithIcon: defaultCss.itemTitleWithIcon + " svc-toolbar-item__title--with-icon",
+    };
+  }
+}
+export class ToolbarActionContainer extends FooterToolbarActionContainer {
   constructor(private creator: SurveyCreatorModel) {
     super();
   }
@@ -1817,7 +1833,7 @@ export class SurveyCreatorModel extends Base
   }
   private initFooterToolbar(): void {
     if (!this.footerToolbar) {
-      this.footerToolbar = new ActionContainer();
+      this.footerToolbar = new FooterToolbarActionContainer();
       ["designer", "undoredo", "preview", "theme"].forEach((pluginKey: string) => {
         const plugin = this.getPlugin(pluginKey);
         if (!!plugin && !!plugin["addFooterActions"]) {

packages/survey-creator-core/src/utils/layout.scss

@@ -104,7 +104,7 @@
       }
     }
     .sv-action:not(.sv-action--hidden) ~ .sv-action:not(.sv-action--hidden) {
-      .sv-action-bar-item {
+      .svc-toolbar__item {
          margin-inline-start: var(--ctr-menu-toolbar-gap, calcSize(2))
       }
     }
@@ -115,69 +115,72 @@
     background-color: var(--ctr-separator-color, $border);
   }
 
-  .sv-action-bar-item {
-    @include ctrDefaultFont;
-    border-radius: var(--ctr-menu-toolbar-button-corner-radius, 2px);
+  .sv-action-bar-item-dropdown {
+    border-radius: calcCornerRadius(0.5);
     background-color: transparent;
-    color: var(--ctr-menu-toolbar-button-text-color, $foreground);
-    transition: background-color $creator-transition-duration;
-    height: auto;
-
-    //hovered and focused state
-    &:hover,
-    &:focus {
-      background-color: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim);
-    }
+  }
+}
 
-    //pressed state
-    &:active,
-    &.sv-action-bar-item--pressed {
-      opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
-      background-color: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim);
-      use {
-        fill: black;
-        opacity: 0.45;
-      }
-    }
+.svc-toolbar__item {
+  @include ctrDefaultFont;
+  border-radius: var(--ctr-menu-toolbar-button-corner-radius, 2px);
+  background-color: transparent;
+  color: var(--ctr-menu-toolbar-button-text-color, $foreground);
+  transition: background-color $creator-transition-duration;
+  height: auto;
+  appearance: none;
+  display: flex;
+  border: none;
+  //hovered and focused state
+  &:hover,
+  &:focus {
+    background-color: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim);
+  }
 
-    //checked state
-    &.sv-action-bar-item--active {
-      background-color: var(--ctr-menu-toolbar-button-background-color-selected, $background);
-      use {
-        fill: var(--ctr-menu-toolbar-button-text-color-selected, $primary);
-      }
+  //pressed state
+  &:active,
+  &.svc-toolbar__item--pressed {
+    opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
+    background-color: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim);
+    use {
+      fill: black;
+      opacity: 0.45;
     }
+  }
 
-    //disabled state
-    &:disabled {
-      background-color: transparent;
-      opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
+  //checked state
+  &.svc-toolbar__item--active {
+    background-color: var(--ctr-menu-toolbar-button-background-color-selected, $background);
+    use {
+      fill: var(--ctr-menu-toolbar-button-text-color-selected, $primary);
     }
   }
 
-  .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);
+  //disabled state
+  &:disabled {
+    background-color: transparent;
+    opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
   }
+}
 
-  .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));
+.svc-toolbar__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);
+}
 
-    use {
-      fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
-    }
-  }
+.svc-toolbar-item__icon {
+  width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+  height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
 
-  .sv-action-bar-item-dropdown {
-    border-radius: calcCornerRadius(0.5);
-    background-color: transparent;
+  use {
+    fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
   }
 }
 
+
 .svc-footer-bar {
   .svc-toolbar-wrapper {
     height: calcSize(6);
@@ -193,36 +196,8 @@
       box-sizing: border-box;
     }
 
-    .sv-action-bar-item {
-      border-radius: var(--ctr-menu-toolbar-button-corner-radius, calcSize(0.25));
-      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-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-menu-toolbar-button-background-color-hovered, $background-dim);
-    }
-
-    .sv-action-bar-item--active {
-      background-color: var(--ctr-menu-toolbar-button-background-color-selected, $primary-light);
-
-      &.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-menu-toolbar-button-background-color-selected, $primary-light);
-      }
-
-      .sv-action-bar-item__icon use {
-        fill: var(--ctr-menu-toolbar-button-icon-color-selected, $primary);
-      }
-    }
-
-    .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);
-      }
+    .svc-toolbar__item {
+      margin: 0 calcSize(1);
     }
   }
 }