From 6105b378cb4592b0cf72eb95706e21db8b63733e Mon Sep 17 00:00:00 2001
From: Kombie <crudetoaster@gmail.com>
Date: Thu, 7 Nov 2019 11:09:40 +0000
Subject: [PATCH] [design] improve form theme styles

---
 package-lock.json        |   2 +-
 src/css/auto-suggest.css |   6 +-
 src/css/button.css       |  21 +-
 src/css/form.css         | 717 +++++++++++++++++++--------------------
 src/css/group.css        |  39 +--
 src/css/menu.css         |   3 +-
 src/css/modal.css        |   2 +-
 src/css/variables.css    |  87 ++++-
 src/index.html           |  18 +-
 src/js/link.js           |   4 +-
 src/style-guide.html     | 197 +++++++++--
 11 files changed, 629 insertions(+), 467 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 33a1cbf7..86d454b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "3.75.1",
+  "version": "4.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/css/auto-suggest.css b/src/css/auto-suggest.css
index 0cb8c28a..acdc681c 100644
--- a/src/css/auto-suggest.css
+++ b/src/css/auto-suggest.css
@@ -56,15 +56,15 @@
   color: rgb(var(--form-input-text-hover));
   outline: none;
   text-decoration: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+  box-shadow: var(--form-hover-ring);
 }
 
 .auto-suggest-link:focus {
   background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-input-text-focus));
+  color: rgb(var(--form-input-text-focus-active));
   outline: none;
   text-decoration: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+  box-shadow: var(--form-focus-ring-accent);
 }
 
 .auto-suggest-link:active {
diff --git a/src/css/button.css b/src/css/button.css
index b0f17205..f265a7ea 100755
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -3,7 +3,7 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--button-background));
   padding: 0.125em 1em;
   margin: 0 0 1em 0;
   color: rgb(var(--button-text));
@@ -15,7 +15,8 @@ input[type="submit"] {
   border-top-width: var(--layout-line-width);
   border-bottom-width: var(--layout-line-width);
   border-style: solid;
-  border-color: transparent;
+  border-top-color: transparent;
+  border-bottom-color: rgb(var(--button-border));
   border-radius: var(--theme-radius);
   text-align: center;
   text-decoration: none;
@@ -39,9 +40,9 @@ input[type="reset"]:hover,
 input[type="reset"]:focus,
 input[type="submit"]:hover,
 input[type="submit"]:focus {
-  background-color: rgb(var(--theme-gray-03));
-  border-bottom-color: rgb(var(--theme-gray-08));
-  color: rgb(var(--button-text-hover-focus));
+  background-color: rgb(var(--button-background-focus-hover));
+  border-bottom-color: rgb(var(--button-border-focus-hover));
+  color: rgb(var(--button-text-focus-hover));
   outline: none;
   text-decoration: none;
 }
@@ -51,8 +52,8 @@ button:active,
 input[type="button"]:active,
 input[type="reset"]:active,
 input[type="submit"]:active {
-  background-color: rgb(var(--theme-gray-04));
-  border-bottom-color: rgb(var(--theme-accent));
+  background-color: rgb(var(--button-background-active));
+  border-bottom-color: rgb(var(--button-border-active));
   color: rgb(var(--button-text-active));
   transition: none;
   text-decoration: none;
@@ -66,7 +67,7 @@ button:disabled:focus,
 .button:disabled:focus,
 button:disabled:active,
 .button:disabled:active {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--button-background-disabled));
   border-color: transparent;
   color: rgb(var(--button-text-disabled));
   cursor: default;
@@ -87,7 +88,7 @@ button [class*=" icon-"],
 
 .button.active {
   border-bottom-color: rgb(var(--theme-accent));
-  color: rgb(var(--button-text-active));
+  color: rgb(var(--button-text-focus-active));
 }
 
 .button-small {
@@ -134,7 +135,7 @@ button [class*=" button-"]:last-child,
 .button-link:hover,
 .button-link:focus {
   background-color: transparent;
-  color: rgb(var(--button-link-text-hover-focus));
+  color: rgb(var(--button-link-text-focus-hover));
 }
 
 .button-link:active {
diff --git a/src/css/form.css b/src/css/form.css
index e57bc2cb..ea2f0c62 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1,9 +1,26 @@
+/* label */
+label {
+  padding: 0;
+  color: rgb(var(--form-label));
+  margin-bottom: 0;
+  font-size: 1em;
+  display: block;
+}
+
+label:not(:only-child):not(:last-child) {
+  padding-bottom: 0.5em;
+}
+
+label.disabled {
+  color: rgb(var(--form-label-disabled));
+}
+
 /* select */
 select {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--form-input-background));
   background-image:
-    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text)) 50%),
-    linear-gradient(135deg, rgb(var(--form-input-text)) 50%, transparent 50%);
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-label)) 50%),
+    linear-gradient(135deg, rgb(var(--form-label)) 50%, transparent 50%);
   background-position:
     calc(100% - calc(var(--form-arrow-size) * 5)) 50%,
     calc(100% - calc(var(--form-arrow-size) * 4)) 50%;
@@ -13,18 +30,16 @@ select {
   background-repeat: no-repeat;
   padding: 0 calc(var(--form-arrow-size) * 10) 0 1em;
   margin: 0 0 1em 0;
-  color: rgb(var(--form-input-text));
+  color: rgb(var(--form-label));
   font-size: 1em;
   font-family: var(--font-regular);
   min-height: 2.5em;
   min-width: 0;
   width: 100%;
-  border-width: var(--form-input-border);
-  border-style: solid;
-  border-color: transparent;
+  border: 0;
   border-radius: var(--theme-radius);
   cursor: pointer;
-  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -32,85 +47,82 @@ select {
 
 select:hover {
   background-image:
-    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-hover)) 50%),
-    linear-gradient(135deg, rgb(var(--form-input-text-hover)) 50%, transparent 50%);
-  background-color: rgb(var(--theme-gray-03));
-  color: rgb(var(--form-input-text-hover));
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%),
+    linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%);
+  background-color: rgb(var(--form-input-background-hover));
+  color: rgb(var(--form-label-hover));
   outline: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+  box-shadow: var(--form-hover-ring);
 }
 
 select:focus,
 select:active {
   background-image:
-    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-focus)) 50%),
-    linear-gradient(135deg, rgb(var(--form-input-text-focus)) 50%, transparent 50%);
-  background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-input-text-focus));
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%),
+    linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%);
+  background-color: rgb(var(--form-input-background-focus-active));
+  color: rgb(var(--form-label-focus-active));
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+  box-shadow: var(--form-focus-ring-accent);
 }
 
 select:disabled,
 select:disabled:hover,
 select:disabled:focus,
 select:disabled:active {
-  background-color: transparent;
+  background-color: rgb(var(--form-input-background-disabled));
   background-image:
     linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
     linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
   color: rgb(var(--form-input-text-disabled));
-  border-color: rgb(var(--form-input-text-disabled));
   cursor: default;
   box-shadow: none;
 }
 
 /* textarea */
 textarea {
-  background-color: rgb(var(--theme-gray-02));
-  padding: 0 1em;
+  background-color: rgb(var(--form-input-background));
+  padding: 0.25em 1em;
   margin: 0 0 1em 0;
   color: rgb(var(--form-input-text));
   font-size: 1em;
   font-family: var(--font-regular);
-  line-height: 2em;
+  line-height: 2;
   height: 10em;
   min-height: 2.5em;
   min-width: 0;
   width: 100%;
-  border-width: var(--form-input-border);
-  border-style: solid;
-  border-color: transparent;
+  border: 0;
   border-radius: var(--theme-radius);
   cursor: text;
   resize: vertical;
   display: block;
-  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
   -moz-appearance: textfield;
 }
 
 textarea:hover {
-  background-color: rgb(var(--theme-gray-03));
+  background-color: rgb(var(--form-input-background-hover));
   color: rgb(var(--form-input-text-hover));
   outline: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+  box-shadow: var(--form-hover-ring);
 }
 
-textarea:focus {
-  background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-input-text-focus));
+textarea:focus,
+textarea:active {
+  background-color: rgb(var(--form-input-background-focus-active));
+  color: rgb(var(--form-input-text-focus-active));
   outline: none;
-  z-index: 2;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+  box-shadow: var(--form-focus-ring-accent);
 }
 
 textarea:disabled {
-  background-color: transparent;
+  background-color: rgb(var(--form-input-background-disabled));
   color: rgb(var(--form-input-text-disabled));
-  border-color: rgb(var(--form-input-text-disabled));
   cursor: default;
   box-shadow: none;
+  resize: none;
 }
 
 textarea:disabled:hover,
@@ -119,22 +131,22 @@ textarea:disabled:focus {
 }
 
 textarea::placeholder {
-  color: rgb(var(--form-input-placeholder));
+  color: rgb(var(--form-placeholder));
   transition: color var(--layout-timing-extra-fast);
 }
 
 textarea:hover::placeholder {
-  color: rgb(var(--form-input-placeholder-hover-focus));
+  color: rgb(var(--form-placeholder-focus-hover));
 }
 
 textarea:focus::placeholder {
-  color: rgb(var(--form-input-placeholder-hover-focus));
+  color: rgb(var(--form-placeholder-focus-hover));
 }
 
 textarea:disabled::placeholder,
 textarea:disabled:hover::placeholder,
 textarea:disabled:focus::placeholder {
-  color: rgb(var(--form-input-placeholder-disabled));
+  color: rgb(var(--form-placeholder-disabled));
 }
 
 /* email, number, password, search, tel, text */
@@ -144,7 +156,7 @@ input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="text"] {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--form-input-background));
   padding: 0 1em;
   margin: 0 0 1em 0;
   color: rgb(var(--form-input-text));
@@ -154,12 +166,10 @@ input[type="text"] {
   height: 2.5em;
   min-width: 0;
   width: 100%;
-  border-width: var(--form-input-border);
-  border-style: solid;
-  border-color: transparent;
+  border: 0;
   border-radius: var(--theme-radius);
   cursor: text;
-  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
   -moz-appearance: textfield;
 }
 
@@ -179,23 +189,29 @@ input[type="password"]:hover,
 input[type="search"]:hover,
 input[type="tel"]:hover,
 input[type="text"]:hover {
-  background-color: rgb(var(--theme-gray-03));
+  background-color: rgb(var(--form-input-background-hover));
   color: rgb(var(--form-input-text-hover));
   outline: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+  box-shadow: var(--form-hover-ring);
 }
 
 input[type="email"]:focus,
+input[type="email"]:active,
 input[type="number"]:focus,
+input[type="number"]:active,
 input[type="password"]:focus,
+input[type="password"]:active,
 input[type="search"]:focus,
+input[type="search"]:active,
 input[type="tel"]:focus,
-input[type="text"]:focus {
-  background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-input-text-focus));
+input[type="tel"]:active,
+input[type="text"]:focus,
+input[type="text"]:active {
+  background-color: rgb(var(--form-input-background-focus-active));
+  color: rgb(var(--form-input-text-focus-active));
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+  box-shadow: var(--form-focus-ring-accent);
 }
 
 input[type="email"]:disabled,
@@ -204,9 +220,8 @@ input[type="password"]:disabled,
 input[type="search"]:disabled,
 input[type="tel"]:disabled,
 input[type="text"]:disabled {
-  background-color: transparent;
+  background-color: rgb(var(--form-input-background-disabled));
   color: rgb(var(--form-input-text-disabled));
-  border-color: rgb(var(--form-input-text-disabled));
   cursor: default;
   box-shadow: none;
 }
@@ -232,7 +247,7 @@ input[type="password"]::placeholder,
 input[type="search"]::placeholder,
 input[type="tel"]::placeholder,
 input[type="text"]::placeholder {
-  color: rgb(var(--form-input-placeholder));
+  color: rgb(var(--form-placeholder));
   transition: color var(--layout-timing-extra-fast);
 }
 
@@ -242,7 +257,7 @@ input[type="password"]:hover::placeholder,
 input[type="search"]:hover::placeholder,
 input[type="tel"]:hover::placeholder,
 input[type="text"]:hover::placeholder {
-  color: rgb(var(--form-input-placeholder-hover-focus));
+  color: rgb(var(--form-placeholder-focus-hover));
 }
 
 input[type="email"]:focus::placeholder,
@@ -251,7 +266,7 @@ input[type="password"]:focus::placeholder,
 input[type="search"]:focus::placeholder,
 input[type="tel"]:focus::placeholder,
 input[type="text"]:focus::placeholder {
-  color: rgb(var(--form-input-placeholder-hover-focus));
+  color: rgb(var(--form-placeholder-focus-hover));
 }
 
 input[type="email"]:disabled::placeholder,
@@ -272,24 +287,7 @@ input[type="tel"]:disabled:focus::placeholder,
 input[type="text"]:disabled::placeholder,
 input[type="text"]:disabled:hover::placeholder,
 input[type="text"]:disabled:focus::placeholder {
-  color: rgb(var(--form-input-placeholder-disabled));
-}
-
-/* label */
-label {
-  padding: 0;
-  color: rgb(var(--form-label));
-  margin-bottom: 0;
-  font-size: 1em;
-  display: block;
-}
-
-label:not(:only-child):not(:last-child) {
-  padding-bottom: 0.5em;
-}
-
-label.disabled {
-  color: rgb(var(--form-label-disabled));
+  color: rgb(var(--form-placeholder-disabled));
 }
 
 /* checkbox and radio */
@@ -313,7 +311,7 @@ input[type="radio"] {
 
 input[type="checkbox"]+label,
 input[type="radio"]+label {
-  color: rgb(var(--form-checkbox-radio-label));
+  color: rgb(var(--form-label));
   font-size: 1em;
   font-family: var(--font-regular);
   cursor: pointer;
@@ -324,10 +322,34 @@ input[type="radio"]+label {
   transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
 }
 
+input[type="checkbox"]:focus+label,
+input[type="checkbox"]:hover+label,
+input[type="radio"]:focus+label,
+input[type="radio"]:hover+label {
+  color: rgb(var(--form-label-hover));
+}
+
+input[type="checkbox"]:active+label,
+input[type="radio"]:active+label {
+  color: rgb(var(--form-label-focus-active));
+}
+
+input[type="checkbox"]:checked+label,
+input[type="radio"]:checked+label {
+  color: rgb(var(--form-label-checked));
+}
+
+input[type="checkbox"]:disabled+label,
+input[type="radio"]:disabled+label {
+  color: rgb(var(--form-label-disabled));
+  cursor: default;
+}
+
 input[type="checkbox"]+label:before,
 input[type="radio"]+label:before {
   content: "";
   margin-right: 0.5em;
+  color: rgb(var(--form-icon));
   font-size: 1.5em;
   line-height: 1;
   width: 1em;
@@ -359,46 +381,22 @@ input[type="radio"]:checked+label:before {
   content: "\e837";
 }
 
-input[type="checkbox"]:focus+label,
-input[type="checkbox"]:hover+label,
-input[type="radio"]:focus+label,
-input[type="radio"]:hover+label {
-  color: rgb(var(--theme-style-text));
-}
-
-input[type="checkbox"]:active+label,
-input[type="radio"]:active+label {
-  color: rgb(var(--theme-style-text));
-}
-
 input[type="checkbox"]:focus+label:before,
 input[type="checkbox"]:hover+label:before,
 input[type="radio"]:focus+label:before,
 input[type="radio"]:hover+label:before {
-  color: rgb(var(--theme-style-text));
+  color: rgb(var(--form-icon-hover-focus));
 }
 
 input[type="checkbox"]:active+label:before,
 input[type="radio"]:active+label:before {
-  color: rgb(var(--theme-accent));
+  color: rgb(var(--form-icon-active));
   transform: scale(0.9);
 }
 
-input[type="checkbox"]:checked+label,
-input[type="radio"]:checked+label {
-  color: rgb(var(--form-checkbox-radio-checked-label));
-}
-
-input[type="checkbox"]:not(:disabled):hover:checked+label,
-input[type="checkbox"]:not(:disabled):focus:checked+label,
-input[type="radio"]:not(:disabled):hover:checked+label,
-input[type="radio"]:not(:disabled):focus:checked+label {
-  color: rgb(var(--theme-style-text));
-}
-
 input[type="checkbox"]:checked+label:before,
 input[type="radio"]:checked+label:before {
-  color: rgb(var(--theme-accent));
+  color: rgb(var(--form-icon-checked));
 }
 
 input[type="checkbox"]:checked:focus+label:before,
@@ -406,15 +404,9 @@ input[type="radio"]:checked:focus+label:before {
   transform: scale(1.2);
 }
 
-input[type="checkbox"]:disabled+label,
-input[type="radio"]:disabled+label {
-  color: rgb(var(--form-checkbox-radio-disabled-label));
-  cursor: default;
-}
-
 input[type="checkbox"]:disabled+label:before,
 input[type="radio"]:disabled+label:before {
-  color: rgb(var(--form-checkbox-radio-disabled-label));
+  color: rgb(var(--forform-icon-disabled));
   cursor: default;
 }
 
@@ -431,23 +423,21 @@ input[type="color"] {
   width: 100%;
   height: 2.5em;
   display: block;
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
+  border: 0;
   border-radius: var(--theme-radius);
   overflow: hidden;
   cursor: pointer;
-  transition: border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  transition: box-shadow var(--layout-timing-extra-fast);
 }
 
 input[type="color"]:hover {
   outline: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+  box-shadow: var(--form-hover-ring);
 }
 
 input[type="color"]:focus {
   outline: none;
-  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10));
+  box-shadow: var(--form-focus-ring);
 }
 
 input[type="color"]:disabled {
@@ -489,7 +479,7 @@ input[type="range"] {
   font-size: 1em;
   font-family: var(--font-regular);
   display: block;
-  height: 2em;
+  height: 2.5em;
   width: 100%;
   border: 0;
   border-radius: var(--theme-radius);
@@ -499,34 +489,39 @@ input[type="range"] {
   -webkit-appearance: none;
 }
 
-input[type="range"]:before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 0;
-  background-color: rgb(var(--theme-gray-08));
-  height: var(--layout-line-width);
-  width: 100%;
-  border: 0;
-  border-radius: var(--theme-radius);
-  transform: translate(0, -50%);
-  transition: all var(--layout-timing-extra-fast);
-}
-
 input[type="range"]:focus {
   outline: none;
 }
 
-input[type="range"]:focus:before {
-  background-color: rgb(var(--theme-style-text));
-}
-
 input[type="range"]:disabled {
   cursor: default;
 }
 
+input[type="range"]:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  background-color: rgb(var(--form-range-track-background));
+  height: var(--layout-line-width);
+  width: 100%;
+  border: 0;
+  border-radius: var(--theme-radius);
+  transform: translate(0, -50%);
+  transition: background-color var(--layout-timing-extra-fast);
+}
+
+input[type="range"]:focus:before,
+input[type="range"]:hover:before {
+  background-color: rgb(var(--form-range-track-background-focus-hover));
+}
+
+input[type="range"]:active:before {
+  background-color: rgb(var(--form-range-track-background-active));
+}
+
 input[type="range"]:disabled:before {
-  background-color: rgb(var(--theme-gray-04));
+  background-color: rgb(var(--form-range-track-background-disabled));
   cursor: default;
 }
 
@@ -539,61 +534,64 @@ input[type="range"]::-webkit-slider-runnable-track {
 }
 
 input[type="range"]::-webkit-slider-thumb {
-  background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-range-thumb));
+  background-color: rgb(var(--form-range-thumb-background));
   margin: 0;
   padding: 0;
-  border-width: var(--layout-line-width);
-  border-style: solid;
-  border-color: rgb(var(--theme-accent));
-  border-radius: 100%;
+  border-width: 0;
+  border-radius: 50%;
   position: relative;
-  height: 1em;
-  width: 1em;
+  height: 1.5em;
+  width: 1.5em;
   cursor: pointer;
   box-sizing: border-box;
-  /* z-index: 2; */
-  transform: scale(1);
-  transition: all var(--layout-timing-extra-fast);
+  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
   -webkit-appearance: none;
 }
 
+input[type="range"]::-webkit-slider-thumb,
+input[type="range"]:focus::-webkit-slider-thumb,
+input[type="range"]:hover::-webkit-slider-thumb,
 input[type="range"]:active::-webkit-slider-thumb {
-  transform: scale(0.9);
-}
-
-input[type="range"]:focus::-webkit-slider-thumb {
-  transform: scale(1.2);
-  outline: none;
-}
-
-input[type="range"]::-webkit-slider-thumb:focus,
-input[type="range"]::-webkit-slider-thumb:hover {
-  outline: none;
+  box-shadow: none;
   text-decoration: none;
+  outline: none;
 }
 
-input[type="range"]::-webkit-slider-thumb:active {
+input[type="range"]:focus::-webkit-slider-thumb,
+input[type="range"]:hover::-webkit-slider-thumb {
+  background-color: rgb(var(--form-range-thumb-background-focus-hover));
+  box-shadow: var(--form-hover-ring);
   outline: none;
-  text-decoration: none;
+}
+
+input[type="range"]:active::-webkit-slider-thumb {
+  background-color: rgb(var(--form-range-thumb-background-active));
+  box-shadow: var(--form-focus-ring-accent);
 }
 
 input[type="range"]:disabled::-webkit-slider-thumb {
-  border-color: rgb(var(--theme-gray-04));
+  background-color: rgb(var(--form-range-thumb-background-disabled));
   cursor: default;
 }
 
-input[type="range"]:disabled:active::-webkit-slider-thumb,
+input[type="range"]:disabled:hover::-webkit-slider-thumb,
 input[type="range"]:disabled:focus::-webkit-slider-thumb {
+  background-color: rgb(var(--form-range-thumb-background-disabled));
+  box-shadow: none;
   transform: scale(1);
   outline: none;
 }
 
+input[type="range"]:disabled:active::-webkit-slider-thumb {
+  background-color: rgb(var(--form-range-thumb-background-disabled));
+  box-shadow: none;
+  outline: none;
+}
+
 input[type="range"]::-moz-range-track {
-  background-color: rgb(var(--theme-gray-08));
+  background-color: rgb(var(--form-range-track-background));
   margin: 0 -0.5em;
   padding: 0;
-  border: 0;
   height: var(--layout-line-width);
   width: 100%;
   border: 0;
@@ -602,8 +600,18 @@ input[type="range"]::-moz-range-track {
   -webkit-appearance: none;
 }
 
-input[type="range"]:focus::-moz-range-track {
-  background-color: rgb(var(--theme-style-text));
+input[type="range"]:focus::-moz-range-track,
+input[type="range"]:hover::-moz-range-track {
+  background-color: rgb(var(--form-range-track-background-focus-hover));
+}
+
+input[type="range"]:active::-moz-range-track {
+  background-color: rgb(var(--form-range-track-background-active));
+}
+
+input[type="range"]:disabled::-moz-range-track {
+  background-color: rgb(var(--form-range-track-background-disabled));
+  cursor: default;
 }
 
 input[type="range"]::-moz-focus-outer {
@@ -611,68 +619,68 @@ input[type="range"]::-moz-focus-outer {
 }
 
 input[type="range"]::-moz-range-thumb {
-  background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-range-thumb));
+  background-color: rgb(var(--form-range-thumb-background));
   margin: 0;
   padding: 0;
-  border-width: var(--layout-line-width);
-  border-style: solid;
-  border-color: rgb(var(--theme-accent));
+  border-width: 0;
   border-radius: 100%;
   position: relative;
-  height: 1em;
-  width: 1em;
+  height: 1.25em;
+  width: 1.25em;
   cursor: pointer;
   box-sizing: border-box;
-  /* z-index: 2; */
-  transform: scale(1);
-  transition: all var(--layout-timing-extra-fast);
-  -webkit-appearance: none;
+  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  -moz-appearance: none;
+}
+
+input[type="range"]::-moz-range-thumb,
+input[type="range"]:focus::-moz-range-thumb,
+input[type="range"]:hover::-moz-range-thumb,
+input[type="range"]:active::-moz-range-thumb {
+  box-shadow: none;
+  text-decoration: none;
+  outline: none;
+}
+
+input[type="range"]:focus::-moz-range-thumb,
+input[type="range"]:hover::-moz-range-thumb {
+  background-color: rgb(var(--form-range-thumb-background-focus-hover));
+  box-shadow: var(--form-hover-ring);
+  outline: none;
 }
 
 input[type="range"]:active::-moz-range-thumb {
-  transform: scale(0.9);
-}
-
-input[type="range"]:focus::-moz-range-thumb {
-  transform: scale(1.2);
-  outline: none;
-}
-
-input[type="range"]::-moz-range-thumb:focus,
-input[type="range"]::-moz-range-thumb:hover {
-  outline: none;
-  text-decoration: none;
-}
-
-input[type="range"]::-moz-range-thumb:active {
-  outline: none;
-  text-decoration: none;
-}
-
-input[type="range"]::-moz-range-progress {
-  background-color: rgb(var(--theme-accent));
-  height: calc(var(--layout-line-width) * 1.5);
-  border-radius: var(--theme-radius);
-}
-
-input[type="range"]:disabled::-moz-range-track {
-  background-color: rgb(var(--theme-gray-04));
+  background-color: rgb(var(--form-range-thumb-background-active));
+  box-shadow: var(--form-focus-ring-accent);
 }
 
 input[type="range"]:disabled::-moz-range-thumb {
-  border-color: rgb(var(--theme-gray-04));
+  background-color: rgb(var(--form-range-thumb-background-disabled));
   cursor: default;
 }
 
-input[type="range"]:disabled:active::-moz-range-thumb,
+input[type="range"]:disabled:hover::-moz-range-thumb,
 input[type="range"]:disabled:focus::-moz-range-thumb {
+  background-color: rgb(var(--form-range-thumb-background-disabled));
+  box-shadow: none;
   transform: scale(1);
   outline: none;
 }
 
+input[type="range"]:disabled:active::-moz-range-thumb {
+  background-color: rgb(var(--form-range-thumb-background-disabled));
+  box-shadow: none;
+  outline: none;
+}
+
+input[type="range"]::-moz-range-progress {
+  background-color: rgb(var(--form-range-progress-background));
+  height: calc(var(--layout-line-width) * 2);
+  border-radius: var(--theme-radius);
+}
+
 input[type="range"]:disabled::-moz-range-progress {
-  background-color: rgb(var(--theme-gray-04));
+  background-color: rgb(var(--form-range-progress-background-disabled));
 }
 
 /* form helper */
@@ -695,9 +703,10 @@ input[type="range"]:disabled::-moz-range-progress {
   padding: 0.5em 0;
   position: relative;
   width: 100%;
+  display: block;
 }
 
-.input-wrap.input-button {
+.input-button-inline {
   width: initial;
   display: inline-block;
 }
@@ -706,7 +715,7 @@ input[type="range"]:disabled::-moz-range-progress {
 .input-button input[type="radio"]+label,
 .input-button input[type="color"]+label,
 .input-button input[type="file"]+label {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--button-background));
   padding: 0.125em 1em;
   margin: 0;
   color: rgb(var(--button-text));
@@ -732,6 +741,23 @@ input[type="range"]:disabled::-moz-range-progress {
   align-items: center;
 }
 
+.input-button input[type="checkbox"]+label:before,
+.input-button input[type="radio"]+label:before {
+  font-size: 1em;
+  margin-right: 1em;
+  transform: scale(1.5);
+}
+
+.input-button input[type="checkbox"]:active+label:before,
+.input-button input[type="radio"]:active+label:before {
+  transform: scale(1.3);
+}
+
+.input-button input[type="checkbox"]:checked:focus+label:before,
+.input-button input[type="radio"]:checked:focus+label:before {
+  transform: scale(1.7);
+}
+
 .input-button input[type="checkbox"]:hover+label,
 .input-button input[type="checkbox"]:focus+label,
 .input-button input[type="radio"]:hover+label,
@@ -740,9 +766,9 @@ input[type="range"]:disabled::-moz-range-progress {
 .input-button input[type="color"]:focus+label,
 .input-button input[type="file"]:hover+label,
 .input-button input[type="file"]:focus+label {
-  background-color: rgb(var(--theme-gray-03));
-  border-bottom-color: rgb(var(--theme-gray-08));
-  color: rgb(var(--button-text-hover-focus));
+  background-color: rgb(var(--button-background-focus-hover));
+  border-bottom-color: rgb(var(--button-border-focus-hover));
+  color: rgb(var(--button-text-focus-hover));
   outline: none;
 }
 
@@ -750,9 +776,9 @@ input[type="range"]:disabled::-moz-range-progress {
 .input-button input[type="radio"]:active+label,
 .input-button input[type="color"]:active+label,
 .input-button input[type="file"]:active+label {
-  background-color: rgb(var(--theme-gray-04));
-  border-bottom-color: rgb(var(--theme-accent));
-  color: rgb(var(--button-text-active));
+  background-color: rgb(var(--button-background-active));
+  border-bottom-color: rgb(var(--button-border-active));
+  color: rgb(var(--button-text-focus-active));
   transition: none;
 }
 
@@ -760,9 +786,9 @@ input[type="range"]:disabled::-moz-range-progress {
 .input-button input[type="radio"]:checked+label,
 .input-button input[type="color"]:checked+label,
 .input-button input[type="file"]:checked+label {
-  background-color: rgb(var(--theme-gray-04));
+  background-color: rgb(var(--button-background-active));
   border-bottom-color: rgb(var(--theme-accent));
-  color: rgb(var(--button-text-active));
+  color: rgb(var(--button-text-focus-active));
   transition: none;
 }
 
@@ -782,7 +808,7 @@ input[type="range"]:disabled::-moz-range-progress {
 .input-button input[type="file"]:disabled:hover+label,
 .input-button input[type="file"]:disabled:focus+label,
 .input-button input[type="file"]:disabled:active+label {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--button-background-disabled));
   border-color: transparent;
   color: rgb(var(--button-text-disabled));
   cursor: default;
@@ -810,7 +836,7 @@ input[type="range"]:disabled::-moz-range-progress {
 .input-button-link input[type="file"]:focus+label,
 .input-button-link input[type="file"]:checked+label {
   background-color: transparent;
-  color: rgb(var(--button-link-text-hover-focus));
+  color: rgb(var(--button-link-text-focus-hover));
 }
 
 .input-button-link input[type="checkbox"]:active+label,
@@ -904,47 +930,43 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 .form-grid {
-  padding: calc(var(--layout-line-width) * 2);
-  display: grid;
-  border-radius: calc(var(--layout-line-width) * 6);
-  border-width: var(--layout-line-width);
-  border-style: solid;
-  border-color: rgb(var(--form-checkbox-radio-label));
-  transition: border-color var(--layout-timing-extra-fast);
+  background-color: rgb(var(--form-grid-background));
+  padding: calc(var(--layout-line-width) * 4);
+  display: inline-grid;
+  grid-gap: var(--layout-line-width);
+  overflow: hidden;
+  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+}
+
+.form-grid:hover {
+  outline: none;
+  background-color: rgb(var(--form-grid-background-hover));
+  box-shadow: var(--form-hover-ring);
 }
 
 .form-grid:focus,
 .form-grid:focus-within {
   outline: none;
-  border-color: rgb(var(--theme-style-text));
-}
-
-.form-grid.disabled {
-  border-color: rgb(var(--form-checkbox-radio-disabled-label));
+  background-color: rgb(var(--form-grid-background-focus));
+  box-shadow: var(--form-hover-ring);
 }
 
+.form-grid.disabled,
 .form-grid.disabled:focus,
 .form-grid.disabled:focus-within {
-  border-color: rgb(var(--form-checkbox-radio-disabled-label));
+  background-color: rgb(var(--form-grid-background-disabled));
+  box-shadow: none;
 }
 
 .form-grid-3x3 {
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
+  border-radius: var(--theme-radius);
 }
 
 .form-grid-3x1 {
   grid-template-columns: repeat(3, 1fr);
-}
-
-.form-grid-square {
-  width: 7em;
-  height: 7em;
-}
-
-.form-grid-rectangle {
-  width: 7em;
-  height: 3em;
+  border-radius: var(--theme-radius);
 }
 
 .form-grid-viewport {
@@ -960,74 +982,94 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-grid input[type="checkbox"]+label,
 .form-grid input[type="radio"]+label {
+  background-color: rgb(var(--form-grid-input-background));
+  background-color: transparent;
   display: block;
-  width: 100%;
-  height: 100%;
-  border-width: calc(var(--layout-line-width) / 2);
-  border-style: solid;
-  border-color: transparent;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
   position: relative;
   transition: none;
-  transition: border-color var(--layout-timing-extra-fast);
+  z-index: 1;
+  transform: scale(1);
+  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
 .form-grid input[type="checkbox"]:focus+label,
 .form-grid input[type="checkbox"]:hover+label,
 .form-grid input[type="radio"]:focus+label,
 .form-grid input[type="radio"]:hover+label {
-  border-color: rgb(var(--theme-style-text));
+  background-color: rgb(var(--form-grid-input-background-focus-hover));
+  box-shadow: var(--form-hover-ring);
+  z-index: 2;
 }
 
 .form-grid input[type="checkbox"]:active+label,
 .form-grid input[type="radio"]:active+label {
-  border-color: rgb(var(--theme-accent));
+  background-color: rgb(var(--form-grid-input-background-active));
+  box-shadow: var(--form-focus-ring-accent);
+  z-index: 2;
 }
 
 .form-grid input[type="checkbox"]:checked+label,
 .form-grid input[type="radio"]:checked+label {
-  border-color: rgb(var(--theme-accent));
+  background-color: rgb(var(--form-grid-input-background-checked));
+  z-index: 2;
+}
+
+.form-grid input[type="checkbox"]:checked:focus+label,
+.form-grid input[type="checkbox"]:checked:hover+label,
+.form-grid input[type="radio"]:checked:focus+label,
+.form-grid input[type="radio"]:checked:hover+label {
+  background-color: rgb(var(--form-grid-input-background-focus-hover));
+  box-shadow: var(--form-hover-ring);
+  z-index: 2;
+}
+
+.form-grid input[type="checkbox"]:checked:active+label,
+.form-grid input[type="radio"]:checked:active+label {
+  background-color: rgb(var(--form-grid-input-background-active));
+  box-shadow: var(--form-focus-ring-accent);
+  z-index: 2;
 }
 
 .form-grid input[type="checkbox"]:disabled:focus+label,
 .form-grid input[type="checkbox"]:disabled:hover+label,
 .form-grid input[type="radio"]:disabled:focus+label,
 .form-grid input[type="radio"]:disabled:hover+label {
-  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
 }
 
 .form-grid input[type="checkbox"]:disabled:active+label,
 .form-grid input[type="radio"]:disabled:active+label {
-  border-color: transparent;
+  background-color: transparent;
 }
 
 .form-grid input[type="checkbox"]:disabled:checked+label,
 .form-grid input[type="radio"]:disabled:checked+label {
-  border-color: rgb(var(--form-checkbox-radio-disabled-label));
+  background-color: rgb(var(--form-checkbox-radio-disabled-label));
 }
 
-.form-grid input[type="checkbox"]:not(:disabled):hover:checked+label,
-.form-grid input[type="checkbox"]:not(:disabled):focus:checked+label,
-.form-grid input[type="radio"]:not(:disabled):hover:checked+label,
-.form-grid input[type="radio"]:not(:disabled):focus:checked+label {
-  border-color: rgb(var(--theme-accent));
+.form-grid input[type="checkbox"]:disabled+label,
+.form-grid input[type="checkbox"]:disabled:focus+label,
+.form-grid input[type="checkbox"]:disabled:hover+label,
+.form-grid input[type="checkbox"]:disabled:active+label,
+.form-grid input[type="radio"]:disabled+label,
+.form-grid input[type="radio"]:disabled:focus+label,
+.form-grid input[type="radio"]:disabled:hover+label,
+.form-grid input[type="radio"]:disabled:active+label {
+  background-color: transparent;
+}
+
+.form-grid input[type="checkbox"]:disabled:checked+label,
+.form-grid input[type="radio"]:disabled:checked+label {
+  background-color: rgb(var(--form-checkbox-radio-disabled-label));
 }
 
 .form-grid input[type="checkbox"]+label:before,
 .form-grid input[type="radio"]+label:before {
-  content: "";
-  margin-right: 0;
-  font-size: 1em;
-  background-color: transparent;
-  width: inherit;
-  height: inherit;
-  width: calc(100% - calc(var(--layout-line-width) * 4));
-  height: calc(100% - calc(var(--layout-line-width) * 4));
-  position: absolute;
-  top: calc(var(--layout-line-width) * 2);
-  left: calc(var(--layout-line-width) * 2);
-  display: block;
-  transform: scale(1);
-  transition: transform var(--layout-timing-extra-fast), background-color var(--layout-timing-extra-fast);
+  content: none;
 }
 
 .form-grid input[type="checkbox"]:focus+label:before,
@@ -1037,91 +1079,6 @@ input[type="range"]:disabled::-moz-range-progress {
   transform: scale(1);
 }
 
-.form-grid input[type="checkbox"]:checked+label:before,
-.form-grid input[type="radio"]:checked+label:before {
-  background-color: rgb(var(--theme-accent));
-  transform: scale(1);
-}
-
-.form-grid input[type="checkbox"]:checked+label:before,
-.form-grid input[type="radio"]:checked+label:before {
-  background-color: rgb(var(--theme-accent));
-}
-
-.form-grid input[type="checkbox"]:disabled+label,
-.form-grid input[type="radio"]:disabled+label {
-  transform: scale(1);
-}
-
-.form-grid input[type="checkbox"]:disabled:checked+label:before,
-.form-grid input[type="radio"]:disabled:checked+label:before {
-  background-color: rgb(var(--form-checkbox-radio-disabled-label));
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label {
-  border-top-left-radius: calc(var(--layout-line-width) * 3);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label:before {
-  border-top-left-radius: var(--layout-line-width);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label {
-  border-top-right-radius: calc(var(--layout-line-width) * 3);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label:before {
-  border-top-right-radius: var(--layout-line-width);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label {
-  border-bottom-left-radius: calc(var(--layout-line-width) * 3);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label:before,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label:before {
-  border-bottom-left-radius: var(--layout-line-width);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label {
-  border-bottom-right-radius: calc(var(--layout-line-width) * 3);
-}
-
-.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label:before,
-.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label:before {
-  border-bottom-right-radius: var(--layout-line-width);
-}
-
-.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label,
-.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label {
-  border-top-left-radius: calc(var(--layout-line-width) * 3);
-  border-bottom-left-radius: calc(var(--layout-line-width) * 3);
-}
-
-.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
-.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label:before {
-  border-top-left-radius: var(--layout-line-width);
-  border-bottom-left-radius: var(--layout-line-width);
-}
-
-.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label,
-.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label {
-  border-top-right-radius: calc(var(--layout-line-width) * 3);
-  border-bottom-right-radius: calc(var(--layout-line-width) * 3);
-}
-
-.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
-.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label:before {
-  border-top-right-radius: var(--layout-line-width);
-  border-bottom-right-radius: var(--layout-line-width);
-}
-
 .form-indent {
   margin-left: 2.25em;
 }
@@ -1133,10 +1090,10 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 .form-group-text {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--form-group-text-background));
   padding: 0 1em;
   margin: 0;
-  color: rgb(var(--theme-style-text));
+  color: rgb(var(--form-input-text));
   min-width: 4em;
   font-size: 1em;
   font-family: var(--font-regular);
@@ -1150,34 +1107,50 @@ input[type="range"]:disabled::-moz-range-progress {
   border-color: transparent;
   border-radius: var(--theme-radius);
   white-space: nowrap;
-  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
+  transition: background-color var(--layout-timing-extra-fast);
 }
 
 .form-group-text:hover,
 .form-group-text:focus {
-  /* background-color: rgb(var(--theme-gray-03)); */
-  /* border-bottom-color: rgb(var(--theme-gray-08)); */
+  background-color: rgb(var(--form-group-text-background-focus-hover));
+  color: rgb(var(--form-input-text-hover));
+  outline: none;
+}
+
+.form-group-text:active {
+  background-color: rgb(var(--form-group-text-background-active));
+  color: rgb(var(--form-input-text-hover));
   outline: none;
 }
 
 .form-group-text.disabled {
-  background-color: rgb(var(--theme-gray-02));
-  color: rgb(var(--form-input-placeholder-disabled));
+  background-color: rgb(var(--form-group-text-background-disabled));
+  color: rgb(var(--form-input-text-disabled));
   box-shadow: none;
   cursor: default;
 }
 
 .form-group-text.disabled:hover,
 .form-group-text.disabled:focus {
-  background-color: rgb(var(--theme-gray-02));
-  border-color: transparent;
+  background-color: rgb(var(--form-group-text-background-disabled));
+  color: rgb(var(--form-input-text-disabled));
+}
+
+.form-group-text.disable:active {
+  background-color: rgb(var(--form-group-text-background-disabled));
+  color: rgb(var(--form-input-text-disabled));
+  outline: none;
 }
 
 .form-group {
   margin: 0 0 1em 0;
-  display: flex;
+  display: inline-flex;
   justify-content: flex-start;
   align-items: stretch;
+}
+
+.form-group-block {
+  display: flex;
   width: 100%;
 }
 
@@ -1295,7 +1268,7 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 .form-dropdown-menu {
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--form-dropdown-background));
   border-radius: var(--theme-radius);
   padding: 0.5em 0;
   position: absolute;
@@ -1340,11 +1313,11 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-feedback {
   padding: 0.5em 1.5em 0.5em 1em;
-  background-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--form-feedback-background));
   border-width: 0;
   border-left-width: calc(var(--layout-line-width) * 2);
   border-style: solid;
-  border-color: rgb(var(--theme-gray-04));
+  border-color: rgb(var(--form-feedback-border));
   border-top-right-radius: var(--theme-radius);
   border-bottom-right-radius: var(--theme-radius);
 }
@@ -1358,8 +1331,8 @@ input[type="range"]:disabled::-moz-range-progress {
 }
 
 .form-feedback.disabled {
-  background-color: transparent;
-  border-color: rgb(var(--theme-gray-02));
+  background-color: rgb(var(--form-feedback-background-disabled));
+  border-color: rgb(var(--form-feedback-border-disabled));
 }
 
 .form-feedback.disabled p {
diff --git a/src/css/group.css b/src/css/group.css
index b84b18d2..cfcc9baa 100644
--- a/src/css/group.css
+++ b/src/css/group.css
@@ -26,30 +26,17 @@
 .group-header {
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  transition: margin var(--layout-timing-extra-fast) var(--layout-duration-04);
-}
-
-.is-group-area-alignment-left .group-header {
-  flex-direction: row;
-  justify-content: flex-start;
-}
-
-.is-group-area-alignment-center .group-header {
-  flex-direction: row;
-  justify-content: center;
-}
-
-.is-group-area-alignment-right .group-header {
-  flex-direction: row-reverse;
-  justify-content: flex-start;
+  transition: padding var(--layout-timing-extra-fast);
 }
 
 .is-group-name-show .group-header,
 .is-link-edit .group-header {
-  margin-bottom: calc(var(--layout-space) * var(--layout-gutter));
-  transition: margin var(--layout-timing-extra-fast);
+  padding-bottom: calc(var(--layout-space) * var(--layout-gutter));
+  transition: padding var(--layout-timing-extra-fast);
 }
 
 .group-name {
@@ -60,6 +47,7 @@
   overflow: hidden;
   font-size: var(--group-name-size);
   transition: height var(--layout-timing-extra-fast);
+  transition: height var(--layout-timing-extra-fast);
 }
 
 .is-group-name-show .group-name {
@@ -89,6 +77,7 @@
 }
 
 .is-link-edit .group-control {
+  margin-right: 1em;
   height: 2.5em;
   width: 16em;
   transition:
@@ -97,25 +86,11 @@
     margin var(--layout-timing-extra-fast) var(--layout-duration-04);
 }
 
-.is-group-area-alignment-left.is-link-edit .group-control,
-.is-group-area-alignment-center.is-link-edit .group-control {
-  margin-right: 1em;
-}
-
-.is-group-area-alignment-right.is-link-edit .group-control {
-  margin-left: 1em;
-}
-
 .group-control-item {
   width: 4em;
   flex-shrink: 0;
 }
 
-.group-control-item .button-icon {
-  padding-left: 0.175em;
-  padding-right: 0.175em;
-}
-
 .group-body {
   font-size: calc(var(--link-item-size) * 1);
   background-color: transparent;
diff --git a/src/css/menu.css b/src/css/menu.css
index 4d12607b..b5087130 100755
--- a/src/css/menu.css
+++ b/src/css/menu.css
@@ -37,7 +37,7 @@
 }
 
 .is-edge .menu-area {
-  opacity: 0.2;
+  opacity: 0.8;
 }
 
 .menu-nav {
@@ -96,6 +96,7 @@
 
 .menu-nav-button {
   background-color: transparent;
+  border-bottom-color: transparent;
   border-radius: 0;
   margin: 0;
   padding-top: 0;
diff --git a/src/css/modal.css b/src/css/modal.css
index dfd9a6f4..4e09e47a 100755
--- a/src/css/modal.css
+++ b/src/css/modal.css
@@ -68,7 +68,7 @@
 
 .modal-button {
   background-color: transparent;
-  border-radius: 0;
+  border-color: transparent;
   margin: 0;
   padding-top: 1.5em;
   padding-bottom: 1.5em;
diff --git a/src/css/variables.css b/src/css/variables.css
index 8ad9b5a8..cfaaf3fc 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -77,32 +77,93 @@
   --background-blur: 0;
   /* form */
   --form-input-text: var(--theme-gray-16);
-  --form-input-border: 2;
-  --form-input-text-hover: var(--theme-style-text);
-  --form-input-text-focus: var(--theme-style-text);
-  --form-input-text-disabled: var(--theme-gray-02);
-  --form-input-placeholder: var(--theme-gray-06);
-  --form-input-placeholder-hover-focus: var(--theme-gray-10);
-  --form-input-placeholder-disabled: var(--theme-gray-04);
-  --form-label: var(--theme-gray-12);
+  --form-input-text-hover: var(--theme-gray-18);
+  --form-input-text-focus-active: var(--theme-style-text);
+  --form-input-text-disabled: var(--theme-gray-04);
+  --form-input-background: var(--theme-gray-02);
+  --form-input-background-hover: var(--theme-gray-02);
+  --form-input-background-focus-active: var(--theme-gray-01);
+  --form-input-background-disabled: var(--theme-gray-02);
+  --form-input-border: var(--theme-gray-02);
+  --form-input-border-hover: var(--theme-gray-02);
+  --form-input-border-focus-active: var(--theme-gray-01);
+  --form-input-border-disabled: var(--theme-gray-01);
+  --form-group-text-background: var(--theme-gray-02);
+  --form-group-text-background-focus-hover: var(--theme-gray-02);
+  --form-group-text-background-active: var(--theme-gray-02);
+  --form-group-text-background-disabled: var(--theme-gray-02);
+  --form-input-border-disabled: var(--theme-gray-02);
+  --form-border-disabled: var(--theme-gray-02);
+  --form-label: var(--theme-gray-16);
+  --form-label-hover: var(--theme-gray-20);
+  --form-label-focus-active: var(--theme-style-text);
+  --form-label-checked: var(--theme-style-text);
   --form-label-disabled: var(--theme-gray-04);
+  --form-icon: var(--theme-gray-08);
+  --form-icon-hover-focus: var(--theme-gray-20);
+  --form-icon-active: var(--theme-accent);
+  --form-icon-checked: var(--theme-style-text);
+  --form-icon-disabled: var(--theme-gray-04);
+  --form-placeholder: var(--theme-gray-06);
+  --form-placeholder-focus-hover: var(--theme-gray-10);
+  --form-placeholder-disabled: var(--theme-gray-03);
   --form-checkbox-radio-label: var(--theme-gray-12);
   --form-checkbox-radio-checked-label: var(--theme-gray-16);
   --form-checkbox-radio-disabled-label: var(--theme-gray-04);
-  --form-range-thumb: var(--theme-gray-12);
   --form-feedback-text: var(--theme-gray-16);
   --form-feedback-text-muted: var(--theme-gray-12);
   --form-feedback-text-disabled: var(--theme-gray-04);
+  --form-feedback-background: var(--theme-gray-02);
+  --form-feedback-background-disabled: var(--theme-gray-02);
+  --form-feedback-border: var(--theme-gray-04);
+  --form-feedback-border-disabled: var(--theme-gray-02);
   --form-helper: var(--theme-gray-12);
-  --form-helper-disabled: var(--theme-gray-06);
+  --form-helper-disabled: var(--theme-gray-04);
+  --form-range-thumb-background: var(--theme-gray-14);
+  --form-range-thumb-background-focus-hover: var(--theme-gray-16);
+  --form-range-thumb-background-active: var(--theme-style-text);
+  --form-range-thumb-background-disabled: var(--theme-gray-04);
+  --form-range-track-background: var(--theme-gray-06);
+  --form-range-track-background-focus-hover: var(--theme-gray-04);
+  --form-range-track-background-active: var(--theme-gray-03);
+  --form-range-track-background-disabled: var(--theme-gray-02);
+  --form-range-progress-background: var(--theme-accent);
+  --form-range-progress-background-focus-hover: var(--theme-accent);
+  --form-range-progress-background-active: var(--theme-accent);
+  --form-range-progress-background-disabled: var(--theme-gray-04);
+  --form-hover-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+  --form-focus-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
+  --form-focus-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+  --form-grid-input-background: var(--theme-gray-12);
+  --form-grid-input-background-focus-hover: var(--theme-gray-16);
+  --form-grid-input-background-active: var(--theme-style-text);
+  --form-grid-input-background-checked: var(--theme-gray-14);
+  --form-grid-input-background-disabled: var(--theme-gray-04);
+  --form-grid-background: var(--theme-gray-02);
+  --form-grid-background-hover: var(--theme-gray-02);
+  --form-grid-background-focus: var(--theme-gray-02);
+  --form-grid-background-disabled: var(--theme-gray-02);
+  --form-grid-border: var(--theme-gray-08);
+  --form-grid-border-hover-focus: var(--theme-gray-20);
+  --form-grid-border-active: var(--theme-accent);
+  --form-grid-border-checked: var(--theme-accent);
+  --form-grid-border-disabled: var(--theme-gray-04);
+  --form-dropdown-background: var(--theme-gray-02);
   --form-arrow-size: 5px;
   /* button */
+  --button-background: var(--theme-gray-02);
+  --button-background-focus-hover: var(--theme-gray-03);
+  --button-background-active: var(--theme-gray-04);
+  --button-background-disabled: var(--theme-gray-02);
+  --button-border: var(--theme-gray-02);
+  --button-border-focus-hover: var(--theme-gray-08);
+  --button-border-active: var(--theme-accent);
   --button-text: var(--theme-gray-12);
-  --button-text-hover-focus: var(--theme-style-text);
-  --button-text-active: var(--theme-style-text);
+  --button-text-focus-hover: var(--theme-style-text);
+  --button-text-focus-active: var(--theme-style-text);
   --button-text-disabled: var(--theme-gray-04);
   --button-link-text: var(--theme-gray-12);
-  --button-link-text-hover-focus: var(--theme-style-text);
+  --button-link-text-focus-hover: var(--theme-style-text);
   --button-link-text-active: var(--theme-style-text);
   --button-link-text-disabled: var(--theme-gray-04);
   /* font */
diff --git a/src/index.html b/src/index.html
index 9eb31d11..41207466 100644
--- a/src/index.html
+++ b/src/index.html
@@ -148,7 +148,7 @@
               <hr>
               <label class="control-layout-alignment-label">Area Alignment</label>
               <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x3 form-grid-square control-layout-alignment-grid" tabindex="-1">
+                <div class="form-grid form-grid-3x3 control-layout-alignment-grid">
                   <div class="input-wrap">
                     <input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
                     <label for="control-layout-alignment-topleft"><span class="sr-only">Top left</span></label>
@@ -263,7 +263,7 @@
               <hr>
               <label class="control-header-area-alignment-label">Area Horizontal Alignment</label>
               <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 form-grid-rectangle control-header-area-alignment-grid" tabindex="-1">
+                <div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
                   <div class="input-wrap">
                     <input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
                     <label for="control-header-area-alignment-left"><span class="sr-only">Left</span></label>
@@ -282,7 +282,7 @@
               <hr>
               <label class="control-header-item-alignment-label">Item Horizontal Alignment</label>
               <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 form-grid-rectangle control-header-item-alignment-grid" tabindex="-1">
+                <div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
                   <div class="input-wrap">
                     <input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
                     <label for="control-header-item-alignment-left"><span class="sr-only">Left</span></label>
@@ -651,7 +651,7 @@
                 <hr>
                 <label class="control-header-search-text-alignment-label">Align Text</label>
                 <div class="form-grid-wrap">
-                  <div class="form-grid form-grid-3x1 form-grid-rectangle control-header-search-text-alignment-grid" tabindex="-1">
+                  <div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
                     <div class="input-wrap">
                       <input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
                       <label for="control-header-search-text-alignment-left"><span class="sr-only">Left</span></label>
@@ -785,7 +785,7 @@
               <hr>
               <label class="control-group-area-alignment-label">Group Name Horizontal Alignment</label>
               <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 form-grid-rectangle control-group-area-alignment-grid" tabindex="-1">
+                <div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
                   <div class="input-wrap">
                     <input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
                     <label for="control-group-area-alignment-left"><span class="sr-only">Left</span></label>
@@ -834,7 +834,7 @@
               <hr>
               <label class="control-link-area-alignment-label">Horizontal Alignment</label>
               <div class="form-grid-wrap">
-                <div class="form-grid form-grid-3x1 form-grid-rectangle control-link-area-alignment-grid" tabindex="-1">
+                <div class="form-grid form-grid-3x1 control-link-area-alignment-grid">
                   <div class="input-wrap">
                     <input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1">
                     <label for="control-link-area-alignment-left"><span class="sr-only">Left</span></label>
@@ -872,7 +872,7 @@
                 <hr>
                 <label class="control-link-item-display-alignment-label">Content Alignment</label>
                 <div class="form-grid-wrap">
-                  <div class="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
+                  <div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
                     <div class="input-wrap">
                       <input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
                       <label for="control-link-item-display-alignment-topleft"><span class="sr-only">Top left</span></label>
@@ -1068,7 +1068,7 @@
             <div class="menu-item-form">
               <div class="input-wrap">
                 <label for="control-theme-accent-current-picker">Colour</label>
-                <div class="form-group mb-0">
+                <div class="form-group form-group-block mb-0">
                   <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
                   <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off"
                     autocapitalize="off" spellcheck="false">
@@ -1150,7 +1150,7 @@
               </div>
               <div class="form-indent">
                 <div class="input-wrap">
-                  <div class="form-group mb-0">
+                  <div class="form-group form-group-block mb-0">
                     <input id="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
                     <input id="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off"
                       autocorrect="off" autocapitalize="off" spellcheck="false">
diff --git a/src/js/link.js b/src/js/link.js
index af67ece7..324367db 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -691,7 +691,7 @@ var link = (function() {
       var displayIconLable = helper.node("label:Icon|for:link-form-input-display-icon");
       var displayIconFormIndent = helper.node("div|class:form-indent");
       var displayIconInputWrap = helper.node("div|class:input-wrap");
-      var displayIconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper");
+      var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-wrapper");
       var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
       var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
       var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
@@ -726,7 +726,7 @@ var link = (function() {
       var accentCustomLabel = helper.node("label:Custom|for:link-form-input-accent-custom");
       var accentColorFormIndent = helper.node("div|class:form-indent");
       var accentColorInputWrap = helper.node("div|class:input-wrap");
-      var accentColorFormGroup = helper.node("div|class:form-group mb-0");
+      var accentColorFormGroup = helper.node("div|class:form-group form-group-block mb-0");
       var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
       var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
       var accentColorInputHelper = helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
diff --git a/src/style-guide.html b/src/style-guide.html
index 9d34e005..15f99171 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: rgb(38, 40, 49)" class="is-theme-style-dark">
+<html lang="en" class="is-background-color-by-theme is-theme-style-dark">
 
 <head>
   <meta charset="utf-8">
@@ -42,18 +42,40 @@
 <body>
 
   <main class="layout my-5">
-    <p>Buttons</p>
-    <div class="button-wrap">
-      <button class="button button-small mb-0" tabindex="1">Small</button>
+    <div class="form-group">
+      <button class="button mb-0 style-guide-control disable-on" tabindex="1">Disable</button>
+      <button class="button mb-0 style-guide-control disable-off" tabindex="1">Enable</button>
+      <button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button>
+      <button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</button>
     </div>
-    <div class="button-wrap">
-      <button class="button mb-0" tabindex="1">Medium</button>
-    </div>
-    <div class="button-wrap">
-      <button class="button button-large mb-0" tabindex="1">Large</button>
+    <div class="input-wrap">
+      <label for="radius" class="style-guide-control">Radius</label>
+      <input id="radius" class="style-guide-control radius" type="range" min="0" max="500" value="0" step="20" tabindex="-1">
+    </div>
+    <hr>
+    <div class="button-wrap">
+      <button class="button button-small mb-0" tabindex="1">Button Small</button>
+    </div>
+    <div class="button-wrap">
+      <button class="button mb-0" tabindex="1">Button Medium</button>
+    </div>
+    <div class="button-wrap">
+      <button class="button button-large mb-0" tabindex="1">Button Large</button>
+    </div>
+    <hr>
+    <div class="input-wrap input-button">
+      <input id="style-guide-input-button-1" type="checkbox" tabindex="1">
+      <label for="style-guide-input-button-1" class="mb-0">Checkbox Button</label>
+    </div>
+    <div class="input-wrap input-button input-hide">
+      <input id="style-guide-input-button-2" type="checkbox" tabindex="1">
+      <label for="style-guide-input-button-2" class="mb-0">Checkbox Hidden Button</label>
+    </div>
+    <div class="input-wrap input-button input-button-inline input-color-dot">
+      <input id="style-guide-input-button-3" type="color" tabindex="1">
+      <label for="style-guide-input-button-3">Input Colour Button</label>
     </div>
     <hr>
-    <p>Form</p>
     <div class="input-wrap">
       <input id="style-guide-checkbox" type="checkbox" tabindex="1">
       <label for="style-guide-checkbox">Checkbox</label>
@@ -70,34 +92,91 @@
       <input id="style-guide-radio-3" type="radio" name="style-guide-radio" tabindex="1">
       <label for="style-guide-radio-3">Radio 3</label>
     </div>
+    <div class="form-grid-wrap">
+      <div class="form-grid form-grid-3x3">
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-topleft" class="style-guide-form-grid-topleft" type="radio" name="style-guide-form-grid-3x3" value="topleft" tabindex="1" checked>
+          <label for="style-guide-form-grid-topleft"><span class="sr-only">Top left</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-topcenter" class="style-guide-form-grid-topcenter" type="radio" name="style-guide-form-grid-3x3" value="topcenter" tabindex="1">
+          <label for="style-guide-form-grid-topcenter"><span class="sr-only">Top center</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-topright" class="style-guide-form-grid-topright" type="radio" name="style-guide-form-grid-3x3" value="topright" tabindex="1">
+          <label for="style-guide-form-grid-topright"><span class="sr-only">Top right</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-centerleft" class="style-guide-form-grid-centerleft" type="radio" name="style-guide-form-grid-3x3" value="centerleft" tabindex="1">
+          <label for="style-guide-form-grid-centerleft"><span class="sr-only">Center left</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-centercenter" class="style-guide-form-grid-centercenter" type="radio" name="style-guide-form-grid-3x3" value="centercenter" tabindex="1">
+          <label for="style-guide-form-grid-centercenter"><span class="sr-only">Center center</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-centerright" class="style-guide-form-grid-centerright" type="radio" name="style-guide-form-grid-3x3" value="centerright" tabindex="1">
+          <label for="style-guide-form-grid-centerright"><span class="sr-only">Center right</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-bottomleft" class="style-guide-form-grid-bottomleft" type="radio" name="style-guide-form-grid-3x3" value="bottomleft" tabindex="1">
+          <label for="style-guide-form-grid-bottomleft"><span class="sr-only">Bottom left</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-bottomcenter" class="style-guide-form-grid-bottomcenter" type="radio" name="style-guide-form-grid-3x3" value="bottomcenter" tabindex="1">
+          <label for="style-guide-form-grid-bottomcenter"><span class="sr-only">Bottom Center</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-bottomright" class="style-guide-form-grid-bottomright" type="radio" name="style-guide-form-grid-3x3" value="bottomright" tabindex="1">
+          <label for="style-guide-form-grid-bottomright"><span class="sr-only">Bottom right</span></label>
+        </div>
+      </div>
+    </div>
+    <div class="form-grid-wrap">
+      <div class="form-grid form-grid-3x1">
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-left" class="style-guide-form-grid-left" type="radio" name="style-guide-form-grid-3x1" value="centerleft" tabindex="1" checked>
+          <label for="style-guide-form-grid-left"><span class="sr-only">Center left</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-center" class="style-guide-form-grid-center" type="radio" name="style-guide-form-grid-3x1" value="centercenter" tabindex="1">
+          <label for="style-guide-form-grid-center"><span class="sr-only">Center center</span></label>
+        </div>
+        <div class="input-wrap">
+          <input id="style-guide-form-grid-right" class="style-guide-form-grid-right" type="radio" name="style-guide-form-grid-3x1" value="centerright" tabindex="1">
+          <label for="style-guide-form-grid-right"><span class="sr-only">Center right</span></label>
+        </div>
+      </div>
+    </div>
+    <hr>
     <div class="input-wrap">
-      <label for="input-text">Input Text</label>
-      <input id="input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="placeholder" tabindex="1">
+      <label for="style-guide-input-text">Input Text</label>
+      <input id="style-guide-input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Placeholder" tabindex="1">
     </div>
     <div class="input-wrap">
-      <label for="textarea">Textarea</label>
-      <textarea id="textarea" class="textarea mb-0" spellcheck="false" placeholder="placeholder" tabindex="1"></textarea>
+      <label for="style-guide-textarea">Textarea</label>
+      <textarea id="style-guide-textarea" class="textarea mb-0" spellcheck="false" placeholder="Placeholder" tabindex="1"></textarea>
     </div>
     <div class="input-wrap">
-      <label for="input-range">Input Range</label>
-      <input id="input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
+      <label for="style-guide-input-range">Input Range</label>
+      <input id="style-guide-input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
     </div>
     <div class="input-wrap">
-      <label for="input-colour">Input Colour</label>
-      <input id="input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
+      <label for="style-guide-input-colour">Input Colour</label>
+      <input id="style-guide-input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
     </div>
     <div class="input-wrap">
-      <label for="select-1">Select</label>
-      <select id="select-1" class="mb-0" tabindex="1">
+      <label for="style-guide-select-1">Select</label>
+      <select id="style-guide-select-1" class="mb-0" tabindex="1">
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
       </select>
     </div>
     <div class="input-wrap">
-      <label for="form-group-1">Form Group</label>
-      <div class="form-group mb-0">
-        <input id="form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+      <label for="style-guide-form-group-1">Form Group</label>
+      <div class="form-group form-group-block mb-0">
+        <input id="style-guide-form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
         <input id="form-group-3" class="form-group-item-half mb-0" type="color" value="#000000" tabindex="1">
         <button class="button mb-0" tabindex="1">Button</button>
         <select id="select-2" class="mb-0" tabindex="1">
@@ -108,8 +187,80 @@
         <div class="form-group-text" tabindex="1">Form Group Text</div>
       </div>
     </div>
+    <div class="feedback-wrap">
+      <div class="form-feedback">
+        <p class="muted">Form feedback.</p>
+        <p class="muted small">With some small text.</p>
+      </div>
+    </div>
   </main>
 
+  <script src="js/helper.js"></script>
+  <script type="text/javascript">
+    var formElements = ["button", "input", "textarea", "select"];
+    var textElements = ["label", ".form-group-text", ".form-grid", ".form-feedback"];
+    var disable = {
+      on: function() {
+        formElements.forEach(function(arrayItem, index) {
+          helper.eA(arrayItem).forEach(function(arrayItem, index) {
+            if (!arrayItem.classList.contains("style-guide-control")) {
+              arrayItem.setAttribute("disabled", "");
+            };
+          });
+        });
+        textElements.forEach(function(arrayItem, index) {
+          helper.eA(arrayItem).forEach(function(arrayItem, index) {
+            if (!arrayItem.classList.contains("style-guide-control")) {
+              helper.addClass(arrayItem, "disabled");
+            };
+          });
+        });
+      },
+      off: function() {
+        formElements.forEach(function(arrayItem, index) {
+          helper.eA(arrayItem).forEach(function(arrayItem, index) {
+            if (!arrayItem.classList.contains("style-guide-control")) {
+              arrayItem.removeAttribute("disabled");
+            };
+          });
+        });
+        textElements.forEach(function(arrayItem, index) {
+          helper.eA(arrayItem).forEach(function(arrayItem, index) {
+            if (!arrayItem.classList.contains("style-guide-control")) {
+              helper.removeClass(arrayItem, "disabled");
+            };
+          });
+        });
+      }
+    };
+    var theme = {
+      dark: function() {
+        helper.removeClass(helper.e("html"), "is-theme-style-light");
+        helper.addClass(helper.e("html"), "is-theme-style-dark");
+      },
+      light: function() {
+        helper.addClass(helper.e("html"), "is-theme-style-light");
+        helper.removeClass(helper.e("html"), "is-theme-style-dark");
+      },
+    };
+    helper.e(".disable-on").addEventListener("click", function() {
+      disable.on();
+    }, false);
+    helper.e(".disable-off").addEventListener("click", function() {
+      disable.off();
+    }, false);
+    helper.e(".theme-dark").addEventListener("click", function() {
+      theme.dark();
+    }, false);
+    helper.e(".theme-light").addEventListener("click", function() {
+      theme.light();
+    }, false);
+    helper.e(".radius").addEventListener("input", function() {
+      var html = helper.e("html");
+      html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem");
+    }, false);
+  </script>
+
 </body>
 
 </html>