From 3a163531b97775301f3087b7007c5a7acc7bb643 Mon Sep 17 00:00:00 2001
From: Filip Znachor <filip@znachor.cz>
Date: Thu, 5 Oct 2023 19:47:44 +0200
Subject: [PATCH] Added radio, toggle and button tab support & more
 improvements

---
 index.html      |  4 ++--
 src/_config.css |  2 ++
 src/button.css  | 10 ++++++++++
 src/radio.css   | 19 +++++++++++++++++--
 src/toggle.css  |  8 +++++++-
 web/demo.js     |  2 ++
 6 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 71873d1..01e9124 100644
--- a/index.html
+++ b/index.html
@@ -74,12 +74,12 @@
 
 					<div class="radio-row">
 						<label class="radio">
-							<input type="radio" name="radio-button" value="css" checked />
+							<input type="radio" name="radio-button" checked>
 							<span>Radio 1</span>
 						</label>
 	
 						<label class="radio">
-							<input type="radio" name="radio-button" value="acs" />
+							<input type="radio" name="radio-button">
 							<span>Radio 2</span>
 						</label>
 					</div>
diff --git a/src/_config.css b/src/_config.css
index cc91b87..cff6b20 100644
--- a/src/_config.css
+++ b/src/_config.css
@@ -7,6 +7,8 @@
 	--synergy-border-width: 2px;
 	--synergy-border-radius: 0.375rem;
 
+	--synergy-focus-highlight: rgba(134, 94, 60, 0.25);
+
 	--synergy-label: rgba(134, 94, 60, 0.8);
 	--synergy-label-active: rgba(134, 94, 60, 1);
 
diff --git a/src/button.css b/src/button.css
index e1c73ac..6e5db5a 100644
--- a/src/button.css
+++ b/src/button.css
@@ -15,6 +15,8 @@
 	border-radius: var(--synergy-border-radius);
 	transition: .2s background-color;
 	cursor: pointer;
+	outline: none;
+	transition: box-shadow .2s;
 }
 
 .btn:hover {
@@ -31,3 +33,11 @@
 	--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
 	--synergy-btn-bg-active: var(--synergy-btn-primary-bg-active);
 }
+
+.btn:focus-visible {
+	box-shadow: 0 0 0 5px var(--synergy-btn-bg);
+}
+
+.btn.btn-primary:focus-visible {
+	box-shadow: 0 0 0 5px var(--synergy-focus-highlight);
+}
\ No newline at end of file
diff --git a/src/radio.css b/src/radio.css
index 20aad75..cadaf40 100644
--- a/src/radio.css
+++ b/src/radio.css
@@ -1,5 +1,16 @@
+label.radio {position: relative;}
+
 label.radio > input[type="radio"] {
-	display: none;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	z-index: 100;
+	margin: 0;
+	pointer-events: none;
 }
 
 label.radio > input[type="radio"] + * {
@@ -18,7 +29,7 @@ label.radio > input[type="radio"] + *::before {
 	border-radius: 50%;
 	aspect-ratio: 1 / 1;
 	border: 2px solid var(--synergy-border);
-	transition: background .2s;
+	transition: background .1s, box-shadow .2s;
 	background: var(--synergy-bg);
 	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
 }
@@ -27,6 +38,10 @@ label.radio > input[type="radio"]:checked + *::before {
 	background: var(--synergy-border-active);
 }
 
+label.radio > input[type="radio"]:focus-visible  + *::before {
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
+}
+
 .radio-row {
 	display: flex; gap: 25px; flex-wrap: wrap;
 }
\ No newline at end of file
diff --git a/src/toggle.css b/src/toggle.css
index d721dd3..027ff6d 100644
--- a/src/toggle.css
+++ b/src/toggle.css
@@ -20,6 +20,7 @@
 	height: 100%;
 	cursor: pointer;
 	z-index: 100;
+	margin: 0;
 }
 
 .toggle .indicator {
@@ -44,9 +45,14 @@
 }
 
 .toggle input:checked + .indicator::after {
-	background-color: var(--synergy-border-active);
+	background: var(--synergy-border-active);
 }
 
+.toggle input:focus-visible + .indicator::after {
+	box-shadow: 0 0 10px 0 var(--synergy-bg), 0 0 0 10px var(--synergy-focus-highlight);
+}
+
+
 /* Toggle with label */
 
 .toggle-text {
diff --git a/web/demo.js b/web/demo.js
index 781bcd5..b1b5f36 100644
--- a/web/demo.js
+++ b/web/demo.js
@@ -144,6 +144,8 @@ class Theme {
 	
 		variables.push(this.var("border", this.cArgb(this.main, .4)));
 		variables.push(this.var("border-active", this.cArgb(this.main)));
+
+		variables.push(this.var("focus-highlight", this.cArgb(this.main, .25)));
 	
 		variables.push(this.var("label", this.cArgb(this.main, .8)));
 		variables.push(this.var("label-active", this.cArgb(this.main)));