feat: init ds theme

.gitignore

@@ -64,7 +64,6 @@ web_modules/
 .node_repl_history
 
 # Output of 'npm pack'
-*.tgz
 # Allow pandora-book offline package
 !documents/tools/*.tgz
 
@@ -130,6 +129,8 @@ packages/solar-theme/charcoal
 packages/solar-theme/pearl
 packages/halo-theme/dark
 packages/halo-theme/light
+packages/ds-theme/dark
+packages/ds-theme/light
 
 # Doc
 custom-elements.json
@@ -148,4 +149,4 @@ packages/**/node_modules
 certs
 
 # nx
-.nx
+.nx

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 && !/^\[email protected]$/.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;

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;

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;

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;

documents/src/pages/elements/text-field.md

@@ -118,8 +118,11 @@ textField.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-text-field {
   width: 200px;
@@ -212,8 +215,11 @@ textField.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-text-field {
   width: 300px;
@@ -320,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;