fix styles

src/common-styles/sv-save-data.scss

@@ -7,7 +7,7 @@
   background: $background;
   opacity: 0;
   padding: calcSize(3) calcSize(6);
-  box-shadow: 0px 2px 6px $shadow-medium;
+  box-shadow: $shadow-medium;
   border-radius: calcCornerRadius(2);
   color: $foreground;
   min-width: calcSize(30);

src/defaultV2-theme/blocks/sd-boolean.scss

@@ -1,10 +1,15 @@
+.sd-boolean-root {
+  box-shadow: $shadow-inner;
+  border-radius: calcSize(12.5);
+}
+
 .sd-boolean {
   display: flex;
   width: max-content;
   position: relative;
   padding: calcSize(0.5);
-  background: $editor-background;
-  box-shadow: $editor-boxshadow;
+  background-color: $editor-background;
+  box-shadow: $shadow-inner;
   border-radius: calcSize(12.5);
 }
 
@@ -45,8 +50,8 @@
 }
 
 .sd-boolean__thumb {
-  background: $background;
-  box-shadow: 0px 1px 2px $shadow-inner;
+  background-color: $background;
+  box-shadow: $shadow-small;
   border-radius: calcSize(12.5);
   transition-duration: 0.2s;
   transition-property: margin-left, transform;

src/defaultV2-theme/blocks/sd-button.scss

@@ -6,7 +6,7 @@
   -moz-appearance: none;
   padding: calcSize(2) calcSize(6);
   background: $background;
-  box-shadow: 0px 1px 2px $shadow-inner;
+  box-shadow: $shadow-small;
   border-radius: calcCornerRadius(1);
   cursor: pointer;
 

src/defaultV2-theme/blocks/sd-dropdown.scss

@@ -39,9 +39,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: var(--font-family, $font-family);
-  font-size: calcFontSize(1);
-  color: $foreground;
+  line-height: calcLineHeight(1.5);
+  font-family: $font-editorfont-family;
+  font-weight: $font-editorfont-weight;
+  color: $font-editorfont-color;
+  font-size: $font-editorfont-size;
 
   position: relative;
 }

src/defaultV2-theme/blocks/sd-element.scss

@@ -19,7 +19,7 @@
   opacity: 0.35;
 }
 
-.sd-element__title {
+.sd-title.sd-element__title {
   font-size: 0;
   line-height: 0;
   position: static;
@@ -125,7 +125,7 @@
   padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
   padding-bottom: var(--sd-base-padding);
   background: $question-background;
-  box-shadow: $questionpanel-boxshadow;
+  box-shadow: $shadow-small;
 
   &.sd-question--paneldynamic {
     padding-bottom: 0;

src/defaultV2-theme/blocks/sd-input.scss

@@ -13,7 +13,7 @@
   color: $font-editorfont-color;
   font-size: $font-editorfont-size;
   background-color: $editor-background;
-  box-shadow: $editor-boxshadow;
+  box-shadow: $shadow-inner;
   border: none;
   border-radius: $editor-corner-radius;
   text-align: start;

src/defaultV2-theme/blocks/sd-item.scss

@@ -11,7 +11,7 @@
   height: calcSize(3);
   box-sizing: border-box;
   background: var(--sd-item-default-background, $editor-background);
-  box-shadow: $editor-boxshadow;
+  box-shadow: $shadow-inner;
   border: none;
   flex-shrink: 0;
 }
@@ -36,12 +36,12 @@
 }
 
 .sd-item__control-label {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-editorfont-family;
   font-style: normal;
   font-weight: normal;
   line-height: calcLineHeight(1.5);
-  font-size: calcFontSize(1);
-  color: $foreground;
+  font-size: $font-editorfont-size;
+  color: $font-editorfont-color;
   white-space: normal;
   word-break: break-word;
   width: 100%;

src/defaultV2-theme/blocks/sd-question.scss

@@ -123,7 +123,7 @@
   background-color: $background;
   color: $foreground;
   opacity: 0.75;
-  box-shadow: 0px 2px 6px $shadow-medium;
+  box-shadow: $shadow-medium;
   z-index: 1000;
 }
 

src/defaultV2-theme/blocks/sd-rating.scss

@@ -44,8 +44,8 @@
 
 .sd-rating__item {
   position: relative;
-  background: $background;
-  box-shadow: 0px 1px 2px $shadow-inner;
+  background: transparent;
+  box-shadow: $shadow-small;
   border-radius: calcSize(12.5);
   white-space: nowrap;
   padding: calcSize(0.5) calcSize(2.5);
@@ -56,7 +56,7 @@
   box-sizing: border-box;
   min-width: calcSize(6);
   text-align: center;
-  border: 2px solid $background;
+  border: 2px solid transparent;
   color: $foreground;
   fill: $foreground;
   font-size: calcFontSize(1);
@@ -357,4 +357,8 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   &.sd-rating__item--fixed-size {
     min-width: calcSize(3);
   }
-}
+}
+
+.sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
+  color: $primary-foreground;
+}

src/defaultV2-theme/blocks/sd-row.scss

@@ -33,7 +33,7 @@
   width: 100%;
   &:not(.sd-row--compact) {
     background: $question-background;
-    box-shadow: 0px 1px 2px $shadow-inner;
+    box-shadow: $shadow-small;
     border-radius: calcCornerRadius(1);
   }
   &.sd-row--compact {

src/defaultV2-theme/blocks/sd-timer.scss

@@ -10,8 +10,7 @@
   display: flex;
   border-radius: 100%;
   padding: calc(var(--sd-timer-size) / 144 * 8);
-  filter: drop-shadow(0px calcSize(1) calcSize(2) $shadow-medium);
-  box-shadow: 0 2px 6px #0000001a;
+  box-shadow: $shadow-large, $shadow-medium;
   box-sizing: border-box;
 }
 

src/defaultV2-theme/defaultV2.fontless.scss

@@ -143,7 +143,7 @@ body {
 
 .sv-popup.sv-popup--modal {
   .sv-popup__body-content {
-    box-shadow: 0px calcSize(1) calcSize(2) $shadow-medium;
+    box-shadow: $shadow-large;
     background-color: $background-dim-light;
   }
 

src/defaultV2-theme/variables.scss

@@ -10,16 +10,21 @@ $secondary-backcolor-semi-light: var(--sjs-secondary-backcolor-semi-light, rgba(
 $secondary-forecolor: var(--sjs-secondary-forecolor, #fff);
 $secondary-forecolor-light: var(--sjs-secondary-forecolor-light, rgba(#fff, 0.25));
 
-$editor-background: var(--sjs-editorpanel-backcolor,
-    var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
-$question-background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
+$editor-background: var(
+  --sjs-editorpanel-backcolor,
+  var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)))
+);
+$question-background: var(
+  --sjs-questionpanel-backcolor,
+  var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff)))
+);
 
 $background: var(--sjs-general-backcolor, var(--background, #fff));
 $background-dim: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 $background-dim-light: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
 $background-semitransparent: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
 $background-dark: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
-$background-dim-dark: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
+$background-dim-dark: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
 
 $corner-radius: var(--sjs-corner-radius, 4px);
 $editor-corner-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
@@ -34,8 +39,10 @@ $border: var(--sjs-border-default, var(--border, #d6d6d6));
 $border-light: var(--sjs-border-light, var(--border-light, #eaeaea));
 $border-inside: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 
-$shadow-medium: rgba(0, 0, 0, 0.1);
-$shadow-inner: rgba(0, 0, 0, 0.15);
+$shadow-small: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
+$shadow-medium: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+$shadow-large: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+$shadow-inner: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
 
 $red: var(--sjs-special-red, var(--red, #e60a3e));
 $red-light: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
@@ -51,7 +58,7 @@ $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217,
 $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff);
 
 $font-family: var(--font-family);
-$font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
+$font-size: var(--sjs-font-size, 16px);
 
 $font-surveytitle-family: var(--sjs-font-surveytitle-family, var(--font-family));
 $font-surveytitle-weight: var(--sjs-font-surveytitle-weight, 700);
@@ -64,27 +71,32 @@ $font-pagetitle-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-s
 
 $font-pagedescription-family: var(--sjs-font-pagedescription-family, var(--font-family));
 $font-pagedescription-weight: var(--sjs-font-pagedescription-weight, 400);
-$font-pagedescription-color: var(--sjs-font-pagedescription-color,
-    var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+$font-pagedescription-color: var(
+  --sjs-font-pagedescription-color,
+  var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45))
+);
 $font-pagedescription-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, $font-size)));
 
 $font-questiontitle-family: var(--sjs-font-questiontitle-family, var(--font-family));
 $font-questiontitle-weight: var(--sjs-font-questiontitle-weight, 600);
-$font-questiontitle-color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+$font-questiontitle-color: var(
+  --sjs-font-questiontitle-color,
+  var(--sjs-general-forecolor, var(--foreground, #161616))
+);
 $font-questiontitle-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, $font-size)));
 
 $font-questiondescription-family: var(--sjs-font-questiondescription-family, var(--font-family));
 $font-questiondescription-weight: var(--sjs-font-questiondescription-weight, 400);
-$font-questiondescription-color: var(--sjs-font-questiondescription-color,
-    var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+$font-questiondescription-color: var(
+  --sjs-font-questiondescription-color,
+  var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45))
+);
 $font-questiondescription-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, $font-size)));
 
 $font-editorfont-family: var(--sjs-font-editorfont-family, var(--font-family));
 $font-editorfont-weight: var(--sjs-font-editorfont-weight, 400);
 $font-editorfont-color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
 $font-editorfont-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, $font-size)));
-$questionpanel-boxshadow: var(--sjs-shadow-small, 0px 1px 2px 0px $shadow-inner);
-$editor-boxshadow: var(--sjs-shadow-inner, inset 0px 1px 2px $shadow-inner);
 $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @function calcSize($multiplier) {

src/question_signaturepad.ts

@@ -4,6 +4,7 @@ import { QuestionFactory } from "./questionfactory";
 import { Question } from "./question";
 import SignaturePad from "signature_pad";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
+import { SurveyModel } from "./survey";
 
 var defaultWidth = 300;
 var defaultHeight = 200;
@@ -40,6 +41,12 @@ function resizeCanvas(canvas: HTMLCanvasElement) {
  */
 export class QuestionSignaturePadModel extends Question {
   @property({ defaultValue: false }) isDrawingValue: boolean;
+
+  private getPenColorFromTheme(): string {
+    const _survey = this.survey as SurveyModel;
+    return !!_survey && !!_survey.themeVariables && _survey.themeVariables["--sjs-primary-backcolor"];
+  }
+
   protected getCssRoot(cssClasses: any): string {
     return new CssClassBuilder()
       .append(super.getCssRoot(cssClasses))
@@ -188,7 +195,7 @@ export class QuestionSignaturePadModel extends Question {
    * @see backgroundColor
    */
   public get penColor(): string {
-    return this.getPropertyValue("penColor");
+    return this.getPropertyValue("penColor", this.getPenColorFromTheme());
   }
   public set penColor(val: string) {
     this.setPropertyValue("penColor", val);

tests/question_signaturepadtests.ts

@@ -133,4 +133,24 @@ QUnit.test("Check width/height influence on signageWidth/Height properties", (as
   assert.equal(canvas.width, 400);
   assert.equal(signaturepad.signatureHeight, 300);
   assert.equal(canvas.height, 300);
+});
+
+QUnit.test("check penColor", (assert) => {
+  const json = {
+    questions: [
+      {
+        type: "signaturepad",
+        name: "q1"
+      },
+    ],
+  };
+  const survey = new SurveyModel(json);
+  const signaturepad = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
+  assert.equal(signaturepad.penColor, "#1ab394", "penColor default");
+
+  survey.applyTheme({ "cssVariables": { "--sjs-primary-backcolor": "rgba(103, 58, 176, 1)" } });
+  assert.equal(signaturepad.penColor, "rgba(103, 58, 176, 1)", "penColor from theme");
+
+  survey.applyTheme({ "cssVariables": { } });
+  assert.equal(signaturepad.penColor, "#1ab394", "penColor default");
 });