survey-react 1.9.85 → 1.9.86

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.85
+ * surveyjs - Survey JavaScript library v1.9.86
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -112,7 +112,7 @@
   padding: calc(1 * var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
@@ -127,14 +127,14 @@ button.sv-action-bar-item {
 
 .sv-action-bar--default-size-mode .sv-action-bar-item {
   height: calc(5 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(1 * var(--base-unit, 8px));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
   height: calc(4 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   margin: 0 calc(0.5 * var(--base-unit, 8px));
 }
@@ -204,11 +204,11 @@ button.sv-action-bar-item {
   padding: calc(1 * var(--base-unit, 8px));
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   cursor: pointer;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
 }
 
@@ -274,7 +274,7 @@ button.sv-action-bar-item {
   z-index: 1000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   padding-left: calc(2.5 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
 }
@@ -332,12 +332,12 @@ sv-popup {
 .sv-popup__shadow {
   width: 100%;
   height: 100%;
-  border-radius: calc(1 * var(--base-unit, 8px));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-popup__body-content {
   background-color: var(--background, #fff);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -379,7 +379,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
-  border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
+  border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
   background: var(--background, #fff);
   box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
   padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -475,7 +475,7 @@ sv-popup {
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   font-style: normal;
   font-weight: 700;
@@ -496,13 +496,13 @@ sv-popup {
   padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   background: var(--background, #fff);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   margin: 2px;
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   text-align: center;
   color: var(--primary, #19b394);
@@ -632,7 +632,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   font-family: var(--font-family);
   padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
@@ -669,10 +669,9 @@ sv-popup {
   width: auto;
   min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   overflow: hidden;
   margin: 0;
-  border-radius: 4px;
 }
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
@@ -684,7 +683,7 @@ sv-popup {
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   overflow: auto;
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -705,7 +704,7 @@ sv-popup {
   padding: 11px calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   outline: none;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   background: var(--background, #fff);
   cursor: pointer;
@@ -822,7 +821,7 @@ sv-popup {
   background-color: cadetblue;
   padding: 1px;
   font-family: var(--font-family, var(--font-family));
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857143;
@@ -841,7 +840,7 @@ sv-popup {
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
+  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   line-break: auto;
@@ -851,10 +850,10 @@ sv-popup {
 .sv_window_title {
   padding: 8px 14px;
   margin: 0;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
-  border-radius: 5px 5px 0 0;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
 }
 
 .sv_window_content {
@@ -868,7 +867,7 @@ sv-popup {
 .sv_window_title a:link,
 .sv_window_title a:visited {
   text-decoration: none;
-  font-size: 14px;
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-style: normal;
   color: black;
 }
@@ -889,8 +888,8 @@ sv-popup {
 
 .sv-brand-info__text {
   font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(3 * var(--base-unit, 8px));
   color: #161616;
 }
 
@@ -903,8 +902,8 @@ sv-popup {
 
 .sv-brand-info__terms {
   font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(2 * var(--base-unit, 8px));
 }
 .sv-brand-info__terms a {
   color: #909090;
@@ -982,7 +981,7 @@ sv-popup {
   justify-content: center;
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   border-radius: 100%;
   border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
   width: calc(5 * var(--base-unit, 8px));
@@ -1004,7 +1003,7 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
@@ -1127,7 +1126,7 @@ sv-popup {
 
 .sv-list__empty-text {
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   text-align: center;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -1152,7 +1151,7 @@ sv-popup {
   padding-inline-end: calc(8 * var(--base-unit, 8px));
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   cursor: pointer;
   overflow: hidden;
@@ -1165,7 +1164,7 @@ sv-popup {
 }
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
   border: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  border-radius: 3px;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   padding-block: calc(0.75 * var(--base-unit, 8px));
   padding-inline-end: calc(7.75 * var(--base-unit, 8px));
   padding-inline-start: calc(1.75 * var(--base-unit, 8px));
@@ -1288,7 +1287,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   box-sizing: border-box;
   width: 100%;
   outline: none;
-  font-size: 1em;
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   padding-inline-start: calc(7 * var(--base-unit, 8px));
@@ -1321,13 +1320,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   opacity: 0;
   padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
-  border-radius: calc(1 * var(--base-unit, 8px));
+  border-radius: calc(2 * var(--sjs-corner-radius, 4px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   min-width: calc(30 * var(--base-unit, 8px));
   text-align: center;
   z-index: 1600;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   display: flex;
   flex-direction: row;
@@ -1373,13 +1372,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sv-save-data_root.sv-save-data_error .sv-save-data_button {
   font-weight: 600;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   height: calc(5 * var(--base-unit, 8px));
   color: #ffffff;
   background-color: var(--red, #e60a3e);
   border: calc(0.25 * var(--base-unit, 8px)) solid #ffffff;
-  border-radius: calc(0.75 * var(--base-unit, 8px));
+  border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
   padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   display: flex;
   align-items: center;
@@ -1426,11 +1425,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin: 0;
 }
 .sd-element__title .sd-element__num {
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
 }
 .sd-element__title span {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
 }
 .sd-element__title .sv-title-actions__title {
@@ -1459,7 +1458,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-inline-start: 0;
   padding-inline-end: calc(1 * var(--base-unit, 8px));
   width: calc(5 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin-inline-start: calc(-5 * var(--base-unit, 8px));
@@ -1515,7 +1514,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .svc-logic-question-value,
 .sd-element--with-frame {
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
   box-sizing: border-box;
   padding-top: var(--sd-base-padding);
   padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
@@ -1534,6 +1533,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   margin-top: 0;
 }
 
+.sd-element--complex.sd-element--complex > .sd-question__erbox--above-question {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .sd-element--complex > .sd-element__header--location-top {
   margin-top: 0;
 }
@@ -1579,7 +1582,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--collapsed.sd-element--with-frame > .sd-element__header {
   padding-top: calc(2 * var(--base-unit, 8px));
   padding-bottom: calc(2 * var(--base-unit, 8px));
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
 }
 .sd-element--collapsed.sd-element--with-frame > .sd-element__header--location-top {
   margin-top: 0;
@@ -1601,6 +1604,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
   border: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-radius: calc(var(--sjs-corner-radius, 4px) - 4px);
   box-sizing: border-box;
   padding-left: var(--sd-base-padding);
   padding-right: var(--sd-base-padding);
@@ -1635,7 +1639,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-element--with-frame.sd-element--compact {
   border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
-  border-radius: 4px;
+  border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
   box-shadow: none;
 }
 
@@ -1652,15 +1656,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__description {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-question__erbox {
   padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   font-weight: 600;
   line-height: calc(2 * var(--base-unit, 8px));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   white-space: normal;
   text-align: left;
 }
@@ -1673,7 +1677,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__erbox--above-question {
-  border-radius: calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) 0 0;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
   margin-bottom: calc(var(--sd-base-vertical-padding) - var(--base-unit, 8px));
 }
 
@@ -1685,7 +1689,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: relative;
   margin-top: 0;
   bottom: calc(-1 * var(--sd-base-padding));
-  border-radius: 0 0 calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px));
+  border-radius: 0 0 calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-root-modern--mobile .sd-question__erbox--below-question {
@@ -1754,7 +1758,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-question__comment-area {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   margin-top: calc(2 * var(--base-unit, 8px));
   display: flex;
   flex-direction: column;
@@ -1789,14 +1793,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   text-align: left;
 }
 
-.sd-question--complex .sd-question__erbox--above-question {
-  margin-top: 0;
-  margin-bottom: calc(var(--sd-base-vertical-padding) - 1 * var(--base-unit, 8px));
-}
-.sd-question--complex .sd-question__erbox--above-question ~ .sd-question__header--location-top {
-  padding-top: calc(1 * var(--base-unit, 8px));
-}
-
 .sd-question--empty.sd-question--complex > .sd-question__header--location-top {
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }
@@ -1813,7 +1809,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   justify-content: center;
   min-height: calc(24 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -1845,12 +1841,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
   box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
   border: none;
-  border-radius: 3px;
+  border-radius: var(--sjs-editor-corner-radius, var(--sjs-corner-radius, 4px));
   text-align: start;
 }
 
@@ -1905,7 +1901,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: 0px;
   font-family: var(--font-family);
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   position: absolute;
   inset-inline-end: calc(2 * var(--base-unit, 8px));
@@ -1980,7 +1976,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
   position: static;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 700;
@@ -1991,7 +1987,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
   position: static;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 400;
@@ -2045,7 +2041,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox__decorator {
-  border-radius: 3px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-checkbox__svg {
@@ -2093,7 +2089,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background: transparent;
   border: none;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-family: var(--font-family, var(--font-family));
   font-weight: 600;
   padding: calc(1 * var(--base-unit, 8px)) 0;
@@ -2112,7 +2108,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: calc(2 * var(--base-unit, 8px));
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: calc(1.25 * var(--base-unit, 8px));
 }
 
 .sd-matrixdynamic__placeholder .sd-matrixdynamic__add-btn {
@@ -2164,7 +2160,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-table__cell {
   font-weight: normal;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -2396,7 +2392,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-page .sd-page__title {
   position: static;
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(4 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 700;
@@ -2405,7 +2401,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sd-page .sd-page__description {
   position: static;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: calc(0.5 * var(--base-unit, 8px)) 0px;
   font-weight: 400;
@@ -2435,7 +2431,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .svc-row > .sd-row--multiple {
   background: var(--sjs-question-background, var(--background, #fff));
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 :not(.svc-row) > .sd-row--multiple {
@@ -2519,13 +2515,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   flex-grow: 1;
 }
 .sd-header__text h3 {
-  font-size: calc(4 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 700;
   line-height: calc(5 * var(--base-unit, 8px));
   color: var(--primary, #19b394);
 }
 .sd-header__text h5 {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 400;
   line-height: calc(3 * var(--base-unit, 8px));
 }
@@ -2576,7 +2572,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: normal;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   white-space: normal;
@@ -2629,7 +2625,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   font-style: normal;
   font-weight: normal;
   line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   white-space: normal;
   word-break: break-word;
@@ -2699,7 +2695,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sd-checkbox__decorator {
-  border-radius: 3px;
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-checkbox__svg {
@@ -2825,7 +2821,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   border: 2px solid var(--background, #fff);
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-rating__item--fixed-size {
@@ -3036,7 +3032,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-text.sd-rating__item-text {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   display: inline-block;
 }
@@ -3114,7 +3110,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-dropdown option {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-dropdown__value {
@@ -3124,7 +3120,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   position: relative;
 }
@@ -3161,7 +3157,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   outline: none;
   padding: 0;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3177,7 +3173,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-dropdown__filter-string-input::placeholder {
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   width: 100%;
   max-width: 100%;
@@ -3239,7 +3235,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   height: calc(3 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
   background-color: var(--primary, #19b394);
-  border-radius: calc(0.25 * var(--base-unit, 8px));
+  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
 }
 
 .sv-tagbox__item-text {
@@ -3340,7 +3336,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 .sd-imagepicker__item img,
 .sd-imagepicker__item .sd-imagepicker__image-container > div {
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   background-color: var(--background-dim-light, #f9f9f9);
 }
 
@@ -3388,7 +3384,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   width: 100%;
   height: 100%;
   background-color: var(--red-light, rgba(230, 10, 62, 0.1));
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   background: linear-gradient(0deg, var(--red-light, rgba(230, 10, 62, 0.1)), var(--red-light, rgba(230, 10, 62, 0.1)));
 }
 
@@ -3404,7 +3400,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-imagepicker__text {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   margin-top: calc(1 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3440,7 +3436,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-image__image {
   display: block;
   max-width: 100%;
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
 }
 
 .sd-image__image--adaptive {
@@ -3472,7 +3468,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-expression {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-progress {
@@ -3493,7 +3489,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(1 * var(--base-unit, 8px));
   right: calc(3 * var(--base-unit, 8px));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   font-weight: 600;
 }
@@ -3523,7 +3519,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   display: block;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
 }
@@ -3693,7 +3689,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-paneldynamic__progress-text {
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   margin: 0;
   margin-right: calc(3 * var(--base-unit, 8px));
@@ -3783,7 +3779,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   background-color: transparent;
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   overflow-x: hidden;
   white-space: nowrap;
@@ -3812,7 +3808,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file {
   min-height: calc(36 * var(--base-unit, 8px));
   position: relative;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
 }
 .sd-file .sv-action-bar {
@@ -3948,7 +3944,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-file__sign {
   margin-top: calc(1 * var(--base-unit, 8px));
   text-align: center;
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
 }
 .sd-file__sign a {
@@ -4072,12 +4068,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   background: var(--background, #fff);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(0.5 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   text-align: center;
   color: var(--primary, #19b394);
@@ -4261,7 +4257,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-weight: 600;
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
   outline: none;
 }
@@ -4371,7 +4367,7 @@ svg.sd-action--icon {
   height: auto;
 }
 .sd-completedpage h3 {
-  font-size: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 .sd-completedpage:before,
@@ -4438,14 +4434,14 @@ svg.sd-action--icon {
 
 .sd-progress-buttons__page-title {
   width: 100%;
-  font-size: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   font-weight: 600;
   line-height: calc(3 * var(--base-unit, 8px));
 }
 
 .sd-progress-buttons__page-description {
   width: 100%;
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(2 * var(--base-unit, 8px));
   font-weight: 600;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4470,7 +4466,7 @@ svg.sd-action--icon {
 .sv_progress-toc .sv-list__item-body {
   padding-inline-start: calc(2 * var(--base-unit, 8px));
   padding-inline-end: calc(2 * var(--base-unit, 8px));
-  border-radius: 3px;
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   padding-top: calc(1.5 * var(--base-unit, 8px));
   padding-bottom: calc(1.5 * var(--base-unit, 8px));
 }
@@ -4493,8 +4489,8 @@ svg.sd-action--icon {
 }
 .sd-list__item.sd-list__item .sd-list__item-body {
   padding-block: calc(1.5 * var(--base-unit, 8px));
-  border-radius: 3px;
-  font-size: calc(2 * var(--base-unit, 8px));
+  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
   line-height: calc(3 * var(--base-unit, 8px));
 }
 
@@ -4574,7 +4570,7 @@ svg.sd-action--icon {
 .sd-timer__text--minor {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-weight: 600;
-  font-size: calc(1.5 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
 }
 
 sv-components-container,
@@ -4672,9 +4668,9 @@ sv-components-container,
   flex-direction: column;
 }
 .sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
-  font-size: 12px;
-  line-height: 16px;
-  height: 16px;
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--base-unit, 8px));
   padding-right: 0;
   border-right: none;
   margin-bottom: 0;