Page title description font settings variables (#6198)

* support survey title font setting * support page title & page description font settings * expansion of variable values * fix test "Check panel with singlePage mode" * fix test "Check panel with singlePage mode" * fix styles for dropdown --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · May 17, 2023 · 1331665 · 1331665
1 parent 5b4de60
commit 1331665
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 40 deletions.
diff --git a/src/defaultV2-theme/blocks/mixins.scss b/src/defaultV2-theme/blocks/mixins.scss
@@ -1,18 +1,23 @@
 @mixin page_title {
+  font-family: $font-pagetitle-family;
+  font-weight: $font-pagetitle-weight;
+  font-size: $font-pagetitle-size;
+  color: $font-pagetitle-color;
   position: static;
-  font-size: calcFontSize(1.5);
   line-height: calcSize(4);
   margin: calcSize(0.5) 0px;
-  font-weight: 700;
 }
 
 @mixin page_description {
+  font-family: $font-pagedescription-family;
+  font-weight: $font-pagedescription-weight;
+  font-size: $font-pagedescription-size;
+  color: $font-pagedescription-color;
   position: static;
-  font-size: calcFontSize(1);
   line-height: calcSize(3);
   margin: calcSize(0.5) 0px;
-  font-weight: 400;
 }
+
 @mixin num_inline {
   float: none;
   margin-inline-start: 0;

diff --git a/src/defaultV2-theme/blocks/sd-boolean.scss b/src/defaultV2-theme/blocks/sd-boolean.scss
@@ -11,9 +11,10 @@
 .sd-boolean__thumb,
 .sd-boolean__label {
   display: block;
-  color: $foreground-light;
-  font-family: var(--font-family, $font-family);
-  font-size: calcFontSize(1);
+  font-family: $font-editorfont-family;
+  font-weight: $font-editorfont-weight;
+  color: $font-editorfont-color;
+  font-size: $font-editorfont-size;
   line-height: calcSize(3);
   padding: calcSize(1) calcSize(3);
 }

diff --git a/src/defaultV2-theme/blocks/sd-description.scss b/src/defaultV2-theme/blocks/sd-description.scss
@@ -1,10 +1,10 @@
 .sd-description {
-  font-family: var(--font-family, $font-family);
   font-style: normal;
-  font-weight: normal;
-  font-size: calcFontSize(1);
+  font-family: $font-questiondescription-family;
+  font-weight: $font-questiondescription-weight;
+  color: $font-questiondescription-color;
+  font-size: $font-questiondescription-size;
   line-height: calcSize(3);
-  color: $foreground-light;
   white-space: normal;
   word-break: break-word;
 }

diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -79,14 +79,16 @@
   border: none;
   outline: none;
   padding: 0;
-  font-family: var(--font-family, $font-family);
-  font-size: calcFontSize(1);
+  font-family: $font-editorfont-family;
+  font-weight: $font-editorfont-weight;
+  color: $font-editorfont-color;
+  font-size: $font-editorfont-size;
+  line-height: calcSize(3);
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
-  line-height: calcSize(3);
   appearance: none;
   height: 100%;
 }
@@ -111,16 +113,16 @@
 .sd-dropdown__hint-prefix {
   color: $foreground-light;
   span {
-      white-space: pre;
-    }
+    white-space: pre;
+  }
 }
 
 .sd-dropdown__hint-suffix {
   display: flex;
   color: $foreground-light;
   span {
-      white-space: pre;
-    }
+    white-space: pre;
+  }
 }
 [dir="rtl"],
 [style*="direction:rtl"],

diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss
@@ -32,7 +32,10 @@
   }
 
   span {
-    font-size: calcFontSize(1);
+    font-family: $font-questiontitle-family;
+    font-weight: $font-questiontitle-weight;
+    font-size: $font-questiontitle-size;
+    color: $font-questiontitle-color;
     line-height: calcSize(3);
   }
 

diff --git a/src/defaultV2-theme/blocks/sd-input.scss b/src/defaultV2-theme/blocks/sd-input.scss
@@ -8,9 +8,10 @@
   box-sizing: border-box;
   padding: calcSize(1.5) calcSize(2);
   line-height: calcSize(3);
-  font-family: var(--font-family, $font-family);
-  font-size: calcFontSize(1);
-  color: $foreground;
+  font-family: $font-editorfont-family;
+  font-weight: $font-editorfont-weight;
+  color: $font-editorfont-color;
+  font-size: $font-editorfont-size;
   background-color: $editor-background;
   box-shadow: inset 0px 1px 2px $shadow-inner;
   border: none;

diff --git a/src/defaultV2-theme/blocks/sd-page.scss b/src/defaultV2-theme/blocks/sd-page.scss
@@ -22,9 +22,7 @@
 }
 .sd-page .sd-page__title {
   @include page_title();
-  color: $foreground-dim;
 }
 .sd-page .sd-page__description {
   @include page_description();
-  color: $foreground-dim-light;
 }
diff --git a/src/defaultV2-theme/blocks/sd-panel.scss b/src/defaultV2-theme/blocks/sd-panel.scss
@@ -14,7 +14,10 @@
     .sd-panel__title {
       @include page_title();
       span {
+        font-family: inherit;
         font-size: inherit;
+        font-weight: inherit;
+        color: inherit;
         line-height: inherit;
       }
     }

diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss
@@ -1,9 +1,7 @@
 .sd-question {
   position: relative;
 }
-.sd-question__description {
-  font-size: calcFontSize(1);
-}
+
 .sd-question__erbox {
   padding: calcSize(1) calcSize(1.5);
   border-radius: calcCornerRadius(1);

diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -310,7 +310,10 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
   }
 }
 .sd-rating__item-text.sd-rating__item-text {
-  font-size: calcFontSize(1);
+  font-family: $font-editorfont-family;
+  font-weight: $font-editorfont-weight;
+  color: $font-editorfont-color;
+  font-size: $font-editorfont-size;
   line-height: calcSize(3);
   display: inline-block;
 

diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
@@ -35,11 +35,12 @@
 
   .sd-title {
     color: $primary;
+    font-family: $font-surveytitle-family;
+    font-size: $font-surveytitle-size;
+    font-weight: $font-surveytitle-weight;
   }
 
   h3 {
-    font-size: calcFontSize(2);
-    font-weight: 700;
     line-height: calcSize(5);
   }
 

diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
@@ -1,21 +1,28 @@
-$primary: var(--primary, #19b394);
-$primary-light: var(--primary-light, rgba(25, 179, 148, 0.1));
+$primary: var(--sjs-primary-backcolor, var(--primary, #19b394));
+$primary-light: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+$primary-background-dark: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
 $primary-foreground: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 $primary-foreground-disabled: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(#fff, 0.25)));
 
 $secondary: var(--secondary, #ff9814);
 $secondary-light: var(--secondary-light, rgba(255, 152, 20, 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(--background, #fff)));
+
 $background: var(--background, #fff);
 $background-dim: var(--background-dim, #f3f3f3);
 $background-dim-light: var(--background-dim-light, #f9f9f9);
 $background-semitransparent: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-$background-dark: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
-$background-dim-dark: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
-$primary-background-dark: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
+$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)));
 
-$editor-background: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
-$question-background: var(--sjs-question-background, var(--background, #fff));
+$corner-radius: var(--sjs-corner-radius, 4px);
+$editor-corner-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
+$panel-corner-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
+
+// $questionpanel-border: var(--sjs-questionpanel-border);
+// $editorpanel-border: var(--sjs-editorpanel-border);
 
 $foreground: var(--sjs-general-forecolor, var(--foreground, #161616));
 $foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -40,9 +47,34 @@ $blue-light: var(--blue-light, rgba(67, 127, 217, 0.1));
 $font-family: var(--font-family);
 $font-size: var(--sjs-font-size, calc(2 * var(--base-unit, 8px)));
 
-$corner-radius: var(--sjs-corner-radius, 4px);
-$panel-corner-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
-$editor-corner-radius: var(--sjs-editor-corner-radius, var(--sjs-corner-radius, 4px));
+$font-surveytitle-family: var(--sjs-font-surveytitle-family, var(--font-family));
+$font-surveytitle-weight: var(--sjs-font-surveytitle-weight, 700);
+$font-surveytitle-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, $font-size)));
+
+$font-pagetitle-family: var(--sjs-font-pagetitle-family, var(--font-family));
+$font-pagetitle-weight: var(--sjs-font-pagetitle-weight, 700);
+$font-pagetitle-color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
+$font-pagetitle-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, $font-size)));
+
+$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-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-dim-forecolor, rgba(0, 0, 0, 0.91)));
+$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-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)));
 
 $base-unit: var(--base-unit, 8px);