@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/abyss.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/acid.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/adobe-spectrum.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/aqua.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/autumn.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/black.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/bumblebee.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/business.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/caramellatte.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/cmyk.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/coffee.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/corporate.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/cupcake.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/cyberpunk.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/dark.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/dim.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