From 25302f37dd2f308757158dc741ce611863b0fe4f Mon Sep 17 00:00:00 2001
From: Laura Chan <laurachan205@gmail.com>
Date: Fri, 12 Mar 2021 20:51:09 +0000
Subject: [PATCH 1/5] Adds silver background colour to inputs type email,
 password, text

---
 style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/style.css b/style.css
index be77ea1..d4e4393 100644
--- a/style.css
+++ b/style.css
@@ -433,6 +433,12 @@ input[type="email"] {
   line-height: 2;
 }
 
+input[type='email'][disabled],
+input[type='password'][disabled],
+input[type='text'][disabled] {
+  background-color: var(--surface);
+}
+
 select {
   appearance: none;
   -webkit-appearance: none;

From 781ba9b9f8121ff9429aebe943a030c8e7fcd2ff Mon Sep 17 00:00:00 2001
From: Laura Chan <chan@bryter.io>
Date: Sat, 13 Mar 2021 12:05:51 +0000
Subject: [PATCH 2/5] Add example to docs

---
 docs/index.html.ejs | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 127359c..f3b597b 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -388,7 +388,20 @@
             <textarea id="text${getCurrentId()}" rows="8"></textarea>
           </div>
         `) %>
+
+        <p>
+          Text boxes can also be disabled and have value with their corresponding HTML attributes. 
+        </p>
+  
+        <%- example(`
+          <div class="field-row">
+            <label for="text${getNewId()}">Favorite color</label>
+            <input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
+          </div>
+        `) %>
       </div>
+
+
     </section>
 
     <section class="component">

From 6aec6f3495786bf0028907377f95a3d0b20038fa Mon Sep 17 00:00:00 2001
From: Laura Chan <chan@bryter.io>
Date: Sat, 13 Mar 2021 12:06:00 +0000
Subject: [PATCH 3/5] Textarea disabled styling

---
 style.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index d4e4393..d8f8ca7 100644
--- a/style.css
+++ b/style.css
@@ -261,8 +261,9 @@ button::-moz-focus-inner {
 
 fieldset {
   border: none;
-  box-shadow: inset -1px -1px var(--button-highlight), inset -2px 1px var(--button-shadow),
-    inset 1px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
+  box-shadow: inset -1px -1px var(--button-highlight),
+    inset -2px 1px var(--button-shadow), inset 1px -2px var(--button-shadow),
+    inset 2px 2px var(--button-highlight);
   padding: calc(2 * var(--border-width) + var(--element-spacing));
   padding-block-start: var(--element-spacing);
   margin: 0;
@@ -433,9 +434,10 @@ input[type="email"] {
   line-height: 2;
 }
 
-input[type='email'][disabled],
-input[type='password'][disabled],
-input[type='text'][disabled] {
+input[type="email"][disabled],
+input[type="password"][disabled],
+input[type="text"][disabled],
+textarea[disabled] {
   background-color: var(--surface);
 }
 

From be3433eed9ef70e551603f67b8959b7e057bc138 Mon Sep 17 00:00:00 2001
From: Laura Chan <chan@bryter.io>
Date: Sat, 13 Mar 2021 12:10:27 +0000
Subject: [PATCH 4/5] Revert autoformatting

---
 style.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/style.css b/style.css
index d8f8ca7..4dd0a00 100644
--- a/style.css
+++ b/style.css
@@ -261,9 +261,8 @@ button::-moz-focus-inner {
 
 fieldset {
   border: none;
-  box-shadow: inset -1px -1px var(--button-highlight),
-    inset -2px 1px var(--button-shadow), inset 1px -2px var(--button-shadow),
-    inset 2px 2px var(--button-highlight);
+  box-shadow: inset -1px -1px var(--button-highlight), inset -2px 1px var(--button-shadow),
+    inset 1px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
   padding: calc(2 * var(--border-width) + var(--element-spacing));
   padding-block-start: var(--element-spacing);
   margin: 0;

From b52f7eafc211c59796d9ccb227ac9ba1521c6b8b Mon Sep 17 00:00:00 2001
From: Laura Chan <chan@bryter.io>
Date: Sat, 13 Mar 2021 17:58:56 +0000
Subject: [PATCH 5/5] fix: text shadow, use :disabled pseudoselector

---
 style.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 4dd0a00..d5a6af2 100644
--- a/style.css
+++ b/style.css
@@ -169,6 +169,10 @@ button::-moz-focus-inner {
 :disabled,
 :disabled + label {
   color: var(--button-shadow);
+}
+
+button:disabled,
+:disabled + label {
   text-shadow: 1px 1px 0 var(--button-highlight);
 }
 
@@ -433,10 +437,10 @@ input[type="email"] {
   line-height: 2;
 }
 
-input[type="email"][disabled],
-input[type="password"][disabled],
-input[type="text"][disabled],
-textarea[disabled] {
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="text"]:disabled,
+textarea:disabled {
   background-color: var(--surface);
 }