survey-react 1.9.88 → 1.9.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/defaultV2.css +321 -155
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +34 -34
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +4 -4
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +33 -9
  12. package/survey.react.js +326 -92
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.88
2
+ * surveyjs - Survey JavaScript library v1.9.89
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -8,7 +8,8 @@
8
8
  font-family: "Open Sans";
9
9
  font-style: normal;
10
10
  font-weight: 400;
11
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");
11
+ font-stretch: 100%;
12
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
12
13
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
13
14
  }
14
15
  /* cyrillic */
@@ -16,61 +17,206 @@
16
17
  font-family: "Open Sans";
17
18
  font-style: normal;
18
19
  font-weight: 400;
19
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format("woff2");
20
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
20
+ font-stretch: 100%;
21
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
22
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
21
23
  }
22
24
  /* greek-ext */
23
25
  @font-face {
24
26
  font-family: "Open Sans";
25
27
  font-style: normal;
26
28
  font-weight: 400;
27
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format("woff2");
29
+ font-stretch: 100%;
30
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
28
31
  unicode-range: U+1F00-1FFF;
29
32
  }
33
+ /* greek */
34
+ @font-face {
35
+ font-family: "Open Sans";
36
+ font-style: normal;
37
+ font-weight: 400;
38
+ font-stretch: 100%;
39
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
40
+ unicode-range: U+0370-03FF;
41
+ }
42
+ /* hebrew */
43
+ @font-face {
44
+ font-family: "Open Sans";
45
+ font-style: normal;
46
+ font-weight: 400;
47
+ font-stretch: 100%;
48
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
49
+ unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
50
+ }
51
+ /* vietnamese */
52
+ @font-face {
53
+ font-family: "Open Sans";
54
+ font-style: normal;
55
+ font-weight: 400;
56
+ font-stretch: 100%;
57
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
58
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
59
+ }
60
+ /* latin-ext */
61
+ @font-face {
62
+ font-family: "Open Sans";
63
+ font-style: normal;
64
+ font-weight: 400;
65
+ font-stretch: 100%;
66
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
67
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
68
+ }
69
+ /* latin */
70
+ @font-face {
71
+ font-family: "Open Sans";
72
+ font-style: normal;
73
+ font-weight: 400;
74
+ font-stretch: 100%;
75
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
76
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
77
+ }
78
+ /* cyrillic-ext */
79
+ @font-face {
80
+ font-family: "Open Sans";
81
+ font-style: normal;
82
+ font-weight: 600;
83
+ font-stretch: 100%;
84
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
85
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
86
+ }
87
+ /* cyrillic */
88
+ @font-face {
89
+ font-family: "Open Sans";
90
+ font-style: normal;
91
+ font-weight: 600;
92
+ font-stretch: 100%;
93
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
94
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
95
+ }
96
+ /* greek-ext */
97
+ @font-face {
98
+ font-family: "Open Sans";
99
+ font-style: normal;
100
+ font-weight: 600;
101
+ font-stretch: 100%;
102
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
103
+ unicode-range: U+1F00-1FFF;
104
+ }
105
+ /* greek */
106
+ @font-face {
107
+ font-family: "Open Sans";
108
+ font-style: normal;
109
+ font-weight: 600;
110
+ font-stretch: 100%;
111
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
112
+ unicode-range: U+0370-03FF;
113
+ }
114
+ /* hebrew */
115
+ @font-face {
116
+ font-family: "Open Sans";
117
+ font-style: normal;
118
+ font-weight: 600;
119
+ font-stretch: 100%;
120
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
121
+ unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
122
+ }
123
+ /* vietnamese */
124
+ @font-face {
125
+ font-family: "Open Sans";
126
+ font-style: normal;
127
+ font-weight: 600;
128
+ font-stretch: 100%;
129
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
130
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
131
+ }
132
+ /* latin-ext */
30
133
  @font-face {
31
134
  font-family: "Open Sans";
32
135
  font-style: normal;
33
136
  font-weight: 600;
34
- src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
35
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
137
+ font-stretch: 100%;
138
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
139
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
140
+ }
141
+ /* latin */
142
+ @font-face {
143
+ font-family: "Open Sans";
144
+ font-style: normal;
145
+ font-weight: 600;
146
+ font-stretch: 100%;
147
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
148
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
36
149
  }
150
+ /* cyrillic-ext */
37
151
  @font-face {
38
152
  font-family: "Open Sans";
39
153
  font-style: normal;
40
154
  font-weight: 700;
41
- src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
42
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
155
+ font-stretch: 100%;
156
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
157
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
158
+ }
159
+ /* cyrillic */
160
+ @font-face {
161
+ font-family: "Open Sans";
162
+ font-style: normal;
163
+ font-weight: 700;
164
+ font-stretch: 100%;
165
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
166
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
167
+ }
168
+ /* greek-ext */
169
+ @font-face {
170
+ font-family: "Open Sans";
171
+ font-style: normal;
172
+ font-weight: 700;
173
+ font-stretch: 100%;
174
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
175
+ unicode-range: U+1F00-1FFF;
43
176
  }
44
177
  /* greek */
45
178
  @font-face {
46
179
  font-family: "Open Sans";
47
180
  font-style: normal;
48
- font-weight: 400;
49
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format("woff2");
181
+ font-weight: 700;
182
+ font-stretch: 100%;
183
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
50
184
  unicode-range: U+0370-03FF;
51
185
  }
186
+ /* hebrew */
187
+ @font-face {
188
+ font-family: "Open Sans";
189
+ font-style: normal;
190
+ font-weight: 700;
191
+ font-stretch: 100%;
192
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
193
+ unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
194
+ }
52
195
  /* vietnamese */
53
196
  @font-face {
54
197
  font-family: "Open Sans";
55
198
  font-style: normal;
56
- font-weight: 400;
57
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format("woff2");
199
+ font-weight: 700;
200
+ font-stretch: 100%;
201
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
58
202
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
59
203
  }
60
204
  /* latin-ext */
61
205
  @font-face {
62
206
  font-family: "Open Sans";
63
207
  font-style: normal;
64
- font-weight: 400;
65
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format("woff2");
208
+ font-weight: 700;
209
+ font-stretch: 100%;
210
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
66
211
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
67
212
  }
68
213
  /* latin */
69
214
  @font-face {
70
215
  font-family: "Open Sans";
71
216
  font-style: normal;
72
- font-weight: 400;
73
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2");
217
+ font-weight: 700;
218
+ font-stretch: 100%;
219
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
74
220
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
75
221
  }
76
222
  :root {
@@ -192,7 +338,7 @@ button.sv-action-bar-item {
192
338
  }
193
339
 
194
340
  .sv-action-bar-item--active .sv-action-bar-item__icon use {
195
- fill: var(--primary, #19b394);
341
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
196
342
  }
197
343
 
198
344
  .sv-action-bar-item-dropdown {
@@ -401,8 +547,8 @@ sv-popup {
401
547
  width: 100%;
402
548
  }
403
549
  .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
404
- background-color: var(--primary, #19b394);
405
- border: 2px solid var(--primary, #19b394);
550
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
551
+ border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
406
552
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
407
553
  }
408
554
 
@@ -425,7 +571,7 @@ sv-popup {
425
571
  }
426
572
  .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
427
573
  .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
428
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
574
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
429
575
  }
430
576
 
431
577
  .sv-popup__content {
@@ -505,13 +651,13 @@ sv-popup {
505
651
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
506
652
  line-height: calc(3 * var(--base-unit, 8px));
507
653
  text-align: center;
508
- color: var(--primary, #19b394);
654
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
509
655
  border: none;
510
656
  outline: none;
511
657
  }
512
658
 
513
659
  .sv-popup__button:hover {
514
- box-shadow: 0 0 0 2px var(--primary, #19b394);
660
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
515
661
  }
516
662
 
517
663
  .sv-popup__button:disabled {
@@ -525,7 +671,7 @@ sv-popup {
525
671
  }
526
672
 
527
673
  .sv-popup__button--apply {
528
- background-color: var(--primary, #19b394);
674
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
529
675
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
530
676
  }
531
677
 
@@ -555,7 +701,7 @@ sv-popup {
555
701
  }
556
702
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
557
703
  background-color: transparent;
558
- color: var(--primary, #19b394);
704
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
559
705
  border: none;
560
706
  box-shadow: none;
561
707
  padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -645,14 +791,14 @@ sv-popup {
645
791
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
646
792
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
647
793
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
648
- background: var(--primary, #19b394);
794
+ background: var(--sjs-primary-backcolor, var(--primary, #19b394));
649
795
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
650
796
  font-weight: 600;
651
797
  }
652
798
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
653
799
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
654
800
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
655
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
801
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
656
802
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
657
803
  }
658
804
 
@@ -689,8 +835,8 @@ sv-popup {
689
835
  }
690
836
 
691
837
  .sv-button-group:focus-within {
692
- box-shadow: 0 0 0 1px var(--primary, #19b394);
693
- border-color: var(--primary, #19b394);
838
+ box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
839
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
694
840
  }
695
841
 
696
842
  .sv-button-group__item {
@@ -730,10 +876,10 @@ sv-popup {
730
876
 
731
877
  .sv-button-group__item--selected {
732
878
  font-weight: 600;
733
- color: var(--primary, #19b394);
879
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
734
880
  }
735
881
  .sv-button-group__item--selected .sv-button-group__item-icon use {
736
- fill: var(--primary, #19b394);
882
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
737
883
  }
738
884
  .sv-button-group__item--selected:hover {
739
885
  background-color: var(--background, #fff);
@@ -769,8 +915,8 @@ sv-popup {
769
915
  }
770
916
 
771
917
  .sv-button-group:focus-within {
772
- box-shadow: 0 0 0 1px var(--primary, #19b394);
773
- border-color: var(--primary, #19b394);
918
+ box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
919
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
774
920
  }
775
921
 
776
922
  .sv-visuallyhidden {
@@ -944,7 +1090,7 @@ sv-popup {
944
1090
 
945
1091
  .sv-ranking-item:focus .sv-ranking-item__index {
946
1092
  background: var(--background, #fff);
947
- outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
1093
+ outline: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
948
1094
  }
949
1095
 
950
1096
  .sv-ranking-item__content.sv-ranking-item__content {
@@ -967,7 +1113,7 @@ sv-popup {
967
1113
 
968
1114
  .sv-ranking-item__icon.sv-ranking-item__icon {
969
1115
  visibility: hidden;
970
- fill: var(--primary, #19b394);
1116
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
971
1117
  position: absolute;
972
1118
  top: calc(1 * var(--base-unit, 8px));
973
1119
  width: calc(1.75 * var(--base-unit, 8px));
@@ -979,7 +1125,7 @@ sv-popup {
979
1125
  flex-shrink: 0;
980
1126
  align-items: center;
981
1127
  justify-content: center;
982
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
1128
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
983
1129
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
984
1130
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
985
1131
  border-radius: 100%;
@@ -1084,7 +1230,7 @@ sv-popup {
1084
1230
  }
1085
1231
 
1086
1232
  .sv-ranking-shortcut .sv-ranking-item__icon {
1087
- fill: var(--primary, #19b394);
1233
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
1088
1234
  }
1089
1235
 
1090
1236
  .sv-ranking-shortcut .sv-ranking-item__text {
@@ -1179,7 +1325,7 @@ sv-popup {
1179
1325
  }
1180
1326
  .sv-list__item:hover .sv-list__item-body,
1181
1327
  .sv-list__item:focus .sv-list__item-body {
1182
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
1328
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
1183
1329
  }
1184
1330
 
1185
1331
  .sv-list__item--with-icon.sv-list__item--with-icon {
@@ -1221,7 +1367,7 @@ sv-popup {
1221
1367
  .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
1222
1368
  .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
1223
1369
  li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
1224
- background-color: var(--primary, #19b394);
1370
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1225
1371
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
1226
1372
  font-weight: 600;
1227
1373
  }
@@ -1235,7 +1381,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1235
1381
 
1236
1382
  .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
1237
1383
  .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
1238
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
1384
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1239
1385
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1240
1386
  font-weight: 400;
1241
1387
  }
@@ -1391,7 +1537,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1391
1537
  }
1392
1538
 
1393
1539
  .sv-save-data_root.sv-save-data_success {
1394
- background-color: var(--primary, #19b394);
1540
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1395
1541
  color: #ffffff;
1396
1542
  font-weight: 600;
1397
1543
  }
@@ -1429,7 +1575,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1429
1575
  line-height: calc(2 * var(--base-unit, 8px));
1430
1576
  }
1431
1577
  .sd-element__title span {
1432
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1578
+ font-family: var(--sjs-font-questiontitle-family, var(--font-family));
1579
+ font-weight: var(--sjs-font-questiontitle-weight, 600);
1580
+ font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
1581
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1433
1582
  line-height: calc(3 * var(--base-unit, 8px));
1434
1583
  }
1435
1584
  .sd-element__title .sv-title-actions__title {
@@ -1514,13 +1663,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1514
1663
 
1515
1664
  .svc-logic-question-value,
1516
1665
  .sd-element--with-frame {
1517
- border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
1666
+ border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1518
1667
  box-sizing: border-box;
1519
1668
  padding-top: var(--sd-base-padding);
1520
1669
  padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
1521
1670
  padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
1522
1671
  padding-bottom: var(--sd-base-padding);
1523
- background: var(--sjs-question-background, var(--background, #fff));
1672
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
1524
1673
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1525
1674
  }
1526
1675
  .svc-logic-question-value.sd-question--paneldynamic,
@@ -1582,7 +1731,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1582
1731
  .sd-element--collapsed.sd-element--with-frame > .sd-element__header {
1583
1732
  padding-top: calc(2 * var(--base-unit, 8px));
1584
1733
  padding-bottom: calc(2 * var(--base-unit, 8px));
1585
- border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
1734
+ border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1586
1735
  }
1587
1736
  .sd-element--collapsed.sd-element--with-frame > .sd-element__header--location-top {
1588
1737
  margin-top: 0;
@@ -1639,7 +1788,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1639
1788
 
1640
1789
  .sd-element--with-frame.sd-element--compact {
1641
1790
  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
1642
- border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
1791
+ border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1643
1792
  box-shadow: none;
1644
1793
  }
1645
1794
 
@@ -1655,10 +1804,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1655
1804
  position: relative;
1656
1805
  }
1657
1806
 
1658
- .sd-question__description {
1659
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1660
- }
1661
-
1662
1807
  .sd-question__erbox {
1663
1808
  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
1664
1809
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
@@ -1840,13 +1985,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1840
1985
  box-sizing: border-box;
1841
1986
  padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
1842
1987
  line-height: calc(3 * var(--base-unit, 8px));
1843
- font-family: var(--font-family, var(--font-family));
1844
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1845
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
1846
- background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
1988
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
1989
+ font-weight: var(--sjs-font-editorfont-weight, 400);
1990
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1991
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
1992
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
1847
1993
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
1848
1994
  border: none;
1849
- border-radius: var(--sjs-editor-corner-radius, var(--sjs-corner-radius, 4px));
1995
+ border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1850
1996
  text-align: start;
1851
1997
  }
1852
1998
 
@@ -1855,7 +2001,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1855
2001
  }
1856
2002
 
1857
2003
  .sd-input--disabled {
1858
- background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
2004
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
1859
2005
  -webkit-user-select: none;
1860
2006
  -moz-user-select: none;
1861
2007
  -ms-user-select: none;
@@ -1882,7 +2028,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1882
2028
  }
1883
2029
 
1884
2030
  .sd-input:focus {
1885
- box-shadow: 0 0 0 2px var(--primary, #19b394);
2031
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
1886
2032
  }
1887
2033
 
1888
2034
  .sd-input--error {
@@ -1913,7 +2059,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1913
2059
  }
1914
2060
 
1915
2061
  .sd-input[type=range]::-webkit-slider-runnable-track {
1916
- background-color: var(--primary, #19b394);
2062
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1917
2063
  border-radius: calc(1 * var(--base-unit, 8px));
1918
2064
  height: calc(1.5 * var(--base-unit, 8px));
1919
2065
  }
@@ -1923,15 +2069,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1923
2069
  appearance: none;
1924
2070
  margin-top: calc(-0.75 * var(--base-unit, 8px));
1925
2071
  border-radius: 100%;
1926
- border: 2px solid var(--primary, #19b394);
2072
+ border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1927
2073
  box-shadow: inset 0 0 0 2px var(--background, #fff);
1928
- background-color: var(--primary, #19b394);
2074
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1929
2075
  height: calc(3 * var(--base-unit, 8px));
1930
2076
  width: calc(3 * var(--base-unit, 8px));
1931
2077
  }
1932
2078
 
1933
2079
  .sd-input[type=range]::-moz-range-track {
1934
- background-color: var(--primary, #19b394);
2080
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1935
2081
  border-radius: calc(1 * var(--base-unit, 8px));
1936
2082
  height: calc(1.5 * var(--base-unit, 8px));
1937
2083
  }
@@ -1941,9 +2087,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1941
2087
  appearance: none;
1942
2088
  margin-top: calc(-0.75 * var(--base-unit, 8px));
1943
2089
  border-radius: 100%;
1944
- border: 2px solid var(--primary, #19b394);
2090
+ border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1945
2091
  box-shadow: inset 0 0 0 2px var(--background, #fff);
1946
- background-color: var(--primary, #19b394);
2092
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1947
2093
  height: calc(3 * var(--base-unit, 8px));
1948
2094
  width: calc(3 * var(--base-unit, 8px));
1949
2095
  }
@@ -1975,22 +2121,29 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1975
2121
  content: none;
1976
2122
  }
1977
2123
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
2124
+ font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2125
+ font-weight: var(--sjs-font-pagetitle-weight, 700);
2126
+ font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2127
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1978
2128
  position: static;
1979
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1980
2129
  line-height: calc(4 * var(--base-unit, 8px));
1981
2130
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
1982
- font-weight: 700;
1983
2131
  }
1984
2132
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
2133
+ font-family: inherit;
1985
2134
  font-size: inherit;
2135
+ font-weight: inherit;
2136
+ color: inherit;
1986
2137
  line-height: inherit;
1987
2138
  }
1988
2139
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
2140
+ font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2141
+ font-weight: var(--sjs-font-pagedescription-weight, 400);
2142
+ font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2143
+ color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
1989
2144
  position: static;
1990
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1991
2145
  line-height: calc(3 * var(--base-unit, 8px));
1992
2146
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
1993
- font-weight: 400;
1994
2147
  }
1995
2148
 
1996
2149
  .sd-panel__required-text {
@@ -2062,7 +2215,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2062
2215
  }
2063
2216
 
2064
2217
  .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
2065
- fill: var(--primary, #19b394);
2218
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2066
2219
  }
2067
2220
 
2068
2221
  .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
@@ -2126,7 +2279,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2126
2279
 
2127
2280
  .sd-table {
2128
2281
  width: 100%;
2129
- background: var(--sjs-question-background, var(--background, #fff));
2282
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2130
2283
  border-collapse: collapse;
2131
2284
  white-space: normal;
2132
2285
  }
@@ -2251,7 +2404,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2251
2404
  background: var(--green-light, rgba(25, 179, 148, 0.1));
2252
2405
  }
2253
2406
  .sd-table__cell--detail-button:hover svg {
2254
- fill: var(--primary, #19b394);
2407
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2255
2408
  }
2256
2409
 
2257
2410
  .sd-table__cell--actions {
@@ -2285,7 +2438,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2285
2438
  .sd-matrix__cell:first-of-type,
2286
2439
  .sd-matrix tr > td:first-of-type {
2287
2440
  position: sticky;
2288
- background: var(--sjs-question-background, var(--background, #fff));
2441
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2289
2442
  z-index: 12;
2290
2443
  }
2291
2444
  .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
@@ -2306,7 +2459,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2306
2459
  .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
2307
2460
  margin-right: calc(-3 * var(--base-unit, 8px));
2308
2461
  justify-content: flex-end;
2309
- background: var(--sjs-question-background, var(--background, #fff));
2462
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2310
2463
  }
2311
2464
 
2312
2465
  .sd-question.sd-question--table {
@@ -2327,7 +2480,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2327
2480
  min-height: 100%;
2328
2481
  width: calc(var(--sd-base-padding) - var(--base-unit, 8px));
2329
2482
  flex-shrink: 0;
2330
- background: var(--sjs-question-background, var(--background, #fff));
2483
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2331
2484
  z-index: 11;
2332
2485
  }
2333
2486
  .sd-table-wrapper::before {
@@ -2369,6 +2522,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2369
2522
  padding-top: calc(1 * var(--base-unit, 8px));
2370
2523
  }
2371
2524
 
2525
+ .sd-table__question-wrapper .sd-boolean-root {
2526
+ margin: auto;
2527
+ }
2528
+
2372
2529
  .sd-body--responsive .sd-page {
2373
2530
  padding: calc(5 * var(--base-unit, 8px)) var(--sd-page-vertical-padding) calc(2 * var(--base-unit, 8px));
2374
2531
  }
@@ -2391,21 +2548,23 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2391
2548
  }
2392
2549
 
2393
2550
  .sd-page .sd-page__title {
2551
+ font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2552
+ font-weight: var(--sjs-font-pagetitle-weight, 700);
2553
+ font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2554
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2394
2555
  position: static;
2395
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2396
2556
  line-height: calc(4 * var(--base-unit, 8px));
2397
2557
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
2398
- font-weight: 700;
2399
- color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
2400
2558
  }
2401
2559
 
2402
2560
  .sd-page .sd-page__description {
2561
+ font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2562
+ font-weight: var(--sjs-font-pagedescription-weight, 400);
2563
+ font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2564
+ color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2403
2565
  position: static;
2404
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2405
2566
  line-height: calc(3 * var(--base-unit, 8px));
2406
2567
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
2407
- font-weight: 400;
2408
- color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
2409
2568
  }
2410
2569
 
2411
2570
  .sd-row {
@@ -2429,7 +2588,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2429
2588
 
2430
2589
  .sd-page__row.sd-row--multiple:not(.sd-row--compact),
2431
2590
  .svc-row > .sd-row--multiple {
2432
- background: var(--sjs-question-background, var(--background, #fff));
2591
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2433
2592
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2434
2593
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2435
2594
  }
@@ -2501,7 +2660,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2501
2660
  overflow: auto;
2502
2661
  font-family: var(--font-family, var(--font-family));
2503
2662
  gap: calc(4 * var(--base-unit, 8px));
2504
- box-shadow: 0px 2px 0px var(--primary, #19b394);
2663
+ box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
2505
2664
  margin-bottom: 2px;
2506
2665
  }
2507
2666
  .sd-title.sd-container-modern__title .sd-logo__image {
@@ -2515,11 +2674,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2515
2674
  flex-grow: 1;
2516
2675
  }
2517
2676
  .sd-header__text .sd-title {
2518
- color: var(--primary, #19b394);
2677
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2678
+ font-family: var(--sjs-font-surveytitle-family, var(--font-family));
2679
+ font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2680
+ font-weight: var(--sjs-font-surveytitle-weight, 700);
2519
2681
  }
2520
2682
  .sd-header__text h3 {
2521
- font-size: calc(2 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2522
- font-weight: 700;
2523
2683
  line-height: calc(5 * var(--base-unit, 8px));
2524
2684
  }
2525
2685
  .sd-header__text h5 {
@@ -2571,12 +2731,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2571
2731
  }
2572
2732
 
2573
2733
  .sd-description {
2574
- font-family: var(--font-family, var(--font-family));
2575
2734
  font-style: normal;
2576
- font-weight: normal;
2577
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2735
+ font-family: var(--sjs-font-questiondescription-family, var(--font-family));
2736
+ font-weight: var(--sjs-font-questiondescription-weight, 400);
2737
+ color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2738
+ font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2578
2739
  line-height: calc(3 * var(--base-unit, 8px));
2579
- color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2580
2740
  white-space: normal;
2581
2741
  word-break: break-word;
2582
2742
  }
@@ -2597,7 +2757,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2597
2757
  width: calc(3 * var(--base-unit, 8px));
2598
2758
  height: calc(3 * var(--base-unit, 8px));
2599
2759
  box-sizing: border-box;
2600
- background: var(--sd-item-default-background, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
2760
+ background: var(--sd-item-default-background, var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9))));
2601
2761
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
2602
2762
  border: none;
2603
2763
  flex-shrink: 0;
@@ -2608,18 +2768,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2608
2768
  }
2609
2769
 
2610
2770
  .sd-item__control:focus + .sd-item__decorator {
2611
- box-shadow: 0 0 0 2px var(--primary, #19b394);
2771
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
2612
2772
  background: var(--background, #fff);
2613
2773
  outline: none;
2614
2774
  }
2615
2775
 
2616
2776
  .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
2617
- background: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
2777
+ background: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
2618
2778
  outline: none;
2619
2779
  }
2620
2780
 
2621
2781
  .sd-item--checked .sd-item__decorator {
2622
- background: var(--primary, #19b394);
2782
+ background: var(--sjs-primary-backcolor, var(--primary, #19b394));
2623
2783
  }
2624
2784
 
2625
2785
  .sd-item__control-label {
@@ -2718,7 +2878,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2718
2878
  }
2719
2879
 
2720
2880
  .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
2721
- fill: var(--primary, #19b394);
2881
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2722
2882
  }
2723
2883
 
2724
2884
  .sd-radio__decorator {
@@ -2739,7 +2899,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2739
2899
  }
2740
2900
 
2741
2901
  .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
2742
- background-color: var(--primary, #19b394);
2902
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2743
2903
  }
2744
2904
 
2745
2905
  .sd-radio__svg {
@@ -2771,7 +2931,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2771
2931
  }
2772
2932
 
2773
2933
  .sd-matrix__text--checked {
2774
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
2934
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
2775
2935
  padding: calc(2 * var(--base-unit, 8px));
2776
2936
  }
2777
2937
 
@@ -2867,17 +3027,17 @@ legend + sv-ng-rating-item + .sd-rating__item {
2867
3027
  }
2868
3028
 
2869
3029
  .sd-rating__item--allowhover:hover {
2870
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
2871
- border-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
3030
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3031
+ border-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
2872
3032
  }
2873
3033
 
2874
3034
  .sd-rating__item:focus-within {
2875
- border-color: var(--primary, #19b394);
3035
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2876
3036
  }
2877
3037
 
2878
3038
  .sd-rating__item--selected {
2879
- background-color: var(--primary, #19b394);
2880
- border-color: var(--primary, #19b394);
3039
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3040
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2881
3041
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2882
3042
  font-weight: 600;
2883
3043
  box-shadow: 0px 1px 2px transparent;
@@ -2944,17 +3104,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
2944
3104
  }
2945
3105
 
2946
3106
  .sd-rating__item-smiley--allowhover:hover {
2947
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
3107
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
2948
3108
  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
2949
3109
  }
2950
3110
 
2951
3111
  .sd-rating__item-smiley:focus-within {
2952
- border-color: var(--primary, #19b394);
3112
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2953
3113
  }
2954
3114
 
2955
3115
  .sd-rating__item-smiley--selected {
2956
- background-color: var(--primary, #19b394);
2957
- border-color: var(--primary, #19b394);
3116
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3117
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2958
3118
  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2959
3119
  font-weight: 600;
2960
3120
  }
@@ -3014,7 +3174,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3014
3174
 
3015
3175
  .sd-rating__item-star--selected svg {
3016
3176
  stroke: none;
3017
- fill: var(--primary, #19b394);
3177
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3018
3178
  }
3019
3179
 
3020
3180
  .sd-rating__item-star--error svg {
@@ -3036,7 +3196,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3036
3196
  }
3037
3197
 
3038
3198
  .sd-rating__item-star:focus-within svg {
3039
- stroke: var(--primary, #19b394);
3199
+ stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
3040
3200
  fill: none;
3041
3201
  }
3042
3202
 
@@ -3047,7 +3207,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3047
3207
 
3048
3208
  .sd-rating__item-star--highlighted svg {
3049
3209
  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
3050
- fill: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
3210
+ fill: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3051
3211
  }
3052
3212
 
3053
3213
  .sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within svg {
@@ -3056,8 +3216,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3056
3216
  }
3057
3217
 
3058
3218
  .sd-rating__item-star--selected:focus-within svg {
3059
- stroke: var(--primary, #19b394);
3060
- fill: var(--primary, #19b394);
3219
+ stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
3220
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3061
3221
  }
3062
3222
  .sd-rating__item-star--selected:focus-within .sv-star {
3063
3223
  display: none;
@@ -3067,7 +3227,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3067
3227
  }
3068
3228
 
3069
3229
  .sd-rating__item-text.sd-rating__item-text {
3070
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3230
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3231
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3232
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3233
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
3071
3234
  line-height: calc(3 * var(--base-unit, 8px));
3072
3235
  display: inline-block;
3073
3236
  }
@@ -3175,7 +3338,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3175
3338
  }
3176
3339
 
3177
3340
  .sd-input.sd-dropdown:focus-within {
3178
- box-shadow: 0 0 0 2px var(--primary, #19b394);
3341
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3179
3342
  }
3180
3343
 
3181
3344
  .sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input {
@@ -3191,14 +3354,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3191
3354
  border: none;
3192
3355
  outline: none;
3193
3356
  padding: 0;
3194
- font-family: var(--font-family, var(--font-family));
3195
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3357
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3358
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3359
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3360
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
3361
+ line-height: calc(3 * var(--base-unit, 8px));
3196
3362
  background-color: transparent;
3197
3363
  overflow: hidden;
3198
3364
  text-overflow: ellipsis;
3199
3365
  white-space: nowrap;
3200
3366
  display: inline-block;
3201
- line-height: calc(3 * var(--base-unit, 8px));
3202
3367
  appearance: none;
3203
3368
  height: 100%;
3204
3369
  }
@@ -3262,7 +3427,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3262
3427
  }
3263
3428
 
3264
3429
  .sd-input.sd-tagbox:focus-within {
3265
- box-shadow: 0 0 0 2px var(--primary, #19b394);
3430
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3266
3431
  }
3267
3432
 
3268
3433
  .sv-tagbox__item {
@@ -3270,7 +3435,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3270
3435
  display: flex;
3271
3436
  height: calc(3 * var(--base-unit, 8px));
3272
3437
  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
3273
- background-color: var(--primary, #19b394);
3438
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3274
3439
  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
3275
3440
  }
3276
3441
 
@@ -3294,7 +3459,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3294
3459
  height: calc(3 * var(--base-unit, 8px));
3295
3460
  padding: 0;
3296
3461
  padding-inline-start: calc(4 * var(--base-unit, 8px));
3297
- background: linear-gradient(270deg, var(--primary, #19b394) 53.12%, rgba(25, 179, 148, 0) 100%);
3462
+ background: linear-gradient(270deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
3298
3463
  }
3299
3464
 
3300
3465
  .sd-tagbox-item_clean-button-svg {
@@ -3346,7 +3511,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3346
3511
  [dir=rtl] .sd-tagbox-item_clean-button,
3347
3512
  [style*="direction:rtl"] .sd-tagbox-item_clean-button,
3348
3513
  [style*="direction: rtl"] .sd-tagbox-item_clean-button {
3349
- background: linear-gradient(90deg, var(--primary, #19b394) 53.12%, rgba(25, 179, 148, 0) 100%);
3514
+ background: linear-gradient(90deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
3350
3515
  }
3351
3516
 
3352
3517
  .sd-tagbox.sd-tagbox--empty .sd-tagbox__hint,
@@ -3429,7 +3594,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3429
3594
  .sd-imagepicker__check-icon {
3430
3595
  width: calc(3 * var(--base-unit, 8px));
3431
3596
  height: calc(3 * var(--base-unit, 8px));
3432
- fill: var(--primary, #19b394);
3597
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3433
3598
  }
3434
3599
 
3435
3600
  .sd-imagepicker__item--checked .sd-imagepicker__check-decorator {
@@ -3509,11 +3674,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3509
3674
  .sd-image__no-image {
3510
3675
  background: var(--background-dim-light, #f9f9f9);
3511
3676
  min-width: calc(5 * var(--base-unit, 8px));
3512
- min-height: calc(5 * var(--base-unit, 8px));
3677
+ min-height: calc(27.5 * var(--base-unit, 8px));
3513
3678
  width: 100%;
3514
3679
  height: 100%;
3515
- position: absolute;
3516
- inset-block-start: 0;
3680
+ position: relative;
3517
3681
  display: flex;
3518
3682
  align-items: center;
3519
3683
  justify-content: center;
@@ -3541,7 +3705,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3541
3705
  .sd-progress__bar {
3542
3706
  position: relative;
3543
3707
  height: 100%;
3544
- background-color: var(--primary, #19b394);
3708
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3545
3709
  overflow: hidden;
3546
3710
  }
3547
3711
 
@@ -3570,7 +3734,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3570
3734
  width: max-content;
3571
3735
  position: relative;
3572
3736
  padding: calc(0.5 * var(--base-unit, 8px));
3573
- background: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
3737
+ background: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
3574
3738
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
3575
3739
  border-radius: calc(12.5 * var(--base-unit, 8px));
3576
3740
  }
@@ -3578,9 +3742,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3578
3742
  .sd-boolean__thumb,
3579
3743
  .sd-boolean__label {
3580
3744
  display: block;
3745
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3746
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3747
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
3581
3748
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3582
- font-family: var(--font-family, var(--font-family));
3583
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3584
3749
  line-height: calc(3 * var(--base-unit, 8px));
3585
3750
  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
3586
3751
  }
@@ -3599,7 +3764,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3599
3764
  }
3600
3765
 
3601
3766
  .sd-boolean__control:focus ~ .sd-boolean__switch {
3602
- box-shadow: inset 0 0 0 2px var(--primary, #19b394);
3767
+ box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3603
3768
  }
3604
3769
 
3605
3770
  .sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
@@ -3617,7 +3782,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3617
3782
  transition-duration: 0.2s;
3618
3783
  transition-property: margin-left, transform;
3619
3784
  transition-timing-function: linear;
3620
- color: var(--primary, #19b394);
3785
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3621
3786
  font-weight: 600;
3622
3787
  margin-left: 0%;
3623
3788
  transform: translateX(0);
@@ -3643,13 +3808,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3643
3808
  }
3644
3809
 
3645
3810
  .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
3646
- background-color: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
3811
+ background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
3647
3812
  border-radius: calc(12.5 * var(--base-unit, 8px));
3648
3813
  }
3649
3814
 
3650
3815
  .svc-question__content .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),
3651
3816
  .svc-question__content .sd-boolean--checked .sd-boolean__label:nth-of-type(2) {
3652
- color: var(--primary, #19b394);
3817
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3653
3818
  font-weight: 600;
3654
3819
  background: var(--background, #fff);
3655
3820
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
@@ -3848,7 +4013,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3848
4013
 
3849
4014
  .sv-tab-item.sv-tab-item--pressed {
3850
4015
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3851
- box-shadow: inset 0px -2px 0px var(--primary, #19b394);
4016
+ box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
3852
4017
  }
3853
4018
 
3854
4019
  .sv-tab-item__title {
@@ -3907,9 +4072,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3907
4072
  }
3908
4073
 
3909
4074
  .sd-file__decorator--drag {
3910
- border: 1px solid var(--primary, #19b394);
3911
- box-shadow: inset 0 0 0 1px var(--primary, #19b394);
3912
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
4075
+ border: 1px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
4076
+ box-shadow: inset 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
4077
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3913
4078
  z-index: 1;
3914
4079
  }
3915
4080
 
@@ -3929,7 +4094,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3929
4094
  display: block;
3930
4095
  margin-top: calc(1 * var(--base-unit, 8px));
3931
4096
  font-weight: 600;
3932
- color: var(--primary, #19b394);
4097
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3933
4098
  cursor: pointer;
3934
4099
  }
3935
4100
 
@@ -4090,10 +4255,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4090
4255
  }
4091
4256
 
4092
4257
  .sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn.sd-file__choose-btn--icon use {
4093
- fill: var(--primary, #19b394);
4258
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4094
4259
  }
4095
4260
  .sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn:not(.sd-file__choose-btn--icon) {
4096
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
4261
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4097
4262
  }
4098
4263
 
4099
4264
  .sd-file__drag-area {
@@ -4137,37 +4302,38 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4137
4302
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
4138
4303
  line-height: calc(3 * var(--base-unit, 8px));
4139
4304
  text-align: center;
4140
- color: var(--primary, #19b394);
4305
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4141
4306
  border: 2px solid transparent;
4142
4307
  outline: none;
4143
4308
  }
4144
4309
 
4145
- .sd-btn:not(:disabled):hover {
4146
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
4310
+ .sd-btn:hover {
4311
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
4147
4312
  }
4148
4313
 
4149
- .sd-btn:not(:disabled):focus {
4150
- box-shadow: 0 0 0 2px var(--primary, #19b394);
4314
+ .sd-btn:focus {
4315
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
4151
4316
  }
4152
4317
 
4153
4318
  .sd-btn:disabled {
4154
4319
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4155
4320
  opacity: 0.25;
4156
- cursor: default;
4321
+ pointer-events: none;
4157
4322
  }
4158
4323
 
4159
4324
  .sd-btn--action {
4160
- background-color: var(--primary, #19b394);
4325
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4161
4326
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4162
4327
  }
4163
4328
 
4164
- .sd-btn--action:not(:disabled):hover {
4329
+ .sd-btn--action:hover {
4165
4330
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4166
4331
  background-color: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
4167
4332
  }
4168
4333
 
4169
4334
  .sd-btn--action:disabled {
4170
4335
  color: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25)));
4336
+ pointer-events: none;
4171
4337
  }
4172
4338
 
4173
4339
  .sd-body {
@@ -4250,7 +4416,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4250
4416
  }
4251
4417
 
4252
4418
  .sd-multipletext__item-container.sd-input:focus-within {
4253
- box-shadow: inset 0 0 0 2px var(--primary, #19b394);
4419
+ box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
4254
4420
  }
4255
4421
 
4256
4422
  .sd-multipletext__item-container {
@@ -4313,7 +4479,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4313
4479
  border: none;
4314
4480
  background: transparent;
4315
4481
  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
4316
- color: var(--primary, #19b394);
4482
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4317
4483
  border-radius: calc(12.5 * var(--base-unit, 8px));
4318
4484
  font-weight: 600;
4319
4485
  font-family: var(--font-family, var(--font-family));
@@ -4350,7 +4516,7 @@ svg.sd-action--icon {
4350
4516
  .sd-action:not(.sd-action--pressed):hover,
4351
4517
  .sd-action:not(.sd-action--pressed):focus {
4352
4518
  outline: none;
4353
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
4519
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4354
4520
  cursor: pointer;
4355
4521
  opacity: 1;
4356
4522
  }
@@ -4409,7 +4575,7 @@ svg.sd-action--icon {
4409
4575
 
4410
4576
  .sd-context-btn:hover use,
4411
4577
  .sd-context-btn:focus use {
4412
- fill: var(--primary, #19b394);
4578
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4413
4579
  }
4414
4580
  .sd-context-btn:hover.sd-context-btn--negative use,
4415
4581
  .sd-context-btn:focus.sd-context-btn--negative use {
@@ -4481,7 +4647,7 @@ svg.sd-action--icon {
4481
4647
 
4482
4648
  .sd-progress-buttons__list .sd-progress-buttons__list-element--current,
4483
4649
  .sd-progress-buttons__list .sd-progress-buttons__list-element--passed {
4484
- border-top: 2px solid var(--primary, #19b394);
4650
+ border-top: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
4485
4651
  }
4486
4652
 
4487
4653
  .sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title {
@@ -4490,7 +4656,7 @@ svg.sd-action--icon {
4490
4656
 
4491
4657
  .sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,
4492
4658
  .sd-progress-buttons__list-element--current .sd-progress-buttons__page-description {
4493
- color: var(--primary, #19b394);
4659
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4494
4660
  }
4495
4661
 
4496
4662
  .sd-progress-buttons__page-title {
@@ -4517,7 +4683,7 @@ svg.sd-action--icon {
4517
4683
  min-width: calc(32 * var(--base-unit, 8px));
4518
4684
  }
4519
4685
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
4520
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
4686
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4521
4687
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4522
4688
  font-weight: 400;
4523
4689
  }
@@ -4597,7 +4763,7 @@ svg.sd-action--icon {
4597
4763
  height: 100%;
4598
4764
  width: 100%;
4599
4765
  transform: rotate(-90deg);
4600
- stroke: var(--primary, #19b394);
4766
+ stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
4601
4767
  stroke-dashoffset: 0;
4602
4768
  fill: none;
4603
4769
  stroke-width: 4px;
@@ -4617,13 +4783,13 @@ svg.sd-action--icon {
4617
4783
  top: 50%;
4618
4784
  transform: translate(-50%, -50%);
4619
4785
  padding: calc(1 * var(--base-unit, 8px));
4620
- color: var(--primary, #19b394);
4786
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4621
4787
  font-weight: 700;
4622
4788
  font-size: calc(var(--sd-timer-size) / 144 * 32);
4623
4789
  }
4624
4790
 
4625
4791
  .sd-timer__text--major {
4626
- color: var(--primary, #19b394);
4792
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4627
4793
  font-weight: 700;
4628
4794
  font-size: calc(var(--sd-timer-size) / 144 * 32);
4629
4795
  }