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

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 +373 -325
  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,71 @@
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;
7
+ --qti-border-active: #f86d70;
23
8
 
24
9
  /* Background colors */
25
- --qti-bg-gray-50: #f9fafb;
26
- --qti-bg-gray-100: #f3f4f6;
27
- --qti-bg-white: white;
28
- --qti-bg-primary: var(--qti-primary);
10
+ --qti-bg: white;
11
+ --qti-hover-bg: #f9fafb;
29
12
 
30
- /* Text colors */
31
- --qti-text-gray-500: #45484f;
32
- --qti-text-white: white;
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;
29
+ --qti-focus-color: #bddcff7e;
30
+
31
+ /* Class-specific variables */
32
+
33
+ /* Form elements */
34
+ --qti-form-size: 1rem;
35
+
36
+ /* Point elements */
37
+ --qti-point-size: 2rem;
38
+
39
+ /* Order buttons */
40
+ --qti-order-size: 2rem;
61
41
 
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);
42
+ /* Generic padding for all elements */
43
+ --qti-padding-vertical: 0.5rem; /* py-2 */
44
+ --qti-padding-horizontal: 0.5rem; /* px-2 */
67
45
 
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);
46
+ /* Button elements */
47
+ --qti-button-padding-vertical: var(--qti-padding-vertical);
48
+ --qti-button-padding-horizontal: var(--qti-padding-horizontal);
49
+
50
+ /* Select dropdown */
51
+ --qti-select-padding-vertical: var(--qti-padding-vertical);
52
+ --qti-select-padding-horizontal: var(--qti-padding-horizontal);
53
+
54
+ /* Text inputs */
55
+ --qti-text-padding-vertical: var(--qti-padding-vertical);
56
+ --qti-text-padding-horizontal: var(--qti-padding-horizontal);
57
+
58
+ /* Draggable elements */
59
+ --qti-drag-padding-vertical: var(--qti-padding-vertical);
60
+ --qti-drag-padding-horizontal: var(--qti-padding-horizontal);
61
+
62
+ /* Checkbox elements */
63
+ --qti-check-padding-vertical: var(--qti-padding-vertical);
64
+ --qti-check-padding-horizontal: var(--qti-padding-horizontal);
76
65
  }
77
66
 
67
+ /* SVG masks and backgrounds */
68
+
78
69
  .chevron {
79
70
  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
71
  no-repeat center right 6px;
@@ -98,14 +89,19 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
98
89
  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
90
  }
100
91
 
92
+ /*
93
+ Following are classes that can be applied to elements and element states, so they are not used directly
94
+ The @apply directive is used to apply these classes to elements
95
+ */
96
+
97
+ /* Apply .bordered to an element */
98
+
101
99
  .bordered {
102
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
100
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
103
101
  outline: none;
104
102
  }
105
103
 
106
- .borderinvisible {
107
- border-color: transparent;
108
- }
104
+ /* Apply .form rules for checkbox and radiobutton */
109
105
 
110
106
  .form {
111
107
 
@@ -113,92 +109,93 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
113
109
  place-content: center;
114
110
  width: var(--qti-form-size);
115
111
  height: var(--qti-form-size);
116
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
112
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
117
113
  outline: none;
118
114
  }
119
115
 
120
- .p-lg {
121
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
122
- }
116
+ /* Apply .button rules for button-like elements, such as drags and buttons */
123
117
 
124
118
  .button {
125
119
 
126
- border-radius: var(--qti-border-radius-md);
127
- padding: var(--qti-padding-md) var(--qti-padding-md);
120
+ border-radius: var(--qti-border-radius);
121
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
128
122
  font-weight: var(--qti-font-weight-semibold);
129
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
123
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
130
124
  outline: none;
131
125
  }
132
126
 
127
+ /* Apply .select for the select dropdown element */
128
+
133
129
  .select {
134
130
 
135
- border-radius: var(--qti-border-radius-md);
131
+ border-radius: var(--qti-border-radius);
136
132
  position: relative;
137
133
  -webkit-appearance: none;
138
134
  -moz-appearance: none;
139
135
  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")
136
+ padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
137
+ padding-right: calc(var(--qti-select-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); 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
138
  no-repeat center right 6px;
142
139
  }
143
140
 
141
+ /* Apply .text for the input text and textarea */
142
+
144
143
  .text {
145
144
 
146
145
  border-radius: 0;
147
146
  cursor: text;
148
- padding: var(--qti-padding-lg); /* Equal padding on all sides */
147
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
149
148
  background: unset;
150
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
149
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
151
150
  outline: none;
152
151
  }
153
152
 
153
+ /* Apply .spot for hotspot shapes */
154
+
154
155
  .spot {
155
156
 
156
157
  width: 100%;
157
158
  height: 100%;
158
159
  background-color: transparent;
159
160
  padding: 0;
160
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
161
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
161
162
  outline: none;
162
163
  }
163
164
 
164
- /* qti-select-point-interaction */
165
+ /* Apply .point for circular small hotspots */
165
166
 
166
167
  .point {
167
168
 
168
- border-radius: var(--qti-border-radius-full);
169
- width: 1.5rem; /* w-6 */
170
- height: 1.5rem;
169
+ border-radius: 100%;
170
+ width: var(--qti-point-size);
171
+ height: var(--qti-point-size);
171
172
  background-color: transparent;
172
173
  padding: 0;
173
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
174
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
174
175
  outline: none;
175
176
  }
176
177
 
178
+ /* Apply .drag for draggable elements */
179
+
177
180
  .drag {
178
181
 
179
182
  transition:
180
183
  transform 200ms ease-out,
181
184
  box-shadow 200ms ease-out,
182
185
  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);
185
186
  cursor: grab;
186
- background-color: white;
187
- font-weight: var(--qti-font-weight-semibold);
188
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
189
- outline: none;
190
- background-image: radial-gradient(
187
+ background-color: var(--qti-bg);
188
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border-radius: var(--qti-border-radius); padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal); font-weight: var(--qti-font-weight-semibold); border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
191
189
  circle at center,
192
190
  rgb(0 0 0 / 10%) 0,
193
191
  rgb(0 0 0 / 20%) 2px,
194
192
  rgb(255 255 255 / 0%) 2px,
195
193
  rgb(255 255 255 / 0%) 100%
196
- );
197
- background-repeat: repeat-y;
198
- background-position: left center;
199
- background-size: 14px 8px;
194
+ ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
200
195
  }
201
196
 
197
+ /* Apply .dragging for the dragging state of a draggable element */
198
+
202
199
  .dragging {
203
200
  pointer-events: none;
204
201
  rotate: -2deg;
@@ -207,45 +204,62 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
207
204
  0 4px 8px rgb(0 0 0 / 10%);
208
205
  }
209
206
 
207
+ /* Apply .drop for an element where you can drop the draggable */
208
+
210
209
  .drop {
211
210
 
212
211
  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
212
  center no-repeat;
214
- border-radius: var(--qti-border-radius-lg);
213
+ border-radius: var(--qti-drop-border-radius);
215
214
  position: relative;
216
- background-color: var(--qti-bg-white);
217
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
215
+ background-color: var(--qti-bg);
216
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
218
217
  outline: none;
219
218
  }
220
219
 
220
+ /* Apply .dropping for an indicator where you can drop the draggable */
221
+
221
222
  .dropping {
222
- background-color: var(--qti-primary-light);
223
+ background-color: var(--qti-bg-active);
223
224
  }
224
225
 
226
+ /* Apply .order for a small circular button */
227
+
225
228
  .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);
229
+
230
+ display: grid;
231
+ place-content: center;
232
+
233
+ /* background-color: var(--qti-bg-active); */
234
+ border-radius: 100%;
235
+ width: var(--qti-order-size);
236
+ height: var(--qti-order-size);
237
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
238
+ outline: none;
231
239
  }
232
240
 
241
+ /* Apply .check-size for radio and checkbox size */
242
+
233
243
  .check-size {
234
244
  width: calc(var(--qti-form-size) - 6px);
235
245
  height: calc(var(--qti-form-size) - 6px);
236
246
  }
237
247
 
248
+ /* Apply .check for checkbox */
249
+
238
250
  .check {
239
251
  gap: 0.5rem;
240
- border-radius: var(--qti-border-radius-md);
241
- padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
252
+ border-radius: var(--qti-border-radius);
253
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
242
254
  outline: none;
243
255
  cursor: pointer;
244
256
  }
245
257
 
258
+ /* Apply .check-radio for outer circle of the radio buttons */
259
+
246
260
  .check-radio {
247
261
 
248
- border-radius: var(--qti-border-radius-full);
262
+ border-radius: 100%;
249
263
 
250
264
  display: grid;
251
265
 
@@ -255,65 +269,77 @@ https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
255
269
 
256
270
  height: var(--qti-form-size);
257
271
 
258
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
272
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
259
273
 
260
274
  outline: none;
261
275
  }
262
276
 
277
+ /* Apply .check-radio-checked for the inner checked radio */
278
+
263
279
  .check-radio-checked {
264
- background-color: var(--qti-bg-primary);
265
- border-radius: var(--qti-border-radius-full);
280
+ background-color: var(--qti-border-active);
281
+ border-radius: 100%;
266
282
  }
267
283
 
284
+ /* Apply .check-checkbox for outer square of the checkbox */
285
+
268
286
  .check-checkbox {
269
287
 
270
288
  display: flex;
271
289
  place-items: center;
272
- border-radius: var(--qti-border-radius-sm);
290
+ border-radius: var(--qti-border-radius);
273
291
  display: grid;
274
292
  place-content: center;
275
293
  width: var(--qti-form-size);
276
294
  height: var(--qti-form-size);
277
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
295
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
278
296
  outline: none;
279
297
  }
280
298
 
281
- .check-checkbox-checked {
299
+ /* Apply .check-checkbox-checked for the inner checkmark */
282
300
 
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");
301
+ .check-checkbox-checked {
302
+ background-color: var(--qti-border-active);
303
+ -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");
304
+ 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
305
  }
287
306
 
307
+ /* Apply .hov for hover state */
308
+
288
309
  .hov {
289
- background-color: var(--qti-bg-gray-50);
310
+ background-color: var(--qti-hover-bg);
290
311
  }
291
312
 
313
+ /* Apply .foc for focus state */
314
+
292
315
  .foc {
293
316
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
294
317
  }
295
318
 
296
- .act {
297
- border-color: var(--qti-bg-primary); /* border-primary */
298
- background-color: var(--qti-primary-light);
319
+ /* Apply .act for active state */
299
320
 
321
+ .act {
322
+ border-color: var(--qti-border-active);
323
+ background-color: var(--qti-bg-active);
300
324
  }
301
325
 
326
+ /* Apply .rdo for readonly state */
327
+
302
328
  .rdo {
303
329
  cursor: pointer;
304
- background-color: white;
330
+ background-color: var(--qti-bg);
305
331
  outline: 0;
306
332
  border: none;
307
333
  }
308
334
 
335
+ /* Apply .dis for disabled state */
336
+
309
337
  .dis {
310
338
  cursor: not-allowed;
311
- background-color: var(--qti-bg-gray-100);
312
- color: var(--qti-text-gray-500);
313
- border-color: var(--qti-border-color-gray);
314
- outline: 4px solid var(--qti-bg-gray-100);
315
-
316
- /* outline-color: var(--qti-text-gray-50); */
339
+ background-color: var(--qti-disabled-bg);
340
+ color: var(--qti-disabled-color);
341
+ border-color: var(--qti-border-color);
342
+ outline: 4px solid var(--qti-disabled-bg);
317
343
  }
318
344
 
319
345
  /* base */
@@ -1938,7 +1964,7 @@ qti-response-declaration {
1938
1964
  & qti-simple-choice {
1939
1965
 
1940
1966
  &:hover {
1941
- background-color: var(--qti-bg-gray-50);
1967
+ background-color: var(--qti-hover-bg);
1942
1968
  }
1943
1969
 
1944
1970
  &:focus {
@@ -1949,16 +1975,16 @@ qti-response-declaration {
1949
1975
  display: none;
1950
1976
  }
1951
1977
 
1952
- &:state(checked),
1978
+ &:state(--checked),
1953
1979
  &[aria-checked='true'] {
1954
- border-color: var(--qti-bg-primary);
1955
- background-color: var(--qti-primary-light);
1980
+ border-color: var(--qti-border-active);
1981
+ background-color: var(--qti-bg-active);
1956
1982
  }
1957
1983
 
1958
1984
  &:state(readonly),
1959
1985
  &[aria-readonly='true'] {
1960
1986
  cursor: pointer;
1961
- background-color: white;
1987
+ background-color: var(--qti-bg);
1962
1988
  outline: 0;
1963
1989
  border: none;
1964
1990
  }
@@ -1966,19 +1992,19 @@ qti-response-declaration {
1966
1992
  &:state(disabled),
1967
1993
  &[aria-disabled='true'] {
1968
1994
  cursor: not-allowed;
1969
- background-color: var(--qti-bg-gray-100);
1970
- color: var(--qti-text-gray-500);
1971
- border-color: var(--qti-border-color-gray);
1972
- outline: 4px solid var(--qti-bg-gray-100);
1995
+ background-color: var(--qti-disabled-bg);
1996
+ color: var(--qti-disabled-color);
1997
+ border-color: var(--qti-border-color);
1998
+ outline: 4px solid var(--qti-disabled-bg);
1973
1999
  }
1974
2000
 
1975
- border-radius: var(--qti-border-radius-md);
2001
+ border-radius: var(--qti-border-radius);
1976
2002
 
1977
- padding: var(--qti-padding-md) var(--qti-padding-md);
2003
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
1978
2004
 
1979
2005
  font-weight: var(--qti-font-weight-semibold);
1980
2006
 
1981
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2007
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1982
2008
 
1983
2009
  outline: none
1984
2010
  }
@@ -1987,24 +2013,24 @@ qti-response-declaration {
1987
2013
  &:not(.qti-input-control-hidden) {
1988
2014
  & qti-simple-choice {
1989
2015
 
1990
- &:not([aria-disabled='true'], [aria-readonly='true'], :state(checked)):hover {
1991
- background-color: var(--qti-bg-gray-50);
2016
+ &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
2017
+ background-color: var(--qti-hover-bg);
1992
2018
  }
1993
2019
 
1994
2020
  &:focus {
1995
2021
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1996
2022
  }
1997
2023
 
1998
- &:state(checked),
2024
+ &:state(--checked),
1999
2025
  &[aria-checked='true'] {
2000
- border-color: var(--qti-bg-primary);
2001
- background-color: var(--qti-primary-light);
2026
+ border-color: var(--qti-border-active);
2027
+ background-color: var(--qti-bg-active);
2002
2028
  }
2003
2029
 
2004
2030
  &:state(readonly),
2005
2031
  &[aria-readonly='true'] {
2006
2032
  cursor: pointer;
2007
- background-color: white;
2033
+ background-color: var(--qti-bg);
2008
2034
  outline: 0;
2009
2035
  border: none;
2010
2036
  }
@@ -2012,10 +2038,10 @@ qti-response-declaration {
2012
2038
  &:state(disabled),
2013
2039
  &[aria-disabled='true'] {
2014
2040
  cursor: not-allowed;
2015
- background-color: var(--qti-bg-gray-100);
2016
- color: var(--qti-text-gray-500);
2017
- border-color: var(--qti-border-color-gray);
2018
- outline: 4px solid var(--qti-bg-gray-100);
2041
+ background-color: var(--qti-disabled-bg);
2042
+ color: var(--qti-disabled-color);
2043
+ border-color: var(--qti-border-color);
2044
+ outline: 4px solid var(--qti-disabled-bg);
2019
2045
  }
2020
2046
 
2021
2047
  &::part(cha) {
@@ -2024,45 +2050,43 @@ qti-response-declaration {
2024
2050
  }
2025
2051
 
2026
2052
  &:state(radio)::part(ch) {
2027
- border-radius: var(--qti-border-radius-full);
2053
+ border-radius: 100%;
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);
2045
2071
  display: grid;
2046
2072
  place-content: center;
2047
2073
  width: var(--qti-form-size);
2048
2074
  height: var(--qti-form-size);
2049
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2075
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2050
2076
  outline: none;
2051
2077
  }
2052
2078
 
2053
2079
  &: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);
2080
+ background-color: var(--qti-border-active);
2057
2081
  -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
2082
  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
2083
  }
2060
2084
 
2061
2085
  gap: 0.5rem;
2062
2086
 
2063
- border-radius: var(--qti-border-radius-md);
2087
+ border-radius: var(--qti-border-radius);
2064
2088
 
2065
- padding: var(--qti-padding-md) var(--qti-padding-md);
2089
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
2066
2090
 
2067
2091
  outline: none;
2068
2092
 
@@ -2091,7 +2115,7 @@ qti-response-declaration {
2091
2115
 
2092
2116
  qti-text-entry-interaction {
2093
2117
  &:hover {
2094
- background-color: var(--qti-bg-gray-50);
2118
+ background-color: var(--qti-hover-bg);
2095
2119
  }
2096
2120
 
2097
2121
  &:focus-within {
@@ -2101,9 +2125,9 @@ qti-response-declaration {
2101
2125
  &::part(input) {
2102
2126
  border-radius: 0;
2103
2127
  cursor: text;
2104
- padding: var(--qti-padding-lg);
2128
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2105
2129
  background: unset;
2106
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2130
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2107
2131
  outline: none;
2108
2132
  }
2109
2133
  }
@@ -2112,14 +2136,14 @@ qti-response-declaration {
2112
2136
  &::part(textarea) {
2113
2137
  border-radius: 0;
2114
2138
  cursor: text;
2115
- padding: var(--qti-padding-lg);
2139
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2116
2140
  background: unset;
2117
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2141
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2118
2142
  outline: none;
2119
2143
  }
2120
2144
 
2121
2145
  &:hover {
2122
- background-color: var(--qti-bg-gray-50);
2146
+ background-color: var(--qti-hover-bg);
2123
2147
  }
2124
2148
 
2125
2149
  &:focus-within {
@@ -2138,7 +2162,7 @@ qti-response-declaration {
2138
2162
  }
2139
2163
 
2140
2164
  &:hover {
2141
- background-color: var(--qti-bg-gray-50);
2165
+ background-color: var(--qti-hover-bg);
2142
2166
  }
2143
2167
 
2144
2168
  &:focus {
@@ -2149,17 +2173,23 @@ qti-response-declaration {
2149
2173
  box-shadow 200ms ease-out,
2150
2174
  rotate 200ms ease-out;
2151
2175
 
2152
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2176
+ cursor: grab;
2153
2177
 
2154
- border-radius: var(--qti-border-radius-md);
2178
+ background-color: var(--qti-bg);
2155
2179
 
2156
- cursor: grab;
2180
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2157
2181
 
2158
- background-color: white;
2182
+ border-radius: var(--qti-border-radius);
2183
+
2184
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2159
2185
 
2160
2186
  font-weight: var(--qti-font-weight-semibold);
2161
2187
 
2162
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2188
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2189
+
2190
+ outline: none;
2191
+
2192
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2163
2193
 
2164
2194
  outline: none;
2165
2195
 
@@ -2181,20 +2211,20 @@ qti-response-declaration {
2181
2211
  & qti-gap {
2182
2212
 
2183
2213
  &[enabled] {
2184
- background-color: var(--qti-primary-light);
2214
+ background-color: var(--qti-bg-active);
2185
2215
  }
2186
2216
 
2187
2217
  &[disabled] {
2188
2218
  cursor: not-allowed;
2189
- background-color: var(--qti-bg-gray-100);
2190
- color: var(--qti-text-gray-500);
2191
- border-color: var(--qti-border-color-gray);
2192
- outline: 4px solid var(--qti-bg-gray-100);
2219
+ background-color: var(--qti-disabled-bg);
2220
+ color: var(--qti-disabled-color);
2221
+ border-color: var(--qti-border-color);
2222
+ outline: 4px solid var(--qti-disabled-bg);
2193
2223
  }
2194
2224
 
2195
2225
  &[active] {
2196
- border-color: var(--qti-bg-primary);
2197
- background-color: var(--qti-primary-light);
2226
+ border-color: var(--qti-border-active);
2227
+ background-color: var(--qti-bg-active);
2198
2228
  }
2199
2229
 
2200
2230
  display: inline-flex;
@@ -2219,13 +2249,13 @@ qti-response-declaration {
2219
2249
  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
2250
  center no-repeat;
2221
2251
 
2222
- border-radius: var(--qti-border-radius-lg);
2252
+ border-radius: var(--qti-drop-border-radius);
2223
2253
 
2224
2254
  position: relative;
2225
2255
 
2226
- background-color: var(--qti-bg-white);
2256
+ background-color: var(--qti-bg);
2227
2257
 
2228
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2258
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2229
2259
 
2230
2260
  outline: none
2231
2261
  }
@@ -2236,7 +2266,7 @@ qti-response-declaration {
2236
2266
  &[shape='circle'] {
2237
2267
 
2238
2268
  &:hover {
2239
- background-color: var(--qti-bg-gray-50);
2269
+ background-color: var(--qti-hover-bg);
2240
2270
  }
2241
2271
 
2242
2272
  &:focus {
@@ -2244,23 +2274,23 @@ qti-response-declaration {
2244
2274
  }
2245
2275
 
2246
2276
  &[aria-checked='true'] {
2247
- border-color: var(--qti-bg-primary);
2248
- background-color: var(--qti-primary-light);
2277
+ border-color: var(--qti-border-active);
2278
+ background-color: var(--qti-bg-active);
2249
2279
  }
2250
2280
 
2251
2281
  &[aria-readonly='true'] {
2252
2282
  cursor: pointer;
2253
- background-color: white;
2283
+ background-color: var(--qti-bg);
2254
2284
  outline: 0;
2255
2285
  border: none;
2256
2286
  }
2257
2287
 
2258
2288
  &[aria-disabled='true'] {
2259
2289
  cursor: not-allowed;
2260
- background-color: var(--qti-bg-gray-100);
2261
- color: var(--qti-text-gray-500);
2262
- border-color: var(--qti-border-color-gray);
2263
- outline: 4px solid var(--qti-bg-gray-100);
2290
+ background-color: var(--qti-disabled-bg);
2291
+ color: var(--qti-disabled-color);
2292
+ border-color: var(--qti-border-color);
2293
+ outline: 4px solid var(--qti-disabled-bg);
2264
2294
  }
2265
2295
 
2266
2296
  width: 100%;
@@ -2271,7 +2301,7 @@ qti-response-declaration {
2271
2301
 
2272
2302
  padding: 0;
2273
2303
 
2274
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2304
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2275
2305
 
2276
2306
  outline: none
2277
2307
  }
@@ -2279,7 +2309,7 @@ qti-response-declaration {
2279
2309
  &[shape='rect'] {
2280
2310
 
2281
2311
  &:hover {
2282
- background-color: var(--qti-bg-gray-50);
2312
+ background-color: var(--qti-hover-bg);
2283
2313
  }
2284
2314
 
2285
2315
  &:focus {
@@ -2287,23 +2317,23 @@ qti-response-declaration {
2287
2317
  }
2288
2318
 
2289
2319
  &[aria-checked='true'] {
2290
- border-color: var(--qti-bg-primary);
2291
- background-color: var(--qti-primary-light);
2320
+ border-color: var(--qti-border-active);
2321
+ background-color: var(--qti-bg-active);
2292
2322
  }
2293
2323
 
2294
2324
  &[aria-readonly='true'] {
2295
2325
  cursor: pointer;
2296
- background-color: white;
2326
+ background-color: var(--qti-bg);
2297
2327
  outline: 0;
2298
2328
  border: none;
2299
2329
  }
2300
2330
 
2301
2331
  &[aria-disabled='true'] {
2302
2332
  cursor: not-allowed;
2303
- background-color: var(--qti-bg-gray-100);
2304
- color: var(--qti-text-gray-500);
2305
- border-color: var(--qti-border-color-gray);
2306
- outline: 4px solid var(--qti-bg-gray-100);
2333
+ background-color: var(--qti-disabled-bg);
2334
+ color: var(--qti-disabled-color);
2335
+ border-color: var(--qti-border-color);
2336
+ outline: 4px solid var(--qti-disabled-bg);
2307
2337
  }
2308
2338
 
2309
2339
  width: 100%;
@@ -2314,7 +2344,7 @@ qti-response-declaration {
2314
2344
 
2315
2345
  padding: 0;
2316
2346
 
2317
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2347
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2318
2348
 
2319
2349
  outline: none
2320
2350
  }
@@ -2333,8 +2363,8 @@ qti-response-declaration {
2333
2363
  transparent 10px
2334
2364
  );
2335
2365
  display: block;
2336
- border-color: var(--qti-bg-primary);
2337
- background-color: var(--qti-primary-light);
2366
+ border-color: var(--qti-border-active);
2367
+ background-color: var(--qti-bg-active);
2338
2368
  }
2339
2369
 
2340
2370
  &[aria-checked='true']::after {
@@ -2350,28 +2380,28 @@ qti-response-declaration {
2350
2380
  var(--qti-primary) 10px
2351
2381
  );
2352
2382
  display: block;
2353
- border-color: var(--qti-bg-primary);
2354
- background-color: var(--qti-primary-light);
2383
+ border-color: var(--qti-border-active);
2384
+ background-color: var(--qti-bg-active);
2355
2385
  }
2356
2386
 
2357
2387
  &[aria-checked='true'] {
2358
- border-color: var(--qti-bg-primary);
2359
- background-color: var(--qti-primary-light);
2388
+ border-color: var(--qti-border-active);
2389
+ background-color: var(--qti-bg-active);
2360
2390
  }
2361
2391
 
2362
2392
  &[aria-readonly='true'] {
2363
2393
  cursor: pointer;
2364
- background-color: white;
2394
+ background-color: var(--qti-bg);
2365
2395
  outline: 0;
2366
2396
  border: none;
2367
2397
  }
2368
2398
 
2369
2399
  &[aria-disabled='true'] {
2370
2400
  cursor: not-allowed;
2371
- background-color: var(--qti-bg-gray-100);
2372
- color: var(--qti-text-gray-500);
2373
- border-color: var(--qti-border-color-gray);
2374
- outline: 4px solid var(--qti-bg-gray-100);
2401
+ background-color: var(--qti-disabled-bg);
2402
+ color: var(--qti-disabled-color);
2403
+ border-color: var(--qti-border-color);
2404
+ outline: 4px solid var(--qti-disabled-bg);
2375
2405
  }
2376
2406
  }
2377
2407
  }
@@ -2385,7 +2415,7 @@ qti-response-declaration {
2385
2415
  align-items: center;
2386
2416
 
2387
2417
  &:hover {
2388
- background-color: var(--qti-bg-gray-50);
2418
+ background-color: var(--qti-hover-bg);
2389
2419
  }
2390
2420
 
2391
2421
  &:focus {
@@ -2398,45 +2428,43 @@ qti-response-declaration {
2398
2428
  }
2399
2429
 
2400
2430
  &:state(radio)::part(ch) {
2401
- border-radius: var(--qti-border-radius-full);
2431
+ border-radius: 100%;
2402
2432
  display: grid;
2403
2433
  place-content: center;
2404
2434
  width: var(--qti-form-size);
2405
2435
  height: var(--qti-form-size);
2406
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2436
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2407
2437
  outline: none;
2408
2438
  }
2409
2439
 
2410
2440
  &:state(radio):state(--checked)::part(cha) {
2411
- background-color: var(--qti-bg-primary);
2412
- border-radius: var(--qti-border-radius-full);
2441
+ background-color: var(--qti-border-active);
2442
+ border-radius: 100%;
2413
2443
  }
2414
2444
 
2415
2445
  &:state(checkbox)::part(ch) {
2416
2446
  display: flex;
2417
2447
  place-items: center;
2418
- border-radius: var(--qti-border-radius-sm);
2448
+ border-radius: var(--qti-border-radius);
2419
2449
  display: grid;
2420
2450
  place-content: center;
2421
2451
  width: var(--qti-form-size);
2422
2452
  height: var(--qti-form-size);
2423
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2453
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2424
2454
  outline: none;
2425
2455
  }
2426
2456
 
2427
2457
  &: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);
2458
+ background-color: var(--qti-border-active);
2431
2459
  -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
2460
  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
2461
  }
2434
2462
 
2435
2463
  gap: 0.5rem;
2436
2464
 
2437
- border-radius: var(--qti-border-radius-md);
2465
+ border-radius: var(--qti-border-radius);
2438
2466
 
2439
- padding: var(--qti-padding-md) var(--qti-padding-md);
2467
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
2440
2468
 
2441
2469
  outline: none;
2442
2470
 
@@ -2454,7 +2482,7 @@ qti-response-declaration {
2454
2482
  --qti-font-weight-semibold: 400; */
2455
2483
 
2456
2484
  &:hover {
2457
- background-color: var(--qti-bg-gray-50);
2485
+ background-color: var(--qti-hover-bg);
2458
2486
  }
2459
2487
 
2460
2488
  &:focus {
@@ -2467,32 +2495,32 @@ qti-response-declaration {
2467
2495
  }
2468
2496
 
2469
2497
  &:state(--checked) {
2470
- border-color: var(--qti-bg-primary);
2471
- background-color: var(--qti-primary-light);
2498
+ border-color: var(--qti-border-active);
2499
+ background-color: var(--qti-bg-active);
2472
2500
  }
2473
2501
 
2474
2502
  &[aria-readonly='true'] {
2475
2503
  cursor: pointer;
2476
- background-color: white;
2504
+ background-color: var(--qti-bg);
2477
2505
  outline: 0;
2478
2506
  border: none;
2479
2507
  }
2480
2508
 
2481
2509
  &[aria-disabled='true'] {
2482
2510
  cursor: not-allowed;
2483
- background-color: var(--qti-bg-gray-100);
2484
- color: var(--qti-text-gray-500);
2485
- border-color: var(--qti-border-color-gray);
2486
- outline: 4px solid var(--qti-bg-gray-100);
2511
+ background-color: var(--qti-disabled-bg);
2512
+ color: var(--qti-disabled-color);
2513
+ border-color: var(--qti-border-color);
2514
+ outline: 4px solid var(--qti-disabled-bg);
2487
2515
  }
2488
2516
 
2489
- border-radius: var(--qti-border-radius-md);
2517
+ border-radius: var(--qti-border-radius);
2490
2518
 
2491
- padding: var(--qti-padding-md) var(--qti-padding-md);
2519
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2492
2520
 
2493
2521
  font-weight: var(--qti-font-weight-semibold);
2494
2522
 
2495
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2523
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2496
2524
 
2497
2525
  outline: none
2498
2526
  }
@@ -2503,7 +2531,7 @@ qti-response-declaration {
2503
2531
  &.qti-unselected-hidden {
2504
2532
  qti-hottext {
2505
2533
  &:hover {
2506
- background-color: var(--qti-bg-gray-50);
2534
+ background-color: var(--qti-hover-bg);
2507
2535
  }
2508
2536
 
2509
2537
  &:focus {
@@ -2522,17 +2550,17 @@ qti-response-declaration {
2522
2550
 
2523
2551
  &[aria-readonly='true'] {
2524
2552
  cursor: pointer;
2525
- background-color: white;
2553
+ background-color: var(--qti-bg);
2526
2554
  outline: 0;
2527
2555
  border: none;
2528
2556
  }
2529
2557
 
2530
2558
  &[aria-disabled='true'] {
2531
2559
  cursor: not-allowed;
2532
- background-color: var(--qti-bg-gray-100);
2533
- color: var(--qti-text-gray-500);
2534
- border-color: var(--qti-border-color-gray);
2535
- outline: 4px solid var(--qti-bg-gray-100);
2560
+ background-color: var(--qti-disabled-bg);
2561
+ color: var(--qti-disabled-color);
2562
+ border-color: var(--qti-border-color);
2563
+ outline: 4px solid var(--qti-disabled-bg);
2536
2564
  }
2537
2565
  }
2538
2566
  }
@@ -2542,14 +2570,14 @@ qti-response-declaration {
2542
2570
  &::part(select) {
2543
2571
 
2544
2572
  &:hover {
2545
- background-color: var(--qti-bg-gray-50);
2573
+ background-color: var(--qti-hover-bg);
2546
2574
  }
2547
2575
 
2548
2576
  &:focus {
2549
2577
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2550
2578
  }
2551
2579
 
2552
- border-radius: var(--qti-border-radius-md);
2580
+ border-radius: var(--qti-border-radius);
2553
2581
 
2554
2582
  position: relative;
2555
2583
 
@@ -2559,9 +2587,11 @@ qti-response-declaration {
2559
2587
 
2560
2588
  appearance: none;
2561
2589
 
2562
- padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg);
2590
+ padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
2591
+
2592
+ padding-right: calc(var(--qti-select-padding-horizontal) + 1.5rem);
2563
2593
 
2564
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2594
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2565
2595
 
2566
2596
  outline: none;
2567
2597
 
@@ -2588,7 +2618,7 @@ qti-response-declaration {
2588
2618
  }
2589
2619
 
2590
2620
  &:hover {
2591
- background-color: var(--qti-bg-gray-50);
2621
+ background-color: var(--qti-hover-bg);
2592
2622
  }
2593
2623
 
2594
2624
  &:focus {
@@ -2599,17 +2629,23 @@ qti-response-declaration {
2599
2629
  box-shadow 200ms ease-out,
2600
2630
  rotate 200ms ease-out;
2601
2631
 
2602
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2632
+ cursor: grab;
2633
+
2634
+ background-color: var(--qti-bg);
2603
2635
 
2604
- border-radius: var(--qti-border-radius-md);
2636
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2605
2637
 
2606
- cursor: grab;
2638
+ border-radius: var(--qti-border-radius);
2607
2639
 
2608
- background-color: white;
2640
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2609
2641
 
2610
2642
  font-weight: var(--qti-font-weight-semibold);
2611
2643
 
2612
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2644
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2645
+
2646
+ outline: none;
2647
+
2648
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2613
2649
 
2614
2650
  outline: none;
2615
2651
 
@@ -2656,24 +2692,24 @@ qti-response-declaration {
2656
2692
 
2657
2693
  &[enabled] {
2658
2694
  &::part(dropslot) {
2659
- background-color: var(--qti-primary-light);
2695
+ background-color: var(--qti-bg-active);
2660
2696
  }
2661
2697
  }
2662
2698
 
2663
2699
  &[disabled] {
2664
2700
  &::part(dropslot) {
2665
2701
  cursor: not-allowed;
2666
- background-color: var(--qti-bg-gray-100);
2667
- color: var(--qti-text-gray-500);
2668
- border-color: var(--qti-border-color-gray);
2669
- outline: 4px solid var(--qti-bg-gray-100);
2702
+ background-color: var(--qti-disabled-bg);
2703
+ color: var(--qti-disabled-color);
2704
+ border-color: var(--qti-border-color);
2705
+ outline: 4px solid var(--qti-disabled-bg);
2670
2706
  }
2671
2707
  }
2672
2708
 
2673
2709
  &[active] {
2674
2710
  &::part(dropslot) {
2675
- border-color: var(--qti-bg-primary);
2676
- background-color: var(--qti-primary-light);
2711
+ border-color: var(--qti-border-active);
2712
+ background-color: var(--qti-bg-active);
2677
2713
  }
2678
2714
  }
2679
2715
 
@@ -2698,10 +2734,10 @@ qti-response-declaration {
2698
2734
  align-items: center;
2699
2735
  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
2736
  center no-repeat;
2701
- border-radius: var(--qti-border-radius-lg);
2737
+ border-radius: var(--qti-drop-border-radius);
2702
2738
  position: relative;
2703
- background-color: var(--qti-bg-white);
2704
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2739
+ background-color: var(--qti-bg);
2740
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2705
2741
  outline: none;
2706
2742
  }
2707
2743
 
@@ -2716,7 +2752,7 @@ qti-response-declaration {
2716
2752
  }
2717
2753
 
2718
2754
  &:hover {
2719
- background-color: var(--qti-bg-gray-50);
2755
+ background-color: var(--qti-hover-bg);
2720
2756
  }
2721
2757
 
2722
2758
  &:focus {
@@ -2729,17 +2765,23 @@ qti-response-declaration {
2729
2765
  box-shadow 200ms ease-out,
2730
2766
  rotate 200ms ease-out;
2731
2767
 
2732
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2768
+ cursor: grab;
2769
+
2770
+ background-color: var(--qti-bg);
2733
2771
 
2734
- border-radius: var(--qti-border-radius-md);
2772
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2735
2773
 
2736
- cursor: grab;
2774
+ border-radius: var(--qti-border-radius);
2737
2775
 
2738
- background-color: white;
2776
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2739
2777
 
2740
2778
  font-weight: var(--qti-font-weight-semibold);
2741
2779
 
2742
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2780
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2781
+
2782
+ outline: none;
2783
+
2784
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2743
2785
 
2744
2786
  outline: none;
2745
2787
 
@@ -2773,7 +2815,7 @@ qti-response-declaration {
2773
2815
  }
2774
2816
 
2775
2817
  &:hover {
2776
- background-color: var(--qti-bg-gray-50);
2818
+ background-color: var(--qti-hover-bg);
2777
2819
  }
2778
2820
 
2779
2821
  &:focus {
@@ -2784,17 +2826,23 @@ qti-response-declaration {
2784
2826
  box-shadow 200ms ease-out,
2785
2827
  rotate 200ms ease-out;
2786
2828
 
2787
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2829
+ cursor: grab;
2830
+
2831
+ background-color: var(--qti-bg);
2788
2832
 
2789
- border-radius: var(--qti-border-radius-md);
2833
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2790
2834
 
2791
- cursor: grab;
2835
+ border-radius: var(--qti-border-radius);
2792
2836
 
2793
- background-color: white;
2837
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2794
2838
 
2795
2839
  font-weight: var(--qti-font-weight-semibold);
2796
2840
 
2797
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2841
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2842
+
2843
+ outline: none;
2844
+
2845
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2798
2846
 
2799
2847
  outline: none;
2800
2848
 
@@ -2834,11 +2882,11 @@ qti-response-declaration {
2834
2882
  &::part(drop-list) {
2835
2883
 
2836
2884
  &[enabled] {
2837
- background-color: var(--qti-primary-light);
2885
+ background-color: var(--qti-bg-active);
2838
2886
  }
2839
2887
 
2840
2888
  &:hover {
2841
- background-color: var(--qti-bg-gray-50);
2889
+ background-color: var(--qti-hover-bg);
2842
2890
  }
2843
2891
 
2844
2892
  &:focus {
@@ -2849,16 +2897,16 @@ qti-response-declaration {
2849
2897
  min-height: 4rem;
2850
2898
  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
2899
  center no-repeat;
2852
- border-radius: var(--qti-border-radius-lg);
2900
+ border-radius: var(--qti-drop-border-radius);
2853
2901
  position: relative;
2854
- background-color: var(--qti-bg-white);
2855
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2902
+ background-color: var(--qti-bg);
2903
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2856
2904
  outline: none;
2857
2905
  }
2858
2906
 
2859
2907
  &::part(active) {
2860
- border-color: var(--qti-bg-primary);
2861
- background-color: var(--qti-primary-light);
2908
+ border-color: var(--qti-border-active);
2909
+ background-color: var(--qti-bg-active);
2862
2910
  }
2863
2911
  }
2864
2912
 
@@ -2867,7 +2915,7 @@ qti-response-declaration {
2867
2915
  &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
2868
2916
 
2869
2917
  &:hover {
2870
- background-color: var(--qti-bg-gray-50);
2918
+ background-color: var(--qti-hover-bg);
2871
2919
  }
2872
2920
 
2873
2921
  &:focus {
@@ -2885,17 +2933,23 @@ qti-response-declaration {
2885
2933
  box-shadow 200ms ease-out,
2886
2934
  rotate 200ms ease-out;
2887
2935
 
2888
- padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
2936
+ cursor: grab;
2937
+
2938
+ background-color: var(--qti-bg);
2889
2939
 
2890
- border-radius: var(--qti-border-radius-md);
2940
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2891
2941
 
2892
- cursor: grab;
2942
+ border-radius: var(--qti-border-radius);
2893
2943
 
2894
- background-color: white;
2944
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2895
2945
 
2896
2946
  font-weight: var(--qti-font-weight-semibold);
2897
2947
 
2898
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2948
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2949
+
2950
+ outline: none;
2951
+
2952
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2899
2953
 
2900
2954
  outline: none;
2901
2955
 
@@ -2931,10 +2985,10 @@ qti-response-declaration {
2931
2985
  min-width: 10rem;
2932
2986
  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
2987
  center no-repeat;
2934
- border-radius: var(--qti-border-radius-lg);
2988
+ border-radius: var(--qti-drop-border-radius);
2935
2989
  position: relative;
2936
- background-color: var(--qti-bg-white);
2937
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
2990
+ background-color: var(--qti-bg);
2991
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2938
2992
  outline: none;
2939
2993
  }
2940
2994
 
@@ -2943,8 +2997,8 @@ qti-response-declaration {
2943
2997
  }
2944
2998
 
2945
2999
  &::part(drop-list)[dragging] {
2946
- border-color: var(--qti-bg-primary);
2947
- background-color: var(--qti-primary-light);
3000
+ border-color: var(--qti-border-active);
3001
+ background-color: var(--qti-bg-active);
2948
3002
  }
2949
3003
 
2950
3004
  /* &::part(drop-list) {
@@ -2956,43 +3010,37 @@ qti-response-declaration {
2956
3010
  & qti-hotspot-choice {
2957
3011
 
2958
3012
  &:hover {
2959
- background-color: var(--qti-bg-gray-50);
3013
+ background-color: var(--qti-hover-bg);
2960
3014
  }
2961
3015
 
2962
3016
  &:focus {
2963
3017
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2964
3018
  }
2965
3019
 
3020
+ &:state(--checked),
2966
3021
  &[aria-checked='true'] {
2967
- border-color: var(--qti-bg-primary);
2968
- background-color: var(--qti-primary-light);
3022
+ border-color: var(--qti-border-active);
3023
+ background-color: var(--qti-bg-active);
2969
3024
  }
2970
3025
 
2971
3026
  &[aria-readonly='true'] {
2972
3027
  cursor: pointer;
2973
- background-color: white;
3028
+ background-color: var(--qti-bg);
2974
3029
  outline: 0;
2975
3030
  border: none;
2976
3031
  }
2977
3032
 
2978
3033
  &[aria-disabled='true'] {
2979
3034
  cursor: not-allowed;
2980
- background-color: var(--qti-bg-gray-100);
2981
- color: var(--qti-text-gray-500);
2982
- border-color: var(--qti-border-color-gray);
2983
- outline: 4px solid var(--qti-bg-gray-100);
3035
+ background-color: var(--qti-disabled-bg);
3036
+ color: var(--qti-disabled-color);
3037
+ border-color: var(--qti-border-color);
3038
+ outline: 4px solid var(--qti-disabled-bg);
2984
3039
  }
2985
3040
 
2986
3041
  &[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);
3042
+ display: grid;
3043
+ place-content: center;
2996
3044
  }
2997
3045
 
2998
3046
  &[aria-ordervalue]::after {
@@ -3007,7 +3055,7 @@ qti-response-declaration {
3007
3055
 
3008
3056
  padding: 0;
3009
3057
 
3010
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3058
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3011
3059
 
3012
3060
  outline: none
3013
3061
  }
@@ -3021,7 +3069,7 @@ qti-response-declaration {
3021
3069
  &[shape='circle'] {
3022
3070
 
3023
3071
  &:hover {
3024
- background-color: var(--qti-bg-gray-50);
3072
+ background-color: var(--qti-hover-bg);
3025
3073
  }
3026
3074
 
3027
3075
  &:focus {
@@ -3029,23 +3077,23 @@ qti-response-declaration {
3029
3077
  }
3030
3078
 
3031
3079
  &[aria-checked='true'] {
3032
- border-color: var(--qti-bg-primary);
3033
- background-color: var(--qti-primary-light);
3080
+ border-color: var(--qti-border-active);
3081
+ background-color: var(--qti-bg-active);
3034
3082
  }
3035
3083
 
3036
3084
  &[aria-readonly='true'] {
3037
3085
  cursor: pointer;
3038
- background-color: white;
3086
+ background-color: var(--qti-bg);
3039
3087
  outline: 0;
3040
3088
  border: none;
3041
3089
  }
3042
3090
 
3043
3091
  &[aria-disabled='true'] {
3044
3092
  cursor: not-allowed;
3045
- background-color: var(--qti-bg-gray-100);
3046
- color: var(--qti-text-gray-500);
3047
- border-color: var(--qti-border-color-gray);
3048
- outline: 4px solid var(--qti-bg-gray-100);
3093
+ background-color: var(--qti-disabled-bg);
3094
+ color: var(--qti-disabled-color);
3095
+ border-color: var(--qti-border-color);
3096
+ outline: 4px solid var(--qti-disabled-bg);
3049
3097
  }
3050
3098
 
3051
3099
  width: 100%;
@@ -3056,7 +3104,7 @@ qti-response-declaration {
3056
3104
 
3057
3105
  padding: 0;
3058
3106
 
3059
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3107
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3060
3108
 
3061
3109
  outline: none
3062
3110
  }
@@ -3064,7 +3112,7 @@ qti-response-declaration {
3064
3112
  &[shape='square'] {
3065
3113
 
3066
3114
  &:hover {
3067
- background-color: var(--qti-bg-gray-50);
3115
+ background-color: var(--qti-hover-bg);
3068
3116
  }
3069
3117
 
3070
3118
  &:focus {
@@ -3072,23 +3120,23 @@ qti-response-declaration {
3072
3120
  }
3073
3121
 
3074
3122
  &[aria-checked='true'] {
3075
- border-color: var(--qti-bg-primary);
3076
- background-color: var(--qti-primary-light);
3123
+ border-color: var(--qti-border-active);
3124
+ background-color: var(--qti-bg-active);
3077
3125
  }
3078
3126
 
3079
3127
  &[aria-readonly='true'] {
3080
3128
  cursor: pointer;
3081
- background-color: white;
3129
+ background-color: var(--qti-bg);
3082
3130
  outline: 0;
3083
3131
  border: none;
3084
3132
  }
3085
3133
 
3086
3134
  &[aria-disabled='true'] {
3087
3135
  cursor: not-allowed;
3088
- background-color: var(--qti-bg-gray-100);
3089
- color: var(--qti-text-gray-500);
3090
- border-color: var(--qti-border-color-gray);
3091
- outline: 4px solid var(--qti-bg-gray-100);
3136
+ background-color: var(--qti-disabled-bg);
3137
+ color: var(--qti-disabled-color);
3138
+ border-color: var(--qti-border-color);
3139
+ outline: 4px solid var(--qti-disabled-bg);
3092
3140
  }
3093
3141
 
3094
3142
  width: 100%;
@@ -3099,7 +3147,7 @@ qti-response-declaration {
3099
3147
 
3100
3148
  padding: 0;
3101
3149
 
3102
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3150
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3103
3151
 
3104
3152
  outline: none
3105
3153
  }
@@ -3192,24 +3240,24 @@ qti-response-declaration {
3192
3240
  qti-select-point-interaction {
3193
3241
  &::part(point) {
3194
3242
  &:hover {
3195
- background-color: var(--qti-bg-gray-50);
3243
+ background-color: var(--qti-hover-bg);
3196
3244
  }
3197
3245
 
3198
3246
  &:focus {
3199
3247
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3200
3248
  }
3201
3249
 
3202
- border-radius: var(--qti-border-radius-full);
3250
+ border-radius: 100%;
3203
3251
 
3204
- width: 1.5rem;
3252
+ width: var(--qti-point-size);
3205
3253
 
3206
- height: 1.5rem;
3254
+ height: var(--qti-point-size);
3207
3255
 
3208
3256
  background-color: transparent;
3209
3257
 
3210
3258
  padding: 0;
3211
3259
 
3212
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
3260
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3213
3261
 
3214
3262
  outline: none;
3215
3263
  }