diff --git a/index.html b/index.html
index 71873d1..01e9124 100644
--- a/index.html
+++ b/index.html
@@ -74,12 +74,12 @@
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)));