@citolab/qti-components 6.9.1-beta.56 → 6.9.1-beta.57

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 (7) hide show
  1. package/dist/custom-elements.json +155 -155
  2. package/dist/item.css +355 -272
  3. package/dist/qti-components/index.d.ts +2 -2
  4. package/dist/qti-item/index.d.ts +1 -1
  5. package/dist/qti-loader/index.d.ts +1 -1
  6. package/dist/{qti-simple-choice-CFhbe77e.d.ts → qti-simple-choice-BgkvFwBr.d.ts} +1 -1
  7. package/package.json +2 -1
package/dist/item.css CHANGED
@@ -1,80 +1,36 @@
1
1
  @layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
2
2
 
3
- /*
4
- Base variables on PNP
5
- https://www.imsglobal.org/spec/qti/v3p0/impl#h.x51afjl5r8gl
6
- font-face
7
- https://www.imsglobal.org/spec/qti/v3p0/impl#h.r3hufj74r1do
8
- line-spacing
9
- https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
10
- */
11
-
12
3
  :root,
13
4
  :host {
14
- /* Primary colors */
15
- --qti-primary-light: #ffeaea;
16
- --qti-primary: #f86d70;
17
- --qti-primary-dark: #a1616a;
18
-
19
- /* Secondary colors */
20
- --qti-secondary-light: #bed4ff;
21
- --qti-secondary: #6daef8;
22
- --qti-secondary-dark: #3a449d;
5
+ /* active colors */
6
+ --qti-bg-active: #ffecec; /* lighter shade of active */
7
+ --qti-border-active: #f86d70;
23
8
 
24
9
  /* Background colors */
25
- --qti-bg-gray-50: #f9fafb;
26
- --qti-bg-gray-100: #f3f4f6;
27
10
  --qti-bg-white: white;
28
- --qti-bg-primary: var(--qti-primary);
29
-
30
- /* Text colors */
31
- --qti-text-gray-500: #45484f;
32
- --qti-text-white: white;
11
+ --qti-hover-bg: #f9fafb;
12
+
13
+ /* Disabled colors */
14
+ --qti-disabled-bg: #f3f4f6;
15
+ --qti-disabled-color: #45484f;
33
16
 
34
17
  /* Border properties */
35
- --qti-border-thickness: 1.5px;
18
+ --qti-border-thickness: 2px;
36
19
  --qti-border-style: solid;
37
- --qti-border-color-gray: #c6cad0; /* Corresponding to border-gray-400 */
38
- --qti-border-radius-sm: 0.1rem;
39
- --qti-border-radius-md: 0.375rem;
40
- --qti-border-radius-lg: 0.5rem;
41
- --qti-border-radius-full: 9999px;
42
-
43
- /* Padding */
44
- --qti-padding-sm: 0.125rem; /* py-0.5 */
45
- --qti-padding-md: 0.5rem; /* py-2 */
46
- --qti-padding-lg: 0.75rem; /* p-3 */
47
- --qti-padding-xl: 1rem; /* pl-4 */
48
-
49
- /* Form & layout */
50
- --qti-form-size: 1rem;
51
- --qti-gap-size: 0.5rem;
20
+ --qti-border-color: #c6cad0;
21
+ --qti-border-radius: 0.3rem;
22
+ --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness) );
52
23
 
53
24
  /* Typography */
54
25
  --qti-font-weight-semibold: 600;
55
- --qti-line-height: 2.5;
56
26
 
57
27
  /* Focus & active states */
58
- --qti-active: blue;
59
- --qti-focus-color: #bddcff7e;
60
28
  --qti-focus-border-width: 5px;
61
-
62
- /* Correct/Incorrect feedback */
63
- --qti-correct: rgb(74 222 128);
64
- --qti-correct-light: rgb(220 252 231);
65
- --qti-incorrect: rgb(248 113 113);
66
- --qti-incorrect-light: rgb(254 226 226);
67
-
68
- /* ---- */
69
- --box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
70
- --box-shadow-lg: 0 0.5rem 1rem rgb(0 0 0 / 15%);
71
- --table-border-color: var(--qti-border-color-gray);
72
- --foreground: var(--qti-bg-gray-50);
73
- --well-bg: var(--qti-bg-gray-50);
74
- --well-border: var(--qti-border-color-gray);
75
- --well-box-shadow: var(--box-shadow);
29
+ --qti-focus-color: #bddcff7e;
76
30
  }
77
31
 
32
+ /* SVG masks and backgrounds */
33
+
78
34
  .chevron {
79
35
  background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
80
36
  no-repeat center right 6px;
@@ -98,94 +54,121 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
98
54
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
99
55
  }
100
56
 
57
+ /*
58
+ Following are classes that can be applied to elements and element states, so they are not used directly
59
+ The @apply directive is used to apply these classes to elements
60
+ */
61
+
62
+ /* apply .border to an element */
63
+
101
64
  .bordered {
102
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
65
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
103
66
  outline: none;
104
67
  }
105
68
 
106
- .borderinvisible {
107
- border-color: transparent;
108
- }
69
+ /* apply .form rules for checkbox and radiobutton */
109
70
 
110
71
  .form {
72
+ --qti-form-size: 1rem;
111
73
 
112
74
  display: grid;
113
75
  place-content: center;
114
76
  width: var(--qti-form-size);
115
77
  height: var(--qti-form-size);
116
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
78
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
117
79
  outline: none;
118
80
  }
119
81
 
120
- .p-lg {
121
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
122
- }
82
+ /* apply .button rules for button-like elements, such as drags and buttons */
123
83
 
124
84
  .button {
85
+ --qti-button-padding-vertical: 0.5rem; /* py-2 */
86
+ --qti-button-padding-horizontal: 0.5rem; /* px-2 */
125
87
 
126
- border-radius: var(--qti-border-radius-md);
127
- padding: var(--qti-padding-md) var(--qti-padding-md);
88
+ border-radius: var(--qti-border-radius);
89
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
128
90
  font-weight: var(--qti-font-weight-semibold);
129
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
91
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
130
92
  outline: none;
131
93
  }
132
94
 
95
+ /* apply .select for the select dropdown element */
96
+
133
97
  .select {
98
+ --qti-select-padding-top: 0.5rem;
99
+ --qti-select-padding-right: 1.75rem;
100
+ --qti-select-padding-bottom: 0.5rem;
101
+ --qti-select-padding-left: 0.75rem;
134
102
 
135
- border-radius: var(--qti-border-radius-md);
103
+ border-radius: var(--qti-border-radius);
136
104
  position: relative;
137
105
  -webkit-appearance: none;
138
106
  -moz-appearance: none;
139
107
  appearance: none;
140
- padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray); outline: none; background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
141
- no-repeat center right 6px;
108
+ padding: var(--qti-select-padding-top) var(--qti-select-padding-right) var(--qti-select-padding-bottom) var(--qti-select-padding-left);
109
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
110
+ outline: none;
111
+ background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
112
+ no-repeat center right 6px;
142
113
  }
143
114
 
115
+ /* apply .text for the input text and textarea */
116
+
144
117
  .text {
118
+ --qti-text-padding: 0.75rem; /* Equal padding on all sides */
145
119
 
146
120
  border-radius: 0;
147
121
  cursor: text;
148
- padding: var(--qti-padding-lg); /* Equal padding on all sides */
122
+ padding: var(--qti-text-padding);
149
123
  background: unset;
150
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
124
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
151
125
  outline: none;
152
126
  }
153
127
 
128
+ /* apply .spot for hotspot shapes */
129
+
154
130
  .spot {
155
131
 
156
132
  width: 100%;
157
133
  height: 100%;
158
134
  background-color: transparent;
159
135
  padding: 0;
160
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
136
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
161
137
  outline: none;
162
138
  }
163
139
 
164
- /* qti-select-point-interaction */
140
+ /* apply .point for circular small hotspots */
165
141
 
166
142
  .point {
143
+ --qti-point-size: 1.5rem;
167
144
 
168
- border-radius: var(--qti-border-radius-full);
169
- width: 1.5rem; /* w-6 */
170
- height: 1.5rem;
145
+ border-radius: 100%;
146
+ width: var(--qti-point-size); /* w-6 */
147
+ height: var(--qti-point-size);
171
148
  background-color: transparent;
172
149
  padding: 0;
173
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
150
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
174
151
  outline: none;
175
152
  }
176
153
 
154
+ /* apply .drag for draggable elements */
155
+
177
156
  .drag {
157
+ --qti-drag-padding-top: 0.5rem;
158
+ --qti-drag-padding-right: 1rem;
159
+ --qti-drag-padding-bottom: 0.5rem;
160
+ --qti-drag-padding-left: 1rem;
178
161
 
179
162
  transition:
180
163
  transform 200ms ease-out,
181
164
  box-shadow 200ms ease-out,
182
165
  rotate 200ms ease-out;
183
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
184
- border-radius: var(--qti-border-radius-md);
166
+ padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left); /* Padding shorthand */
167
+ border-radius: var(--qti-border-radius);
185
168
  cursor: grab;
186
- background-color: white;
169
+ background-color: var(--qti-bg-white);
187
170
  font-weight: var(--qti-font-weight-semibold);
188
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
171
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
189
172
  outline: none;
190
173
  background-image: radial-gradient(
191
174
  circle at center,
@@ -199,6 +182,8 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
199
182
  background-size: 14px 8px;
200
183
  }
201
184
 
185
+ /* apply .dragging for the dragging state of a draggable element */
186
+
202
187
  .dragging {
203
188
  pointer-events: none;
204
189
  rotate: -2deg;
@@ -207,45 +192,68 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
207
192
  0 4px 8px rgb(0 0 0 / 10%);
208
193
  }
209
194
 
195
+ /* apply .drop for an element where you can drop the draggable */
196
+
210
197
  .drop {
211
198
 
212
199
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
213
200
  center no-repeat;
214
- border-radius: var(--qti-border-radius-lg);
201
+ border-radius: var(--qti-drop-border-radius);
215
202
  position: relative;
216
203
  background-color: var(--qti-bg-white);
217
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
204
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
218
205
  outline: none;
219
206
  }
220
207
 
208
+ /* apply .dropping for an indicator where you can drop the draggable */
209
+
221
210
  .dropping {
222
- background-color: var(--qti-primary-light);
211
+ background-color: var(--qti-bg-active);
223
212
  }
224
213
 
214
+ /* apply .order for a small circular button */
215
+
225
216
  .order {
226
- background-color: var(--qti-bg-primary);
227
- border-radius: var(--qti-border-radius-full);
228
- width: 1.5rem; /* w-6 */
229
- height: 1.5rem;
230
- color: var(--qti-text-white);
217
+ --qti-order-size: 1.5rem;
218
+
219
+ display: grid;
220
+ place-content: center;
221
+
222
+ /* background-color: var(--qti-bg-active); */
223
+ border-radius: 100%;
224
+ width: var(--qti-order-size); /* w-6 */
225
+ height: var(--qti-order-size);
226
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
227
+ outline: none;
231
228
  }
232
229
 
230
+ /* apply .check-size for radio and checkbox size */
231
+
233
232
  .check-size {
234
233
  width: calc(var(--qti-form-size) - 6px);
235
234
  height: calc(var(--qti-form-size) - 6px);
236
235
  }
237
236
 
237
+ /* apply .check for checkbox */
238
+
238
239
  .check {
240
+ --qti-check-padding-vertical: 0.5rem;
241
+ --qti-check-padding-horizontal: 0.5rem;
242
+
239
243
  gap: 0.5rem;
240
- border-radius: var(--qti-border-radius-md);
241
- padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
244
+ border-radius: var(--qti-border-radius);
245
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal); /* Padding shorthand */
242
246
  outline: none;
243
247
  cursor: pointer;
244
248
  }
245
249
 
250
+ /* apply .check-radio for outer circle of the radio buttons */
251
+
246
252
  .check-radio {
247
253
 
248
- border-radius: var(--qti-border-radius-full);
254
+ border-radius: 100%;
255
+
256
+ --qti-form-size: 1rem;
249
257
 
250
258
  display: grid;
251
259
 
@@ -255,65 +263,78 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
255
263
 
256
264
  height: var(--qti-form-size);
257
265
 
258
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
266
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
259
267
 
260
268
  outline: none;
261
269
  }
262
270
 
271
+ /* apply .check-radio-checked for the inner checked radio */
272
+
263
273
  .check-radio-checked {
264
- background-color: var(--qti-bg-primary);
265
- border-radius: var(--qti-border-radius-full);
274
+ background-color: var(--qti-border-active);
275
+ border-radius: 100%;
266
276
  }
267
277
 
278
+ /* apply .check-checkbox for outer square of the checkbox */
279
+
268
280
  .check-checkbox {
269
281
 
270
282
  display: flex;
271
283
  place-items: center;
272
- border-radius: var(--qti-border-radius-sm);
284
+ border-radius: var(--qti-border-radius);
285
+ --qti-form-size: 1rem;
273
286
  display: grid;
274
287
  place-content: center;
275
288
  width: var(--qti-form-size);
276
289
  height: var(--qti-form-size);
277
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
290
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
278
291
  outline: none;
279
292
  }
280
293
 
281
- .check-checkbox-checked {
294
+ /* apply .check-checkbox-checked for the inner checkmark */
282
295
 
283
- background-color: var(--qti-bg-primary);
284
- -webkit-mask-image: var(--check-mask);
285
- mask-image: var(--check-mask); /* check-mask */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
296
+ .check-checkbox-checked {
297
+ background-color: var(--qti-border-active);
298
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
299
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
286
300
  }
287
301
 
302
+ /* apply .hov for hover state */
303
+
288
304
  .hov {
289
- background-color: var(--qti-bg-gray-50);
305
+ background-color: var(--qti-hover-bg);
290
306
  }
291
307
 
308
+ /* apply .foc for focus state */
309
+
292
310
  .foc {
293
311
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
294
312
  }
295
313
 
296
- .act {
297
- border-color: var(--qti-bg-primary); /* border-primary */
298
- background-color: var(--qti-primary-light);
314
+ /* apply .act for active state */
299
315
 
316
+ .act {
317
+ border-color: var(--qti-border-active); /* border-active */
318
+ background-color: var(--qti-bg-active);
300
319
  }
301
320
 
321
+ /* apply .rdo for readonly state */
322
+
302
323
  .rdo {
303
324
  cursor: pointer;
304
- background-color: white;
325
+ background-color: var(--qti-bg-white);
305
326
  outline: 0;
306
327
  border: none;
307
328
  }
308
329
 
330
+ /* apply .dis for disabled state */
331
+
309
332
  .dis {
310
333
  cursor: not-allowed;
311
334
  background-color: var(--qti-bg-gray-100);
312
335
  color: var(--qti-text-gray-500);
313
- border-color: var(--qti-border-color-gray);
336
+ border-color: var(--qti-border-color);
314
337
  outline: 4px solid var(--qti-bg-gray-100);
315
-
316
- /* outline-color: var(--qti-text-gray-50); */
317
338
  }
318
339
 
319
340
  /* base */
@@ -1938,7 +1959,7 @@ qti-response-declaration {
1938
1959
  & qti-simple-choice {
1939
1960
 
1940
1961
  &:hover {
1941
- background-color: var(--qti-bg-gray-50);
1962
+ background-color: var(--qti-hover-bg);
1942
1963
  }
1943
1964
 
1944
1965
  &:focus {
@@ -1949,16 +1970,16 @@ qti-response-declaration {
1949
1970
  display: none;
1950
1971
  }
1951
1972
 
1952
- &:state(checked),
1973
+ &:state(--checked),
1953
1974
  &[aria-checked='true'] {
1954
- border-color: var(--qti-bg-primary);
1955
- background-color: var(--qti-primary-light);
1975
+ border-color: var(--qti-border-active);
1976
+ background-color: var(--qti-bg-active);
1956
1977
  }
1957
1978
 
1958
1979
  &:state(readonly),
1959
1980
  &[aria-readonly='true'] {
1960
1981
  cursor: pointer;
1961
- background-color: white;
1982
+ background-color: var(--qti-bg-white);
1962
1983
  outline: 0;
1963
1984
  border: none;
1964
1985
  }
@@ -1968,17 +1989,21 @@ qti-response-declaration {
1968
1989
  cursor: not-allowed;
1969
1990
  background-color: var(--qti-bg-gray-100);
1970
1991
  color: var(--qti-text-gray-500);
1971
- border-color: var(--qti-border-color-gray);
1992
+ border-color: var(--qti-border-color);
1972
1993
  outline: 4px solid var(--qti-bg-gray-100);
1973
1994
  }
1974
1995
 
1975
- border-radius: var(--qti-border-radius-md);
1996
+ --qti-button-padding-vertical: 0.5rem;
1997
+
1998
+ --qti-button-padding-horizontal: 0.5rem;
1999
+
2000
+ border-radius: var(--qti-border-radius);
1976
2001
 
1977
- padding: var(--qti-padding-md) var(--qti-padding-md);
2002
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
1978
2003
 
1979
2004
  font-weight: var(--qti-font-weight-semibold);
1980
2005
 
1981
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2006
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1982
2007
 
1983
2008
  outline: none
1984
2009
  }
@@ -1987,24 +2012,24 @@ qti-response-declaration {
1987
2012
  &:not(.qti-input-control-hidden) {
1988
2013
  & qti-simple-choice {
1989
2014
 
1990
- &:not([aria-disabled='true'], [aria-readonly='true'], :state(checked)):hover {
1991
- background-color: var(--qti-bg-gray-50);
2015
+ &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
2016
+ background-color: var(--qti-hover-bg);
1992
2017
  }
1993
2018
 
1994
2019
  &:focus {
1995
2020
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1996
2021
  }
1997
2022
 
1998
- &:state(checked),
2023
+ &:state(--checked),
1999
2024
  &[aria-checked='true'] {
2000
- border-color: var(--qti-bg-primary);
2001
- background-color: var(--qti-primary-light);
2025
+ border-color: var(--qti-border-active);
2026
+ background-color: var(--qti-bg-active);
2002
2027
  }
2003
2028
 
2004
2029
  &:state(readonly),
2005
2030
  &[aria-readonly='true'] {
2006
2031
  cursor: pointer;
2007
- background-color: white;
2032
+ background-color: var(--qti-bg-white);
2008
2033
  outline: 0;
2009
2034
  border: none;
2010
2035
  }
@@ -2014,7 +2039,7 @@ qti-response-declaration {
2014
2039
  cursor: not-allowed;
2015
2040
  background-color: var(--qti-bg-gray-100);
2016
2041
  color: var(--qti-text-gray-500);
2017
- border-color: var(--qti-border-color-gray);
2042
+ border-color: var(--qti-border-color);
2018
2043
  outline: 4px solid var(--qti-bg-gray-100);
2019
2044
  }
2020
2045
 
@@ -2024,45 +2049,49 @@ qti-response-declaration {
2024
2049
  }
2025
2050
 
2026
2051
  &:state(radio)::part(ch) {
2027
- border-radius: var(--qti-border-radius-full);
2052
+ border-radius: 100%;
2053
+ --qti-form-size: 1rem;
2028
2054
  display: grid;
2029
2055
  place-content: center;
2030
2056
  width: var(--qti-form-size);
2031
2057
  height: var(--qti-form-size);
2032
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2058
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2033
2059
  outline: none;
2034
2060
  }
2035
2061
 
2036
2062
  &:state(radio):state(--checked)::part(cha) {
2037
- background-color: var(--qti-bg-primary);
2038
- border-radius: var(--qti-border-radius-full);
2063
+ background-color: var(--qti-border-active);
2064
+ border-radius: 100%;
2039
2065
  }
2040
2066
 
2041
2067
  &:state(checkbox)::part(ch) {
2042
2068
  display: flex;
2043
2069
  place-items: center;
2044
- border-radius: var(--qti-border-radius-sm);
2070
+ border-radius: var(--qti-border-radius);
2071
+ --qti-form-size: 1rem;
2045
2072
  display: grid;
2046
2073
  place-content: center;
2047
2074
  width: var(--qti-form-size);
2048
2075
  height: var(--qti-form-size);
2049
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2076
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2050
2077
  outline: none;
2051
2078
  }
2052
2079
 
2053
2080
  &:state(checkbox):state(--checked)::part(cha) {
2054
- background-color: var(--qti-bg-primary);
2055
- -webkit-mask-image: var(--check-mask);
2056
- mask-image: var(--check-mask);
2081
+ background-color: var(--qti-border-active);
2057
2082
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
2058
2083
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
2059
2084
  }
2060
2085
 
2086
+ --qti-check-padding-vertical: 0.5rem;
2087
+
2088
+ --qti-check-padding-horizontal: 0.5rem;
2089
+
2061
2090
  gap: 0.5rem;
2062
2091
 
2063
- border-radius: var(--qti-border-radius-md);
2092
+ border-radius: var(--qti-border-radius);
2064
2093
 
2065
- padding: var(--qti-padding-md) var(--qti-padding-md);
2094
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
2066
2095
 
2067
2096
  outline: none;
2068
2097
 
@@ -2091,7 +2120,7 @@ qti-response-declaration {
2091
2120
 
2092
2121
  qti-text-entry-interaction {
2093
2122
  &:hover {
2094
- background-color: var(--qti-bg-gray-50);
2123
+ background-color: var(--qti-hover-bg);
2095
2124
  }
2096
2125
 
2097
2126
  &:focus-within {
@@ -2099,27 +2128,29 @@ qti-response-declaration {
2099
2128
  }
2100
2129
 
2101
2130
  &::part(input) {
2131
+ --qti-text-padding: 0.75rem;
2102
2132
  border-radius: 0;
2103
2133
  cursor: text;
2104
- padding: var(--qti-padding-lg);
2134
+ padding: var(--qti-text-padding);
2105
2135
  background: unset;
2106
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2136
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2107
2137
  outline: none;
2108
2138
  }
2109
2139
  }
2110
2140
 
2111
2141
  qti-extended-text-interaction {
2112
2142
  &::part(textarea) {
2143
+ --qti-text-padding: 0.75rem;
2113
2144
  border-radius: 0;
2114
2145
  cursor: text;
2115
- padding: var(--qti-padding-lg);
2146
+ padding: var(--qti-text-padding);
2116
2147
  background: unset;
2117
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2148
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2118
2149
  outline: none;
2119
2150
  }
2120
2151
 
2121
2152
  &:hover {
2122
- background-color: var(--qti-bg-gray-50);
2153
+ background-color: var(--qti-hover-bg);
2123
2154
  }
2124
2155
 
2125
2156
  &:focus-within {
@@ -2138,28 +2169,36 @@ qti-response-declaration {
2138
2169
  }
2139
2170
 
2140
2171
  &:hover {
2141
- background-color: var(--qti-bg-gray-50);
2172
+ background-color: var(--qti-hover-bg);
2142
2173
  }
2143
2174
 
2144
2175
  &:focus {
2145
2176
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2146
2177
  }
2147
2178
 
2179
+ --qti-drag-padding-top: 0.5rem;
2180
+
2181
+ --qti-drag-padding-right: 1rem;
2182
+
2183
+ --qti-drag-padding-bottom: 0.5rem;
2184
+
2185
+ --qti-drag-padding-left: 1rem;
2186
+
2148
2187
  transition: transform 200ms ease-out,
2149
2188
  box-shadow 200ms ease-out,
2150
2189
  rotate 200ms ease-out;
2151
2190
 
2152
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2191
+ padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2153
2192
 
2154
- border-radius: var(--qti-border-radius-md);
2193
+ border-radius: var(--qti-border-radius);
2155
2194
 
2156
2195
  cursor: grab;
2157
2196
 
2158
- background-color: white;
2197
+ background-color: var(--qti-bg-white);
2159
2198
 
2160
2199
  font-weight: var(--qti-font-weight-semibold);
2161
2200
 
2162
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2201
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2163
2202
 
2164
2203
  outline: none;
2165
2204
 
@@ -2181,20 +2220,20 @@ qti-response-declaration {
2181
2220
  & qti-gap {
2182
2221
 
2183
2222
  &[enabled] {
2184
- background-color: var(--qti-primary-light);
2223
+ background-color: var(--qti-bg-active);
2185
2224
  }
2186
2225
 
2187
2226
  &[disabled] {
2188
2227
  cursor: not-allowed;
2189
2228
  background-color: var(--qti-bg-gray-100);
2190
2229
  color: var(--qti-text-gray-500);
2191
- border-color: var(--qti-border-color-gray);
2230
+ border-color: var(--qti-border-color);
2192
2231
  outline: 4px solid var(--qti-bg-gray-100);
2193
2232
  }
2194
2233
 
2195
2234
  &[active] {
2196
- border-color: var(--qti-bg-primary);
2197
- background-color: var(--qti-primary-light);
2235
+ border-color: var(--qti-border-active);
2236
+ background-color: var(--qti-bg-active);
2198
2237
  }
2199
2238
 
2200
2239
  display: inline-flex;
@@ -2219,13 +2258,13 @@ qti-response-declaration {
2219
2258
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
2220
2259
  center no-repeat;
2221
2260
 
2222
- border-radius: var(--qti-border-radius-lg);
2261
+ border-radius: var(--qti-drop-border-radius);
2223
2262
 
2224
2263
  position: relative;
2225
2264
 
2226
2265
  background-color: var(--qti-bg-white);
2227
2266
 
2228
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2267
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2229
2268
 
2230
2269
  outline: none
2231
2270
  }
@@ -2236,7 +2275,7 @@ qti-response-declaration {
2236
2275
  &[shape='circle'] {
2237
2276
 
2238
2277
  &:hover {
2239
- background-color: var(--qti-bg-gray-50);
2278
+ background-color: var(--qti-hover-bg);
2240
2279
  }
2241
2280
 
2242
2281
  &:focus {
@@ -2244,13 +2283,13 @@ qti-response-declaration {
2244
2283
  }
2245
2284
 
2246
2285
  &[aria-checked='true'] {
2247
- border-color: var(--qti-bg-primary);
2248
- background-color: var(--qti-primary-light);
2286
+ border-color: var(--qti-border-active);
2287
+ background-color: var(--qti-bg-active);
2249
2288
  }
2250
2289
 
2251
2290
  &[aria-readonly='true'] {
2252
2291
  cursor: pointer;
2253
- background-color: white;
2292
+ background-color: var(--qti-bg-white);
2254
2293
  outline: 0;
2255
2294
  border: none;
2256
2295
  }
@@ -2259,7 +2298,7 @@ qti-response-declaration {
2259
2298
  cursor: not-allowed;
2260
2299
  background-color: var(--qti-bg-gray-100);
2261
2300
  color: var(--qti-text-gray-500);
2262
- border-color: var(--qti-border-color-gray);
2301
+ border-color: var(--qti-border-color);
2263
2302
  outline: 4px solid var(--qti-bg-gray-100);
2264
2303
  }
2265
2304
 
@@ -2271,7 +2310,7 @@ qti-response-declaration {
2271
2310
 
2272
2311
  padding: 0;
2273
2312
 
2274
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2313
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2275
2314
 
2276
2315
  outline: none
2277
2316
  }
@@ -2279,7 +2318,7 @@ qti-response-declaration {
2279
2318
  &[shape='rect'] {
2280
2319
 
2281
2320
  &:hover {
2282
- background-color: var(--qti-bg-gray-50);
2321
+ background-color: var(--qti-hover-bg);
2283
2322
  }
2284
2323
 
2285
2324
  &:focus {
@@ -2287,13 +2326,13 @@ qti-response-declaration {
2287
2326
  }
2288
2327
 
2289
2328
  &[aria-checked='true'] {
2290
- border-color: var(--qti-bg-primary);
2291
- background-color: var(--qti-primary-light);
2329
+ border-color: var(--qti-border-active);
2330
+ background-color: var(--qti-bg-active);
2292
2331
  }
2293
2332
 
2294
2333
  &[aria-readonly='true'] {
2295
2334
  cursor: pointer;
2296
- background-color: white;
2335
+ background-color: var(--qti-bg-white);
2297
2336
  outline: 0;
2298
2337
  border: none;
2299
2338
  }
@@ -2302,7 +2341,7 @@ qti-response-declaration {
2302
2341
  cursor: not-allowed;
2303
2342
  background-color: var(--qti-bg-gray-100);
2304
2343
  color: var(--qti-text-gray-500);
2305
- border-color: var(--qti-border-color-gray);
2344
+ border-color: var(--qti-border-color);
2306
2345
  outline: 4px solid var(--qti-bg-gray-100);
2307
2346
  }
2308
2347
 
@@ -2314,7 +2353,7 @@ qti-response-declaration {
2314
2353
 
2315
2354
  padding: 0;
2316
2355
 
2317
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2356
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2318
2357
 
2319
2358
  outline: none
2320
2359
  }
@@ -2333,8 +2372,8 @@ qti-response-declaration {
2333
2372
  transparent 10px
2334
2373
  );
2335
2374
  display: block;
2336
- border-color: var(--qti-bg-primary);
2337
- background-color: var(--qti-primary-light);
2375
+ border-color: var(--qti-border-active);
2376
+ background-color: var(--qti-bg-active);
2338
2377
  }
2339
2378
 
2340
2379
  &[aria-checked='true']::after {
@@ -2350,18 +2389,18 @@ qti-response-declaration {
2350
2389
  var(--qti-primary) 10px
2351
2390
  );
2352
2391
  display: block;
2353
- border-color: var(--qti-bg-primary);
2354
- background-color: var(--qti-primary-light);
2392
+ border-color: var(--qti-border-active);
2393
+ background-color: var(--qti-bg-active);
2355
2394
  }
2356
2395
 
2357
2396
  &[aria-checked='true'] {
2358
- border-color: var(--qti-bg-primary);
2359
- background-color: var(--qti-primary-light);
2397
+ border-color: var(--qti-border-active);
2398
+ background-color: var(--qti-bg-active);
2360
2399
  }
2361
2400
 
2362
2401
  &[aria-readonly='true'] {
2363
2402
  cursor: pointer;
2364
- background-color: white;
2403
+ background-color: var(--qti-bg-white);
2365
2404
  outline: 0;
2366
2405
  border: none;
2367
2406
  }
@@ -2370,7 +2409,7 @@ qti-response-declaration {
2370
2409
  cursor: not-allowed;
2371
2410
  background-color: var(--qti-bg-gray-100);
2372
2411
  color: var(--qti-text-gray-500);
2373
- border-color: var(--qti-border-color-gray);
2412
+ border-color: var(--qti-border-color);
2374
2413
  outline: 4px solid var(--qti-bg-gray-100);
2375
2414
  }
2376
2415
  }
@@ -2385,7 +2424,7 @@ qti-response-declaration {
2385
2424
  align-items: center;
2386
2425
 
2387
2426
  &:hover {
2388
- background-color: var(--qti-bg-gray-50);
2427
+ background-color: var(--qti-hover-bg);
2389
2428
  }
2390
2429
 
2391
2430
  &:focus {
@@ -2398,45 +2437,49 @@ qti-response-declaration {
2398
2437
  }
2399
2438
 
2400
2439
  &:state(radio)::part(ch) {
2401
- border-radius: var(--qti-border-radius-full);
2440
+ border-radius: 100%;
2441
+ --qti-form-size: 1rem;
2402
2442
  display: grid;
2403
2443
  place-content: center;
2404
2444
  width: var(--qti-form-size);
2405
2445
  height: var(--qti-form-size);
2406
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2446
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2407
2447
  outline: none;
2408
2448
  }
2409
2449
 
2410
2450
  &:state(radio):state(--checked)::part(cha) {
2411
- background-color: var(--qti-bg-primary);
2412
- border-radius: var(--qti-border-radius-full);
2451
+ background-color: var(--qti-border-active);
2452
+ border-radius: 100%;
2413
2453
  }
2414
2454
 
2415
2455
  &:state(checkbox)::part(ch) {
2416
2456
  display: flex;
2417
2457
  place-items: center;
2418
- border-radius: var(--qti-border-radius-sm);
2458
+ border-radius: var(--qti-border-radius);
2459
+ --qti-form-size: 1rem;
2419
2460
  display: grid;
2420
2461
  place-content: center;
2421
2462
  width: var(--qti-form-size);
2422
2463
  height: var(--qti-form-size);
2423
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2464
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2424
2465
  outline: none;
2425
2466
  }
2426
2467
 
2427
2468
  &:state(checkbox):state(--checked)::part(cha) {
2428
- background-color: var(--qti-bg-primary);
2429
- -webkit-mask-image: var(--check-mask);
2430
- mask-image: var(--check-mask);
2469
+ background-color: var(--qti-border-active);
2431
2470
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
2432
2471
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
2433
2472
  }
2434
2473
 
2474
+ --qti-check-padding-vertical: 0.5rem;
2475
+
2476
+ --qti-check-padding-horizontal: 0.5rem;
2477
+
2435
2478
  gap: 0.5rem;
2436
2479
 
2437
- border-radius: var(--qti-border-radius-md);
2480
+ border-radius: var(--qti-border-radius);
2438
2481
 
2439
- padding: var(--qti-padding-md) var(--qti-padding-md);
2482
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
2440
2483
 
2441
2484
  outline: none;
2442
2485
 
@@ -2454,7 +2497,7 @@ qti-response-declaration {
2454
2497
  --qti-font-weight-semibold: 400; */
2455
2498
 
2456
2499
  &:hover {
2457
- background-color: var(--qti-bg-gray-50);
2500
+ background-color: var(--qti-hover-bg);
2458
2501
  }
2459
2502
 
2460
2503
  &:focus {
@@ -2467,13 +2510,13 @@ qti-response-declaration {
2467
2510
  }
2468
2511
 
2469
2512
  &:state(--checked) {
2470
- border-color: var(--qti-bg-primary);
2471
- background-color: var(--qti-primary-light);
2513
+ border-color: var(--qti-border-active);
2514
+ background-color: var(--qti-bg-active);
2472
2515
  }
2473
2516
 
2474
2517
  &[aria-readonly='true'] {
2475
2518
  cursor: pointer;
2476
- background-color: white;
2519
+ background-color: var(--qti-bg-white);
2477
2520
  outline: 0;
2478
2521
  border: none;
2479
2522
  }
@@ -2482,17 +2525,21 @@ qti-response-declaration {
2482
2525
  cursor: not-allowed;
2483
2526
  background-color: var(--qti-bg-gray-100);
2484
2527
  color: var(--qti-text-gray-500);
2485
- border-color: var(--qti-border-color-gray);
2528
+ border-color: var(--qti-border-color);
2486
2529
  outline: 4px solid var(--qti-bg-gray-100);
2487
2530
  }
2488
2531
 
2489
- border-radius: var(--qti-border-radius-md);
2532
+ --qti-button-padding-vertical: 0.5rem;
2490
2533
 
2491
- padding: var(--qti-padding-md) var(--qti-padding-md);
2534
+ --qti-button-padding-horizontal: 0.5rem;
2535
+
2536
+ border-radius: var(--qti-border-radius);
2537
+
2538
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2492
2539
 
2493
2540
  font-weight: var(--qti-font-weight-semibold);
2494
2541
 
2495
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2542
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2496
2543
 
2497
2544
  outline: none
2498
2545
  }
@@ -2503,7 +2550,7 @@ qti-response-declaration {
2503
2550
  &.qti-unselected-hidden {
2504
2551
  qti-hottext {
2505
2552
  &:hover {
2506
- background-color: var(--qti-bg-gray-50);
2553
+ background-color: var(--qti-hover-bg);
2507
2554
  }
2508
2555
 
2509
2556
  &:focus {
@@ -2522,7 +2569,7 @@ qti-response-declaration {
2522
2569
 
2523
2570
  &[aria-readonly='true'] {
2524
2571
  cursor: pointer;
2525
- background-color: white;
2572
+ background-color: var(--qti-bg-white);
2526
2573
  outline: 0;
2527
2574
  border: none;
2528
2575
  }
@@ -2531,7 +2578,7 @@ qti-response-declaration {
2531
2578
  cursor: not-allowed;
2532
2579
  background-color: var(--qti-bg-gray-100);
2533
2580
  color: var(--qti-text-gray-500);
2534
- border-color: var(--qti-border-color-gray);
2581
+ border-color: var(--qti-border-color);
2535
2582
  outline: 4px solid var(--qti-bg-gray-100);
2536
2583
  }
2537
2584
  }
@@ -2542,14 +2589,22 @@ qti-response-declaration {
2542
2589
  &::part(select) {
2543
2590
 
2544
2591
  &:hover {
2545
- background-color: var(--qti-bg-gray-50);
2592
+ background-color: var(--qti-hover-bg);
2546
2593
  }
2547
2594
 
2548
2595
  &:focus {
2549
2596
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2550
2597
  }
2551
2598
 
2552
- border-radius: var(--qti-border-radius-md);
2599
+ --qti-select-padding-top: 0.5rem;
2600
+
2601
+ --qti-select-padding-right: 1.75rem;
2602
+
2603
+ --qti-select-padding-bottom: 0.5rem;
2604
+
2605
+ --qti-select-padding-left: 0.75rem;
2606
+
2607
+ border-radius: var(--qti-border-radius);
2553
2608
 
2554
2609
  position: relative;
2555
2610
 
@@ -2559,9 +2614,9 @@ qti-response-declaration {
2559
2614
 
2560
2615
  appearance: none;
2561
2616
 
2562
- padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg);
2617
+ padding: var(--qti-select-padding-top) var(--qti-select-padding-right) var(--qti-select-padding-bottom) var(--qti-select-padding-left);
2563
2618
 
2564
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2619
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2565
2620
 
2566
2621
  outline: none;
2567
2622
 
@@ -2588,28 +2643,36 @@ qti-response-declaration {
2588
2643
  }
2589
2644
 
2590
2645
  &:hover {
2591
- background-color: var(--qti-bg-gray-50);
2646
+ background-color: var(--qti-hover-bg);
2592
2647
  }
2593
2648
 
2594
2649
  &:focus {
2595
2650
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2596
2651
  }
2597
2652
 
2653
+ --qti-drag-padding-top: 0.5rem;
2654
+
2655
+ --qti-drag-padding-right: 1rem;
2656
+
2657
+ --qti-drag-padding-bottom: 0.5rem;
2658
+
2659
+ --qti-drag-padding-left: 1rem;
2660
+
2598
2661
  transition: transform 200ms ease-out,
2599
2662
  box-shadow 200ms ease-out,
2600
2663
  rotate 200ms ease-out;
2601
2664
 
2602
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2665
+ padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2603
2666
 
2604
- border-radius: var(--qti-border-radius-md);
2667
+ border-radius: var(--qti-border-radius);
2605
2668
 
2606
2669
  cursor: grab;
2607
2670
 
2608
- background-color: white;
2671
+ background-color: var(--qti-bg-white);
2609
2672
 
2610
2673
  font-weight: var(--qti-font-weight-semibold);
2611
2674
 
2612
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2675
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2613
2676
 
2614
2677
  outline: none;
2615
2678
 
@@ -2656,7 +2719,7 @@ qti-response-declaration {
2656
2719
 
2657
2720
  &[enabled] {
2658
2721
  &::part(dropslot) {
2659
- background-color: var(--qti-primary-light);
2722
+ background-color: var(--qti-bg-active);
2660
2723
  }
2661
2724
  }
2662
2725
 
@@ -2665,15 +2728,15 @@ qti-response-declaration {
2665
2728
  cursor: not-allowed;
2666
2729
  background-color: var(--qti-bg-gray-100);
2667
2730
  color: var(--qti-text-gray-500);
2668
- border-color: var(--qti-border-color-gray);
2731
+ border-color: var(--qti-border-color);
2669
2732
  outline: 4px solid var(--qti-bg-gray-100);
2670
2733
  }
2671
2734
  }
2672
2735
 
2673
2736
  &[active] {
2674
2737
  &::part(dropslot) {
2675
- border-color: var(--qti-bg-primary);
2676
- background-color: var(--qti-primary-light);
2738
+ border-color: var(--qti-border-active);
2739
+ background-color: var(--qti-bg-active);
2677
2740
  }
2678
2741
  }
2679
2742
 
@@ -2698,10 +2761,10 @@ qti-response-declaration {
2698
2761
  align-items: center;
2699
2762
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
2700
2763
  center no-repeat;
2701
- border-radius: var(--qti-border-radius-lg);
2764
+ border-radius: var(--qti-drop-border-radius);
2702
2765
  position: relative;
2703
2766
  background-color: var(--qti-bg-white);
2704
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2767
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2705
2768
  outline: none;
2706
2769
  }
2707
2770
 
@@ -2716,7 +2779,7 @@ qti-response-declaration {
2716
2779
  }
2717
2780
 
2718
2781
  &:hover {
2719
- background-color: var(--qti-bg-gray-50);
2782
+ background-color: var(--qti-hover-bg);
2720
2783
  }
2721
2784
 
2722
2785
  &:focus {
@@ -2725,21 +2788,29 @@ qti-response-declaration {
2725
2788
 
2726
2789
  flex-basis: fit-content;
2727
2790
 
2791
+ --qti-drag-padding-top: 0.5rem;
2792
+
2793
+ --qti-drag-padding-right: 1rem;
2794
+
2795
+ --qti-drag-padding-bottom: 0.5rem;
2796
+
2797
+ --qti-drag-padding-left: 1rem;
2798
+
2728
2799
  transition: transform 200ms ease-out,
2729
2800
  box-shadow 200ms ease-out,
2730
2801
  rotate 200ms ease-out;
2731
2802
 
2732
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2803
+ padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2733
2804
 
2734
- border-radius: var(--qti-border-radius-md);
2805
+ border-radius: var(--qti-border-radius);
2735
2806
 
2736
2807
  cursor: grab;
2737
2808
 
2738
- background-color: white;
2809
+ background-color: var(--qti-bg-white);
2739
2810
 
2740
2811
  font-weight: var(--qti-font-weight-semibold);
2741
2812
 
2742
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2813
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2743
2814
 
2744
2815
  outline: none;
2745
2816
 
@@ -2773,28 +2844,36 @@ qti-response-declaration {
2773
2844
  }
2774
2845
 
2775
2846
  &:hover {
2776
- background-color: var(--qti-bg-gray-50);
2847
+ background-color: var(--qti-hover-bg);
2777
2848
  }
2778
2849
 
2779
2850
  &:focus {
2780
2851
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2781
2852
  }
2782
2853
 
2854
+ --qti-drag-padding-top: 0.5rem;
2855
+
2856
+ --qti-drag-padding-right: 1rem;
2857
+
2858
+ --qti-drag-padding-bottom: 0.5rem;
2859
+
2860
+ --qti-drag-padding-left: 1rem;
2861
+
2783
2862
  transition: transform 200ms ease-out,
2784
2863
  box-shadow 200ms ease-out,
2785
2864
  rotate 200ms ease-out;
2786
2865
 
2787
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2866
+ padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2788
2867
 
2789
- border-radius: var(--qti-border-radius-md);
2868
+ border-radius: var(--qti-border-radius);
2790
2869
 
2791
2870
  cursor: grab;
2792
2871
 
2793
- background-color: white;
2872
+ background-color: var(--qti-bg-white);
2794
2873
 
2795
2874
  font-weight: var(--qti-font-weight-semibold);
2796
2875
 
2797
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2876
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2798
2877
 
2799
2878
  outline: none;
2800
2879
 
@@ -2834,11 +2913,11 @@ qti-response-declaration {
2834
2913
  &::part(drop-list) {
2835
2914
 
2836
2915
  &[enabled] {
2837
- background-color: var(--qti-primary-light);
2916
+ background-color: var(--qti-bg-active);
2838
2917
  }
2839
2918
 
2840
2919
  &:hover {
2841
- background-color: var(--qti-bg-gray-50);
2920
+ background-color: var(--qti-hover-bg);
2842
2921
  }
2843
2922
 
2844
2923
  &:focus {
@@ -2849,16 +2928,16 @@ qti-response-declaration {
2849
2928
  min-height: 4rem;
2850
2929
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
2851
2930
  center no-repeat;
2852
- border-radius: var(--qti-border-radius-lg);
2931
+ border-radius: var(--qti-drop-border-radius);
2853
2932
  position: relative;
2854
2933
  background-color: var(--qti-bg-white);
2855
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2934
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2856
2935
  outline: none;
2857
2936
  }
2858
2937
 
2859
2938
  &::part(active) {
2860
- border-color: var(--qti-bg-primary);
2861
- background-color: var(--qti-primary-light);
2939
+ border-color: var(--qti-border-active);
2940
+ background-color: var(--qti-bg-active);
2862
2941
  }
2863
2942
  }
2864
2943
 
@@ -2867,7 +2946,7 @@ qti-response-declaration {
2867
2946
  &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
2868
2947
 
2869
2948
  &:hover {
2870
- background-color: var(--qti-bg-gray-50);
2949
+ background-color: var(--qti-hover-bg);
2871
2950
  }
2872
2951
 
2873
2952
  &:focus {
@@ -2881,21 +2960,29 @@ qti-response-declaration {
2881
2960
  0 4px 8px rgb(0 0 0 / 10%);
2882
2961
  }
2883
2962
 
2963
+ --qti-drag-padding-top: 0.5rem;
2964
+
2965
+ --qti-drag-padding-right: 1rem;
2966
+
2967
+ --qti-drag-padding-bottom: 0.5rem;
2968
+
2969
+ --qti-drag-padding-left: 1rem;
2970
+
2884
2971
  transition: transform 200ms ease-out,
2885
2972
  box-shadow 200ms ease-out,
2886
2973
  rotate 200ms ease-out;
2887
2974
 
2888
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2975
+ padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2889
2976
 
2890
- border-radius: var(--qti-border-radius-md);
2977
+ border-radius: var(--qti-border-radius);
2891
2978
 
2892
2979
  cursor: grab;
2893
2980
 
2894
- background-color: white;
2981
+ background-color: var(--qti-bg-white);
2895
2982
 
2896
2983
  font-weight: var(--qti-font-weight-semibold);
2897
2984
 
2898
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2985
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2899
2986
 
2900
2987
  outline: none;
2901
2988
 
@@ -2931,10 +3018,10 @@ qti-response-declaration {
2931
3018
  min-width: 10rem;
2932
3019
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
2933
3020
  center no-repeat;
2934
- border-radius: var(--qti-border-radius-lg);
3021
+ border-radius: var(--qti-drop-border-radius);
2935
3022
  position: relative;
2936
3023
  background-color: var(--qti-bg-white);
2937
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3024
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2938
3025
  outline: none;
2939
3026
  }
2940
3027
 
@@ -2943,8 +3030,8 @@ qti-response-declaration {
2943
3030
  }
2944
3031
 
2945
3032
  &::part(drop-list)[dragging] {
2946
- border-color: var(--qti-bg-primary);
2947
- background-color: var(--qti-primary-light);
3033
+ border-color: var(--qti-border-active);
3034
+ background-color: var(--qti-bg-active);
2948
3035
  }
2949
3036
 
2950
3037
  /* &::part(drop-list) {
@@ -2956,21 +3043,22 @@ qti-response-declaration {
2956
3043
  & qti-hotspot-choice {
2957
3044
 
2958
3045
  &:hover {
2959
- background-color: var(--qti-bg-gray-50);
3046
+ background-color: var(--qti-hover-bg);
2960
3047
  }
2961
3048
 
2962
3049
  &:focus {
2963
3050
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2964
3051
  }
2965
3052
 
3053
+ &:state(--checked),
2966
3054
  &[aria-checked='true'] {
2967
- border-color: var(--qti-bg-primary);
2968
- background-color: var(--qti-primary-light);
3055
+ border-color: var(--qti-border-active);
3056
+ background-color: var(--qti-bg-active);
2969
3057
  }
2970
3058
 
2971
3059
  &[aria-readonly='true'] {
2972
3060
  cursor: pointer;
2973
- background-color: white;
3061
+ background-color: var(--qti-bg-white);
2974
3062
  outline: 0;
2975
3063
  border: none;
2976
3064
  }
@@ -2979,20 +3067,13 @@ qti-response-declaration {
2979
3067
  cursor: not-allowed;
2980
3068
  background-color: var(--qti-bg-gray-100);
2981
3069
  color: var(--qti-text-gray-500);
2982
- border-color: var(--qti-border-color-gray);
3070
+ border-color: var(--qti-border-color);
2983
3071
  outline: 4px solid var(--qti-bg-gray-100);
2984
3072
  }
2985
3073
 
2986
3074
  &[aria-ordervalue] {
2987
-
2988
- display: flex;
2989
- justify-content: center;
2990
- align-items: center;
2991
- background-color: var(--qti-bg-primary);
2992
- border-radius: var(--qti-border-radius-full);
2993
- width: 1.5rem;
2994
- height: 1.5rem;
2995
- color: var(--qti-text-white);
3075
+ display: grid;
3076
+ place-content: center;
2996
3077
  }
2997
3078
 
2998
3079
  &[aria-ordervalue]::after {
@@ -3007,7 +3088,7 @@ qti-response-declaration {
3007
3088
 
3008
3089
  padding: 0;
3009
3090
 
3010
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3091
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3011
3092
 
3012
3093
  outline: none
3013
3094
  }
@@ -3021,7 +3102,7 @@ qti-response-declaration {
3021
3102
  &[shape='circle'] {
3022
3103
 
3023
3104
  &:hover {
3024
- background-color: var(--qti-bg-gray-50);
3105
+ background-color: var(--qti-hover-bg);
3025
3106
  }
3026
3107
 
3027
3108
  &:focus {
@@ -3029,13 +3110,13 @@ qti-response-declaration {
3029
3110
  }
3030
3111
 
3031
3112
  &[aria-checked='true'] {
3032
- border-color: var(--qti-bg-primary);
3033
- background-color: var(--qti-primary-light);
3113
+ border-color: var(--qti-border-active);
3114
+ background-color: var(--qti-bg-active);
3034
3115
  }
3035
3116
 
3036
3117
  &[aria-readonly='true'] {
3037
3118
  cursor: pointer;
3038
- background-color: white;
3119
+ background-color: var(--qti-bg-white);
3039
3120
  outline: 0;
3040
3121
  border: none;
3041
3122
  }
@@ -3044,7 +3125,7 @@ qti-response-declaration {
3044
3125
  cursor: not-allowed;
3045
3126
  background-color: var(--qti-bg-gray-100);
3046
3127
  color: var(--qti-text-gray-500);
3047
- border-color: var(--qti-border-color-gray);
3128
+ border-color: var(--qti-border-color);
3048
3129
  outline: 4px solid var(--qti-bg-gray-100);
3049
3130
  }
3050
3131
 
@@ -3056,7 +3137,7 @@ qti-response-declaration {
3056
3137
 
3057
3138
  padding: 0;
3058
3139
 
3059
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3140
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3060
3141
 
3061
3142
  outline: none
3062
3143
  }
@@ -3064,7 +3145,7 @@ qti-response-declaration {
3064
3145
  &[shape='square'] {
3065
3146
 
3066
3147
  &:hover {
3067
- background-color: var(--qti-bg-gray-50);
3148
+ background-color: var(--qti-hover-bg);
3068
3149
  }
3069
3150
 
3070
3151
  &:focus {
@@ -3072,13 +3153,13 @@ qti-response-declaration {
3072
3153
  }
3073
3154
 
3074
3155
  &[aria-checked='true'] {
3075
- border-color: var(--qti-bg-primary);
3076
- background-color: var(--qti-primary-light);
3156
+ border-color: var(--qti-border-active);
3157
+ background-color: var(--qti-bg-active);
3077
3158
  }
3078
3159
 
3079
3160
  &[aria-readonly='true'] {
3080
3161
  cursor: pointer;
3081
- background-color: white;
3162
+ background-color: var(--qti-bg-white);
3082
3163
  outline: 0;
3083
3164
  border: none;
3084
3165
  }
@@ -3087,7 +3168,7 @@ qti-response-declaration {
3087
3168
  cursor: not-allowed;
3088
3169
  background-color: var(--qti-bg-gray-100);
3089
3170
  color: var(--qti-text-gray-500);
3090
- border-color: var(--qti-border-color-gray);
3171
+ border-color: var(--qti-border-color);
3091
3172
  outline: 4px solid var(--qti-bg-gray-100);
3092
3173
  }
3093
3174
 
@@ -3099,7 +3180,7 @@ qti-response-declaration {
3099
3180
 
3100
3181
  padding: 0;
3101
3182
 
3102
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3183
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3103
3184
 
3104
3185
  outline: none
3105
3186
  }
@@ -3192,24 +3273,26 @@ qti-response-declaration {
3192
3273
  qti-select-point-interaction {
3193
3274
  &::part(point) {
3194
3275
  &:hover {
3195
- background-color: var(--qti-bg-gray-50);
3276
+ background-color: var(--qti-hover-bg);
3196
3277
  }
3197
3278
 
3198
3279
  &:focus {
3199
3280
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3200
3281
  }
3201
3282
 
3202
- border-radius: var(--qti-border-radius-full);
3283
+ --qti-point-size: 1.5rem;
3284
+
3285
+ border-radius: 100%;
3203
3286
 
3204
- width: 1.5rem;
3287
+ width: var(--qti-point-size);
3205
3288
 
3206
- height: 1.5rem;
3289
+ height: var(--qti-point-size);
3207
3290
 
3208
3291
  background-color: transparent;
3209
3292
 
3210
3293
  padding: 0;
3211
3294
 
3212
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3295
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3213
3296
 
3214
3297
  outline: none;
3215
3298
  }