diff --git a/config/includes/combos.dtsi b/config/includes/combos.dtsi
index b296452e..6c5d1332 100644
--- a/config/includes/combos.dtsi
+++ b/config/includes/combos.dtsi
@@ -31,8 +31,8 @@ COMBO(lbkt,   &kp LBKT,    LM3 LM2,     DEF BRD,      40, 100)
 COMBO(rbkt,   &kp RBKT,    RM2 RM3,     DEF BRD,      40, 100)
 COMBO(tab,    &kp TAB,     LM3 LM1,     DEF BRD SYM,  40, 150)
 COMBO(del,    &kp DEL,     RM1 RM3,     DEF BRD SYM,  40, 150)
-COMBO(esc,    &kp ESC,     LM3 LM2 LM1, DEF BRD SYM,  40,  50)
-COMBO(ret,    &kp RET,     RM1 RM2 RM3, DEF BRD SYM,  40,  50)
+COMBO(esc,    &kp ESC,     LM3 LM2 LM1, DEF BRD SYM,  40,   0)
+COMBO(ret,    &kp RET,     RM1 RM2 RM3, DEF BRD SYM,  40,   0)
 
 COMBO(capswd, &caps_word,  LM1 RM1,     DEF BRD,      60, 200)
 
diff --git a/keymap-drawer/corneish_zen.svg b/keymap-drawer/corneish_zen.svg
index 0d512bd1..4df05976 100644
--- a/keymap-drawer/corneish_zen.svg
+++ b/keymap-drawer/corneish_zen.svg
@@ -1,5 +1,18 @@
 <svg width="803" height="3962" viewBox="0 0 803 3962" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<style>/* inherit to force styles through use tags */
+<style>:root {
+    --fg-color: #24292e;
+    --key-color: #f6f8fa;
+    --outline-color: #c9cccf;
+    --combo-color: #ccddff;
+    --held-color: #ffdddd;
+    --font-size: 14px;
+    --small-font-size: 11px;
+    --tiny-font-size: 8px;
+    --dendron-color: #808080;
+    --trans-fg-color: #7b7e81;
+}
+
+/* inherit to force styles through use tags */
 svg path {
     fill: inherit;
 }
@@ -7,19 +20,19 @@ svg path {
 /* font and background color specifications */
 svg.keymap {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-kerning: normal;
     text-rendering: optimizeLegibility;
-    fill: #24292e;
+    fill: var(--fg-color);
 }
 
 /* default key styling */
 rect.key {
-    fill: #f6f8fa;
+    fill: var(--key-color);
 }
 
 rect.key, rect.combo {
-    stroke: #c9cccf;
+    stroke: var(--outline-color);
     stroke-width: 1;
 }
 
@@ -30,15 +43,15 @@ rect.side {
 
 /* color accent for combo boxes */
 rect.combo, rect.combo-separate {
-    fill: #cdf;
+    fill: var(--combo-color);
 }
 
 /* color accent for held keys */
 rect.held, rect.combo.held {
-    fill: #fdd;
+    fill: var(--held-color);
 }
 
-/* color accent for ghost (optional) keys */
+/* styling for ghost (optional) keys */
 rect.ghost, rect.combo.ghost {
     stroke-dasharray: 4, 4;
     stroke-width: 2;
@@ -69,7 +82,7 @@ text.footer {
 
 /* styling for combo tap, and key hold/shifted label text */
 text.combo, text.hold, text.shifted {
-    font-size: 11px;
+    font-size: var(--small-font-size);
 }
 
 text.hold {
@@ -84,18 +97,18 @@ text.shifted {
 
 /* styling for hold/shifted label text in combo box */
 text.combo.hold, text.combo.shifted {
-    font-size: 8px;
+    font-size: var(--tiny-font-size);
 }
 
 /* lighter symbol for transparent keys */
 text.trans {
-    fill: #7b7e81;
+    fill: var(--trans-fg-color);
 }
 
 /* styling for combo dendrons */
 path.combo {
     stroke-width: 1;
-    stroke: gray;
+    stroke: var(--dendron-color);
     fill: none;
 }
 
@@ -113,14 +126,16 @@ path.combo {
 /* End Tabler Icons Cleanup */
 
 @media (prefers-color-scheme: dark) {
-svg.keymap { fill: #d1d6db; }
-rect.key { fill: #3f4750; }
-rect.key, rect.combo { stroke: #60666c; }
-rect.combo, rect.combo-separate { fill: #1f3d7a; }
-rect.held, rect.combo.held { fill: #854747; }
+:root {
+    --fg-color: #d1d6db;
+    --key-color: #3f4750;
+    --outline-color: #60666c;
+    --combo-color: #1f3d7a;
+    --held-color: #854747;
+    --trans-fg-color: #7e8184;
+    --dendron-color: #7f7f7f;
+}
 text.label, text.footer { stroke: black; }
-text.trans { fill: #7e8184; }
-path.combo { stroke: #7f7f7f; }
 
 }</style>
 <g transform="translate(30, 0)" class="layer-DEF">
diff --git a/keymap-drawer/grumpybird.svg b/keymap-drawer/grumpybird.svg
index 38fc1ab1..0dfae4f6 100644
--- a/keymap-drawer/grumpybird.svg
+++ b/keymap-drawer/grumpybird.svg
@@ -1,5 +1,18 @@
 <svg width="691" height="3283" viewBox="0 0 691 3283" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<style>/* inherit to force styles through use tags */
+<style>:root {
+    --fg-color: #24292e;
+    --key-color: #f6f8fa;
+    --outline-color: #c9cccf;
+    --combo-color: #ccddff;
+    --held-color: #ffdddd;
+    --font-size: 14px;
+    --small-font-size: 11px;
+    --tiny-font-size: 8px;
+    --dendron-color: #808080;
+    --trans-fg-color: #7b7e81;
+}
+
+/* inherit to force styles through use tags */
 svg path {
     fill: inherit;
 }
@@ -7,19 +20,19 @@ svg path {
 /* font and background color specifications */
 svg.keymap {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-kerning: normal;
     text-rendering: optimizeLegibility;
-    fill: #24292e;
+    fill: var(--fg-color);
 }
 
 /* default key styling */
 rect.key {
-    fill: #f6f8fa;
+    fill: var(--key-color);
 }
 
 rect.key, rect.combo {
-    stroke: #c9cccf;
+    stroke: var(--outline-color);
     stroke-width: 1;
 }
 
@@ -30,15 +43,15 @@ rect.side {
 
 /* color accent for combo boxes */
 rect.combo, rect.combo-separate {
-    fill: #cdf;
+    fill: var(--combo-color);
 }
 
 /* color accent for held keys */
 rect.held, rect.combo.held {
-    fill: #fdd;
+    fill: var(--held-color);
 }
 
-/* color accent for ghost (optional) keys */
+/* styling for ghost (optional) keys */
 rect.ghost, rect.combo.ghost {
     stroke-dasharray: 4, 4;
     stroke-width: 2;
@@ -69,7 +82,7 @@ text.footer {
 
 /* styling for combo tap, and key hold/shifted label text */
 text.combo, text.hold, text.shifted {
-    font-size: 11px;
+    font-size: var(--small-font-size);
 }
 
 text.hold {
@@ -84,18 +97,18 @@ text.shifted {
 
 /* styling for hold/shifted label text in combo box */
 text.combo.hold, text.combo.shifted {
-    font-size: 8px;
+    font-size: var(--tiny-font-size);
 }
 
 /* lighter symbol for transparent keys */
 text.trans {
-    fill: #7b7e81;
+    fill: var(--trans-fg-color);
 }
 
 /* styling for combo dendrons */
 path.combo {
     stroke-width: 1;
-    stroke: gray;
+    stroke: var(--dendron-color);
     fill: none;
 }
 
@@ -113,14 +126,16 @@ path.combo {
 /* End Tabler Icons Cleanup */
 
 @media (prefers-color-scheme: dark) {
-svg.keymap { fill: #d1d6db; }
-rect.key { fill: #3f4750; }
-rect.key, rect.combo { stroke: #60666c; }
-rect.combo, rect.combo-separate { fill: #1f3d7a; }
-rect.held, rect.combo.held { fill: #854747; }
+:root {
+    --fg-color: #d1d6db;
+    --key-color: #3f4750;
+    --outline-color: #60666c;
+    --combo-color: #1f3d7a;
+    --held-color: #854747;
+    --trans-fg-color: #7e8184;
+    --dendron-color: #7f7f7f;
+}
 text.label, text.footer { stroke: black; }
-text.trans { fill: #7e8184; }
-path.combo { stroke: #7f7f7f; }
 
 }</style>
 <g transform="translate(30, 0)" class="layer-DEF">
diff --git a/keymap-drawer/hummingbird.svg b/keymap-drawer/hummingbird.svg
index 3a24ff7b..113c40d9 100644
--- a/keymap-drawer/hummingbird.svg
+++ b/keymap-drawer/hummingbird.svg
@@ -1,5 +1,18 @@
 <svg width="810" height="3940" viewBox="0 0 810 3940" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<style>/* inherit to force styles through use tags */
+<style>:root {
+    --fg-color: #24292e;
+    --key-color: #f6f8fa;
+    --outline-color: #c9cccf;
+    --combo-color: #ccddff;
+    --held-color: #ffdddd;
+    --font-size: 14px;
+    --small-font-size: 11px;
+    --tiny-font-size: 8px;
+    --dendron-color: #808080;
+    --trans-fg-color: #7b7e81;
+}
+
+/* inherit to force styles through use tags */
 svg path {
     fill: inherit;
 }
@@ -7,19 +20,19 @@ svg path {
 /* font and background color specifications */
 svg.keymap {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-kerning: normal;
     text-rendering: optimizeLegibility;
-    fill: #24292e;
+    fill: var(--fg-color);
 }
 
 /* default key styling */
 rect.key {
-    fill: #f6f8fa;
+    fill: var(--key-color);
 }
 
 rect.key, rect.combo {
-    stroke: #c9cccf;
+    stroke: var(--outline-color);
     stroke-width: 1;
 }
 
@@ -30,15 +43,15 @@ rect.side {
 
 /* color accent for combo boxes */
 rect.combo, rect.combo-separate {
-    fill: #cdf;
+    fill: var(--combo-color);
 }
 
 /* color accent for held keys */
 rect.held, rect.combo.held {
-    fill: #fdd;
+    fill: var(--held-color);
 }
 
-/* color accent for ghost (optional) keys */
+/* styling for ghost (optional) keys */
 rect.ghost, rect.combo.ghost {
     stroke-dasharray: 4, 4;
     stroke-width: 2;
@@ -69,7 +82,7 @@ text.footer {
 
 /* styling for combo tap, and key hold/shifted label text */
 text.combo, text.hold, text.shifted {
-    font-size: 11px;
+    font-size: var(--small-font-size);
 }
 
 text.hold {
@@ -84,18 +97,18 @@ text.shifted {
 
 /* styling for hold/shifted label text in combo box */
 text.combo.hold, text.combo.shifted {
-    font-size: 8px;
+    font-size: var(--tiny-font-size);
 }
 
 /* lighter symbol for transparent keys */
 text.trans {
-    fill: #7b7e81;
+    fill: var(--trans-fg-color);
 }
 
 /* styling for combo dendrons */
 path.combo {
     stroke-width: 1;
-    stroke: gray;
+    stroke: var(--dendron-color);
     fill: none;
 }
 
@@ -113,14 +126,16 @@ path.combo {
 /* End Tabler Icons Cleanup */
 
 @media (prefers-color-scheme: dark) {
-svg.keymap { fill: #d1d6db; }
-rect.key { fill: #3f4750; }
-rect.key, rect.combo { stroke: #60666c; }
-rect.combo, rect.combo-separate { fill: #1f3d7a; }
-rect.held, rect.combo.held { fill: #854747; }
+:root {
+    --fg-color: #d1d6db;
+    --key-color: #3f4750;
+    --outline-color: #60666c;
+    --combo-color: #1f3d7a;
+    --held-color: #854747;
+    --trans-fg-color: #7e8184;
+    --dendron-color: #7f7f7f;
+}
 text.label, text.footer { stroke: black; }
-text.trans { fill: #7e8184; }
-path.combo { stroke: #7f7f7f; }
 
 }</style>
 <g transform="translate(30, 0)" class="layer-DEF">
diff --git a/keymap-drawer/hypergolic.svg b/keymap-drawer/hypergolic.svg
index 0cb83ee7..bead0659 100644
--- a/keymap-drawer/hypergolic.svg
+++ b/keymap-drawer/hypergolic.svg
@@ -1,5 +1,18 @@
 <svg width="925" height="3778" viewBox="0 0 925 3778" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<style>/* inherit to force styles through use tags */
+<style>:root {
+    --fg-color: #24292e;
+    --key-color: #f6f8fa;
+    --outline-color: #c9cccf;
+    --combo-color: #ccddff;
+    --held-color: #ffdddd;
+    --font-size: 14px;
+    --small-font-size: 11px;
+    --tiny-font-size: 8px;
+    --dendron-color: #808080;
+    --trans-fg-color: #7b7e81;
+}
+
+/* inherit to force styles through use tags */
 svg path {
     fill: inherit;
 }
@@ -7,19 +20,19 @@ svg path {
 /* font and background color specifications */
 svg.keymap {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-kerning: normal;
     text-rendering: optimizeLegibility;
-    fill: #24292e;
+    fill: var(--fg-color);
 }
 
 /* default key styling */
 rect.key {
-    fill: #f6f8fa;
+    fill: var(--key-color);
 }
 
 rect.key, rect.combo {
-    stroke: #c9cccf;
+    stroke: var(--outline-color);
     stroke-width: 1;
 }
 
@@ -30,15 +43,15 @@ rect.side {
 
 /* color accent for combo boxes */
 rect.combo, rect.combo-separate {
-    fill: #cdf;
+    fill: var(--combo-color);
 }
 
 /* color accent for held keys */
 rect.held, rect.combo.held {
-    fill: #fdd;
+    fill: var(--held-color);
 }
 
-/* color accent for ghost (optional) keys */
+/* styling for ghost (optional) keys */
 rect.ghost, rect.combo.ghost {
     stroke-dasharray: 4, 4;
     stroke-width: 2;
@@ -69,7 +82,7 @@ text.footer {
 
 /* styling for combo tap, and key hold/shifted label text */
 text.combo, text.hold, text.shifted {
-    font-size: 11px;
+    font-size: var(--small-font-size);
 }
 
 text.hold {
@@ -84,18 +97,18 @@ text.shifted {
 
 /* styling for hold/shifted label text in combo box */
 text.combo.hold, text.combo.shifted {
-    font-size: 8px;
+    font-size: var(--tiny-font-size);
 }
 
 /* lighter symbol for transparent keys */
 text.trans {
-    fill: #7b7e81;
+    fill: var(--trans-fg-color);
 }
 
 /* styling for combo dendrons */
 path.combo {
     stroke-width: 1;
-    stroke: gray;
+    stroke: var(--dendron-color);
     fill: none;
 }
 
@@ -113,14 +126,16 @@ path.combo {
 /* End Tabler Icons Cleanup */
 
 @media (prefers-color-scheme: dark) {
-svg.keymap { fill: #d1d6db; }
-rect.key { fill: #3f4750; }
-rect.key, rect.combo { stroke: #60666c; }
-rect.combo, rect.combo-separate { fill: #1f3d7a; }
-rect.held, rect.combo.held { fill: #854747; }
+:root {
+    --fg-color: #d1d6db;
+    --key-color: #3f4750;
+    --outline-color: #60666c;
+    --combo-color: #1f3d7a;
+    --held-color: #854747;
+    --trans-fg-color: #7e8184;
+    --dendron-color: #7f7f7f;
+}
 text.label, text.footer { stroke: black; }
-text.trans { fill: #7e8184; }
-path.combo { stroke: #7f7f7f; }
 
 }</style>
 <g transform="translate(30, 0)" class="layer-DEF">
diff --git a/keymap-drawer/rommana.svg b/keymap-drawer/rommana.svg
index 3a24ff7b..113c40d9 100644
--- a/keymap-drawer/rommana.svg
+++ b/keymap-drawer/rommana.svg
@@ -1,5 +1,18 @@
 <svg width="810" height="3940" viewBox="0 0 810 3940" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<style>/* inherit to force styles through use tags */
+<style>:root {
+    --fg-color: #24292e;
+    --key-color: #f6f8fa;
+    --outline-color: #c9cccf;
+    --combo-color: #ccddff;
+    --held-color: #ffdddd;
+    --font-size: 14px;
+    --small-font-size: 11px;
+    --tiny-font-size: 8px;
+    --dendron-color: #808080;
+    --trans-fg-color: #7b7e81;
+}
+
+/* inherit to force styles through use tags */
 svg path {
     fill: inherit;
 }
@@ -7,19 +20,19 @@ svg path {
 /* font and background color specifications */
 svg.keymap {
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-kerning: normal;
     text-rendering: optimizeLegibility;
-    fill: #24292e;
+    fill: var(--fg-color);
 }
 
 /* default key styling */
 rect.key {
-    fill: #f6f8fa;
+    fill: var(--key-color);
 }
 
 rect.key, rect.combo {
-    stroke: #c9cccf;
+    stroke: var(--outline-color);
     stroke-width: 1;
 }
 
@@ -30,15 +43,15 @@ rect.side {
 
 /* color accent for combo boxes */
 rect.combo, rect.combo-separate {
-    fill: #cdf;
+    fill: var(--combo-color);
 }
 
 /* color accent for held keys */
 rect.held, rect.combo.held {
-    fill: #fdd;
+    fill: var(--held-color);
 }
 
-/* color accent for ghost (optional) keys */
+/* styling for ghost (optional) keys */
 rect.ghost, rect.combo.ghost {
     stroke-dasharray: 4, 4;
     stroke-width: 2;
@@ -69,7 +82,7 @@ text.footer {
 
 /* styling for combo tap, and key hold/shifted label text */
 text.combo, text.hold, text.shifted {
-    font-size: 11px;
+    font-size: var(--small-font-size);
 }
 
 text.hold {
@@ -84,18 +97,18 @@ text.shifted {
 
 /* styling for hold/shifted label text in combo box */
 text.combo.hold, text.combo.shifted {
-    font-size: 8px;
+    font-size: var(--tiny-font-size);
 }
 
 /* lighter symbol for transparent keys */
 text.trans {
-    fill: #7b7e81;
+    fill: var(--trans-fg-color);
 }
 
 /* styling for combo dendrons */
 path.combo {
     stroke-width: 1;
-    stroke: gray;
+    stroke: var(--dendron-color);
     fill: none;
 }
 
@@ -113,14 +126,16 @@ path.combo {
 /* End Tabler Icons Cleanup */
 
 @media (prefers-color-scheme: dark) {
-svg.keymap { fill: #d1d6db; }
-rect.key { fill: #3f4750; }
-rect.key, rect.combo { stroke: #60666c; }
-rect.combo, rect.combo-separate { fill: #1f3d7a; }
-rect.held, rect.combo.held { fill: #854747; }
+:root {
+    --fg-color: #d1d6db;
+    --key-color: #3f4750;
+    --outline-color: #60666c;
+    --combo-color: #1f3d7a;
+    --held-color: #854747;
+    --trans-fg-color: #7e8184;
+    --dendron-color: #7f7f7f;
+}
 text.label, text.footer { stroke: black; }
-text.trans { fill: #7e8184; }
-path.combo { stroke: #7f7f7f; }
 
 }</style>
 <g transform="translate(30, 0)" class="layer-DEF">