Resolved #6360 - When changing the text size, it is necessary to chan…

…ge its line-height proportionally

src/common-styles/sv-actionbar.scss

@@ -52,14 +52,14 @@ button.sv-action-bar-item {
 .sv-action-bar--default-size-mode .sv-action-bar-item {
   height: calcSize(5);
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   margin: 0 calcSize(1);
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
   height: calcSize(4);
   font-size: calcFontSize(0.75);
-  line-height: calcSize(2);
+  line-height: calcLineHeight(1);
   margin: 0 calcSize(0.5);
 }
 
@@ -97,6 +97,7 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar-item--active.sv-action-bar-item--pressed {
+
   &:focus,
   &:focus-visible {
     outline: none;
@@ -145,7 +146,7 @@ button.sv-action-bar-item {
   border-radius: calcCornerRadius(0.5);
   background-color: transparent;
   cursor: pointer;
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
   font-family: var(--font-family, $font-family);
 }

src/common-styles/sv-brand-info.scss

@@ -18,7 +18,7 @@ sv-brand-info {}
 .sv-brand-info__text {
   font-weight: 600;
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   color: #161616;
 }
 
@@ -33,7 +33,7 @@ sv-brand-info {}
 .sv-brand-info__terms {
   font-weight: 400;
   font-size: calcFontSize(0.75);
-  line-height: calcSize(2);
+  line-height: calcLineHeight(1);
 
   a {
     color: #909090;

src/common-styles/sv-buttongroup.scss

@@ -23,7 +23,7 @@
   appearance: none;
   width: 100%;
   padding: 11px calcSize(2);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   outline: none;
   font-size: calcFontSize(1);
   font-weight: 400;

src/common-styles/sv-drag-drop.scss

@@ -13,7 +13,7 @@
   font-family: var(--font-family, $font-family);
   font-size: calcFontSize(1);
   padding-left: calcSize(2.5);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
 }
 
 .sv-matrixdynamic__drag-icon {

src/common-styles/sv-list.scss

@@ -20,7 +20,7 @@
 }
 
 .sv-list__empty-text {
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
   font-weight: 400;
   text-align: center;
@@ -48,7 +48,7 @@
   padding-inline-start: calcSize(2);
   color: $foreground;
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -198,7 +198,7 @@ li:focus .sv-list__item.sv-list__item--selected {
   color: $foreground;
   padding: calcSize(1.5) calcSize(3);
   padding-inline-start: calcSize(7);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   border: none;
 }
 

src/common-styles/sv-popup.scss

@@ -197,7 +197,7 @@ sv-popup {
 .sv-popup__body-header {
   font-family: Open Sans;
   font-size: calcFontSize(1.5);
-  line-height: calcSize(4);
+  line-height: calcLineHeight(2);
   font-style: normal;
   font-weight: 700;
   margin-bottom: calcSize(2);
@@ -339,7 +339,7 @@ sv-popup {
   .sv-list__input {
     color: $foreground-light;
     font-size: calcFontSize(1);
-    line-height: calcSize(3);
+    line-height: calcLineHeight(1.5);
     font-family: $font-family;
     padding: calcSize(0.5) 0 calcSize(0.5) calcSize(1);
   }
@@ -390,4 +390,4 @@ sv-popup {
   .sv-list__container {
     flex-grow: 1;
   }
-}
+}

src/common-styles/sv-ranking.scss

@@ -77,7 +77,7 @@
   border: calcSize(0.25) solid transparent;
   width: calcSize(5);
   height: calcSize(5);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   box-sizing: border-box;
   font-weight: 600;
   margin-left: calcSize(0);
@@ -96,7 +96,7 @@
   white-space: nowrap;
   color: $foreground;
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   margin: 0 calcSize(2);
 }
 

src/common-styles/sv-save-data.scss

@@ -16,7 +16,7 @@
 
   font-family: var(--font-family, $font-family);
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
 
   display: flex;
   flex-direction: row;
@@ -50,6 +50,7 @@
     flex-shrink: 0;
   }
 }
+
 .sv-save-data_root--shown.sv-save-data_success,
 .sv-save-data_root--shown.sv-save-data_error {
   opacity: 1;
@@ -66,7 +67,7 @@
 .sv-save-data_root.sv-save-data_error .sv-save-data_button {
   font-weight: 600;
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   height: calcSize(5);
   color: #ffffff;
   background-color: $red;
@@ -76,6 +77,7 @@
   display: flex;
   align-items: center;
 }
+
 .sv-save-data_root.sv-save-data_error .sv-save-data_button:hover,
 .sv-save-data_root.sv-save-data_error .sv-save-data_button:focus {
   color: $red;
@@ -86,4 +88,4 @@
   background-color: $primary;
   color: #ffffff;
   font-weight: 600;
-}
+}

src/defaultV2-theme/blocks/mixins.scss

@@ -4,7 +4,7 @@
   font-size: $font-pagetitle-size;
   color: $font-pagetitle-color;
   position: static;
-  line-height: calcSize(4);
+  line-height: calcLineHeight(2);
   margin: calcSize(0.5) 0px;
 }
 
@@ -14,7 +14,7 @@
   font-size: $font-pagedescription-size;
   color: $font-pagedescription-color;
   position: static;
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   margin: calcSize(0.5) 0px;
 }
 
@@ -25,8 +25,8 @@
   padding-inline-start: 0;
   padding-inline-end: 0;
 
-  & + span {
+  &+span {
     float: none;
     width: auto;
   }
-}
+}

src/defaultV2-theme/blocks/sd-action.scss

@@ -9,7 +9,7 @@
   font-family: var(--font-family, $font-family);
   font-style: normal;
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   outline: none;
 }
 

src/defaultV2-theme/blocks/sd-boolean.scss

@@ -15,7 +15,7 @@
   font-weight: $font-editorfont-weight;
   font-size: $font-editorfont-size;
   color: $foreground-light;
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   padding: calcSize(1) calcSize(3);
 }
 
@@ -32,7 +32,7 @@
   border-radius: calcSize(12.5);
 }
 
-.sd-boolean__control:focus ~ .sd-boolean__switch {
+.sd-boolean__control:focus~.sd-boolean__switch {
   box-shadow: inset 0 0 0 2px $primary;
 }
 
@@ -85,4 +85,4 @@
 
 .sd-boolean--error {
   background-color: $red-light;
-}
+}

src/defaultV2-theme/blocks/sd-button.scss

@@ -14,7 +14,7 @@
   font-style: normal;
   font-weight: 600;
   font-size: calcFontSize(1);
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   text-align: center;
   color: $primary;
   border: none;
@@ -48,4 +48,4 @@
 .sd-btn--action:disabled {
   color: $primary-foreground-disabled;
   pointer-events: none;
-}
+}

src/defaultV2-theme/blocks/sd-description.scss

@@ -4,11 +4,11 @@
   font-weight: $font-questiondescription-weight;
   color: $font-questiondescription-color;
   font-size: $font-questiondescription-size;
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   white-space: normal;
   word-break: break-word;
 }
 
 .sd-element__header .sd-description {
   margin-top: calcSize(0.5);
-}
+}

src/defaultV2-theme/blocks/sd-dropdown.scss

@@ -83,7 +83,7 @@
   font-weight: $font-editorfont-weight;
   color: $font-editorfont-color;
   font-size: $font-editorfont-size;
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -107,11 +107,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
-  line-height: calcSize(3);
+  line-height: calcLineHeight(1.5);
   appearance: none;
 }
+
 .sd-dropdown__hint-prefix {
   color: $foreground-light;
+
   span {
     white-space: pre;
   }
@@ -120,14 +122,16 @@
 .sd-dropdown__hint-suffix {
   display: flex;
   color: $foreground-light;
+
   span {
     white-space: pre;
   }
 }
+
 [dir="rtl"],
 [style*="direction:rtl"],
 [style*="direction: rtl"] {
   .sd-dropdown {
     background-position: left calcSize(1.5) top 50%, 0 0;
   }
-}
+}