add --sjs-font-family css variable (#7205)

* add --sjs-font-family css variable * fix font-family * Fix budget error --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Oct 20, 2023 · 29f6523 · 29f6523
1 parent 400bded
commit 29f6523
Show file tree

Hide file tree

Showing 31 changed files with 57 additions and 52 deletions.
diff --git a/packages/survey-angular-ui/angular.json b/packages/survey-angular-ui/angular.json
@@ -72,7 +72,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumError": "3.5mb"
+                  "maximumError": "4mb"
                 },
                 {
                   "type": "anyComponentStyle",

diff --git a/src/common-styles/sv-actionbar.scss b/src/common-styles/sv-actionbar.scss
@@ -40,7 +40,7 @@
   color: $foreground;
   cursor: pointer;
 
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   overflow-x: hidden;
   white-space: nowrap;
 }
@@ -148,7 +148,7 @@ button.sv-action-bar-item {
   cursor: pointer;
   line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
 }
 
 .sv-expand-action {

diff --git a/src/common-styles/sv-brand-info.scss b/src/common-styles/sv-brand-info.scss
@@ -2,7 +2,7 @@ sv-brand-info {}
 
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   text-align: center;
   color: #161616;
   background: white;

diff --git a/src/common-styles/sv-drag-drop.scss b/src/common-styles/sv-drag-drop.scss
@@ -10,7 +10,7 @@
   position: absolute;
   z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(1);
   padding-left: calcSize(2.5);
   line-height: calcLineHeight(1.5);

diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
@@ -5,13 +5,13 @@
   margin: 0;
   overflow-y: auto;
   background: $background;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   list-style-type: none;
 }
 
 .sv-list__empty-container {
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   box-sizing: border-box;
   padding: calcSize(1.5) calcSize(8);
   overflow: hidden;

diff --git a/src/common-styles/sv-progress-buttons.scss b/src/common-styles/sv-progress-buttons.scss
@@ -57,7 +57,7 @@
 .sv_progress-buttons__list li {
   width: 138px;
   font-size: calcFontSize(0.875);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   position: relative;
   text-align: center;
   vertical-align: top;

diff --git a/src/common-styles/sv-save-data.scss b/src/common-styles/sv-save-data.scss
@@ -14,7 +14,7 @@
   text-align: center;
   z-index: 1600; //todo: should overlap popup
 
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);
 

diff --git a/src/common-styles/window.scss b/src/common-styles/window.scss
@@ -4,7 +4,7 @@
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(0.875);
   font-style: normal;
   font-weight: 400;

diff --git a/src/default-styles.scss b/src/default-styles.scss
@@ -1292,7 +1292,7 @@ sv-popup {
 }
 
 .sv-popup__body-header {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calc(3 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
   font-style: normal;
@@ -1317,7 +1317,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));

diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss
@@ -9,7 +9,7 @@
   color: $primary;
   border-radius: calcSize(12.5);
   font-weight: 600;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-size: $font-questiontitle-size;
   line-height: multiply(1.5, $font-questiontitle-size);

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -170,7 +170,7 @@
       color: $primary;
       font-weight: 600;
       font-style: normal;
-      font-family: var(--font-family, $font-family);
+      font-family: $font-family;
       font-size: $font-questiontitle-size;
       line-height: multiply(1.5, $font-questiontitle-size);
     }

diff --git a/src/defaultV2-theme/blocks/sd-button.scss b/src/defaultV2-theme/blocks/sd-button.scss
@@ -10,7 +10,7 @@
   border-radius: calcCornerRadius(1);
   cursor: pointer;
 
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(1);

diff --git a/src/defaultV2-theme/blocks/sd-completedpage.scss b/src/defaultV2-theme/blocks/sd-completedpage.scss
@@ -1,5 +1,5 @@
 .sd-completedpage {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-weight: bold;
   box-sizing: border-box;
   text-align: center;
@@ -70,7 +70,7 @@
       color: $primary;
       font-weight: 600;
       font-style: normal;
-      font-family: var(--font-family, $font-family);
+      font-family: $font-family;
       font-size: $font-questiontitle-size;
       line-height: multiply(1.5, $font-questiontitle-size);
     }

diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -33,7 +33,7 @@
 
 .sd-dropdown option {
   color: $foreground;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: calcFontSize(1);
 }
 

diff --git a/src/defaultV2-theme/blocks/sd-html.scss b/src/defaultV2-theme/blocks/sd-html.scss
@@ -63,7 +63,7 @@
       color: $primary;
       font-weight: 600;
       font-style: normal;
-      font-family: var(--font-family, $font-family);
+      font-family: $font-family;
       font-size: $font-questiontitle-size;
       line-height: multiply(1.5, $font-questiontitle-size);
     }

diff --git a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
@@ -28,7 +28,7 @@
   border: none;
   line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-weight: 600;
   padding: calcSize(1) 0;
 }

diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
@@ -189,7 +189,7 @@
     background-color: transparent;
     cursor: pointer;
 
-    font-family: var(--font-family, $font-family);
+    font-family: $font-family;
     font-size: $font-editorfont-size;
     line-height: multiply(1.5, $font-editorfont-size);
     color: $font-questiondescription-color;

diff --git a/src/defaultV2-theme/blocks/sd-progress-toc.scss b/src/defaultV2-theme/blocks/sd-progress-toc.scss
@@ -1,4 +1,4 @@
-$font-family: var(--font-family);
+$font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 
 .sv_progress-toc {
   padding: calcSize(1);

diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
@@ -1,6 +1,6 @@
 .sd-title {
   display: block;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   color: $foreground;
   flex-direction: row;
@@ -13,7 +13,7 @@
   align-items: center;
   padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
   overflow: auto;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   gap: calcSize(4);
   box-shadow: 0px 2px 0px $primary;
 

diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -62,7 +62,7 @@ body {
   --sd-mobile-width: 600px;
   --sd-timer-size: calc(18 * #{$base-unit});
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   background-color: $background-dim;
   position: relative;
 

diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
@@ -55,50 +55,50 @@ $blue: var(--sjs-special-blue, #437fd9);
 $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217, 0.1)));
 $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff);
 
-$font-family: var(--font-family);
+$font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
 $font-size: var(--sjs-font-size, 16px);
 
-$font-surveytitle-family: var(--sjs-font-surveytitle-family, var(--font-family));
+$font-surveytitle-family: var(--sjs-font-surveytitle-family, #{$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-family: var(--sjs-font-surveydescription-family, #{$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-family: var(--sjs-font-headertitle-family, #{$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-family: var(--sjs-font-headerdescription-family, #{$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-family: var(--sjs-font-pagetitle-family, #{$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-pagedescription-family: var(--sjs-font-pagedescription-family, var(--font-family));
+$font-pagedescription-family: var(--sjs-font-pagedescription-family, #{$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, $font-size);
 
-$font-questiontitle-family: var(--sjs-font-questiontitle-family, var(--font-family));
+$font-questiontitle-family: var(--sjs-font-questiontitle-family, #{$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-size: var(--sjs-font-questiontitle-size, $font-size);
 
-$font-questiondescription-family: var(--sjs-font-questiondescription-family, var(--font-family));
+$font-questiondescription-family: var(--sjs-font-questiondescription-family, #{$font-family});
 $font-questiondescription-weight: var(--sjs-font-questiondescription-weight, 400);
 $font-questiondescription-color: var(--sjs-font-questiondescription-color,
     var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 $font-questiondescription-size: var(--sjs-font-questiondescription-size, $font-size);
 $font-questionplaceholder-color: var(--sjs-font-questiondescription-color,
     var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 
-$font-editorfont-family: var(--sjs-font-editorfont-family, var(--font-family));
+$font-editorfont-family: var(--sjs-font-editorfont-family, #{$font-family});
 $font-editorfont-weight: var(--sjs-font-editorfont-weight, 400);
 $font-editorfont-color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
 $font-editorfont-placeholdercolor: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -166,23 +166,23 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin smallBold {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(0.75);
   line-height: calcLineHeight(1);
 }
 
 @mixin defaultBold {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);
 }
 
 @mixin defaultFont {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-style: normal;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);

diff --git a/src/dragdrop/choices.ts b/src/dragdrop/choices.ts
@@ -23,7 +23,7 @@ export class DragDropChoices extends DragDropCore<QuestionSelectBase> {
           cursor: grabbing;
           position: absolute;
           z-index: 10000;
-          font-family: var(--font-family, 'Open Sans');
+          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
         `;
 
     const isDeepClone = true;

diff --git a/src/dragdrop/matrix-rows.ts b/src/dragdrop/matrix-rows.ts
@@ -24,7 +24,7 @@ export class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel>
           cursor: grabbing;
           position: absolute;
           z-index: 10000;
-          font-family: var(--font-family, 'Open Sans');
+          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
         `;
 
     const isDeepClone = true;

diff --git a/src/dragdrop/ranking-choices.ts b/src/dragdrop/ranking-choices.ts
@@ -23,7 +23,7 @@ export class DragDropRankingChoices extends DragDropChoices {
           max-width: 400px;
           box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
           background-color: var(--sjs-general-backcolor, var(--background, #fff));
-          font-family: var(--font-family, 'Open Sans');
+          font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
         `;
 
     const isDeepClone = true;

diff --git a/src/main.scss b/src/main.scss
@@ -3,8 +3,10 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-
-$font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+:root {
+  --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+$font-family: var(--font-family, var(--sjs-default-font-family));
 
 @import "./common-styles/sv-progress-buttons.scss";
 @import "./common-styles/sv-progress-toc.scss";
@@ -404,7 +406,7 @@ body {
   // position: relative;
   width: 100%;
   //background-color: var(--body-container-background-color, $body-container-background-color);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: var(--font-size, $font-size);
 
   hr {

diff --git a/src/modern/blocks/sv-completedpage.scss b/src/modern/blocks/sv-completedpage.scss
@@ -1,5 +1,5 @@
 .sv-completedpage {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: 1.875em;
   font-weight: bold;
   box-sizing: border-box;

diff --git a/src/modern/blocks/sv-container.scss b/src/modern/blocks/sv-container.scss
@@ -1,7 +1,7 @@
 .sv-container-modern {
   color: var(--text-color, $text-color);
   font-size: var(--font-size, $font-size);
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
 }
 
 .sv-container-modern__title {

diff --git a/src/modern/blocks/sv-dropdown.scss b/src/modern/blocks/sv-dropdown.scss
@@ -56,7 +56,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: inherit;
   color: var(--text-color, $text-color);
   position: relative;
@@ -108,7 +108,7 @@
   border: none;
   outline: none;
   padding: 0;
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   font-size: inherit;
   background-color: transparent;
   width: 100%;
@@ -125,7 +125,7 @@
 }
 
 .sv-dropdown--empty:not(.sv-input--disabled) .sv-dropdown__filter-string-input::placeholder {
-  font-family: var(--font-family, $font-family);
+  font-family: $font-family;
   color: var(--text-color, $text-color);
 }