work for #6063 Scaling the adorner button of the question

surveyjs · Nov 25, 2024 · d1fc175 · d1fc175
1 parent 5c3e48d
commit d1fc175
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 37 deletions.
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -18,6 +18,7 @@ svc-page {
   }
 
   .svc-panel__placeholder {
+    @include lbrDefaultFont;
     color: var(--ctr-survey-page-placeholder-text-color, $foreground-light);
   }
 }
@@ -181,9 +182,7 @@ svc-page {
 }
 
 .svc-page-toolbar-item__title {
-  @include ctrSmallBoldFont;
-  font-size: calcSurfaceFontSize(0.75);
-  line-height: calcSurfaceLineHeight(1);
+  @include lbrSmallBoldFont;
   color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
 }
 
@@ -331,10 +330,8 @@ svc-page {
 }
 
 .svc-add-new-item-button__text {
-  @include ctrDefaultBoldFont;
+  @include lbrDefaultFont;
   color: $foreground;
-  font-size: calcSurfaceFontSize(1);
-  line-height: calcSurfaceLineHeight(1.5);
 }
 
 .svc-element__question-type-selector {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -203,9 +203,7 @@ svc-question {
 }
 
 .svc-survey-element-toolbar-item__title {
-  @include ctrSmallBoldFont;
-  font-size: calcSurfaceFontSize(0.75);
-  line-height: calcSurfaceLineHeight(1);
+  @include lbrSmallBoldFont;
   color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
   transition: color $creator-transition-duration;
 }
@@ -379,12 +377,10 @@ svc-question {
 }
 
 .svc-panel__placeholder {
-  @include ctrDefaultFont;
-  color: $foreground-light;
+  @include lbrDefaultFont;
+  color: var(--ctr-survey-placeholder-text-color, $foreground-light);
   text-wrap: wrap;
   text-align: center;
-  font-size: calcSurfaceFontSize(1);
-  line-height: calcSurfaceLineHeight(1.5);
 }
 
 .svc-question__content-actions {
@@ -1122,12 +1118,12 @@ svc-question,
     }
 
     .svc-add-new-item-button__text {
+      @include lbrDefaultBoldFont;
       display: flex;
       align-items: center;
       flex-grow: 1;
       justify-content: center;
       margin: calcSize(1) calcSize(3);
-      line-height: calcSurfaceLineHeight(1);
       color: var(--ctr-survey-action-button-text-color-positive, $primary);
       text-wrap: nowrap;
     }
@@ -1198,12 +1194,12 @@ svc-question,
   }
 
   .svc-add-new-item-button__text {
+    @include lbrDefaultBoldFont;
     display: flex;
     align-items: center;
     flex-grow: 1;
     justify-content: center;
     margin: calcSize(1) calcSize(3);
-    line-height: calcSurfaceLineHeight(1);
     color: var(--ctr-survey-action-button-text-color-positive, $primary);
     text-wrap: nowrap;
   }

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -2241,6 +2241,12 @@ export class SurveyCreatorModel extends Base
     assign(cssVariables, designTabSurveyThemeJSON.cssVariables, {
       "--sjs-base-unit": "var(--ctr-surface-base-unit)",
       "--sjs-font-size": "calc(2 * var(--ctr-surface-base-unit))",
+      "--lbr-font-unit": "var(--ctr-surface-base-unit)",
+      "--lbr-line-height-unit": "var(--ctr-surface-base-unit)",
+      "--lbr-size-unit": "var(--ctr-surface-base-unit)",
+      "--lbr-spacing-unit": "var(--ctr-surface-base-unit)",
+      "--lbr-corner-radius-unit": "var(--ctr-surface-base-unit)",
+      "--lbr-stroke-unit": "var(--ctr-surface-base-unit)",
     });
     return cssVariables;
   }

diff --git a/packages/survey-creator-core/src/lbr-font-sizes.scss b/packages/survey-creator-core/src/lbr-font-sizes.scss
@@ -21,3 +21,28 @@ $line-height-unit: var(--lbr-line-height-unit, 8px);
   --lbr-font-size-x1: calc(#{$font-unit} * 1);
   --lbr-font-size-x150: calc(#{$font-unit} * 1.5);
 }
+
+@mixin lbrDefaultFont {
+  font-family: $font-family;
+  font-size: var(--lbr-font-default-size, 16px);
+  font-style: normal;
+  font-weight: 600;
+  line-height: var(--lbr-font-default-line-height, 24px); /* 150% */
+}
+
+@mixin lbrDefaultBoldFont {
+  @include lbrDefaultFont;
+  font-weight: 600;
+}
+
+@mixin lbrSmallFont {
+  font-family: $font-family;
+  font-size: var(--lbr-font-small-size, 12px);
+  font-style: normal;
+  line-height: var(--lbr-font-small-line-height, 16px); /* 133.333% */
+}
+
+@mixin lbrSmallBoldFont {
+  @include lbrSmallFont;
+  font-weight: 600;
+}
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-matrixdynamic.scss
@@ -68,7 +68,7 @@
 }
 
 .spg-matrixdynamic__placeholder-text {
-  @include ctrDefaultFont;
+  @include lbrDefaultFont;
   color: var(--ctr-survey-placeholder-text-color, $foreground-light);
   text-align: center;
 }

diff --git a/packages/survey-creator-core/src/variables.scss b/packages/survey-creator-core/src/variables.scss
@@ -60,7 +60,6 @@ $blue-light: var(--sjs-special-blue-light, var(--blue-light, rgba(67, 127, 217,
 $blue-forecolor: var(--sjs-special-blue-forecolor, #ffffff);
 
 $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
-$surface-font-size: var(--sjs-font-size, 16px);
 
 $sd-panel-normal-min-width: 496px;
 $sd-panel-medium-min-width: 176px;
@@ -77,26 +76,6 @@ $sd-panel-medium-min-width: 176px;
   }
 }
 
-@function calcSurfaceFontSize($multiplier) {
-  @if $multiplier ==1 {
-    $result: #{$surface-font-size};
-    @return $result;
-  } @else {
-    $result: calc(#{$multiplier} * (#{$surface-font-size}));
-    @return $result;
-  }
-}
-
-@function calcSurfaceLineHeight($multiplier) {
-  @if $multiplier ==1 {
-    $result: #{$surface-font-size};
-    @return $result;
-  } @else {
-    $result: calc(#{$multiplier} * (#{$surface-font-size}));
-    @return $result;
-  }
-}
-
 // creator variables
 
 $tab-min-height: var(--tab-min-height, auto);