@lilydesignsystem/themes 0.2.0 → 0.3.0

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 (46) hide show
  1. package/dist/abyss.css +11 -3
  2. package/dist/acid.css +11 -3
  3. package/dist/adobe-spectrum.css +11 -3
  4. package/dist/aqua.css +11 -3
  5. package/dist/autumn.css +11 -3
  6. package/dist/black.css +11 -3
  7. package/dist/bumblebee.css +11 -3
  8. package/dist/business.css +11 -3
  9. package/dist/caramellatte.css +11 -3
  10. package/dist/cmyk.css +11 -3
  11. package/dist/coffee.css +11 -3
  12. package/dist/corporate.css +11 -3
  13. package/dist/cupcake.css +11 -3
  14. package/dist/cyberpunk.css +11 -3
  15. package/dist/dark.css +11 -3
  16. package/dist/dim.css +11 -3
  17. package/dist/dracula.css +11 -3
  18. package/dist/emerald.css +11 -3
  19. package/dist/fantasy.css +11 -3
  20. package/dist/forest.css +11 -3
  21. package/dist/garden.css +11 -3
  22. package/dist/halloween.css +11 -3
  23. package/dist/lemonade.css +11 -3
  24. package/dist/light.css +11 -3
  25. package/dist/lofi.css +11 -3
  26. package/dist/luxury.css +11 -3
  27. package/dist/mozilla-protocol.css +11 -3
  28. package/dist/night.css +11 -3
  29. package/dist/nord.css +11 -3
  30. package/dist/pastel.css +11 -3
  31. package/dist/retro.css +11 -3
  32. package/dist/silk.css +11 -3
  33. package/dist/sunset.css +11 -3
  34. package/dist/synthwave.css +11 -3
  35. package/dist/united-kingdom-government-digital-service.css +11 -3
  36. package/dist/united-kingdom-national-health-service-england-for-patients.css +11 -3
  37. package/dist/united-kingdom-national-health-service-england-for-practitioners.css +11 -3
  38. package/dist/united-kingdom-national-health-service-scotland-for-patients.css +11 -3
  39. package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css +11 -3
  40. package/dist/united-kingdom-national-health-service-wales-for-patients.css +11 -3
  41. package/dist/united-kingdom-national-health-service-wales-for-practitioners.css +11 -3
  42. package/dist/united-states-web-design-system.css +11 -3
  43. package/dist/valentine.css +11 -3
  44. package/dist/winter.css +11 -3
  45. package/dist/wireframe.css +11 -3
  46. package/package.json +1 -1
package/dist/sunset.css CHANGED
@@ -155,6 +155,14 @@
155
155
  /* Primary body-copy colour. Maps to the theme's high-contrast
156
156
  reading colour. */
157
157
  --lily-text: var(--color-base-content);
158
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
159
+ keeps WCAG contrast as text on the page and on the error-tinted
160
+ callout surface (`--color-error` itself is a fill colour). */
161
+ --lily-error-text: color-mix(
162
+ in oklch,
163
+ var(--color-error) 22%,
164
+ var(--color-base-content)
165
+ );
158
166
  /* Muted / secondary text — mixed 70% with transparent to keep the
159
167
  hue but lower contrast for captions, helptext, placeholders. */
160
168
  --lily-text-muted: color-mix(
@@ -894,7 +902,7 @@
894
902
  }
895
903
  :where(.dont-list-item)::marker {
896
904
  content: "✗ ";
897
- color: var(--color-error);
905
+ color: var(--lily-error-text);
898
906
  }
899
907
 
900
908
  /* --- Tree --------------------------------------------------------------- */
@@ -976,7 +984,7 @@
976
984
  color: var(--color-success);
977
985
  }
978
986
  :where(.validation-list-item[data-status="failed"]) {
979
- color: var(--color-error);
987
+ color: var(--lily-error-text);
980
988
  }
981
989
  :where(.validation-list-item[data-status="pending"]) {
982
990
  color: var(--lily-text-muted);
@@ -1334,7 +1342,7 @@
1334
1342
 
1335
1343
  /* Error message — inline form-validation message. */
1336
1344
  :where(.error-message) {
1337
- color: var(--color-error);
1345
+ color: var(--lily-error-text);
1338
1346
  font-weight: 600;
1339
1347
  }
1340
1348
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/synthwave.css CHANGED
@@ -155,6 +155,14 @@
155
155
  /* Primary body-copy colour. Maps to the theme's high-contrast
156
156
  reading colour. */
157
157
  --lily-text: var(--color-base-content);
158
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
159
+ keeps WCAG contrast as text on the page and on the error-tinted
160
+ callout surface (`--color-error` itself is a fill colour). */
161
+ --lily-error-text: color-mix(
162
+ in oklch,
163
+ var(--color-error) 22%,
164
+ var(--color-base-content)
165
+ );
158
166
  /* Muted / secondary text — mixed 70% with transparent to keep the
159
167
  hue but lower contrast for captions, helptext, placeholders. */
160
168
  --lily-text-muted: color-mix(
@@ -894,7 +902,7 @@
894
902
  }
895
903
  :where(.dont-list-item)::marker {
896
904
  content: "✗ ";
897
- color: var(--color-error);
905
+ color: var(--lily-error-text);
898
906
  }
899
907
 
900
908
  /* --- Tree --------------------------------------------------------------- */
@@ -976,7 +984,7 @@
976
984
  color: var(--color-success);
977
985
  }
978
986
  :where(.validation-list-item[data-status="failed"]) {
979
- color: var(--color-error);
987
+ color: var(--lily-error-text);
980
988
  }
981
989
  :where(.validation-list-item[data-status="pending"]) {
982
990
  color: var(--lily-text-muted);
@@ -1334,7 +1342,7 @@
1334
1342
 
1335
1343
  /* Error message — inline form-validation message. */
1336
1344
  :where(.error-message) {
1337
- color: var(--color-error);
1345
+ color: var(--lily-error-text);
1338
1346
  font-weight: 600;
1339
1347
  }
1340
1348
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-government-digital-service.css CHANGED
@@ -160,6 +160,14 @@
160
160
  /* Primary body-copy colour. Maps to the theme's high-contrast
161
161
  reading colour. */
162
162
  --lily-text: var(--color-base-content);
163
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
164
+ keeps WCAG contrast as text on the page and on the error-tinted
165
+ callout surface (`--color-error` itself is a fill colour). */
166
+ --lily-error-text: color-mix(
167
+ in oklch,
168
+ var(--color-error) 22%,
169
+ var(--color-base-content)
170
+ );
163
171
  /* Muted / secondary text — mixed 70% with transparent to keep the
164
172
  hue but lower contrast for captions, helptext, placeholders. */
165
173
  --lily-text-muted: color-mix(
@@ -899,7 +907,7 @@
899
907
  }
900
908
  :where(.dont-list-item)::marker {
901
909
  content: "✗ ";
902
- color: var(--color-error);
910
+ color: var(--lily-error-text);
903
911
  }
904
912
 
905
913
  /* --- Tree --------------------------------------------------------------- */
@@ -981,7 +989,7 @@
981
989
  color: var(--color-success);
982
990
  }
983
991
  :where(.validation-list-item[data-status="failed"]) {
984
- color: var(--color-error);
992
+ color: var(--lily-error-text);
985
993
  }
986
994
  :where(.validation-list-item[data-status="pending"]) {
987
995
  color: var(--lily-text-muted);
@@ -1339,7 +1347,7 @@
1339
1347
 
1340
1348
  /* Error message — inline form-validation message. */
1341
1349
  :where(.error-message) {
1342
- color: var(--color-error);
1350
+ color: var(--lily-error-text);
1343
1351
  font-weight: 600;
1344
1352
  }
1345
1353
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-national-health-service-england-for-patients.css CHANGED
@@ -196,6 +196,14 @@
196
196
  /* Primary body-copy colour. Maps to the theme's high-contrast
197
197
  reading colour. */
198
198
  --lily-text: var(--color-base-content);
199
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
200
+ keeps WCAG contrast as text on the page and on the error-tinted
201
+ callout surface (`--color-error` itself is a fill colour). */
202
+ --lily-error-text: color-mix(
203
+ in oklch,
204
+ var(--color-error) 22%,
205
+ var(--color-base-content)
206
+ );
199
207
  /* Muted / secondary text — mixed 70% with transparent to keep the
200
208
  hue but lower contrast for captions, helptext, placeholders. */
201
209
  --lily-text-muted: color-mix(
@@ -935,7 +943,7 @@
935
943
  }
936
944
  :where(.dont-list-item)::marker {
937
945
  content: "✗ ";
938
- color: var(--color-error);
946
+ color: var(--lily-error-text);
939
947
  }
940
948
 
941
949
  /* --- Tree --------------------------------------------------------------- */
@@ -1017,7 +1025,7 @@
1017
1025
  color: var(--color-success);
1018
1026
  }
1019
1027
  :where(.validation-list-item[data-status="failed"]) {
1020
- color: var(--color-error);
1028
+ color: var(--lily-error-text);
1021
1029
  }
1022
1030
  :where(.validation-list-item[data-status="pending"]) {
1023
1031
  color: var(--lily-text-muted);
@@ -1375,7 +1383,7 @@
1375
1383
 
1376
1384
  /* Error message — inline form-validation message. */
1377
1385
  :where(.error-message) {
1378
- color: var(--color-error);
1386
+ color: var(--lily-error-text);
1379
1387
  font-weight: 600;
1380
1388
  }
1381
1389
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-national-health-service-england-for-practitioners.css CHANGED
@@ -245,6 +245,14 @@
245
245
  /* Primary body-copy colour. Maps to the theme's high-contrast
246
246
  reading colour. */
247
247
  --lily-text: var(--color-base-content);
248
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
249
+ keeps WCAG contrast as text on the page and on the error-tinted
250
+ callout surface (`--color-error` itself is a fill colour). */
251
+ --lily-error-text: color-mix(
252
+ in oklch,
253
+ var(--color-error) 22%,
254
+ var(--color-base-content)
255
+ );
248
256
  /* Muted / secondary text — mixed 70% with transparent to keep the
249
257
  hue but lower contrast for captions, helptext, placeholders. */
250
258
  --lily-text-muted: color-mix(
@@ -1014,7 +1022,7 @@
1014
1022
  }
1015
1023
  :where(.dont-list-item)::marker {
1016
1024
  content: "✗ ";
1017
- color: var(--color-error);
1025
+ color: var(--lily-error-text);
1018
1026
  }
1019
1027
 
1020
1028
  /* --- Tree --------------------------------------------------------------- */
@@ -1096,7 +1104,7 @@
1096
1104
  color: var(--color-success);
1097
1105
  }
1098
1106
  :where(.validation-list-item[data-status="failed"]) {
1099
- color: var(--color-error);
1107
+ color: var(--lily-error-text);
1100
1108
  }
1101
1109
  :where(.validation-list-item[data-status="pending"]) {
1102
1110
  color: var(--lily-text-muted);
@@ -1460,7 +1468,7 @@
1460
1468
 
1461
1469
  /* Error message — inline form-validation message. */
1462
1470
  :where(.error-message) {
1463
- color: var(--color-error);
1471
+ color: var(--lily-error-text);
1464
1472
  font-weight: 600;
1465
1473
  }
1466
1474
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-national-health-service-scotland-for-patients.css CHANGED
@@ -299,6 +299,14 @@
299
299
  /* Primary body-copy colour. Maps to the theme's high-contrast
300
300
  reading colour. */
301
301
  --lily-text: var(--color-base-content);
302
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
303
+ keeps WCAG contrast as text on the page and on the error-tinted
304
+ callout surface (`--color-error` itself is a fill colour). */
305
+ --lily-error-text: color-mix(
306
+ in oklch,
307
+ var(--color-error) 22%,
308
+ var(--color-base-content)
309
+ );
302
310
  /* Muted / secondary text — mixed 70% with transparent to keep the
303
311
  hue but lower contrast for captions, helptext, placeholders. */
304
312
  --lily-text-muted: color-mix(
@@ -1038,7 +1046,7 @@
1038
1046
  }
1039
1047
  :where(.dont-list-item)::marker {
1040
1048
  content: "✗ ";
1041
- color: var(--color-error);
1049
+ color: var(--lily-error-text);
1042
1050
  }
1043
1051
 
1044
1052
  /* --- Tree --------------------------------------------------------------- */
@@ -1120,7 +1128,7 @@
1120
1128
  color: var(--color-success);
1121
1129
  }
1122
1130
  :where(.validation-list-item[data-status="failed"]) {
1123
- color: var(--color-error);
1131
+ color: var(--lily-error-text);
1124
1132
  }
1125
1133
  :where(.validation-list-item[data-status="pending"]) {
1126
1134
  color: var(--lily-text-muted);
@@ -1478,7 +1486,7 @@
1478
1486
 
1479
1487
  /* Error message — inline form-validation message. */
1480
1488
  :where(.error-message) {
1481
- color: var(--color-error);
1489
+ color: var(--lily-error-text);
1482
1490
  font-weight: 600;
1483
1491
  }
1484
1492
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-national-health-service-scotland-for-practitioners.css CHANGED
@@ -341,6 +341,14 @@
341
341
  /* Primary body-copy colour. Maps to the theme's high-contrast
342
342
  reading colour. */
343
343
  --lily-text: var(--color-base-content);
344
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
345
+ keeps WCAG contrast as text on the page and on the error-tinted
346
+ callout surface (`--color-error` itself is a fill colour). */
347
+ --lily-error-text: color-mix(
348
+ in oklch,
349
+ var(--color-error) 22%,
350
+ var(--color-base-content)
351
+ );
344
352
  /* Muted / secondary text — mixed 70% with transparent to keep the
345
353
  hue but lower contrast for captions, helptext, placeholders. */
346
354
  --lily-text-muted: color-mix(
@@ -1110,7 +1118,7 @@
1110
1118
  }
1111
1119
  :where(.dont-list-item)::marker {
1112
1120
  content: "✗ ";
1113
- color: var(--color-error);
1121
+ color: var(--lily-error-text);
1114
1122
  }
1115
1123
 
1116
1124
  /* --- Tree --------------------------------------------------------------- */
@@ -1192,7 +1200,7 @@
1192
1200
  color: var(--color-success);
1193
1201
  }
1194
1202
  :where(.validation-list-item[data-status="failed"]) {
1195
- color: var(--color-error);
1203
+ color: var(--lily-error-text);
1196
1204
  }
1197
1205
  :where(.validation-list-item[data-status="pending"]) {
1198
1206
  color: var(--lily-text-muted);
@@ -1556,7 +1564,7 @@
1556
1564
 
1557
1565
  /* Error message — inline form-validation message. */
1558
1566
  :where(.error-message) {
1559
- color: var(--color-error);
1567
+ color: var(--lily-error-text);
1560
1568
  font-weight: 600;
1561
1569
  }
1562
1570
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-national-health-service-wales-for-patients.css CHANGED
@@ -483,6 +483,14 @@
483
483
  /* Primary body-copy colour. Maps to the theme's high-contrast
484
484
  reading colour. */
485
485
  --lily-text: var(--color-base-content);
486
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
487
+ keeps WCAG contrast as text on the page and on the error-tinted
488
+ callout surface (`--color-error` itself is a fill colour). */
489
+ --lily-error-text: color-mix(
490
+ in oklch,
491
+ var(--color-error) 22%,
492
+ var(--color-base-content)
493
+ );
486
494
  /* Muted / secondary text — mixed 70% with transparent to keep the
487
495
  hue but lower contrast for captions, helptext, placeholders. */
488
496
  --lily-text-muted: color-mix(
@@ -1478,7 +1486,7 @@
1478
1486
  }
1479
1487
  :where(.dont-list-item)::marker {
1480
1488
  content: "✗ ";
1481
- color: var(--color-error);
1489
+ color: var(--lily-error-text);
1482
1490
  }
1483
1491
 
1484
1492
  /* --- Tree --------------------------------------------------------------- */
@@ -1560,7 +1568,7 @@
1560
1568
  color: var(--color-success);
1561
1569
  }
1562
1570
  :where(.validation-list-item[data-status="failed"]) {
1563
- color: var(--color-error);
1571
+ color: var(--lily-error-text);
1564
1572
  }
1565
1573
  :where(.validation-list-item[data-status="pending"]) {
1566
1574
  color: var(--lily-text-muted);
@@ -2032,7 +2040,7 @@
2032
2040
 
2033
2041
  /* Error message — inline form-validation message. */
2034
2042
  :where(.error-message) {
2035
- color: var(--color-error);
2043
+ color: var(--lily-error-text);
2036
2044
  font-weight: 600;
2037
2045
  }
2038
2046
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/united-kingdom-national-health-service-wales-for-practitioners.css CHANGED
@@ -535,6 +535,14 @@
535
535
  /* Primary body-copy colour. Maps to the theme's high-contrast
536
536
  reading colour. */
537
537
  --lily-text: var(--color-base-content);
538
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
539
+ keeps WCAG contrast as text on the page and on the error-tinted
540
+ callout surface (`--color-error` itself is a fill colour). */
541
+ --lily-error-text: color-mix(
542
+ in oklch,
543
+ var(--color-error) 22%,
544
+ var(--color-base-content)
545
+ );
538
546
  /* Muted / secondary text — mixed 70% with transparent to keep the
539
547
  hue but lower contrast for captions, helptext, placeholders. */
540
548
  --lily-text-muted: color-mix(
@@ -1586,7 +1594,7 @@
1586
1594
  }
1587
1595
  :where(.dont-list-item)::marker {
1588
1596
  content: "✗ ";
1589
- color: var(--color-error);
1597
+ color: var(--lily-error-text);
1590
1598
  }
1591
1599
 
1592
1600
  /* --- Tree --------------------------------------------------------------- */
@@ -1668,7 +1676,7 @@
1668
1676
  color: var(--color-success);
1669
1677
  }
1670
1678
  :where(.validation-list-item[data-status="failed"]) {
1671
- color: var(--color-error);
1679
+ color: var(--lily-error-text);
1672
1680
  }
1673
1681
  :where(.validation-list-item[data-status="pending"]) {
1674
1682
  color: var(--lily-text-muted);
@@ -2154,7 +2162,7 @@
2154
2162
 
2155
2163
  /* Error message — inline form-validation message. */
2156
2164
  :where(.error-message) {
2157
- color: var(--color-error);
2165
+ color: var(--lily-error-text);
2158
2166
  font-weight: 600;
2159
2167
  }
2160
2168
  /* Error summary — heavyweight border (GOV.UK pattern) so users scrolling
package/dist/united-states-web-design-system.css CHANGED
@@ -156,6 +156,14 @@
156
156
  /* Primary body-copy colour. Maps to the theme's high-contrast
157
157
  reading colour. */
158
158
  --lily-text: var(--color-base-content);
159
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
160
+ keeps WCAG contrast as text on the page and on the error-tinted
161
+ callout surface (`--color-error` itself is a fill colour). */
162
+ --lily-error-text: color-mix(
163
+ in oklch,
164
+ var(--color-error) 22%,
165
+ var(--color-base-content)
166
+ );
159
167
  /* Muted / secondary text — mixed 70% with transparent to keep the
160
168
  hue but lower contrast for captions, helptext, placeholders. */
161
169
  --lily-text-muted: color-mix(
@@ -895,7 +903,7 @@
895
903
  }
896
904
  :where(.dont-list-item)::marker {
897
905
  content: "✗ ";
898
- color: var(--color-error);
906
+ color: var(--lily-error-text);
899
907
  }
900
908
 
901
909
  /* --- Tree --------------------------------------------------------------- */
@@ -977,7 +985,7 @@
977
985
  color: var(--color-success);
978
986
  }
979
987
  :where(.validation-list-item[data-status="failed"]) {
980
- color: var(--color-error);
988
+ color: var(--lily-error-text);
981
989
  }
982
990
  :where(.validation-list-item[data-status="pending"]) {
983
991
  color: var(--lily-text-muted);
@@ -1335,7 +1343,7 @@
1335
1343
 
1336
1344
  /* Error message — inline form-validation message. */
1337
1345
  :where(.error-message) {
1338
- color: var(--color-error);
1346
+ color: var(--lily-error-text);
1339
1347
  font-weight: 600;
1340
1348
  }
1341
1349
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/valentine.css CHANGED
@@ -156,6 +156,14 @@
156
156
  /* Primary body-copy colour. Maps to the theme's high-contrast
157
157
  reading colour. */
158
158
  --lily-text: var(--color-base-content);
159
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
160
+ keeps WCAG contrast as text on the page and on the error-tinted
161
+ callout surface (`--color-error` itself is a fill colour). */
162
+ --lily-error-text: color-mix(
163
+ in oklch,
164
+ var(--color-error) 22%,
165
+ var(--color-base-content)
166
+ );
159
167
  /* Muted / secondary text — mixed 70% with transparent to keep the
160
168
  hue but lower contrast for captions, helptext, placeholders. */
161
169
  --lily-text-muted: color-mix(
@@ -895,7 +903,7 @@
895
903
  }
896
904
  :where(.dont-list-item)::marker {
897
905
  content: "✗ ";
898
- color: var(--color-error);
906
+ color: var(--lily-error-text);
899
907
  }
900
908
 
901
909
  /* --- Tree --------------------------------------------------------------- */
@@ -977,7 +985,7 @@
977
985
  color: var(--color-success);
978
986
  }
979
987
  :where(.validation-list-item[data-status="failed"]) {
980
- color: var(--color-error);
988
+ color: var(--lily-error-text);
981
989
  }
982
990
  :where(.validation-list-item[data-status="pending"]) {
983
991
  color: var(--lily-text-muted);
@@ -1335,7 +1343,7 @@
1335
1343
 
1336
1344
  /* Error message — inline form-validation message. */
1337
1345
  :where(.error-message) {
1338
- color: var(--color-error);
1346
+ color: var(--lily-error-text);
1339
1347
  font-weight: 600;
1340
1348
  }
1341
1349
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/winter.css CHANGED
@@ -156,6 +156,14 @@
156
156
  /* Primary body-copy colour. Maps to the theme's high-contrast
157
157
  reading colour. */
158
158
  --lily-text: var(--color-base-content);
159
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
160
+ keeps WCAG contrast as text on the page and on the error-tinted
161
+ callout surface (`--color-error` itself is a fill colour). */
162
+ --lily-error-text: color-mix(
163
+ in oklch,
164
+ var(--color-error) 22%,
165
+ var(--color-base-content)
166
+ );
159
167
  /* Muted / secondary text — mixed 70% with transparent to keep the
160
168
  hue but lower contrast for captions, helptext, placeholders. */
161
169
  --lily-text-muted: color-mix(
@@ -895,7 +903,7 @@
895
903
  }
896
904
  :where(.dont-list-item)::marker {
897
905
  content: "✗ ";
898
- color: var(--color-error);
906
+ color: var(--lily-error-text);
899
907
  }
900
908
 
901
909
  /* --- Tree --------------------------------------------------------------- */
@@ -977,7 +985,7 @@
977
985
  color: var(--color-success);
978
986
  }
979
987
  :where(.validation-list-item[data-status="failed"]) {
980
- color: var(--color-error);
988
+ color: var(--lily-error-text);
981
989
  }
982
990
  :where(.validation-list-item[data-status="pending"]) {
983
991
  color: var(--lily-text-muted);
@@ -1335,7 +1343,7 @@
1335
1343
 
1336
1344
  /* Error message — inline form-validation message. */
1337
1345
  :where(.error-message) {
1338
- color: var(--color-error);
1346
+ color: var(--lily-error-text);
1339
1347
  font-weight: 600;
1340
1348
  }
1341
1349
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/dist/wireframe.css CHANGED
@@ -156,6 +156,14 @@
156
156
  /* Primary body-copy colour. Maps to the theme's high-contrast
157
157
  reading colour. */
158
158
  --lily-text: var(--color-base-content);
159
+ /* Error text: the theme's error colour pulled toward the theme's own reading colour (`--color-base-content`, not `--lily-text`, which a host page may override) so it
160
+ keeps WCAG contrast as text on the page and on the error-tinted
161
+ callout surface (`--color-error` itself is a fill colour). */
162
+ --lily-error-text: color-mix(
163
+ in oklch,
164
+ var(--color-error) 22%,
165
+ var(--color-base-content)
166
+ );
159
167
  /* Muted / secondary text — mixed 70% with transparent to keep the
160
168
  hue but lower contrast for captions, helptext, placeholders. */
161
169
  --lily-text-muted: color-mix(
@@ -895,7 +903,7 @@
895
903
  }
896
904
  :where(.dont-list-item)::marker {
897
905
  content: "✗ ";
898
- color: var(--color-error);
906
+ color: var(--lily-error-text);
899
907
  }
900
908
 
901
909
  /* --- Tree --------------------------------------------------------------- */
@@ -977,7 +985,7 @@
977
985
  color: var(--color-success);
978
986
  }
979
987
  :where(.validation-list-item[data-status="failed"]) {
980
- color: var(--color-error);
988
+ color: var(--lily-error-text);
981
989
  }
982
990
  :where(.validation-list-item[data-status="pending"]) {
983
991
  color: var(--lily-text-muted);
@@ -1335,7 +1343,7 @@
1335
1343
 
1336
1344
  /* Error message — inline form-validation message. */
1337
1345
  :where(.error-message) {
1338
- color: var(--color-error);
1346
+ color: var(--lily-error-text);
1339
1347
  font-weight: 600;
1340
1348
  }
1341
1349
  /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lilydesignsystem/themes",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "engines": {
5
5
  "node": "=26"
6
6
  },