Cover description uses wrong property for settings. (#7195)

* work for #7137

* work for #7137

* work for #7137

* work for #7137 : fix header styles

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

src/defaultV2-theme/blocks/header.scss

@@ -1,6 +1,6 @@
 .sv-header {
   position: relative;
-  background-color: $cover-backcolor;
+  background-color: $header-backcolor;
 }
 
 .sv-header__overlap {
@@ -14,7 +14,6 @@
 }
 
 .sv-header__without-background {
-
   .sv-header--mobile,
   .sv-header__content {
     padding-bottom: 0;
@@ -100,22 +99,22 @@
 }
 
 .sv-header__title .sd-title {
-  @include cover_title;
+  @include header_title;
+  color: $font-headertitle-color;
+  font-family: $font-headertitle-family;
+  font-weight: $font-headertitle-weight;
   margin: 0;
-  color: $cover-title-forecolor;
-  font-family: $font-surveytitle-family;
-  font-weight: $font-surveytitle-weight;
 }
 
-.sv-header__logo~.sv-header__title {
+.sv-header__logo ~ .sv-header__title {
   margin-top: calcSize(4);
 }
 
-.sv-header__logo~.sv-header__description {
+.sv-header__logo ~ .sv-header__description {
   margin-top: calcSize(4);
 }
 
-.sv-header__title~.sv-header__description {
+.sv-header__title ~ .sv-header__description {
   margin-top: calcSize(1);
 }
 
@@ -124,8 +123,11 @@
 }
 
 .sv-header__description .sd-description {
+  @include header_description;
+  color: $font-headerdescription-color;
+  font-family: $font-headerdescription-family;
+  font-weight: $font-headerdescription-weight;
   margin: 0;
-  color: $cover-description-forecolor;
 }
 
 .sv-header__content .sd-header__text h3 {
@@ -137,11 +139,11 @@
   position: relative;
   z-index: 1;
 
-  .sv-header__logo~.sv-header__title {
+  .sv-header__logo ~ .sv-header__title {
     margin-top: calcSize(3);
   }
 
   .sv-header__logo img {
     max-width: 100%;
   }
-}
+}

src/defaultV2-theme/blocks/mixins.scss

@@ -9,10 +9,28 @@
   margin: 0 0 calcSize(0.5) 0px;
 }
 
-@mixin cover_title {
-  --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
-  font-size: var(--cover-title-font-size);
-  line-height: multiply(1.25, var(--cover-title-font-size));
+@mixin survey_title {
+  --survey-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
+  font-size: var(--survey-title-font-size);
+  line-height: multiply(1.25, var(--survey-title-font-size));
+}
+
+@mixin survey_description {
+  --survey-description-font-size: var(--sjs-font-surveydescription-size, var(--sjs-font-size, 16px));
+  font-size: var(--survey-description-font-size);
+  line-height: multiply(1.5, var(--survey-description-font-size));
+}
+
+@mixin header_title {
+  --header-title-font-size: var(--sjs-font-headertitle-size, calc(2 * (var(--sjs-font-size, 16px))));
+  font-size: var(--header-title-font-size);
+  line-height: multiply(1.25, var(--header-title-font-size));
+}
+
+@mixin header_description {
+  --header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
+  font-size: var(--header-description-font-size);
+  line-height: multiply(1.5, var(--header-description-font-size));
 }
 
 @mixin page_description {

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

@@ -29,8 +29,8 @@
   flex-grow: 1;
 
   .sd-title {
-    @include cover_title;
-    color: $primary;
+    @include survey_title;
+    color: $font-surveytitle-color;
     font-family: $font-surveytitle-family;
     font-weight: $font-surveytitle-weight;
   }
@@ -44,6 +44,13 @@
     font-weight: 400;
     line-height: calcLineHeight(1.5);
   }
+
+  .sd-description {
+    @include survey_description;
+    color: $font-surveydescription-color;
+    font-family: $font-surveydescription-family;
+    font-weight: $font-surveydescription-weight;
+  }
 }
 
 //todo: add ability to customize class sv-title-actions in library

src/defaultV2-theme/variables.scss

@@ -31,9 +31,7 @@ $foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #9
 $foreground-dim: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
 $foreground-dim-light: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
 
-$cover-backcolor: var(--sjs-cover-backcolor);
-$cover-title-forecolor: var(--sjs-cover-title-forecolor, #{$foreground-dim});
-$cover-description-forecolor: var(--sjs-cover-description-forecolor, #{$foreground-dim-light});
+$header-backcolor: var(--sjs-header-backcolor);
 
 $border: var(--sjs-border-default, var(--border, #d6d6d6));
 $border-light: var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -62,6 +60,19 @@ $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);
+$font-surveytitle-color: var(--sjs-font-surveytitle-color, #{$primary});
+
+$font-surveydescription-family: var(--sjs-font-surveydescription-family, var(--font-family));
+$font-surveydescription-weight: var(--sjs-font-surveydescription-weight, 400);
+$font-surveydescription-color: var(--sjs-font-surveydescription-color, #{$foreground-light});
+
+$font-headertitle-family: var(--sjs-font-headertitle-family, var(--font-family));
+$font-headertitle-weight: var(--sjs-font-headertitle-weight, 700);
+$font-headertitle-color: var(--sjs-font-headertitle-color, #{$foreground-dim});
+
+$font-headerdescription-family: var(--sjs-font-headerdescription-family, var(--font-family));
+$font-headerdescription-weight: var(--sjs-font-headerdescription-weight, 400);
+$font-headerdescription-color: var(--sjs-font-headerdescription-color, #{$foreground-dim-light});
 
 $font-pagetitle-family: var(--sjs-font-pagetitle-family, var(--font-family));
 $font-pagetitle-weight: var(--sjs-font-pagetitle-weight, 700);

src/header.ts

@@ -101,7 +101,7 @@ export class Cover extends Base {
   public fromTheme(theme: ITheme): void {
     super.fromJSON(theme.header);
     if (!!theme.cssVariables) {
-      this.backgroundColor = theme.cssVariables["--sjs-cover-backcolor"];
+      this.backgroundColor = theme.cssVariables["--sjs-header-backcolor"];
     }
   }
 

visualRegressionTests/tests/defaultV2/advancedHeader.ts

@@ -71,7 +71,7 @@ frameworks.forEach(framework => {
             "overlapEnabled": true,
           },
           "cssVariables": {
-            "--sjs-cover-backcolor": "rgba(25, 179, 148, 1)"
+            "--sjs-header-backcolor": "rgba(25, 179, 148, 1)"
           }
         });
       })();

visualRegressionTests/tests/defaultV2/survey.ts

@@ -165,7 +165,7 @@ frameworks.forEach(framework => {
         (<any>window).survey.headerView = "advanced";
         (<any>window).survey.applyTheme({
           cssVariables: {
-            "--sjs-cover-backcolor": "green"
+            "--sjs-header-backcolor": "green"
           },
           header: {
           }