docs(ds-theme): update error text color to example of field elements

Refinitiv · Dec 19, 2024 · 499b491 · 499b491
1 parent d3c50f4
commit 499b491
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 24 deletions.
diff --git a/documents/src/pages/elements/email-field.md b/documents/src/pages/elements/email-field.md
@@ -129,8 +129,11 @@ emailField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-email-field {
   width: 275px;
@@ -217,8 +220,11 @@ emailField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-email-field {
   width: 275px;
@@ -305,6 +311,7 @@ save.addEventListener("tap", () => {
     responseText.innerHTML = "Full name & email must be provided together";
   } else if (email.value && !/^\w+@mail.com$/.test(email.value)) {
     email.error = true;
+    responseText.classList.add('error');
     responseText.innerHTML = "Email must be valid and end with @mail.com";
   } else {
     responseText.innerHTML = "Saved";
@@ -323,8 +330,11 @@ email.addEventListener("input", inputHandler);
 ```
 
 ```css
-.error {
-  color: #d94255;
+html[prefers-color-scheme="light"] .error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] .error {
+  color:#ff5540;
 }
 ef-text-field, ef-email-field {
   width: 250px;

diff --git a/documents/src/pages/elements/number-field.md b/documents/src/pages/elements/number-field.md
@@ -144,6 +144,14 @@ numberField.addEventListener("input", () => {
   }
 });
 ```
+```css
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
+}
+```
 ```html
 <label for="input">Input</label>
 <ef-number-field
@@ -290,8 +298,11 @@ numberField.addEventListener("input", () => {
 ```
 
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-number-field {
   width: 250px;

diff --git a/documents/src/pages/elements/password-field.md b/documents/src/pages/elements/password-field.md
@@ -51,8 +51,11 @@ label {
 ul {
   padding-inline-start: 24px;
 }
-#password-error, #pattern-error {
-  color: #d94255;
+html[prefers-color-scheme="light"] #password-error, #pattern-error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #password-error, #pattern-error{
+  color:#ff5540;
 }
 ```
 ```html
@@ -188,8 +191,11 @@ passwordField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-password-field {
   width: 200px;
@@ -276,8 +282,11 @@ passwordField.addEventListener("input", (event) => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-password-field {
   width: 275px;
@@ -387,8 +396,11 @@ confirmPassword.addEventListener("input", inputHandler);
 ```
 
 ```css
-.error {
-  color: #d94255;
+html[prefers-color-scheme="light"] .error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] .error {
+  color:#ff5540;
 }
 ef-password-field {
   width: 250px;

diff --git a/documents/src/pages/elements/search-field.md b/documents/src/pages/elements/search-field.md
@@ -117,8 +117,11 @@ searchField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-search-field {
   width: 200px;
@@ -205,8 +208,11 @@ searchField.addEventListener("input", () => {
 });
 ```
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-search-field {
   width: 280px;
@@ -303,8 +309,11 @@ searchField.addEventListener("input", () => {
 ```
 
 ```css
-#error-text {
-  color:#d94255;
+html[prefers-color-scheme="light"] #error-text {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] #error-text {
+  color:#ff5540;
 }
 ef-search-field {
   width: 250px;

diff --git a/documents/src/pages/elements/text-field.md b/documents/src/pages/elements/text-field.md
@@ -326,8 +326,11 @@ lastName.addEventListener("input", inputHandler);
 ```
 
 ```css
-.error {
-  color: #d94255;
+html[prefers-color-scheme="light"] .error {
+  color:#b70300;
+}
+html[prefers-color-scheme="dark"] .error {
+  color:#ff5540;
 }
 ef-text-field {
   width: 300px;