Survey Creator - A new theme

packages/survey-creator-angular/angular.json

@@ -71,15 +71,19 @@
               "./example/angular-ui/src/assets",
               "./example/angular-ui/src/testCafe"
             ],
+            "styles": [
+              "./node_modules/survey-core/defaultV2.css",
+              "./node_modules/survey-creator-core/survey-creator-core.css"
+            ],
             "scripts": []
           },
           "configurations": {
             "production": {
               "buildOptimizer": true,
               "budgets": [
                 {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
+                  "type": "allScript",
+                  "maximumWarning": "10mb",
                   "maximumError": "10mb"
                 },
                 {
@@ -129,4 +133,4 @@
     }
   },
   "defaultProject": "survey-creator-angular"
-}
+}

packages/survey-creator-angular/example/angular-ui/src/app/app.component.scss

@@ -1,3 +1 @@
-@import "survey-core/defaultV2.css";
-@import "survey-creator-core/survey-creator-core.css";
 app-root { position: fixed; top: 0; bottom: 0; right: 0; left: 0;}

packages/survey-creator-core/creator-themes-import.js

@@ -125,7 +125,9 @@ Object.keys(themeNameMap).forEach(themeName => {
     const distinctions = themeConstants[themeNameMap[themeName]] || {};
     Object.keys(curThemeCssVariables || {}).forEach(variableKey => {
       const variableValue = curThemeCssVariables[variableKey];
-      if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) {
+      if(variableKey.indexOf("--ctr-shadow-") > -1 || variableKey.indexOf("--lbr-shadow-") > -1 || variableKey.indexOf("-unit") > -1) {
+        distinctions[variableKey] = variableValue;
+      } else if(variableValue !== baseThemeCssVariable[variableKey] || usedCssVariablesList.indexOf(variableKey) !== -1) {
         distinctions[variableKey] = getCorrectValue(variableKey, variableValue);
       }
     });

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

@@ -53,6 +53,18 @@ survey-creator,
   .sv-drag-drop-choices-shortcut {
     .sv-drag-drop-choices-shortcut__content {
       background: var(--ctr-survey-radio-button-group-item-background-color-floating, $background);
+      border-radius: var(--ctr-survey-radio-button-group-item-corner-radius-floating, calcSize(4.5));
+      box-shadow:
+        var(--ctr-survey-radio-button-group-item-shadow-floating-2-offset-x, 0px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-2-offset-y, 2px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-2-blur, 8px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-2-spread, 0px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-2-color, rgba(0, 76, 68, 0.1)),
+        var(--ctr-survey-radio-button-group-item-shadow-floating-1-offset-x, 0px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-1-offset-y, 16px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-1-blur, 32px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-1-spread, 0px)
+          var(--ctr-survey-radio-button-group-item-shadow-floating-1-color, rgba(0, 76, 68, 0.1));
 
       .sd-item__decorator {
       }

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

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

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

@@ -9,6 +9,7 @@
 }
 .svc-link-value-button {
   margin-left: calcSize(-2);
+  border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5));
 }
 .svc-question-link__clear-button {
   color: $red;

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

@@ -48,8 +48,8 @@ svc-page-navigator-item,
   border-radius: 50%;
   width: var(--ctr-page-navigator-item-dot-radius-small, 6px);
   height: var(--ctr-page-navigator-item-dot-radius-small, 6px);
-  right: calc(50% - 6px / 2);
-  top: calc(50% - 6px / 2);
+  right: calc(50% - var(--ctr-page-navigator-item-dot-radius-small, 6px) / 2);
+  top: calc(50% - var(--ctr-page-navigator-item-dot-radius-small, 6px) / 2);
   background: var(--ctr-page-navigator-item-dot-color-default, $border);
 }
 
@@ -75,20 +75,23 @@ svc-page-navigator-item,
   right: calcSize(0.5);
   display: flex;
   align-items: center;
-  line-height: calcSize(4);
   animation: 0.5s ease-in;
-  padding: 0;
   opacity: 0;
   max-width: 0;
   z-index: 20;
   position: absolute;
   top: 0;
   height: 100%;
   background-color: var(--ctr-page-navigator-item-background-color-hovered, $background);
-  border-radius: calcSize(12.5);
   box-shadow: $shadow-medium;
   transition: opacity $creator-transition-duration;
 
+  border-radius: var(--ctr-page-navigator-item-corner-radius, calcSize(12.5));
+  padding: var(--ctr-page-navigator-item-padding-top, 0) var(--ctr-page-navigator-item-padding-right, 0)
+    var(--ctr-page-navigator-item-padding-bottom, 0) var(--ctr-page-navigator-item-padding-left-hovered, 0);
+  flex-direction: row;
+  gap: var(--ctr-page-navigator-item-gap, 8px);
+
   .svc-page-navigator-item__dot {
     position: absolute;
     display: inline-block;
@@ -112,17 +115,6 @@ svc-page-navigator-item,
   }
 }
 
-.svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) {
-  .svc-page-navigator-item__banner {
-    .svc-page-navigator-item__dot {
-      width: calcSize(1);
-      height: calcSize(1);
-      border: none;
-      background: var(--ctr-page-navigator-item-dot-color-hovered, $primary);
-    }
-  }
-}
-
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover,
 .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus {
   .svc-page-navigator-item__banner {
@@ -131,6 +123,13 @@ svc-page-navigator-item,
     opacity: 1;
     background: var(--ctr-page-navigator-item-background-color-hovered, $background);
   }
+
+  .svc-page-navigator-item__dot {
+    border: none;
+    width: var(--ctr-page-navigator-item-dot-radius-large, calcSize(1));
+    height: var(--ctr-page-navigator-item-dot-radius-large, calcSize(1));
+    background: var(--ctr-page-navigator-item-dot-color-hovered, $primary);
+  }
 }
 
 .svc-creator__toolbox--right,

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

@@ -10,8 +10,8 @@ svc-page-navigator,
   display: block;
   height: calcSize(3);
   width: calcSize(3);
-  padding: calcSize(1.25);
-  border-radius: 50%;
+  border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
+  padding: var(--ctr-page-navigator-button-padding, calcSize(1.25));
   cursor: pointer;
   transition: background-color $creator-transition-duration;
 

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

@@ -60,6 +60,17 @@
     color: var(--ctr-popup-title-color, $foreground);
   }
 
+  &.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content,
+  .sv-popup__body-content {
+    border-radius: var(--ctr-popup-menu-corner-radius, calcSize(0.5));
+  }
+
+  &.svc-property-editor.sv-popup--overlay:not(.sv-popup--dropdown-overlay) .sv-popup__body-content {
+    background-color: var(--ctr-popup-background-color, $background-dim);
+    border-radius: calc(4 * (var(--ctr-popup-menu-corner-radius, 4px)))
+      calc(4 * (var(--ctr-popup-menu-corner-radius, 4px))) 0px 0px;
+  }
+
   &.sv-popup--dropdown {
     .sv-popup__body-content {
       background-color: var(--ctr-contextual-menu-background-color, $background);
@@ -72,6 +83,11 @@
     }
   }
 
+  .sv-list {
+    padding-inline-start: var(--ctr-list-padding-left);
+    padding-inline-end: var(--ctr-list-padding-right);
+  }
+
   .sv-list__filter {
     background-color: var(--ctr-contextual-menu-background-color, $background);
     border-bottom: 1px solid var(--ctr-list-search-border-color, $border-inside);
@@ -95,6 +111,7 @@
     @include ctrDefaultFont;
     color: var(--ctr-list-item-text-color, $foreground-dim);
     transition: background-color $creator-transition-duration, color $creator-transition-duration;
+    border-radius: var(--ctr-list-item-corner-radius);
   }
 
   .sv-list__item-icon use {
@@ -139,11 +156,18 @@
   &.sv-popup--dropdown-overlay {
     .sv-popup__button.sv-popup__button {
       color: var(--ctr-actionbar-button-text-color, $primary);
+      border-radius: var(--ctr-actionbar-button-corner-radius, calcSize(12.5));
+      padding: var(--ctr-actionbar-button-padding-top-medium-text, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-right-medium-text, calcSize(2))
+        var(--ctr-actionbar-button-padding-bottom-medium-text, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-left-medium-text, calcSize(2));
     }
 
     .sv-popup__body-footer {
-      background-color: var(--ctr-contextual-menu-footer-background-color, $background-dim);
-      border-top: 1px solid var(--ctr-contextual-menu-footer-border-color, $border-light);
+      background-color: var(--ctr-popup-menu-footer-background-color, $background-dim);
+      border-top: 1px solid var(--ctr-popup-menu-footer-border-color, $border-light);
+      padding: var(--ctr-popup-menu-footer-padding-top, calcSize(1)) var(--ctr-popup-menu-footer-padding-right, 0)
+        var(--ctr-popup-menu-footer-padding-bottom, calcSize(1)) var(--ctr-popup-menu-footer-padding-left, 0);
     }
 
     .sv-list__empty-container {
@@ -196,10 +220,6 @@
         }
       }
     }
-
-    .sd-btn {
-      background: var(--ctr-button-background-color, rgba(0, 0, 0, 0));
-    }
   }
 
   &.sv-dropdown-popup.sv-popup--dropdown-overlay {

packages/survey-creator-core/src/components/property-panel/property-panel.scss

@@ -52,12 +52,12 @@
 }
 .svc-property-grid-placeholder__header {
   display: flex;
-  max-width: 256px;
+  width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
+  max-width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: var(--ctr-property-grid-placeholder-text-gap, 8px);
-  width: 100%;
 }
 .svc-property-grid-placeholder__title {
   @include ctrDefaultBoldFont;

packages/survey-creator-core/src/components/side-bar/side-bar.scss

@@ -41,16 +41,16 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   background: var(--ctr-property-grid-header-background-color, $background);
   box-shadow: inset 0px -2px 0px var(--ctr-property-grid-header-border-color, $primary);
   // text-align: right;
-  line-height: calcSize(3);
   display: flex;
-  height: calcSize(8);
+  padding: var(--ctr-property-grid-header-padding-top, calcSize(1.5)) var(--ctr-property-grid-header-padding-right, calcSize(1))
+  var(--ctr-property-grid-header-padding-bottom, calcSize(1.5)) var(--ctr-property-grid-header-padding-left, calcSize(1));
 }
 
 .svc-side-bar__container-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  height: calc(100% - calc(8 * #{$base-unit}));
+  height: 100%;
   overflow-y: auto;
   background-color: var(--ctr-property-grid-background-color, $background);
 }
@@ -70,19 +70,18 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   @include ctrDefaultFont;
 
   display: flex;
-  line-height: calcSize(4.5);
   flex-grow: 1;
   flex-shrink: 0;
   justify-content: flex-end;
-  padding: calcSize(1.5) calcSize(2);
+  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));
   color: var(--ctr-menu-toolbar-button-text-color, $foreground);
 }
 
 .svc-side-bar__container-actions {
   width: 100%;
   box-sizing: border-box;
-  padding: calcSize(1.5) calcSize(1);
-
   .sv-action-bar {
     justify-content: flex-end;
     padding: 0;
@@ -93,6 +92,8 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   }
 
   .sv-action-bar-item:not(.sv-action-bar-item--pressed):enabled {
+    border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
+
     &:focus {
       background: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim);
     }

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

@@ -98,8 +98,6 @@
 }
 .svc-sidebar__header-container {
   display: flex;
-  padding: var(--ctr-property-grid-header-padding-top, 12px) var(--ctr-property-grid-header-padding-right, 16px)
-    var(--ctr-property-grid-header-padding-bottom, 12px) var(--ctr-property-grid-header-padding-left, 16px);
   justify-content: center;
   align-items: center;
   flex: 1 0 0;

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

@@ -8,7 +8,7 @@
 
 .svc-switcher__title {
   @include ctrSmallBoldFont;
-  color: $foreground-light;
+  color: var(--ctr-property-grid-switcher-text-color, $foreground-light);
 }
 
 .svc-switcher__icon {

packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss

@@ -13,6 +13,8 @@ svc-tab-json-editor-textarea {
 
 .svc-json-editor-tab__content-area {
   @include ctrCodeFont;
+  color: var(--ctr-code-viewer-text-color, #505050);
+  background: var(--ctr-code-viewer-background-color, $background);
   width: 100%;
   height: 100%;
   border: none;

packages/survey-creator-core/src/components/tabs/logic-ui.scss

@@ -44,8 +44,12 @@
   @include ctrDefaultBoldFont;
   -webkit-appearance: none;
   appearance: none;
-  padding: calcSize(1) calcSize(2);
-  border-radius: calcSize(12.5);
+  border-radius: var(--ctr-expression-item-corner-radius, calcSize(12.5));
+  padding: var(--ctr-expression-item-padding-top, calcSize(1))
+    var(--ctr-expression-item-padding-right, calcSize(2))
+    var(--ctr-expression-item-padding-bottom, calcSize(1))
+    var(--ctr-expression-item-padding-left, calcSize(2));
+
   border: none;
   outline: none;
   color: var(--ctr-expression-item-text-color-parameter-empty, $foreground-light);
@@ -324,6 +328,7 @@
 
 .sl-list__item-body {
   padding-block: calcSize(1.5);
+  border-radius: var(--ctr-list-item-corner-radius, 4px);
 }
 
 .svc-logic-placeholder {