@pie-players/pie-theme 0.3.64 → 0.3.66

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 (29) hide show
  1. package/README.md +165 -18
  2. package/dist/color-schemes.css +386 -441
  3. package/dist/color-schemes.d.ts +12 -21
  4. package/dist/color-schemes.js +507 -385
  5. package/dist/components.css +216 -66
  6. package/dist/contrast.d.ts +67 -0
  7. package/dist/contrast.js +151 -0
  8. package/dist/daisyui-mapping.d.ts +58 -0
  9. package/dist/daisyui-mapping.js +168 -0
  10. package/dist/index.d.ts +6 -4
  11. package/dist/index.js +4 -3
  12. package/dist/providers.d.ts +16 -0
  13. package/dist/providers.js +68 -91
  14. package/dist/scheme-participation.d.ts +88 -0
  15. package/dist/scheme-participation.js +89 -0
  16. package/dist/theme-css.d.ts +5 -0
  17. package/dist/theme-css.js +26 -0
  18. package/dist/theme-definitions.d.ts +21 -0
  19. package/dist/theme-definitions.js +1081 -0
  20. package/dist/theme-element.d.ts +5 -0
  21. package/dist/theme-element.js +154 -36
  22. package/dist/theme-types.d.ts +54 -0
  23. package/dist/token-registry-types.d.ts +57 -0
  24. package/dist/token-registry-types.js +15 -0
  25. package/dist/token-registry.json +1311 -0
  26. package/dist/tokens.css +84 -76
  27. package/package.json +8 -4
  28. package/dist/theme-defaults.d.ts +0 -3
  29. package/dist/theme-defaults.js +0 -100
package/dist/color-schemes.css CHANGED
@@ -1,606 +1,551 @@
1
- /* PIE Color Scheme System - Learnosity-compatible industry standards for K-12 assessments
2
- *
3
- * These color schemes are based on Learnosity's WCAG 2.1 Level AA audited palettes,
4
- * widely used in educational assessment platforms.
5
- *
6
- * All schemes meet WCAG contrast requirements:
7
- * - Normal text: 4.5:1 minimum
8
- * - Large text: 3:1 minimum
9
- * - UI components: 3:1 minimum
10
- *
11
- * Usage: Apply data-color-scheme attribute to document root or pie-player element
12
- * Example: <html data-color-scheme="white-on-black">
13
- */
1
+ /* Generated by @pie-players/pie-theme. Run `bun run generate:css`; do not edit. */
14
2
 
15
- /* Default color scheme */
16
- :root {
17
- /* Base colors */
18
- --pie-text: black;
19
- --pie-disabled: grey;
20
- --pie-disabled-secondary: #ababab;
21
-
22
- /* Feedback colors */
23
- --pie-correct: #4caf50;
24
- --pie-correct-secondary: #e8f5e9;
25
- --pie-correct-tertiary: #0ea449;
26
- --pie-correct-icon: #087d38;
27
- --pie-incorrect: #ff9800;
28
- --pie-incorrect-secondary: #ffebee;
29
- --pie-incorrect-icon: #bf0d00;
30
- --pie-missing: #d32f2f;
31
- --pie-missing-icon: #6a78a1;
32
-
33
- /* Primary colors */
34
- --pie-primary: #3f51b5;
35
- --pie-primary-light: #9fa8da;
36
- --pie-primary-dark: #283593;
37
- --pie-faded-primary: #dcdafb;
38
-
39
- /* Secondary colors */
40
- --pie-secondary: #f50057;
41
- --pie-secondary-light: #f48fb1;
42
- --pie-secondary-dark: #880e4f;
43
-
44
- /* Tertiary colors */
45
- --pie-tertiary: #146eb3;
46
- --pie-tertiary-light: #d0e2f0;
47
-
48
- /* Background colors */
49
- --pie-background: rgba(255, 255, 255, 0);
50
- --pie-background-dark: #ecedf1;
51
- --pie-secondary-background: rgba(241, 241, 241, 1);
52
- --pie-dropdown-background: #e0e1e6;
53
-
54
- /* Border colors */
55
- --pie-border: #9a9a9a;
56
- --pie-border-light: #d1d1d1;
57
- --pie-border-dark: #646464;
58
- --pie-border-gray: #7e8494;
59
-
60
- /* Absolute colors */
61
- --pie-black: #000000;
62
- --pie-white: #ffffff;
63
-
64
- /* Focus colors (accessibility) */
65
- --pie-focus-checked: #bbdefb;
66
- --pie-focus-checked-border: #1565c0;
67
- --pie-focus-unchecked: #e0e0e0;
68
- --pie-focus-unchecked-border: #757575;
69
-
70
- /* Blue grey colors (tokens) */
71
- --pie-blue-grey-100: #f3f5f7;
72
- --pie-blue-grey-300: #c0c3cf;
73
- --pie-blue-grey-600: #7e8494;
74
- --pie-blue-grey-900: #152452;
75
- }
76
-
77
- /* Black on White - Learnosity standard */
78
3
  [data-color-scheme="black-on-white"] {
79
- --pie-text: #000000;
80
- --pie-disabled: #666666;
81
- --pie-disabled-secondary: #888888;
4
+ --pie-annotation-underline: #4221d5;
5
+ --pie-annotation-underline-dark: #4221d5;
6
+ --pie-background: #ffffff;
7
+ --pie-background-dark: #f5f5f5;
8
+ --pie-black: #000000;
9
+ --pie-blue-grey-100: #f5f5f5;
10
+ --pie-blue-grey-300: #cccccc;
11
+ --pie-blue-grey-600: #666666;
12
+ --pie-blue-grey-900: #000000;
13
+ --pie-border: #000000;
14
+ --pie-border-dark: #000000;
15
+ --pie-border-gray: #555555;
16
+ --pie-border-light: #666666;
17
+ --pie-button-active-bg: #eeeeee;
18
+ --pie-button-bg: #ffffff;
19
+ --pie-button-border: #666666;
20
+ --pie-button-color: #000000;
21
+ --pie-button-focus-outline: #0000cc;
22
+ --pie-button-hover-bg: #f5f5f5;
23
+ --pie-button-hover-border: #000000;
24
+ --pie-button-hover-color: #000000;
25
+ --pie-content-emphasis: #cc0000;
82
26
  --pie-correct: #006600;
27
+ --pie-correct-icon: #004400;
83
28
  --pie-correct-secondary: #ccffcc;
84
29
  --pie-correct-tertiary: #008800;
85
- --pie-correct-icon: #004400;
30
+ --pie-disabled: #666666;
31
+ --pie-disabled-secondary: #888888;
32
+ --pie-dropdown-background: #e0e0e0;
33
+ --pie-faded-primary: #ccccff;
34
+ --pie-fixed-hue-collapse: 100%;
35
+ --pie-focus-checked: #0066ff;
36
+ --pie-focus-checked-border: #0000cc;
37
+ --pie-focus-unchecked: #cccccc;
38
+ --pie-focus-unchecked-border: #000000;
86
39
  --pie-incorrect: #cc0000;
87
- --pie-incorrect-secondary: #ffcccc;
88
40
  --pie-incorrect-icon: #990000;
41
+ --pie-incorrect-secondary: #ffcccc;
89
42
  --pie-missing: #cc0000;
90
43
  --pie-missing-icon: #000099;
91
44
  --pie-primary: #0000cc;
92
- --pie-primary-light: #6666ff;
93
45
  --pie-primary-dark: #000088;
94
- --pie-faded-primary: #ccccff;
46
+ --pie-primary-light: #6666ff;
95
47
  --pie-secondary: #cc0066;
96
- --pie-secondary-light: #ff99cc;
48
+ --pie-secondary-background: #eeeeee;
97
49
  --pie-secondary-dark: #990044;
50
+ --pie-secondary-light: #ff99cc;
98
51
  --pie-tertiary: #006699;
99
52
  --pie-tertiary-light: #99ccff;
100
- --pie-background: #ffffff;
101
- --pie-background-dark: #f5f5f5;
102
- --pie-secondary-background: #eeeeee;
103
- --pie-dropdown-background: #e0e0e0;
104
- --pie-border: #000000;
105
- --pie-border-light: #666666;
106
- --pie-border-dark: #000000;
107
- --pie-border-gray: #555555;
108
- --pie-black: #000000;
53
+ --pie-text: #000000;
54
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
109
55
  --pie-white: #ffffff;
110
- --pie-focus-checked: #0066ff;
111
- --pie-focus-checked-border: #0000cc;
112
- --pie-focus-unchecked: #cccccc;
113
- --pie-focus-unchecked-border: #000000;
114
- --pie-blue-grey-100: #f5f5f5;
115
- --pie-blue-grey-300: #cccccc;
116
- --pie-blue-grey-600: #666666;
117
- --pie-blue-grey-900: #000000;
118
56
  }
119
57
 
120
- /* White on Black - Learnosity standard */
121
58
  [data-color-scheme="white-on-black"] {
122
- --pie-text: #ffffff;
123
- --pie-disabled: #999999;
124
- --pie-disabled-secondary: #777777;
59
+ --pie-annotation-underline: #9c89ec;
60
+ --pie-annotation-underline-dark: #9c89ec;
61
+ --pie-background: #000000;
62
+ --pie-background-dark: #1a1a1a;
63
+ --pie-black: #ffffff;
64
+ --pie-blue-grey-100: #2a2a2a;
65
+ --pie-blue-grey-300: #555555;
66
+ --pie-blue-grey-600: #999999;
67
+ --pie-blue-grey-900: #ffffff;
68
+ --pie-border: #ffffff;
69
+ --pie-border-dark: #ffffff;
70
+ --pie-border-gray: #aaaaaa;
71
+ --pie-border-light: #cccccc;
72
+ --pie-button-active-bg: #222222;
73
+ --pie-button-bg: #000000;
74
+ --pie-button-border: #cccccc;
75
+ --pie-button-color: #ffffff;
76
+ --pie-button-focus-outline: #ffff00;
77
+ --pie-button-hover-bg: #1a1a1a;
78
+ --pie-button-hover-border: #ffffff;
79
+ --pie-button-hover-color: #ffffff;
80
+ --pie-content-emphasis: #ff3333;
125
81
  --pie-correct: #00ff00;
82
+ --pie-correct-icon: #00ff00;
126
83
  --pie-correct-secondary: #003300;
127
84
  --pie-correct-tertiary: #00cc00;
128
- --pie-correct-icon: #00ff00;
85
+ --pie-disabled: #999999;
86
+ --pie-disabled-secondary: #777777;
87
+ --pie-dropdown-background: #2a2a2a;
88
+ --pie-faded-primary: #666600;
89
+ --pie-fixed-hue-collapse: 100%;
90
+ --pie-focus-checked: #ffff00;
91
+ --pie-focus-checked-border: #ffff00;
92
+ --pie-focus-unchecked: #666666;
93
+ --pie-focus-unchecked-border: #ffffff;
129
94
  --pie-incorrect: #ff3333;
130
- --pie-incorrect-secondary: #330000;
131
95
  --pie-incorrect-icon: #ff0000;
96
+ --pie-incorrect-secondary: #330000;
132
97
  --pie-missing: #ff6666;
133
98
  --pie-missing-icon: #6666ff;
134
99
  --pie-primary: #ffff00;
135
- --pie-primary-light: #ffff99;
136
100
  --pie-primary-dark: #cccc00;
137
- --pie-faded-primary: #666600;
101
+ --pie-primary-light: #ffff99;
138
102
  --pie-secondary: #ff00ff;
139
- --pie-secondary-light: #ff99ff;
103
+ --pie-secondary-background: #222222;
140
104
  --pie-secondary-dark: #cc00cc;
105
+ --pie-secondary-light: #ff99ff;
141
106
  --pie-tertiary: #00ffff;
142
107
  --pie-tertiary-light: #99ffff;
143
- --pie-background: #000000;
144
- --pie-background-dark: #1a1a1a;
145
- --pie-secondary-background: #222222;
146
- --pie-dropdown-background: #2a2a2a;
147
- --pie-border: #ffffff;
148
- --pie-border-light: #cccccc;
149
- --pie-border-dark: #ffffff;
150
- --pie-border-gray: #aaaaaa;
151
- --pie-black: #ffffff;
108
+ --pie-text: #ffffff;
109
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
152
110
  --pie-white: #000000;
153
- --pie-focus-checked: #ffff00;
154
- --pie-focus-checked-border: #ffff00;
155
- --pie-focus-unchecked: #666666;
156
- --pie-focus-unchecked-border: #ffffff;
157
- --pie-blue-grey-100: #2a2a2a;
158
- --pie-blue-grey-300: #555555;
159
- --pie-blue-grey-600: #999999;
160
- --pie-blue-grey-900: #ffffff;
161
111
  }
162
112
 
163
- /* Rose on Green - Learnosity standard (protanopia/deuteranopia friendly) */
164
113
  [data-color-scheme="rose-on-green"] {
165
- --pie-text: #3d0022;
166
- --pie-disabled: #996677;
167
- --pie-disabled-secondary: #bb8899;
114
+ --pie-annotation-underline: #4221d5;
115
+ --pie-annotation-underline-dark: #4221d5;
116
+ --pie-background: #ccffcc;
117
+ --pie-background-dark: #aaeedd;
118
+ --pie-black: #3d0022;
119
+ --pie-blue-grey-100: #ccffdd;
120
+ --pie-blue-grey-300: #99ddbb;
121
+ --pie-blue-grey-600: #668877;
122
+ --pie-blue-grey-900: #3d0022;
123
+ --pie-border: #3d0022;
124
+ --pie-border-dark: #220011;
125
+ --pie-border-gray: #664455;
126
+ --pie-border-light: #663344;
127
+ --pie-button-active-bg: #99ddbb;
128
+ --pie-button-bg: #ccffcc;
129
+ --pie-button-border: #663344;
130
+ --pie-button-color: #3d0022;
131
+ --pie-button-focus-outline: #660044;
132
+ --pie-button-hover-bg: #aaeedd;
133
+ --pie-button-hover-border: #3d0022;
134
+ --pie-button-hover-color: #3d0022;
135
+ --pie-content-emphasis: #aa0044;
168
136
  --pie-correct: #004400;
137
+ --pie-correct-icon: #003300;
169
138
  --pie-correct-secondary: #aaffaa;
170
139
  --pie-correct-tertiary: #006600;
171
- --pie-correct-icon: #003300;
140
+ --pie-disabled: #996677;
141
+ --pie-disabled-secondary: #bb8899;
142
+ --pie-dropdown-background: #88cc99;
143
+ --pie-faded-primary: #ddbbcc;
144
+ --pie-fixed-hue-collapse: 100%;
145
+ --pie-focus-checked: #880055;
146
+ --pie-focus-checked-border: #660044;
147
+ --pie-focus-unchecked: #aaddbb;
148
+ --pie-focus-unchecked-border: #3d0022;
172
149
  --pie-incorrect: #aa0044;
173
- --pie-incorrect-secondary: #ffccdd;
174
150
  --pie-incorrect-icon: #880033;
151
+ --pie-incorrect-secondary: #ffccdd;
175
152
  --pie-missing: #aa0044;
176
153
  --pie-missing-icon: #440044;
177
154
  --pie-primary: #660044;
178
- --pie-primary-light: #cc6699;
179
155
  --pie-primary-dark: #440033;
180
- --pie-faded-primary: #ddbbcc;
156
+ --pie-primary-light: #cc6699;
181
157
  --pie-secondary: #880055;
182
- --pie-secondary-light: #dd99bb;
158
+ --pie-secondary-background: #99ddbb;
183
159
  --pie-secondary-dark: #550033;
160
+ --pie-secondary-light: #dd99bb;
184
161
  --pie-tertiary: #770044;
185
162
  --pie-tertiary-light: #dd99bb;
186
- --pie-background: #ccffcc;
187
- --pie-background-dark: #aaeedd;
188
- --pie-secondary-background: #99ddbb;
189
- --pie-dropdown-background: #88cc99;
190
- --pie-border: #3d0022;
191
- --pie-border-light: #663344;
192
- --pie-border-dark: #220011;
193
- --pie-border-gray: #664455;
194
- --pie-black: #000000;
163
+ --pie-text: #3d0022;
164
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
195
165
  --pie-white: #ccffcc;
196
- --pie-focus-checked: #880055;
197
- --pie-focus-checked-border: #660044;
198
- --pie-focus-unchecked: #aaddbb;
199
- --pie-focus-unchecked-border: #3d0022;
200
- --pie-blue-grey-100: #ccffdd;
201
- --pie-blue-grey-300: #99ddbb;
202
- --pie-blue-grey-600: #668877;
203
- --pie-blue-grey-900: #3d0022;
204
166
  }
205
167
 
206
- /* Yellow on Blue - Learnosity standard */
207
168
  [data-color-scheme="yellow-on-blue"] {
208
- --pie-text: #ffff00;
209
- --pie-disabled: #9999aa;
210
- --pie-disabled-secondary: #aaaacc;
169
+ --pie-annotation-underline: #9c89ec;
170
+ --pie-annotation-underline-dark: #9c89ec;
171
+ --pie-background: #000066;
172
+ --pie-background-dark: #000055;
173
+ --pie-black: #ffff00;
174
+ --pie-blue-grey-100: #000055;
175
+ --pie-blue-grey-300: #333377;
176
+ --pie-blue-grey-600: #6666aa;
177
+ --pie-blue-grey-900: #ffff00;
178
+ --pie-border: #ffff00;
179
+ --pie-border-dark: #cccc00;
180
+ --pie-border-gray: #8888aa;
181
+ --pie-border-light: #aaaa66;
182
+ --pie-button-active-bg: #000044;
183
+ --pie-button-bg: #000066;
184
+ --pie-button-border: #aaaa66;
185
+ --pie-button-color: #ffff00;
186
+ --pie-button-focus-outline: #ffff66;
187
+ --pie-button-hover-bg: #000055;
188
+ --pie-button-hover-border: #ffff00;
189
+ --pie-button-hover-color: #ffff00;
190
+ --pie-content-emphasis: #ff6666;
211
191
  --pie-correct: #00ff00;
192
+ --pie-correct-icon: #00ff00;
212
193
  --pie-correct-secondary: #003333;
213
194
  --pie-correct-tertiary: #00cc00;
214
- --pie-correct-icon: #00ff00;
195
+ --pie-disabled: #9999aa;
196
+ --pie-disabled-secondary: #aaaacc;
197
+ --pie-dropdown-background: #000033;
198
+ --pie-faded-primary: #666633;
199
+ --pie-fixed-hue-collapse: 100%;
200
+ --pie-focus-checked: #ffff00;
201
+ --pie-focus-checked-border: #cccc00;
202
+ --pie-focus-unchecked: #333366;
203
+ --pie-focus-unchecked-border: #ffff00;
215
204
  --pie-incorrect: #ff6666;
216
- --pie-incorrect-secondary: #331111;
217
205
  --pie-incorrect-icon: #ff3333;
206
+ --pie-incorrect-secondary: #331111;
218
207
  --pie-missing: #ff6666;
219
208
  --pie-missing-icon: #99ff99;
220
209
  --pie-primary: #ffff66;
221
- --pie-primary-light: #ffffaa;
222
210
  --pie-primary-dark: #cccc00;
223
- --pie-faded-primary: #666633;
211
+ --pie-primary-light: #ffffaa;
224
212
  --pie-secondary: #ffaa00;
225
- --pie-secondary-light: #ffcc66;
213
+ --pie-secondary-background: #000044;
226
214
  --pie-secondary-dark: #cc8800;
215
+ --pie-secondary-light: #ffcc66;
227
216
  --pie-tertiary: #ffee00;
228
217
  --pie-tertiary-light: #ffff99;
229
- --pie-background: #000066;
230
- --pie-background-dark: #000055;
231
- --pie-secondary-background: #000044;
232
- --pie-dropdown-background: #000033;
233
- --pie-border: #ffff00;
234
- --pie-border-light: #aaaa66;
235
- --pie-border-dark: #cccc00;
236
- --pie-border-gray: #8888aa;
237
- --pie-black: #ffff00;
218
+ --pie-text: #ffff00;
219
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
238
220
  --pie-white: #000066;
239
- --pie-focus-checked: #ffff00;
240
- --pie-focus-checked-border: #cccc00;
241
- --pie-focus-unchecked: #333366;
242
- --pie-focus-unchecked-border: #ffff00;
243
- --pie-blue-grey-100: #000055;
244
- --pie-blue-grey-300: #333377;
245
- --pie-blue-grey-600: #6666aa;
246
- --pie-blue-grey-900: #ffff00;
247
221
  }
248
222
 
249
- /* Black on Rose - Learnosity standard */
250
223
  [data-color-scheme="black-on-rose"] {
251
- --pie-text: #000000;
252
- --pie-disabled: #666666;
253
- --pie-disabled-secondary: #888888;
224
+ --pie-annotation-underline: #4221d5;
225
+ --pie-annotation-underline-dark: #4221d5;
226
+ --pie-background: #ffccdd;
227
+ --pie-background-dark: #ffb3cc;
228
+ --pie-black: #000000;
229
+ --pie-blue-grey-100: #ffeef5;
230
+ --pie-blue-grey-300: #ffccdd;
231
+ --pie-blue-grey-600: #cc6688;
232
+ --pie-blue-grey-900: #000000;
233
+ --pie-border: #000000;
234
+ --pie-border-dark: #000000;
235
+ --pie-border-gray: #444444;
236
+ --pie-border-light: #555555;
237
+ --pie-button-active-bg: #ff99bb;
238
+ --pie-button-bg: #ffccdd;
239
+ --pie-button-border: #555555;
240
+ --pie-button-color: #000000;
241
+ --pie-button-focus-outline: #880044;
242
+ --pie-button-hover-bg: #ffb3cc;
243
+ --pie-button-hover-border: #000000;
244
+ --pie-button-hover-color: #000000;
245
+ --pie-content-emphasis: #990000;
254
246
  --pie-correct: #006600;
255
- --pie-correct-secondary: #ccffcc;
256
- --pie-correct-tertiary: #008800;
257
247
  --pie-correct-icon: #004400;
248
+ --pie-correct-secondary: #ccffcc;
249
+ --pie-correct-tertiary: #007000;
250
+ --pie-disabled: #666666;
251
+ --pie-disabled-secondary: #888888;
252
+ --pie-dropdown-background: #ff88aa;
253
+ --pie-faded-primary: #ffccdd;
254
+ --pie-fixed-hue-collapse: 100%;
255
+ --pie-focus-checked: #880044;
256
+ --pie-focus-checked-border: #550033;
257
+ --pie-focus-unchecked: #ffddee;
258
+ --pie-focus-unchecked-border: #000000;
258
259
  --pie-incorrect: #990000;
259
- --pie-incorrect-secondary: #ffdddd;
260
260
  --pie-incorrect-icon: #770000;
261
+ --pie-incorrect-secondary: #ffdddd;
261
262
  --pie-missing: #990000;
262
263
  --pie-missing-icon: #000099;
263
264
  --pie-primary: #880044;
264
- --pie-primary-light: #dd6699;
265
265
  --pie-primary-dark: #550033;
266
- --pie-faded-primary: #ffccdd;
266
+ --pie-primary-light: #dd6699;
267
267
  --pie-secondary: #aa0055;
268
- --pie-secondary-light: #ff99cc;
268
+ --pie-secondary-background: #ff99bb;
269
269
  --pie-secondary-dark: #770033;
270
+ --pie-secondary-light: #ff99cc;
270
271
  --pie-tertiary: #990044;
271
272
  --pie-tertiary-light: #ffaacc;
272
- --pie-background: #ffccdd;
273
- --pie-background-dark: #ffb3cc;
274
- --pie-secondary-background: #ff99bb;
275
- --pie-dropdown-background: #ff88aa;
276
- --pie-border: #000000;
277
- --pie-border-light: #555555;
278
- --pie-border-dark: #000000;
279
- --pie-border-gray: #444444;
280
- --pie-black: #000000;
273
+ --pie-text: #000000;
274
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
281
275
  --pie-white: #ffccdd;
282
- --pie-focus-checked: #880044;
283
- --pie-focus-checked-border: #550033;
284
- --pie-focus-unchecked: #ffddee;
285
- --pie-focus-unchecked-border: #000000;
286
- --pie-blue-grey-100: #ffeef5;
287
- --pie-blue-grey-300: #ffccdd;
288
- --pie-blue-grey-600: #cc6688;
289
- --pie-blue-grey-900: #000000;
290
276
  }
291
277
 
292
- /* Light Gray on Dark Gray - Learnosity standard */
293
278
  [data-color-scheme="light-gray-on-dark-gray"] {
294
- --pie-text: #e0e0e0;
295
- --pie-disabled: #999999;
296
- --pie-disabled-secondary: #888888;
279
+ --pie-annotation-underline: #9c89ec;
280
+ --pie-annotation-underline-dark: #9c89ec;
281
+ --pie-background: #333333;
282
+ --pie-background-dark: #2a2a2a;
283
+ --pie-black: #e0e0e0;
284
+ --pie-blue-grey-100: #2a2a2a;
285
+ --pie-blue-grey-300: #555555;
286
+ --pie-blue-grey-600: #999999;
287
+ --pie-blue-grey-900: #e0e0e0;
288
+ --pie-border: #e0e0e0;
289
+ --pie-border-dark: #ffffff;
290
+ --pie-border-gray: #aaaaaa;
291
+ --pie-border-light: #cccccc;
292
+ --pie-button-active-bg: #222222;
293
+ --pie-button-bg: #333333;
294
+ --pie-button-border: #cccccc;
295
+ --pie-button-color: #e0e0e0;
296
+ --pie-button-focus-outline: #aaaaaa;
297
+ --pie-button-hover-bg: #2a2a2a;
298
+ --pie-button-hover-border: #ffffff;
299
+ --pie-button-hover-color: #e0e0e0;
300
+ --pie-content-emphasis: #ff6a6a;
297
301
  --pie-correct: #00cc00;
298
- --pie-correct-secondary: #003300;
299
- --pie-correct-tertiary: #00aa00;
300
302
  --pie-correct-icon: #00ff00;
301
- --pie-incorrect: #ff4444;
302
- --pie-incorrect-secondary: #331111;
303
+ --pie-correct-secondary: #003300;
304
+ --pie-correct-tertiary: #00bb00;
305
+ --pie-disabled: #999999;
306
+ --pie-disabled-secondary: #888888;
307
+ --pie-dropdown-background: #1a1a1a;
308
+ --pie-faded-primary: #555555;
309
+ --pie-fixed-hue-collapse: 100%;
310
+ --pie-focus-checked: #cccccc;
311
+ --pie-focus-checked-border: #aaaaaa;
312
+ --pie-focus-unchecked: #555555;
313
+ --pie-focus-unchecked-border: #e0e0e0;
314
+ --pie-incorrect: #ff6a6a;
303
315
  --pie-incorrect-icon: #ff0000;
304
- --pie-missing: #ff6666;
305
- --pie-missing-icon: #6666ff;
316
+ --pie-incorrect-secondary: #331111;
317
+ --pie-missing: #ff6a6a;
318
+ --pie-missing-icon: #6868ff;
306
319
  --pie-primary: #aaaaaa;
307
- --pie-primary-light: #cccccc;
308
320
  --pie-primary-dark: #888888;
309
- --pie-faded-primary: #555555;
321
+ --pie-primary-light: #cccccc;
310
322
  --pie-secondary: #bbbbbb;
311
- --pie-secondary-light: #dddddd;
323
+ --pie-secondary-background: #222222;
312
324
  --pie-secondary-dark: #999999;
325
+ --pie-secondary-light: #dddddd;
313
326
  --pie-tertiary: #cccccc;
314
327
  --pie-tertiary-light: #eeeeee;
315
- --pie-background: #333333;
316
- --pie-background-dark: #2a2a2a;
317
- --pie-secondary-background: #222222;
318
- --pie-dropdown-background: #1a1a1a;
319
- --pie-border: #e0e0e0;
320
- --pie-border-light: #cccccc;
321
- --pie-border-dark: #ffffff;
322
- --pie-border-gray: #aaaaaa;
323
- --pie-black: #e0e0e0;
328
+ --pie-text: #e0e0e0;
329
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
324
330
  --pie-white: #333333;
325
- --pie-focus-checked: #cccccc;
326
- --pie-focus-checked-border: #aaaaaa;
327
- --pie-focus-unchecked: #555555;
328
- --pie-focus-unchecked-border: #e0e0e0;
329
- --pie-blue-grey-100: #2a2a2a;
330
- --pie-blue-grey-300: #555555;
331
- --pie-blue-grey-600: #999999;
332
- --pie-blue-grey-900: #e0e0e0;
333
331
  }
334
332
 
335
- /* Grey on Light Grey - Learnosity standard */
336
333
  [data-color-scheme="grey-on-light-grey"] {
337
- --pie-text: #4a4a4a;
338
- --pie-disabled: #757575;
339
- --pie-disabled-secondary: #8f8f8f;
334
+ --pie-annotation-underline: #4221d5;
335
+ --pie-annotation-underline-dark: #4221d5;
336
+ --pie-background: #ebebeb;
337
+ --pie-background-dark: #dcdcdc;
338
+ --pie-black: #4a4a4a;
339
+ --pie-blue-grey-100: #f0f0f0;
340
+ --pie-blue-grey-300: #d0d0d0;
341
+ --pie-blue-grey-600: #6f6f6f;
342
+ --pie-blue-grey-900: #2b2b2b;
343
+ --pie-border: #4a4a4a;
344
+ --pie-border-dark: #2b2b2b;
345
+ --pie-border-gray: #6f6f6f;
346
+ --pie-border-light: #7a7a7a;
347
+ --pie-button-active-bg: #d0d0d0;
348
+ --pie-button-bg: #ebebeb;
349
+ --pie-button-border: #7a7a7a;
350
+ --pie-button-color: #4a4a4a;
351
+ --pie-button-focus-outline: #3d3d3d;
352
+ --pie-button-hover-bg: #dcdcdc;
353
+ --pie-button-hover-border: #4a4a4a;
354
+ --pie-button-hover-color: #4a4a4a;
355
+ --pie-content-emphasis: #8c1c1c;
340
356
  --pie-correct: #145c1e;
357
+ --pie-correct-icon: #0e3f15;
341
358
  --pie-correct-secondary: #dde9de;
342
359
  --pie-correct-tertiary: #1a7526;
343
- --pie-correct-icon: #0e3f15;
360
+ --pie-disabled: #757575;
361
+ --pie-disabled-secondary: #8f8f8f;
362
+ --pie-dropdown-background: #c4c4c4;
363
+ --pie-faded-primary: #dcdcdc;
364
+ --pie-fixed-hue-collapse: 100%;
365
+ --pie-focus-checked: #6f6f6f;
366
+ --pie-focus-checked-border: #3d3d3d;
367
+ --pie-focus-unchecked: #e0e0e0;
368
+ --pie-focus-unchecked-border: #4a4a4a;
344
369
  --pie-incorrect: #8c1c1c;
345
- --pie-incorrect-secondary: #eddcdc;
346
370
  --pie-incorrect-icon: #6f1616;
371
+ --pie-incorrect-secondary: #eddcdc;
347
372
  --pie-missing: #8c1c1c;
348
373
  --pie-missing-icon: #33406b;
349
374
  --pie-primary: #3d3d3d;
350
- --pie-primary-light: #6f6f6f;
351
375
  --pie-primary-dark: #2b2b2b;
352
- --pie-faded-primary: #dcdcdc;
376
+ --pie-primary-light: #6f6f6f;
353
377
  --pie-secondary: #4a4a4a;
354
- --pie-secondary-light: #8f8f8f;
378
+ --pie-secondary-background: #d0d0d0;
355
379
  --pie-secondary-dark: #2b2b2b;
380
+ --pie-secondary-light: #8f8f8f;
356
381
  --pie-tertiary: #3d3d3d;
357
382
  --pie-tertiary-light: #c4c4c4;
358
- --pie-background: #ebebeb;
359
- --pie-background-dark: #dcdcdc;
360
- --pie-secondary-background: #d0d0d0;
361
- --pie-dropdown-background: #c4c4c4;
362
- --pie-border: #4a4a4a;
363
- --pie-border-light: #7a7a7a;
364
- --pie-border-dark: #2b2b2b;
365
- --pie-border-gray: #6f6f6f;
366
- --pie-black: #4a4a4a;
383
+ --pie-text: #4a4a4a;
384
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
367
385
  --pie-white: #ebebeb;
368
- --pie-focus-checked: #6f6f6f;
369
- --pie-focus-checked-border: #3d3d3d;
370
- --pie-focus-unchecked: #e0e0e0;
371
- --pie-focus-unchecked-border: #4a4a4a;
372
- --pie-blue-grey-100: #f0f0f0;
373
- --pie-blue-grey-300: #d0d0d0;
374
- --pie-blue-grey-600: #6f6f6f;
375
- --pie-blue-grey-900: #2b2b2b;
376
386
  }
377
387
 
378
- /* Purple on Light Green - Learnosity standard */
379
388
  [data-color-scheme="purple-on-light-green"] {
380
- --pie-text: #8e2464;
381
- --pie-disabled: #5f7266;
382
- --pie-disabled-secondary: #7c8f83;
389
+ --pie-annotation-underline: #4221d5;
390
+ --pie-annotation-underline-dark: #4221d5;
391
+ --pie-background: #cce8d4;
392
+ --pie-background-dark: #b8dcc3;
393
+ --pie-black: #8e2464;
394
+ --pie-blue-grey-100: #e2f2e7;
395
+ --pie-blue-grey-300: #a6d0b2;
396
+ --pie-blue-grey-600: #5f7266;
397
+ --pie-blue-grey-900: #4f1237;
398
+ --pie-border: #8e2464;
399
+ --pie-border-dark: #4f1237;
400
+ --pie-border-gray: #5f7266;
401
+ --pie-border-light: #a85a86;
402
+ --pie-button-active-bg: #a6d0b2;
403
+ --pie-button-bg: #cce8d4;
404
+ --pie-button-border: #a85a86;
405
+ --pie-button-color: #8e2464;
406
+ --pie-button-focus-outline: #6d1a4c;
407
+ --pie-button-hover-bg: #b8dcc3;
408
+ --pie-button-hover-border: #8e2464;
409
+ --pie-button-hover-color: #8e2464;
410
+ --pie-content-emphasis: #8c1c1c;
383
411
  --pie-correct: #14591f;
412
+ --pie-correct-icon: #0e3d16;
384
413
  --pie-correct-secondary: #d8ecdc;
385
414
  --pie-correct-tertiary: #1a7328;
386
- --pie-correct-icon: #0e3d16;
415
+ --pie-disabled: #5f7266;
416
+ --pie-disabled-secondary: #7c8f83;
417
+ --pie-dropdown-background: #94c4a1;
418
+ --pie-faded-primary: #b8dcc3;
419
+ --pie-fixed-hue-collapse: 100%;
420
+ --pie-focus-checked: #8e2464;
421
+ --pie-focus-checked-border: #6d1a4c;
422
+ --pie-focus-unchecked: #dcefe2;
423
+ --pie-focus-unchecked-border: #8e2464;
387
424
  --pie-incorrect: #8c1c1c;
388
- --pie-incorrect-secondary: #f0dcdc;
389
425
  --pie-incorrect-icon: #6f1616;
426
+ --pie-incorrect-secondary: #f0dcdc;
390
427
  --pie-missing: #8c1c1c;
391
428
  --pie-missing-icon: #33406b;
392
429
  --pie-primary: #6d1a4c;
393
- --pie-primary-light: #b3608e;
394
430
  --pie-primary-dark: #4f1237;
395
- --pie-faded-primary: #b8dcc3;
431
+ --pie-primary-light: #b3608e;
396
432
  --pie-secondary: #a02b72;
397
- --pie-secondary-light: #c76d9d;
433
+ --pie-secondary-background: #a6d0b2;
398
434
  --pie-secondary-dark: #6d1a4c;
435
+ --pie-secondary-light: #c76d9d;
399
436
  --pie-tertiary: #8e2464;
400
437
  --pie-tertiary-light: #e2c6d5;
401
- --pie-background: #cce8d4;
402
- --pie-background-dark: #b8dcc3;
403
- --pie-secondary-background: #a6d0b2;
404
- --pie-dropdown-background: #94c4a1;
405
- --pie-border: #8e2464;
406
- --pie-border-light: #a85a86;
407
- --pie-border-dark: #4f1237;
408
- --pie-border-gray: #5f7266;
409
- --pie-black: #8e2464;
438
+ --pie-text: #8e2464;
439
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
410
440
  --pie-white: #cce8d4;
411
- --pie-focus-checked: #8e2464;
412
- --pie-focus-checked-border: #6d1a4c;
413
- --pie-focus-unchecked: #dcefe2;
414
- --pie-focus-unchecked-border: #8e2464;
415
- --pie-blue-grey-100: #e2f2e7;
416
- --pie-blue-grey-300: #a6d0b2;
417
- --pie-blue-grey-600: #5f7266;
418
- --pie-blue-grey-900: #4f1237;
419
441
  }
420
442
 
421
- /* Black on Violet - Learnosity standard */
422
443
  [data-color-scheme="black-on-violet"] {
423
- --pie-text: #000000;
424
- --pie-disabled: #5c5c5c;
425
- --pie-disabled-secondary: #7a7a7a;
444
+ --pie-annotation-underline: #4221d5;
445
+ --pie-annotation-underline-dark: #4221d5;
446
+ --pie-background: #d4a9de;
447
+ --pie-background-dark: #c795d3;
448
+ --pie-black: #000000;
449
+ --pie-blue-grey-100: #ece0f0;
450
+ --pie-blue-grey-300: #c795d3;
451
+ --pie-blue-grey-600: #6d5c73;
452
+ --pie-blue-grey-900: #000000;
453
+ --pie-border: #000000;
454
+ --pie-border-dark: #000000;
455
+ --pie-border-gray: #4a4a4a;
456
+ --pie-border-light: #4a4a4a;
457
+ --pie-button-active-bg: #b982c8;
458
+ --pie-button-bg: #d4a9de;
459
+ --pie-button-border: #4a4a4a;
460
+ --pie-button-color: #000000;
461
+ --pie-button-focus-outline: #4a1259;
462
+ --pie-button-hover-bg: #c795d3;
463
+ --pie-button-hover-border: #000000;
464
+ --pie-button-hover-color: #000000;
465
+ --pie-content-emphasis: #7d1414;
426
466
  --pie-correct: #0d4f16;
467
+ --pie-correct-icon: #093a0f;
427
468
  --pie-correct-secondary: #e0cfe6;
428
469
  --pie-correct-tertiary: #0f4d17;
429
- --pie-correct-icon: #093a0f;
470
+ --pie-disabled: #5c5c5c;
471
+ --pie-disabled-secondary: #7a7a7a;
472
+ --pie-dropdown-background: #ac70bd;
473
+ --pie-faded-primary: #c795d3;
474
+ --pie-fixed-hue-collapse: 100%;
475
+ --pie-focus-checked: #4a1259;
476
+ --pie-focus-checked-border: #330d3f;
477
+ --pie-focus-unchecked: #e2cbe8;
478
+ --pie-focus-unchecked-border: #000000;
430
479
  --pie-incorrect: #7d1414;
431
- --pie-incorrect-secondary: #eccfd0;
432
480
  --pie-incorrect-icon: #5c0f0f;
481
+ --pie-incorrect-secondary: #eccfd0;
433
482
  --pie-missing: #7d1414;
434
483
  --pie-missing-icon: #2b2b6b;
435
484
  --pie-primary: #4a1259;
436
- --pie-primary-light: #8e4fa1;
437
485
  --pie-primary-dark: #330d3f;
438
- --pie-faded-primary: #c795d3;
486
+ --pie-primary-light: #8e4fa1;
439
487
  --pie-secondary: #6d1a7d;
440
- --pie-secondary-light: #a95cb8;
488
+ --pie-secondary-background: #b982c8;
441
489
  --pie-secondary-dark: #4a1259;
490
+ --pie-secondary-light: #a95cb8;
442
491
  --pie-tertiary: #4a1259;
443
492
  --pie-tertiary-light: #e2cbe8;
444
- --pie-background: #d4a9de;
445
- --pie-background-dark: #c795d3;
446
- --pie-secondary-background: #b982c8;
447
- --pie-dropdown-background: #ac70bd;
448
- --pie-border: #000000;
449
- --pie-border-light: #4a4a4a;
450
- --pie-border-dark: #000000;
451
- --pie-border-gray: #4a4a4a;
452
- --pie-black: #000000;
493
+ --pie-text: #000000;
494
+ --pie-tool-annotation-toolbar-border: var(--pie-border);
453
495
  --pie-white: #d4a9de;
454
- --pie-focus-checked: #4a1259;
455
- --pie-focus-checked-border: #330d3f;
456
- --pie-focus-unchecked: #e2cbe8;
457
- --pie-focus-unchecked-border: #000000;
458
- --pie-blue-grey-100: #ece0f0;
459
- --pie-blue-grey-300: #c795d3;
460
- --pie-blue-grey-600: #6d5c73;
461
- --pie-blue-grey-900: #000000;
462
496
  }
463
497
 
464
- /* Yellow on Navy - Learnosity standard */
465
498
  [data-color-scheme="yellow-on-navy"] {
466
- --pie-text: #ffff55;
467
- --pie-disabled: #9aa4bd;
468
- --pie-disabled-secondary: #7d88a3;
499
+ --pie-annotation-underline: var(--pie-primary);
500
+ --pie-annotation-underline-dark: var(--pie-primary);
501
+ --pie-background: #33508a;
502
+ --pie-background-dark: #2b4576;
503
+ --pie-black: #ffff55;
504
+ --pie-blue-grey-100: #2b4576;
505
+ --pie-blue-grey-300: #4a6aa8;
506
+ --pie-blue-grey-600: #9aa4bd;
507
+ --pie-blue-grey-900: #ffff55;
508
+ --pie-border: #ffff55;
509
+ --pie-border-dark: #e0e04a;
510
+ --pie-border-gray: #9aa4bd;
511
+ --pie-border-light: #c2c266;
512
+ --pie-button-active-bg: #243a63;
513
+ --pie-button-bg: #33508a;
514
+ --pie-button-border: #c2c266;
515
+ --pie-button-color: #ffff55;
516
+ --pie-button-focus-outline: #ffff99;
517
+ --pie-button-hover-bg: #2b4576;
518
+ --pie-button-hover-border: #ffff55;
519
+ --pie-button-hover-color: #ffff55;
520
+ --pie-content-emphasis: #ffbebe;
469
521
  --pie-correct: #7fe08a;
522
+ --pie-correct-icon: #a8f0b0;
470
523
  --pie-correct-secondary: #1d3a24;
471
524
  --pie-correct-tertiary: #a0dda9;
472
- --pie-correct-icon: #a8f0b0;
525
+ --pie-disabled: #9aa4bd;
526
+ --pie-disabled-secondary: #7d88a3;
527
+ --pie-dropdown-background: #1d2f50;
528
+ --pie-faded-primary: #2b4576;
529
+ --pie-fixed-hue-collapse: 100%;
530
+ --pie-focus-checked: #ffff55;
531
+ --pie-focus-checked-border: #e0e04a;
532
+ --pie-focus-unchecked: #243a63;
533
+ --pie-focus-unchecked-border: #ffff55;
473
534
  --pie-incorrect: #ffbebe;
474
- --pie-incorrect-secondary: #3d1d1d;
475
535
  --pie-incorrect-icon: #ffb3b3;
536
+ --pie-incorrect-secondary: #3d1d1d;
476
537
  --pie-missing: #ffbebe;
477
538
  --pie-missing-icon: #b3c2ff;
478
539
  --pie-primary: #ffff99;
479
- --pie-primary-light: #ffffc2;
480
540
  --pie-primary-dark: #e0e04a;
481
- --pie-faded-primary: #2b4576;
541
+ --pie-primary-light: #ffffc2;
482
542
  --pie-secondary: #ffd95c;
483
- --pie-secondary-light: #ffeaa0;
543
+ --pie-secondary-background: #243a63;
484
544
  --pie-secondary-dark: #e0bb3d;
545
+ --pie-secondary-light: #ffeaa0;
485
546
  --pie-tertiary: #ffff99;
486
547
  --pie-tertiary-light: #ffffcc;
487
- --pie-background: #33508a;
488
- --pie-background-dark: #2b4576;
489
- --pie-secondary-background: #243a63;
490
- --pie-dropdown-background: #1d2f50;
491
- --pie-border: #ffff55;
492
- --pie-border-light: #c2c266;
493
- --pie-border-dark: #e0e04a;
494
- --pie-border-gray: #9aa4bd;
495
- --pie-black: #ffff55;
496
- --pie-white: #33508a;
497
- --pie-focus-checked: #ffff55;
498
- --pie-focus-checked-border: #e0e04a;
499
- --pie-focus-unchecked: #243a63;
500
- --pie-focus-unchecked-border: #ffff55;
501
- --pie-blue-grey-100: #2b4576;
502
- --pie-blue-grey-300: #4a6aa8;
503
- --pie-blue-grey-600: #9aa4bd;
504
- --pie-blue-grey-900: #ffff55;
505
- }
506
-
507
- /* The annotation toolbar's outline defaults to a contrast-checked grey pair of
508
- * its own rather than --pie-border, because under the DaisyUI bridge that token
509
- * carries a surface tint that leaves the outline at ~1.1:1. These two rules give
510
- * the palettes that DO choose a boundary colour deliberately the last word.
511
- *
512
- * The dark theme is pinned because the component's light-dark() default follows
513
- * the declared color-scheme, which pie-theme does not set; without this, a
514
- * pie-theme dark page would take the light value. The pinned value is therefore
515
- * the component's dark arm, #949494 -- the light grey. A boundary on a dark
516
- * surface has to be lighter than it, so this is 6.92:1 on the dark palette's
517
- * #000000 background, where the dark arm #5c5c5c would sit at 3.14:1 with no
518
- * margin and drop to 2.37:1 on DaisyUI's dark base.
519
- */
520
- [data-theme="dark"],
521
- pie-theme[theme="dark"] {
522
- --pie-tool-annotation-toolbar-border: #949494;
523
- }
524
-
525
- /* Both annotation marks follow the palette's own colours, because every scheme
526
- * above picks --pie-border and --pie-primary for maximum contrast against its own
527
- * background. This must stay after the dark rule: the two selectors have equal
528
- * specificity, and a scheme can be active on a dark page.
529
- *
530
- * The outline cannot fall back to the component greys here. Neither arm covers
531
- * these palettes: the light arm #5c5c5c fails on yellow-on-blue (2.63:1),
532
- * light-gray-on-dark-gray (1.89:1) and yellow-on-navy (1.18:1), while the dark arm
533
- * #949494 fails on rose-on-green (2.71:1), black-on-rose (2.16:1),
534
- * grey-on-light-grey (2.54:1), purple-on-light-green (2.32:1), black-on-violet
535
- * (1.52:1) and yellow-on-navy (2.61:1). Several of these backgrounds are mid-tone,
536
- * so no single grey clears 3:1 on them -- only the palette's own --pie-border does.
537
- *
538
- * The underline needs the same hand-off for a different reason. Its component
539
- * default is keyed on [data-theme], which reports what the *page* declares, not
540
- * which scheme is active -- so a host that declares itself light while running a
541
- * dark scheme pins the light default (#4221d5) over a dark background. Both
542
- * underline states get --pie-primary because within a scheme the background is
543
- * fixed by the scheme, so one value is correct either way. --pie-primary clears
544
- * 3:1 on all ten backgrounds, from 5.44:1 on light-gray-on-dark-gray to 19.56:1 on
545
- * white-on-black.
546
- *
547
- * These same three tokens are declared per scheme in color-schemes.ts, so a host
548
- * using <pie-theme scheme="..."> gets them as inline styles without importing this
549
- * file. Keep the two in sync.
550
- *
551
- * The schemes are named rather than matched with [data-color-scheme], so an id
552
- * with no block above cannot pull in the :root values, where --pie-border is
553
- * #9a9a9a and misses 3:1 on white. Add a scheme here when adding one above.
554
- */
555
- [data-color-scheme="black-on-white"],
556
- [data-color-scheme="white-on-black"],
557
- [data-color-scheme="rose-on-green"],
558
- [data-color-scheme="yellow-on-blue"],
559
- [data-color-scheme="black-on-rose"],
560
- [data-color-scheme="light-gray-on-dark-gray"],
561
- [data-color-scheme="grey-on-light-grey"],
562
- [data-color-scheme="purple-on-light-green"],
563
- [data-color-scheme="black-on-violet"],
564
- [data-color-scheme="yellow-on-navy"] {
548
+ --pie-text: #ffff55;
565
549
  --pie-tool-annotation-toolbar-border: var(--pie-border);
566
- }
567
-
568
- /* The underline keeps the component's own violet pair rather than following the
569
- * palette accent: #4221d5 and #9c89ec clear 3:1 on nine of the ten backgrounds
570
- * between them, so only the *selection* was ever wrong. Each scheme is given the
571
- * arm that suits its own background, and both states get that one value because
572
- * within a scheme the background is fixed regardless of what data-theme reports.
573
- *
574
- * Ratios, light arm / dark arm: black-on-white 8.71 / 2.92, rose-on-green
575
- * 7.78 / 2.60, black-on-rose 6.20 / 2.07, grey-on-light-grey 7.31 / 2.45,
576
- * purple-on-light-green 6.66 / 2.23, black-on-violet 4.37 / 1.46,
577
- * white-on-black 2.41 / 7.20, yellow-on-blue 2.02 / 6.04,
578
- * light-gray-on-dark-gray 1.45 / 4.33.
579
- */
580
- [data-color-scheme="black-on-white"],
581
- [data-color-scheme="rose-on-green"],
582
- [data-color-scheme="black-on-rose"],
583
- [data-color-scheme="grey-on-light-grey"],
584
- [data-color-scheme="purple-on-light-green"],
585
- [data-color-scheme="black-on-violet"] {
586
- --pie-annotation-underline: #4221d5;
587
- --pie-annotation-underline-dark: #4221d5;
588
- }
589
-
590
- [data-color-scheme="white-on-black"],
591
- [data-color-scheme="yellow-on-blue"],
592
- [data-color-scheme="light-gray-on-dark-gray"] {
593
- --pie-annotation-underline: #9c89ec;
594
- --pie-annotation-underline-dark: #9c89ec;
595
- }
596
-
597
- /* yellow-on-navy is the one exception: its #33508a background is mid-tone, and
598
- * neither arm reaches 3:1 on it (1.10 light, 2.71 dark). Only here does the
599
- * underline defer to the palette's own accent, #ffff99 at 7.54:1 -- the same
600
- * deference the outline makes to --pie-border above. This scheme arrived with the
601
- * later Learnosity palettes, after the violet pair was chosen.
602
- */
603
- [data-color-scheme="yellow-on-navy"] {
604
- --pie-annotation-underline: var(--pie-primary);
605
- --pie-annotation-underline-dark: var(--pie-primary);
550
+ --pie-white: #33508a;
606
551
  }