Skip to content

Commit

Permalink
Html question theme (#7138)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@OlgaLarina
OlgaLarina and OlgaLarina authored Oct 14, 2023
1 parent 774fedc commit aef311b
Show file tree
Hide file tree
Showing 48 changed files with 9 additions and 397 deletions.
2 changes: 1 addition & 1 deletion src/defaultV2-theme/blocks/sd-expression.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.sd-expression {
color: $foreground;
color: $font-questiontitle-color;
font-size: calcFontSize(1);
}
2 changes: 2 additions & 0 deletions src/defaultV2-theme/blocks/sd-html.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
}

.sd-html {
@include articleDefaultFont;

h1 {
@include articleXXLargeFont;
}
Expand Down
10 changes: 5 additions & 5 deletions src/defaultV2-theme/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down
5 changes: 0 additions & 5 deletions src/themes/borderless-dark-panelless.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/borderless-dark.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/borderless-light-panelless.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/borderless-light.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/contrast-dark-panelless.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/contrast-dark.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/contrast-light-panelless.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions src/themes/contrast-light.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
Loading

0 comments on commit aef311b

Please sign in to comment.