Extract more props into variables, fin?

war/src/main/less/abstracts/theme.less

@@ -257,6 +257,11 @@
   --form-label-font-weight: bold;
   --form-input-padding: 8px;
   --form-input-border-radius: 6px;
+  --form-input-glow: 0 0 0 10px transparent;
+  --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
+
+  // Animations
+  --standard-transition: 0.2s ease;
 
   // Pop out menus
   --menu-text-color: black;

war/src/main/less/modules/form.less

@@ -52,8 +52,8 @@
   padding: var(--form-input-padding);
   border-radius: var(--form-input-border-radius);
   width: 100%;
-  box-shadow: 0 0 0 10px transparent;
-  transition: 0.2s ease;
+  box-shadow: var(--form-input-glow);
+  transition: var(--standard-transition);
 
   &:hover {
     border-color: var(--input-border-hover);
@@ -63,7 +63,7 @@
   &:focus {
     outline: none;
     border-color: var(--focus-input-border);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 }
 
@@ -81,8 +81,8 @@
     margin: 0;
     padding: 0 4px 0 29px;
     line-height: 30px;
-    box-shadow: 0 0 0 10px transparent;
-    transition: 0.2s ease;
+    box-shadow: var(--form-input-glow);
+    transition: var(--standard-transition);
 
     // Safari adds unwanted padding - let's remove it
     &::-webkit-search-decoration {
@@ -102,7 +102,7 @@
     &:focus {
       outline: none;
       border-color: var(--focus-input-border);
-      box-shadow: 0 0 0 5px var(--focus-input-glow);
+      box-shadow: var(--form-input-glow--focus);
     }
   }
 
@@ -113,7 +113,7 @@
     width: 16px;
     height: 16px;
     fill: var(--input-border-hover);
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &::before {
@@ -127,7 +127,7 @@
     border: 2px solid currentColor;
     border-radius: 100%;
     opacity: 0;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &::after {
@@ -143,7 +143,7 @@
     animation: loading-spinner 0.5s infinite linear;
     clip-path: inset(0 0 8px 8px);
     opacity: 0;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &--loading {
@@ -217,9 +217,9 @@
       border: 2px solid var(--input-border);
       border-radius: 50%;
       background: transparent;
-      box-shadow: 0 0 0 10px transparent;
+      box-shadow: var(--form-input-glow);
 
-      transition: 0.2s ease;
+      transition: var(--standard-transition);
     }
 
     &:hover::before {
@@ -231,7 +231,7 @@
   &__input:focus + &__label:before, &__input:active + &__label:before {
     border-width: 8px;
     border-color: var(--focus-input-border);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 
   &__input:checked + &__label:before {
@@ -250,7 +250,7 @@
     margin-top: 0;
     opacity: 0;
     padding-left: 32px;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
     visibility: hidden;
     max-height: 0;
 
@@ -263,7 +263,7 @@
       width: 2px;
       background: var(--input-border);
       border-radius: 2px;
-      transition: 0.2s ease;
+      transition: var(--standard-transition);
     }
 
     &:focus-within {
@@ -293,11 +293,11 @@
   border-radius: 10px;
   cursor: pointer;
   text-shadow: 0 1px 0 var(--background-color);
-  box-shadow: 0 0 0 10px transparent;
+  box-shadow: var(--form-input-glow);
   text-decoration: none;
   outline: none;
   font-weight: 500;
-  transition: 0.2s ease;
+  transition: var(--standard-transition);
   border: 2px solid var(--btn-secondary-border);
 
   &::after {
@@ -321,7 +321,7 @@
   &:active {
     background: var(--btn-secondary-bg--focus);
     color: var(--btn-secondary-color--focus);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 
   &--large {
@@ -378,7 +378,7 @@
     background: var(--text-color);
     opacity: 0.1;
     border-radius: inherit;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &::after {
@@ -388,10 +388,10 @@
     left: 0;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 10px transparent;
+    box-shadow: var(--form-input-glow);
     border-radius: inherit;
     opacity: 0.1;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &:hover {