@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/dracula.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/emerald.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/fantasy.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/forest.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/garden.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/halloween.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/lemonade.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/light.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/lofi.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/luxury.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/mozilla-protocol.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/night.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/nord.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/pastel.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/retro.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/silk.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