Html question theme (#7138)

* resolve #7026 Expression questions do not take into account the applied dark theme * resolve #7060 HTML question text isn't affected with font-size changing. * work for #7026 update etalons --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Oct 14, 2023 · aef311b · aef311b
1 parent 774fedc
commit aef311b
Show file tree

Hide file tree

Showing 48 changed files with 9 additions and 397 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-expression.scss b/src/defaultV2-theme/blocks/sd-expression.scss
@@ -1,4 +1,4 @@
 .sd-expression {
-  color: $foreground;
+  color: $font-questiontitle-color;
   font-size: calcFontSize(1);
 }
diff --git a/src/defaultV2-theme/blocks/sd-html.scss b/src/defaultV2-theme/blocks/sd-html.scss
@@ -3,6 +3,8 @@
 }
 
 .sd-html {
+  @include articleDefaultFont;
+
   h1 {
     @include articleXXLargeFont;
   }

diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
@@ -184,7 +184,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin articleXXLargeFont {
   color: $font-questiontitle-color;
-  font-size: var(--sjs-article-font-xx-large-fontSize, 64px);
+  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (#{$font-size})));
   text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
   font-family: $font-family;
   font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
@@ -198,7 +198,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin articleXLargeFont {
   color: $font-questiontitle-color;
-  font-size: var(--sjs-article-font-x-large-fontSize, 48px);
+  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (#{$font-size})));
   text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
   font-family: $font-family;
   font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
@@ -212,7 +212,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin articleLargeFont {
   color: $font-questiontitle-color;
-  font-size: var(--sjs-article-font-large-fontSize, 32px);
+  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (#{$font-size})));
   text-decoration: var(--sjs-article-font-large-textDecoration, "none");
   font-family: $font-family;
   font-weight: var(--sjs-article-font-large-fontWeight, 700);
@@ -226,7 +226,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin articleMediumFont {
   color: $font-questiontitle-color;
-  font-size: var(--sjs-article-font-medium-fontSize, 24px);
+  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (#{$font-size})));
   text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
   font-family: $font-family;
   font-weight: var(--sjs-article-font-medium-fontWeight, 700);
@@ -240,7 +240,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @mixin articleDefaultFont {
   color: $font-questiontitle-color;
-  font-size: var(--sjs-article-font-default-fontSize, 16px);
+  font-size: var(--sjs-article-font-default-fontSize, #{$font-size});
   text-decoration: var(--sjs-article-font-default-textDecoration, "none");
   font-family: $font-family;
   font-weight: var(--sjs-article-font-default-fontWeight, 400);

diff --git a/src/themes/borderless-dark-panelless.ts b/src/themes/borderless-dark-panelless.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/borderless-dark.ts b/src/themes/borderless-dark.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/borderless-light-panelless.ts b/src/themes/borderless-light-panelless.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/borderless-light.ts b/src/themes/borderless-light.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/contrast-dark-panelless.ts b/src/themes/contrast-dark-panelless.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/contrast-dark.ts b/src/themes/contrast-dark.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/contrast-light-panelless.ts b/src/themes/contrast-light-panelless.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",

diff --git a/src/themes/contrast-light.ts b/src/themes/contrast-light.ts
@@ -43,7 +43,6 @@ const Theme = {
     "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
     "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
     "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
-    "--sjs-article-font-xx-large-fontSize": "64px",
     "--sjs-article-font-xx-large-textDecoration": "none",
     "--sjs-article-font-xx-large-fontWeight": "700",
     "--sjs-article-font-xx-large-fontStyle": "normal",
@@ -52,7 +51,6 @@ const Theme = {
     "--sjs-article-font-xx-large-lineHeight": "64px",
     "--sjs-article-font-xx-large-paragraphIndent": "0px",
     "--sjs-article-font-xx-large-textCase": "none",
-    "--sjs-article-font-x-large-fontSize": "48px",
     "--sjs-article-font-x-large-textDecoration": "none",
     "--sjs-article-font-x-large-fontWeight": "700",
     "--sjs-article-font-x-large-fontStyle": "normal",
@@ -61,7 +59,6 @@ const Theme = {
     "--sjs-article-font-x-large-lineHeight": "56px",
     "--sjs-article-font-x-large-paragraphIndent": "0px",
     "--sjs-article-font-x-large-textCase": "none",
-    "--sjs-article-font-large-fontSize": "32px",
     "--sjs-article-font-large-textDecoration": "none",
     "--sjs-article-font-large-fontWeight": "700",
     "--sjs-article-font-large-fontStyle": "normal",
@@ -70,7 +67,6 @@ const Theme = {
     "--sjs-article-font-large-lineHeight": "40px",
     "--sjs-article-font-large-paragraphIndent": "0px",
     "--sjs-article-font-large-textCase": "none",
-    "--sjs-article-font-medium-fontSize": "24px",
     "--sjs-article-font-medium-textDecoration": "none",
     "--sjs-article-font-medium-fontWeight": "700",
     "--sjs-article-font-medium-fontStyle": "normal",
@@ -79,7 +75,6 @@ const Theme = {
     "--sjs-article-font-medium-lineHeight": "32px",
     "--sjs-article-font-medium-paragraphIndent": "0px",
     "--sjs-article-font-medium-textCase": "none",
-    "--sjs-article-font-default-fontSize": "16px",
     "--sjs-article-font-default-textDecoration": "none",
     "--sjs-article-font-default-fontWeight": "400",
     "--sjs-article-font-default-fontStyle": "normal",