From bbc0265527926be59e0c4f6a86bea4658256389f Mon Sep 17 00:00:00 2001
From: Egor Kloos <egor.kloos@ns.nl>
Date: Wed, 10 Jan 2024 09:20:42 +0100
Subject: [PATCH] Added inputs and buttons to examples

---
 example.html             | 30 +++++++++++++++++++++++++++++-
 openprops.html           | 29 +++++++++++++++++++++++++++++
 src/system-selectors.css |  3 +--
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/example.html b/example.html
index 36e30fd..798bdb5 100644
--- a/example.html
+++ b/example.html
@@ -261,8 +261,36 @@ <h2>Table</h2>
 				</tbody>
 			</table>
 
-			<h2>Figure</h2>
+			<h2>Buttons &amp; Inputs</h2>
+			<p>
+				<button disabled="disabled">Disabled</button>
+				<button type="button">Cancel</button>
+				<button type="submit">Submit</button>
+			</p>
+			<p style="display: flex; flex-direction: column; align-items: start; gap: 1ex">
+				<input type="text" placeholder="placeholder" />
+				<input type="radio" />
+				<input type="checkbox" />
+				<input type="file" />
+				<input type="range" />
+				<input type="number" />
+				<input type="date" />
+				<progress></progress>
+				<select id="select" required="required">
+					<option>select</option>
+					<optgroup label="Group A">
+						<option>option 1a</option>
+						<option>option 2a</option>
+					</optgroup>
+					<optgroup label="Group B">
+						<option>option 1b</option>
+						<option>option 2b</option>
+					</optgroup>
+				</select>
+				<textarea id="textarea"></textarea>
+			</p>
 
+			<h2>Figure</h2>
 			<figure>
 				<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
 					<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
diff --git a/openprops.html b/openprops.html
index 3696a40..a6b9c7d 100644
--- a/openprops.html
+++ b/openprops.html
@@ -268,6 +268,35 @@ <h2>Table</h2>
 				</tbody>
 			</table>
 
+			<h2>Buttons &amp; Inputs</h2>
+			<p>
+				<button disabled="disabled">Disabled</button>
+				<button type="button">Cancel</button>
+				<button type="submit">Submit</button>
+			</p>
+			<p style="display: flex; flex-direction: column; align-items: start; gap: 1ex">
+				<input type="text" placeholder="placeholder" />
+				<input type="radio" />
+				<input type="checkbox" />
+				<input type="file" />
+				<input type="range" />
+				<input type="number" />
+				<input type="date" />
+				<progress></progress>
+				<select id="select" required="required">
+					<option>select</option>
+					<optgroup label="Group A">
+						<option>option 1a</option>
+						<option>option 2a</option>
+					</optgroup>
+					<optgroup label="Group B">
+						<option>option 1b</option>
+						<option>option 2b</option>
+					</optgroup>
+				</select>
+				<textarea id="textarea"></textarea>
+			</p>
+
 			<h2>Figure</h2>
 
 			<figure>
diff --git a/src/system-selectors.css b/src/system-selectors.css
index 956a47c..2b89777 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -154,6 +154,7 @@
 	button,
 	textarea {
 		font: inherit;
+		font-size: var(--system-font-size-m);
 		font-family: var(--system-font-family-interactive);
 	}
 
@@ -361,9 +362,7 @@
 		border: var(--system-stroke-thin) solid var(--system-button-border);
 		border-radius: var(--system-radius);
 		box-shadow: none;
-		font-size: var(--system-font-size-m);
 		accent-color: var(--system-accent-color);
-
 		&:is([type='radio']) {
 			border-radius: 50%;
 		}