Creator settings: refactoring font styles

packages/survey-creator-angular/src/add-question.component.html

@@ -4,7 +4,7 @@
     (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
     data-bind="clickBubble: false">
     <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24" sv-ng-svg-icon></svg>
-    <span class="svc-text svc-text--normal svc-text--bold">
+    <span class="svc-add-new-item-button__text">
       {{ adorner.addNewQuestionText }}
     </span>
     <ng-template *ngIf="renderPopup"

packages/survey-creator-angular/src/page-navigator/page-navigator-item.component.html

@@ -6,7 +6,7 @@
       <div class="svc-page-navigator-item__dot" [attr.title]="model.title"></div>
 
       <div class="svc-page-navigator-item__banner">
-        <span class="svc-text svc-text--small svc-text--bold">{{model.title}}</span>
+        <span class="svc-page-navigator-item__text">{{ model.title }}</span>
         <span class="svc-page-navigator-item__dot"></span>
       </div>
     </div>

packages/survey-creator-angular/src/panel.component.html

@@ -31,7 +31,7 @@
             (click)="addNewQuestion($event)">
             <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24"
               sv-ng-svg-icon></svg>
-            <span class="svc-text svc-text--normal svc-text--bold">
+            <span class="svc-add-new-item-button__text">
               {{ adorner.addNewQuestionText }}
             </span>
           </div>

packages/survey-creator-angular/src/tabs/logic/logic-add-btn.component.html

@@ -1,7 +1,7 @@
 <ng-template #template>
   <div role="button" class="svc-logic-tab__content-action svc-btn"
         (click)="onClick($event)" [key2click] [class.svc-logic-tab__content-action--disabled]="model.enabled !== undefined && !model.enabled">
-        <span class="svc-text svc-text--normal svc-text--bold">
+        <span class="svc-add-new-item-button__text">
           {{model.title}}
         </span>
   </div>

packages/survey-creator-angular/src/tabs/preview/test-again.component.html

@@ -1,6 +1,6 @@
 <ng-template #template>
   <div role="button" class="svc-preview__test-again svc-btn" (click)="action.action()" [key2click]>
-    <span class="svc-text svc-text--normal svc-text--bold">
+    <span class="svc-preview-test-again__text">
       {{action.title}}
     </span>
   </div>

packages/survey-creator-core/src/components/button.scss

@@ -18,11 +18,9 @@
       var(--ctr-button-shadow-color, rgba(0, 0, 0, 0.15));
 
     span {
+      @include ctrDefaultBoldFont;
+
       text-align: center;
-      font-family: var(--ctr-default-bold-font-family, $font-family);
-      font-size: var(--ctr-default-bold-font-size, $font-size);
-      line-height: var(--ctr-default-bold-line-height, calc(1.5 * var(--default-font-size)));
-      font-weight: var(--ctr-default-bold-font-weight, 600);
       position: relative;
       display: flex;
       align-items: center;

packages/survey-creator-core/src/components/carry-forward-panel.scss

@@ -5,15 +5,13 @@
   container-type: inline-size;
 }
 .svc-carry-forward-panel {
+  @include ctrDefaultFont;
   box-sizing: border-box;
   width: 100%;
   padding: calcSize(4) calcSize(8);
   border-radius: calcSize(1);
   background-color: $background-dim-light;
   text-align: center;
-  font-weight: 400;
-  font-size: calcSize(2);
-  line-height: calcSize(3);
   color: $foreground-dim-light;
 }
 

packages/survey-creator-core/src/components/creator.scss

@@ -142,8 +142,8 @@ survey-creator,
 }
 
 .svc-creator__non-commercial-text {
+  @include ctrDefaultBoldFont;
   color: var(--ctr-page-banner-text-color, $primary-foreground);
-  @include defaultBold;
   vertical-align: middle;
   padding: calcSize(1.5) calcSize(16);
   display: block;

packages/survey-creator-core/src/components/header/logo-image.scss

@@ -34,7 +34,7 @@
 }
 
 .svc-logo-image-placeholder {
-  font-size: calcSize(4);
+  @include ctrLargeFont;
   color: $foreground-light;
   opacity: 0.25;
   white-space: nowrap;

packages/survey-creator-core/src/components/link-value.scss

@@ -1,15 +1,17 @@
 @import "../variables.scss";
 
+.svc-link__button {
+  @include ctrDefaultBoldFont;
+}
+
 .svc-question-link__set-button {
-  font-weight: 600;
   cursor: pointer;
 }
 .svc-link-value-button {
   margin-left: calcSize(-2);
 }
 .svc-question-link__clear-button {
   color: $red;
-  font-weight: 600;
   cursor: pointer;
 }
 .svc-question-link__clear-button:focus,

packages/survey-creator-core/src/components/link-value.ts

@@ -7,8 +7,8 @@ export class QuestionLinkValueModel extends Question {
   public linkClickCallback: () => void;
   public resetClickCallback: () => void;
   public isClickableCallback: () => boolean;
-  @property({ defaultValue: "svc-link-value-button svc-question-link__set-button" }) public linkSetButtonCssClasses: string;
-  @property({ defaultValue: "svc-question-link__clear-button" }) public linkClearButtonCssClasses: string;
+  @property({ defaultValue: "svc-link__button svc-link-value-button svc-question-link__set-button" }) public linkSetButtonCssClasses: string;
+  @property({ defaultValue: "svc-link__button svc-question-link__clear-button" }) public linkClearButtonCssClasses: string;
 
   @property({ defaultValue: false }) isSelected: boolean;
   @property() linkValueText: string;

packages/survey-creator-core/src/components/notifier.scss

@@ -6,6 +6,8 @@
 }
 
 .svc-notifier {
+  @include ctrSmallBoldFont;
+
   position: absolute;
   bottom: calcSize(1);
   left: calcSize(1);
@@ -20,8 +22,6 @@
   z-index: 1600; //todo: should overlap popup
 
   visibility: hidden;
-
-  @include smallBold;
 }
 
 .svc-notifier.svc-notifier--error {

packages/survey-creator-core/src/components/page-navigator/page-navigator-item.scss

@@ -53,6 +53,11 @@ svc-page-navigator-item,
   background: var(--ctr-page-navigator-item-dot-color-default, $border);
 }
 
+.svc-page-navigator-item__text {
+  @include ctrSmallBoldFont;
+  color: var(--ctr-page-navigator-item-text-color-hovered, #{$foreground});
+}
+
 .svc-page-navigator-item--selected {
   .svc-page-navigator-item__dot {
     width: calcSize(1);
@@ -90,10 +95,6 @@ svc-page-navigator-item,
     top: calcSize(1.75);
     right: calcSize(1.75);
   }
-
-  .svc-text {
-    color: var(--ctr-page-navigator-item-text-color-hovered);
-  }
 }
 
 .svc-creator__toolbox--right,

packages/survey-creator-core/src/components/page.scss

@@ -238,7 +238,7 @@ svc-page {
 }
 
 .svc-element__add-new-question {
-  .svc-text {
+  .svc-add-new-item-button__text {
     margin-left: calcSize(6);
   }
 }
@@ -247,6 +247,11 @@ svc-page {
   -webkit-tap-highlight-color: transparent;
 }
 
+.svc-add-new-item-button__text {
+  @include ctrDefaultBoldFont;
+  color: $foreground;
+}
+
 .svc-element__question-type-selector {
   appearance: none;
   display: flex;
@@ -317,9 +322,9 @@ svc-page {
     }
 
     .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body {
+      @include ctrDefaultBoldFont;
       background-color: $primary;
       color: $primary-foreground;
-      font-weight: 600;
     }
 
     .sv-list__item.sv-list__item--selected.sv-list__item--group>.sv-list__item-body use {

packages/survey-creator-core/src/components/page.ts

@@ -266,7 +266,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       this._footerActionsBar.containerCss = "svc-page__footer";
       this._footerActionsBar.cssClasses = {
         item: "svc-btn",
-        itemTitle: "svc-text svc-text--normal svc-text--bold"
+        itemTitle: "svc-add-new-item-button__text"
       };
       let footerActions: Array<IAction> = [{
         css: "svc-add-new-question-action",

packages/survey-creator-core/src/components/popup.scss

@@ -56,6 +56,7 @@
   }
 
   .sv-popup__body-header {
+    @include ctrMediumBoldFont;
     color: var(--ctr-popup-title-color, $foreground);
   }
 
@@ -76,6 +77,7 @@
     border-bottom: 1px solid var(--ctr-list-search-border-color, $border-inside);
 
     .sv-list__input {
+      @include ctrDefaultFont;
       color: var(--ctr-list-search-text-color-placeholder, $foreground-dim-light);
       background-color: transparent;
 
@@ -90,6 +92,7 @@
   }
 
   .sv-list__item-body {
+    @include ctrDefaultFont;
     color: var(--ctr-list-item-text-color, $foreground-dim);
     transition: background-color $creator-transition-duration, color $creator-transition-duration;
   }
@@ -110,6 +113,7 @@
   .sv-list__item--selected,
   .sv-list__item.sv-list__item--selected:hover {
     & > .sv-list__item-body {
+      @include ctrDefaultBoldFont;
       color: var(--ctr-list-item-text-color-selected, $primary-foreground);
       background: var(--ctr-list-item-background-color-selected, $primary);
     }
@@ -185,7 +189,6 @@
         & > .sv-list__item-body {
           background: var(--ctr-list-item-background-color-selected, $primary-light);
           color: var(--ctr-list-item-text-color-selected, $foreground);
-          font-weight: 400;
         }
 
         .sv-list__item-icon use {
@@ -206,6 +209,7 @@
   }
 
   .sv-popup__content {
+    @include ctrDefaultFont;
     color: var(--ctr-popup-message-color, #404040);
   }
 }

packages/survey-creator-core/src/components/property-panel/property-panel.scss

@@ -60,23 +60,15 @@
   width: 100%;
 }
 .svc-property-grid-placeholder__title {
+  @include ctrDefaultBoldFont;
   color: var(--ctr-property-grid-placeholder-text-title-color, rgba(0, 0, 0, 0.91));
   text-align: center;
-  font-family: var(--ctr-font-family, "Open Sans");
-  font-size: var(--ctr-font-default-size, 16px);
-  font-style: normal;
-  font-weight: 600;
-  line-height: var(--ctr-font-default-line-height, 24px) /* 150% */;
   display: inline-block;
 }
 .svc-property-grid-placeholder__description {
+  @include ctrSmallFont;
   color: var(--ctr-property-grid-placeholder-text-description-color, rgba(0, 0, 0, 0.45));
   text-align: center;
-  font-family: var(--ctr-font-family, "Open Sans");
-  font-size: var(--ctr-font-small-size, 12px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--ctr-font-small-line-height, 16px) /* 133.333% */;
   display: inline-block;
 }
 .svc-property-grid-placeholder__content {

packages/survey-creator-core/src/components/question.scss

@@ -263,14 +263,10 @@ svc-question {
 }
 
 .svc-panel__placeholder {
+  @include ctrDefaultFont;
   color: $foreground-light;
   text-wrap: wrap;
   text-align: center;
-
-  font-size: calcSize(2);
-  font-style: normal;
-  font-weight: 400;
-  line-height: calcSize(3);
 }
 
 .svc-question__content-actions {
@@ -521,7 +517,7 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut__text {
-  @include smallBold;
+  @include ctrSmallBoldFont;
   line-height: calcSize(2);
 }
 
@@ -999,13 +995,13 @@ svc-question,
       outline: none;
     }
 
-    .svc-text {
+    .svc-add-new-item-button__text {
       display: flex;
       align-items: center;
       flex-grow: 1;
       justify-content: center;
       margin: calcSize(1) calcSize(3);
-      line-height: calcSize(2);
+      line-height: var(--sjs-line-height-x2, #{calcSize(2)});
       color: var(--ctr-survey-action-button-text-color-positive, $primary);
       text-wrap: nowrap;
     }
@@ -1075,13 +1071,13 @@ svc-question,
     outline: none;
   }
 
-  .svc-text {
+  .svc-add-new-item-button__text {
     display: flex;
     align-items: center;
     flex-grow: 1;
     justify-content: center;
     margin: calcSize(1) calcSize(3);
-    line-height: calcSize(2);
+    line-height: var(--sjs-line-height-x2, #{calcSize(2)});
     color: var(--ctr-survey-action-button-text-color-positive, $primary);
     text-wrap: nowrap;
   }
@@ -1168,7 +1164,7 @@ svc-question,
     .svc-element__add-new-question {
       padding: calcSize(0.5) calcSize(0.5);
 
-      .svc-text {
+      .svc-add-new-item-button__text {
         display: none;
       }
     }