feat: Declare & Use CSS Custom Properties (#3146)

less/common/scaffolding.less

@@ -7,8 +7,8 @@
 }
 
 body {
-  background: @body-bg;
-  color: @text-color;
+  background: var(--body-bg);
+  color: var(--text-color);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.5;
@@ -30,7 +30,7 @@ textarea {
 
 a {
   cursor: pointer;
-  color: @link-color;
+  color: var(--link-color);
   text-decoration: none;
 
   &:hover {
@@ -42,7 +42,7 @@ hr {
   margin-top: 15px;
   margin-bottom: 15px;
   border: 0;
-  border-top: 2px solid @control-bg;
+  border-top: 2px solid var(--control-bg);
 }
 
 p {
@@ -75,7 +75,7 @@ p {
 mark {
   background: #FFE300;
   padding: 1px;
-  border-radius: @border-radius;
+  border-radius: var(--border-radius);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 }
 
@@ -92,7 +92,7 @@ legend {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 10px;
-  color: @text-color;
+  color: var(--text-color);
 }
 input[type="search"] {
   -webkit-appearance: none;
@@ -120,7 +120,7 @@ input[type="search"] {
   }
 }
 .darkenBackground {
-  background: @shadow-color;
+  background: var(--shadow-color);
 }
 
 blockquote p:last-child,
@@ -146,7 +146,7 @@ blockquote ol:last-child {
   text-align: center;
   padding: 50px 0;
   font-size: 18px;
-  color: @muted-more-color;
+  color: var(--muted-more-color);
 }
 
 .visually-hidden {