Declare & Use CSS Custom Properties

less/admin/AdminHeader.less

@@ -1,17 +1,17 @@
 .AdminHeader {
-  background: @control-bg;
+  background: var(--control-bg);
   margin-bottom: 20px;
   padding: 20px 0;
 
   h2 {
     margin-top: 0;
     margin-bottom: 10px;
-    color: @muted-color;
+    color: var(--muted-color);
   }
 
   &-description {
     margin: 0;
-    color: @control-color;
+    color: var(--control-color);
   }
 
   .icon {

less/admin/AdminNav.less

@@ -1,6 +1,6 @@
-@admin-pane-width: 250px;
-
 .App {
+  --admin-pane-width: 250px;
+
   padding-bottom: 0;
 }
 
@@ -72,12 +72,12 @@
 @media @desktop-up {
   .App-nav {
     position: absolute;
-    top: @header-height;
-    height: ~"calc(100vh - @{header-height})";
-    width: @admin-pane-width;
-    box-shadow: 0 6px 6px @shadow-color;
-    background: @body-bg;
-    z-index: @zindex-pane;
+    top: var(--header-height);
+    height: ~"calc(100vh - var(--header-height))";
+    width: var(--admin-pane-width);
+    box-shadow: 0 6px 6px var(--shadow-color);
+    background: var(--body-bg);
+    z-index: var(--zindex-pane);
     overflow-y: scroll;
     padding-bottom: 40px;
 
@@ -87,7 +87,7 @@
     }
   }
   .App-content .sideNavOffset {
-    margin-left: @admin-pane-width;
+    margin-left: var(--admin-pane-width);
   }
   .App-nav .AdminNav {
     .Dropdown-menu {
@@ -112,17 +112,17 @@
         > a,
         > a:hover,
         &.active > a {
-          color: @text-color;
+          color: var(--text-color);
         }
 
         > a:hover {
-          background: @control-bg;
+          background: var(--control-bg);
         }
 
         &.active > a {
-          background: @control-color;
+          background: var(--control-color);
           font-weight: normal;
-          color: @body-bg;
+          color: var(--body-bg);
 
           .Button-label,
           .Button-icon {
@@ -177,7 +177,7 @@
 }
 
 .ExtensionListTitle {
-  color: @muted-color;
+  color: var(--muted-color);
   text-transform: uppercase;
   margin: 25px 0 8px 15px;
 }
@@ -204,9 +204,9 @@
 }
 
 .ExtensionListItem-Dot.enabled {
-  background-color: #2ECC40;
+  background-color: var(--enabled-color);
 }
 .ExtensionListItem-Dot.disabled {
-  border: 2px solid #FF4136;
+  border: 2px solid var(--disabled-color);
   box-sizing: border-box;
 }

less/admin/DashboardPage.less

@@ -1,24 +1,24 @@
 .DashboardPage {
-  background: @body-bg;
-  color: @control-color;
+  background: var(--body-bg);
+  color: var(--control-color);
   min-height: 100vh;
   padding-bottom: 30px;
 }
 
 .Widget {
-  background: @control-bg;
-  color: @text-color;
-  border-radius: @border-radius;
+  background: var(--control-bg);
+  color: var(--text-color);
+  border-radius: var(--border-radius);
   padding: 20px;
   margin-bottom: 20px;
 
   .Button {
-    .Button--color(@control-color, @body-bg, 'button-alternate')
+    .Button--color-auto('button-inverted');
   }
 }
 
 .StatusWidget {
-  color: @muted-color;
+  color: var(--muted-color);
 
   >ul {
     margin: 0;

less/admin/ExtensionPage.less

@@ -23,22 +23,22 @@
 
       .Checkbox.off {
         .Checkbox-display {
-          background: @muted-more-color;
+          background: var(--muted-more-color);
         }
       }
     }
   }
 
   &-header,
   &-permissions-header {
-    background: @control-bg;
+    background: var(--control-bg);
 
     h2 {
-      color: @muted-color;
+      color: var(--muted-color);
 
       span {
         font-size: 13px;
-        color: @muted-color;
+        color: var(--muted-color);
         font-weight: normal;
       }
     }
@@ -56,12 +56,12 @@
 
       > li {
         display: inline;
-        color: @muted-color;
+        color: var(--muted-color);
         margin-left: 13px;
 
 
         > a {
-          color: @muted-color;
+          color: var(--muted-color);
         }
 
         > .icon {
@@ -107,7 +107,7 @@
   }
 
   &-subHeader {
-    color: @muted-color;
+    color: var(--muted-color);
     font-weight: normal;
   }
 
@@ -140,7 +140,7 @@
 
   .item-authors {
     a {
-      color: @muted-color;
+      color: var(--muted-color);
     }
   }
 }

less/admin/ExtensionWidget.less

@@ -1,17 +1,17 @@
 .ExtensionsWidget {
-  background-color: @body-bg;
+  background-color: var(--body-bg);
   padding: 0;
 }
 
 .ExtensionsWidget-list {
   padding: 0;
-  background-color: @body-bg;
+  background-color: var(--body-bg);
 
   .ExtensionGroup {
     margin-bottom: 20px;
 
     h3 {
-      color: @muted-color;
+      color: var(--muted-color);
       text-transform: uppercase;
       font-size: 12px;
       margin: 0 0 10px;
@@ -35,21 +35,21 @@
 }
 
 .ExtensionList-Category {
-  background: @control-bg;
+  background: var(--control-bg);
   padding: 20px 0 20px 20px;
   margin-bottom: 20px;
-  border-radius: @border-radius;
+  border-radius: var(--border-radius);
 }
 
 .ExtensionList-Label {
   margin-top: 0;
-  color: @muted-color;
+  color: var(--muted-color);
 }
 
 .ExtensionListItem.disabled {
   .ExtensionListItem-title {
     opacity: 0.5;
-    color: @muted-color;
+    color: var(--muted-color);
   }
 
   .ExtensionListItem-icon {
@@ -73,15 +73,15 @@
   display: block;
   text-align: center;
   margin-top: 5px;
-  color: @text-color;
+  color: var(--text-color);
 }
 
 .ExtensionIcon {
   --size: 90px;
   width: var(--size);
   height: var(--size);
-  background: @control-bg;
-  color: @control-color;
+  background: var(--control-bg);
+  color: var(--control-color);
   border-radius: 6px;
   display: inline-flex;
   font-size: calc(~"var(--size) / 2");

less/admin/PermissionsPage.less

@@ -1,6 +1,6 @@
 .PermissionsPage-groups {
-  background: @control-bg;
-  border-radius: @border-radius;
+  background: var(--control-bg);
+  border-radius: var(--border-radius);
   display: block;
   overflow-x: auto;
   padding: 10px;
@@ -9,7 +9,7 @@
   width: 90px;
   display: inline-block;
   text-align: center;
-  color: @text-color;
+  color: var(--text-color);
   font-weight: bold;
   padding-left: 10px;
   padding-right: 10px;
@@ -21,7 +21,7 @@
   text-overflow: ellipsis;
 }
 .Group--add {
-  color: @muted-color;
+  color: var(--muted-color);
   width: auto;
   margin-left: 10px;
   font-weight: normal;
@@ -47,7 +47,7 @@
     text-align: left;
   }
   td {
-    color: @muted-color;
+    color: var(--muted-color);
   }
   thead th {
     position: -webkit-sticky;
@@ -57,15 +57,15 @@
     text-transform: uppercase;
     font-weight: bold;
     font-size: 12px;
-    color: @muted-color;
-    background: @body-bg;
+    color: var(--muted-color);
+    background: var(--body-bg);
     min-width: 140px;
     z-index: 1;
 
     &:first-child {
       left: 0;
       z-index: 3;
-      background: @body-bg;
+      background: var(--body-bg);
     }
 
     &:not(:hover) .PermissionGrid-removeScope {
@@ -86,7 +86,7 @@
         font-size: 14px;
         width: 18px;
         text-align: center;
-        color: @muted-color;
+        color: var(--muted-color);
       }
     }
     .Dropdown {
@@ -132,14 +132,14 @@
   }
 }
 .PermissionGrid-section {
-  background: @body-bg;
+  background: var(--body-bg);
 
   td, th {
     padding-top: 10px;
   }
 }
 .PermissionGrid-child {
-  background: @body-bg;
+  background: var(--body-bg);
 
   td, th {
     position: relative;
@@ -149,6 +149,6 @@
   }
 
   &:hover {
-    background: lighten(@control-bg, 3%);
+    background: var(--control-bg-light);
   }
 }

less/admin/UsersListPage.less

@@ -5,7 +5,7 @@
   &-grid {
     width: 100%;
     position: relative;
-    border-radius: @border-radius;
+    border-radius: var(--border-radius);
 
     // Use CSS custom properties to define the number of columns in the grid
     grid-template-columns: repeat(var(--columns), max-content);
@@ -43,9 +43,9 @@
 
     &-header {
       font-weight: bold;
-      border-bottom: 1px solid @muted-more-color;
+      border-bottom: 1px solid var(--muted-more-color);
       padding: 8px 16px;
-      background: @control-bg;
+      background: var(--control-bg);
     }
 
     &-rowItem {
@@ -59,10 +59,10 @@
       }
 
       &--shaded {
-        background: darken(@body-bg, 3%);
+        background: var(--body-bg-shaded);
 
         & when (@config-dark-mode = true) {
-          background: lighten(@body-bg, 5%);
+          background: var(--body-bg-light);
         }
       }
     }