Dark mode: Form validation

[louismaximepiton]

Description

Form validation in dark mode, by using existing and new Sass vars :

Sass var	Previous value	New value
$success-icon-dark	-	url(...)
$danger-icon-dark	-	url(...)
$form-valid-color-dark	$green-300	var(--#{$prefix}succes-text-emphasis)
$form-valid-border-color-dark	$green-300	var(--#{$prefix}success)
$form-invalid-color-dark	$red-300	var(--#{$prefix}danger-text-emphasis)
$form-invalid-border-color-dark	$red-300	var(--#{$prefix}danger)
$form-feedback-color	-	var(--#{$prefix}body-color)

⚠️ New values for CSS vars:

CSS var	Light mode value	Dark mode value
--bs-success-icon	escape-svg($success-icon)	escape-svg($success-icon-dark)
--bs-danger-icon	escape-svg($danger-icon)	escape-svg($danger-icon-dark)

⚠️ --bs-danger-icon could not change if we use mask for .invalid-feedback. I prefer unifying the both and since mask isn't possible for .is-valid, I let this as-is.

Links

• https://deploy-preview-2302--boosted.netlify.app/docs/5.3/forms/validation/
• https://deploy-preview-2302--boosted.netlify.app/docs/5.3/dark-mode/#form-validation

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	75d57a5
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/653a5b30e92a9000082d6923
😎 Deploy Preview	https://deploy-preview-2302--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.