From f89b85b65e7b3036329dd0d33534c82c3cececc4 Mon Sep 17 00:00:00 2001
From: "Duy K. Bui" <duy@buifamily.info>
Date: Fri, 2 Oct 2020 13:08:57 -0400
Subject: [PATCH 1/3] feat: Add <dialog> support

---
 docs/index.html         | 15 +++++++++++++++
 docs/script.js          |  8 ++++++++
 src/parts/_misc.css     | 29 +++++++++++++++++++++++++++++
 src/variables-light.css |  2 +-
 4 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index af367c9..cad3f95 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -278,6 +278,21 @@
       <p>Lorem ipsum dolor sit blah blah.</p>
     </details>
 
+    <p>The dialog (form, and menu) tag</p>
+    <button type='button' id='dialog-trigger'>Show me the dialog!</button>
+    <span id='dialog-result'></span>
+    <dialog id='dialog'>
+      <header>This is a sample dialog</header>
+      <form method="dialog">
+        <p>What is your favorite pet animal?</p>
+        <menu>
+          <button value="feline">Cats</button>
+          <button value="canine">Dogs</button>
+          <button value="other">Others</button>
+        </menu>
+      </form>
+    </dialog>
+
     <h3 id="typography">Typography</h3>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
diff --git a/docs/script.js b/docs/script.js
index 6f7e5ac..6418d77 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -77,3 +77,11 @@ copyButton.addEventListener('click', () => {
     .catch(() => { copyButtonFeedback.textContent = '❌' })
     .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
 })
+
+document.getElementById('dialog-trigger').addEventListener('click', function (event) {
+  document.getElementById('dialog-result').innerText = '';
+  document.getElementById('dialog').showModal();
+});
+document.getElementById('dialog').addEventListener('close', function (event) {
+  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`;
+});
diff --git a/src/parts/_misc.css b/src/parts/_misc.css
index 6bbe92d..aa4822e 100644
--- a/src/parts/_misc.css
+++ b/src/parts/_misc.css
@@ -109,6 +109,35 @@ summary::-webkit-details-marker {
   color: var(--text-main);
 }
 
+dialog {
+  background-color: var(--background-alt);
+  color: var(--text-main);
+
+  border: none;
+  border-radius: 6px;
+  border-color: var(--border);
+
+  box-shadow: 0 10px 30px color-mod(var(--border) alpha(0.1)), 0 1px 8px color-mod(var(--border) alpha(0.2));
+
+  padding: 10px 30px;
+}
+
+dialog > header {
+  background-color: var(--background);
+
+  border-radius: 6px 6px 0 0;
+
+  margin: -10px -30px 10px;
+  padding: 10px;
+
+  text-align: center;
+}
+
+dialog::backdrop {
+  background: color-mod(var(--background-body) alpha(0.15));
+  backdrop-filter: blur(4px);
+}
+
 footer {
   border-top: 1px solid var(--border);
   padding-top: 10px;
diff --git a/src/variables-light.css b/src/variables-light.css
index 74069c3..8197b38 100755
--- a/src/variables-light.css
+++ b/src/variables-light.css
@@ -8,7 +8,7 @@
   --text-muted: #70777f;
   --links: #0076d1;
   --focus: #0096bfab;
-  --border: #dbdbdb;
+  --border: #363636;
   --code: #000;
   --animation-duration: 0.1s;
   --button-hover: #ddd;

From d785c31c8be87fcd2d610fdcdcb3cc31b3c27d9f Mon Sep 17 00:00:00 2001
From: Kognise <felix.mattick@gmail.com>
Date: Fri, 2 Oct 2020 17:35:01 +0000
Subject: [PATCH 2/3] Style changes

---
 docs/index.html         | 12 +++++++++---
 docs/script.js          | 15 ++++++++-------
 src/parts/_misc.css     | 11 ++---------
 src/variables-light.css |  2 +-
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index cad3f95..850c60f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -279,9 +279,15 @@
     </details>
 
     <p>The dialog (form, and menu) tag</p>
-    <button type='button' id='dialog-trigger'>Show me the dialog!</button>
-    <span id='dialog-result'></span>
-    <dialog id='dialog'>
+
+    <div>
+      <button type="button" id="dialog-trigger">
+        Show me the dialog!
+      </button>
+      <span id="dialog-result"></span>
+    </div>
+
+    <dialog id="dialog">
       <header>This is a sample dialog</header>
       <form method="dialog">
         <p>What is your favorite pet animal?</p>
diff --git a/docs/script.js b/docs/script.js
index 6418d77..fb821c0 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -78,10 +78,11 @@ copyButton.addEventListener('click', () => {
     .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
 })
 
-document.getElementById('dialog-trigger').addEventListener('click', function (event) {
-  document.getElementById('dialog-result').innerText = '';
-  document.getElementById('dialog').showModal();
-});
-document.getElementById('dialog').addEventListener('close', function (event) {
-  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`;
-});
+document.getElementById('dialog-trigger').addEventListener('click', () => {
+  document.getElementById('dialog-result').innerText = ''
+  document.getElementById('dialog').showModal()
+})
+
+document.getElementById('dialog').addEventListener('close', (event) => {
+  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
+})
diff --git a/src/parts/_misc.css b/src/parts/_misc.css
index aa4822e..aa01272 100644
--- a/src/parts/_misc.css
+++ b/src/parts/_misc.css
@@ -112,29 +112,22 @@ summary::-webkit-details-marker {
 dialog {
   background-color: var(--background-alt);
   color: var(--text-main);
-
   border: none;
   border-radius: 6px;
   border-color: var(--border);
-
-  box-shadow: 0 10px 30px color-mod(var(--border) alpha(0.1)), 0 1px 8px color-mod(var(--border) alpha(0.2));
-
   padding: 10px 30px;
 }
 
-dialog > header {
+dialog > header:first-child {
   background-color: var(--background);
-
   border-radius: 6px 6px 0 0;
-
   margin: -10px -30px 10px;
   padding: 10px;
-
   text-align: center;
 }
 
 dialog::backdrop {
-  background: color-mod(var(--background-body) alpha(0.15));
+  background: #0000009c;
   backdrop-filter: blur(4px);
 }
 
diff --git a/src/variables-light.css b/src/variables-light.css
index 8197b38..74069c3 100755
--- a/src/variables-light.css
+++ b/src/variables-light.css
@@ -8,7 +8,7 @@
   --text-muted: #70777f;
   --links: #0076d1;
   --focus: #0096bfab;
-  --border: #363636;
+  --border: #dbdbdb;
   --code: #000;
   --animation-duration: 0.1s;
   --button-hover: #ddd;

From 567d2ec6411682b3e564c246c18da92b538f8487 Mon Sep 17 00:00:00 2001
From: Kognise <felix.mattick@gmail.com>
Date: Fri, 2 Oct 2020 17:35:49 +0000
Subject: [PATCH 3/3] Add changeset

---
 .changeset/real-bananas-beam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-bananas-beam.md

diff --git a/.changeset/real-bananas-beam.md b/.changeset/real-bananas-beam.md
new file mode 100644
index 0000000..d85d424
--- /dev/null
+++ b/.changeset/real-bananas-beam.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+Add styles for <dialog> element