refactor(admin-ui): Replace sass color vars with css custom properties

Relates to #391

packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.scss

@@ -12,7 +12,7 @@ vdr-asset-gallery {
 
 .paging-controls {
     padding-top: 6px;
-    border-top: 1px solid $color-grey-200;
+    border-top: 1px solid var(--color-grey-200);
     display: flex;
     justify-content: space-between;
 }

packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.scss

@@ -1,12 +1,12 @@
 @import "variables";
 
 .contents-header {
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
     position: sticky;
     top: 0;
     padding: 6px;
     z-index: 1;
-    border-bottom: 1px solid $color-grey-300;
+    border-bottom: 1px solid var(--color-grey-300);
 
     .header-title-row {
         display: flex;

packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.scss

@@ -48,7 +48,7 @@
 
 .paging-controls {
     padding-top: 6px;
-    border-top: 1px solid $color-grey-200;
+    border-top: 1px solid var(--color-grey-200);
     display: flex;
     justify-content: space-between;
 }

packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.scss

@@ -13,7 +13,7 @@
     transition: border-left-color 0.2s;
 
     &.private {
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 
     .collection-detail {
@@ -21,10 +21,10 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid $color-grey-200;
+        border-bottom: 1px solid var(--color-grey-200);
 
         &.active {
-            background-color: $color-grey-200;
+            background-color: var(--color-grey-200);
         }
 
         &.depth-1 { padding-left: 12px + 24px; }
@@ -45,14 +45,14 @@
     overflow: hidden;
     &.cdk-drop-list-dragging {
         > .collection {
-            border-left-color: $color-primary-300;
+            border-left-color: var(--color-primary-300);
         }
     }
 }
 
 .drag-placeholder {
     min-height: 120px;
-    background-color: $color-grey-300;
+    background-color: var(--color-grey-300);
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.scss

@@ -2,6 +2,6 @@
 
 td {
     &.private {
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 }

packages/admin-ui/src/lib/catalog/src/components/generate-product-variants/generate-product-variants.component.scss

@@ -21,8 +21,8 @@
 .variants-preview {
     tr.disabled {
         td {
-            background-color: $color-grey-100;
-            color: $color-grey-400;
+            background-color: var(--color-grey-100);
+            color: var(--color-grey-400);
         }
     }
 }

packages/admin-ui/src/lib/catalog/src/components/option-value-input/option-value-input.component.scss

@@ -3,12 +3,12 @@
 .input-wrapper {
     background-color: white;
     border-radius: 3px !important;
-    border: 1px solid $color-grey-300 !important;
+    border: 1px solid var(--color-grey-300) !important;
     cursor: text;
 
     &.focus {
-        border-color: $color-primary-500 !important;
-        box-shadow: 0 0 1px 1px $color-primary-100;
+        border-color: var(--color-primary-500) !important;
+        box-shadow: 0 0 1px 1px var(--color-primary-100);
     }
 
     .chips {
@@ -25,7 +25,7 @@
             outline: none;
         }
         &:disabled {
-            background-color: $color-grey-100;
+            background-color: var(--color-grey-100);
         }
     }
 }
@@ -39,8 +39,8 @@ vdr-chip {
     }
     &.selected {
         ::ng-deep .wrapper {
-            border-color: $color-warning-500 !important;
-            box-shadow: 0 0 1px 1px $color-warning-400;
+            border-color: var(--color-warning-500) !important;
+            box-shadow: 0 0 1px 1px var(--color-warning-400);
             opacity: 0.6;
         }
     }

packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.scss

@@ -10,12 +10,12 @@
 
 .placeholder {
     text-align: center;
-    color: $color-grey-300;
+    color: var(--color-grey-300);
 }
 
 .featured-asset {
     text-align: center;
-    background: $color-grey-200;
+    background: var(--color-grey-200);
     padding: 6px;
     cursor: pointer;
 
@@ -42,16 +42,16 @@
     .asset-thumb {
         margin: 3px;
         padding: 0;
-        border: 2px solid $color-grey-200;
+        border: 2px solid var(--color-grey-200);
         cursor: pointer;
 
         &.featured {
-            border-color: $color-primary-500;
+            border-color: var(--color-primary-500);
         }
     }
 
     .remove-asset {
-        color: $color-warning-500;
+        color: var(--color-warning-500);
     }
 
     &.compact {
@@ -67,7 +67,7 @@
     align-items: center;
     justify-content: center;
     width: 50px;
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
     opacity: 0.9;
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 10px 1px rgba(0, 0, 0, 0.14),
@@ -79,7 +79,7 @@
     width: 60px;
     height: 50px;
     .asset-thumb {
-        background-color: $color-grey-300;
+        background-color: var(--color-grey-300);
         height: 100%;
         width: 54px;
     }

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.scss

@@ -21,7 +21,7 @@ vdr-action-bar clr-toggle-wrapper {
         border-radius: 3px 0 0 3px !important;
     }
     .icon-button {
-        border: 1px solid $color-grey-300;
+        border: 1px solid var(--color-grey-300);
         border-radius: 0 3px 3px 0;
         border-left: none;
     }

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.scss

@@ -3,10 +3,10 @@
 .image-placeholder {
     width: 50px;
     height: 50px;
-    background-color: $color-grey-200;
+    background-color: var(--color-grey-200);
     .placeholder {
         text-align: center;
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 }
 .search-form {
@@ -25,5 +25,5 @@
     margin: 0 12px;
 }
 td.disabled {
-    background-color: $color-grey-200;
+    background-color: var(--color-grey-200);
 }

packages/admin-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.scss

@@ -19,10 +19,10 @@ ng-select {
 
 .search-header {
     padding: 8px 10px;
-    border-bottom: 1px solid $color-grey-200;
+    border-bottom: 1px solid var(--color-grey-200);
     cursor: pointer;
 
     &.selected, &:hover {
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 }

packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.scss

@@ -15,8 +15,8 @@
 .variants-preview {
     tr.disabled {
         td {
-            background-color: $color-grey-100;
-            color: $color-grey-400;
+            background-color: var(--color-grey-100);
+            color: var(--color-grey-400);
         }
     }
 }

packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.scss

@@ -4,7 +4,7 @@
     display: flex;
     min-height: 52px;
     align-items: center;
-    border: 1px solid $color-grey-200;
+    border: 1px solid var(--color-grey-200);
     border-radius: 3px;
     padding: 6px 18px;
 
@@ -21,7 +21,7 @@
     transition: background-color 0.2s;
     min-height: 330px;
     &.disabled {
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
     .header-row {
         display: flex;
@@ -118,7 +118,7 @@
     }
 
     .option-group-name {
-        color: $color-grey-400;
+        color: var(--color-grey-400);
         text-transform: uppercase;
         font-size: 10px;
         margin-right: 3px;
@@ -127,7 +127,7 @@
 
     .options-facets {
         display: flex;
-        color: $color-grey-400;
+        color: var(--color-grey-400);
     }
 }
 

packages/admin-ui/src/lib/catalog/src/components/product-variants-table/product-variants-table.component.scss

@@ -1,7 +1,7 @@
 @import "variables";
 
 .placeholder {
-    color: $color-grey-300;
+    color: var(--color-grey-300);
 }
 
 .stock, .price {
@@ -13,6 +13,6 @@
 td {
     transition: background-color 0.2s;
     &.disabled {
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 }

packages/admin-ui/src/lib/core/src/app.component.scss

@@ -3,7 +3,7 @@
     position: absolute;
     overflow: hidden;
     height: 4px;
-    background-color: $color-grey-500;
+    background-color: var(--color-grey-500);
     opacity: 0;
     transition: opacity 0.1s;
     &.visible {

packages/admin-ui/src/lib/core/src/components/channel-switcher/channel-switcher.component.scss

@@ -8,7 +8,7 @@
 }
 
 .active-channel {
-    color: $color-grey-200;
+    color: var(--color-grey-200);
 
     clr-icon {
         color: white;

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss

@@ -3,7 +3,7 @@
 :host {
     // flex: 0 0 auto;
     order: -1;
-    background-color: $color-grey-200;
+    background-color: var(--color-grey-200);
 }
 
 nav.sidenav {
@@ -25,19 +25,19 @@ nav.sidenav {
     height: 10px;
     position: absolute;
     border-radius: 50%;
-    border: 1px solid $color-grey-200;
+    border: 1px solid var(--color-grey-200);
 
     &.info {
-        background-color: $color-primary-600;
+        background-color: var(--color-primary-600);
     }
     &.success {
-        background-color: $color-success-500;
+        background-color: var(--color-success-500);
     }
     &.warning {
-        background-color: $color-warning-500;
+        background-color: var(--color-warning-500);
     }
     &.error {
-        background-color: $color-error-400;
+        background-color: var(--color-error-400);
     }
 }
 

packages/admin-ui/src/lib/core/src/components/notification/notification.component.scss

@@ -19,22 +19,22 @@
         max-width: 98vw;
         word-wrap: break-word;
         padding: 10px;
-        background-color: $color-grey-500;
+        background-color: var(--color-grey-500);
         color: white;
         transition: opacity 1s, top 0.3s;
         opacity: 0;
 
         &.success {
-            background-color: $color-success-500;
+            background-color: var(--color-success-500);
         }
         &.error {
-            background-color: $color-error-500;
+            background-color: var(--color-error-500);
         }
         &.warning {
-            background-color: $color-warning-500;
+            background-color: var(--color-warning-500);
         }
         &.info {
-            background-color: $color-secondary-500;
+            background-color: var(--color-secondary-500);
         }
 
         &.visible {

packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss

@@ -8,7 +8,7 @@
 }
 
 .user-name {
-    color: $color-grey-200;
+    color: var(--color-grey-200);
     margin-right: 12px;
     @media screen and (max-width: $breakpoint-small) {
         display: none;

packages/admin-ui/src/lib/core/src/shared/components/action-bar/action-bar.component.scss

@@ -4,11 +4,11 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
     position: sticky;
     top: -24px;
     z-index: 25;
-    border-bottom: 1px solid $color-grey-300;
+    border-bottom: 1px solid var(--color-grey-300);
 
     > .grow {
         flex: 1;

packages/admin-ui/src/lib/core/src/shared/components/affixed-input/affixed-input.component.scss

@@ -7,8 +7,8 @@
 .affix {
     display: flex;
     align-items: center;
-    background-color: $color-grey-200;
-    border: 1px solid $color-grey-300;
+    background-color: var(--color-grey-200);
+    border: 1px solid var(--color-grey-300);
     top: 1px;
     padding: 3px;
     line-height: .58333rem;

packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.scss

@@ -6,8 +6,8 @@
 
 .drop-zone {
     position: fixed;
-    background-color: transparentize($color-primary-500, 0.7);
-    border: 3px dashed $color-grey-400;
+    background-color: var(--color-primary-500);
+    border: 3px dashed var(--color-grey-400);
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
@@ -17,7 +17,7 @@
     justify-content: center;
 
     &.visible {
-        opacity: 1;
+        opacity: 0.3;
         visibility: visible;
         transition: opacity 0.2s, background-color 0.2s, border 0.2s, visibility 0s;
     }
@@ -28,13 +28,14 @@
         padding: 24px;
         font-size: 32px;
         pointer-events: none;
-        opacity: 0.2;
+        opacity: 0.5;
         transition: opacity 0.2s;
     }
 
     &.dragging-over {
         border-color: white;
-        background-color: transparentize($color-primary-500, 0.3);
+        background-color: var(--color-primary-500);
+        opacity: 0.7;
         transition: background-color 0.2s, border 0.2s;
         .drop-label {
             opacity: 1;

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.scss

@@ -18,8 +18,8 @@
     padding-bottom: 12px;
 
     .card:hover {
-        box-shadow: 0 0.125rem 0 0 $color-primary-500;
-        border: 1px solid $color-primary-500;
+        box-shadow: 0 0.125rem 0 0 var(--color-primary-500);
+        border: 1px solid var(--color-primary-500);
     }
 }
 
@@ -31,7 +31,7 @@
 .selected-checkbox {
     opacity: 0;
     position: absolute;
-    color: $color-success-500;
+    color: var(--color-success-500);
     background-color: white;
     border-radius: 50%;
     top: -12px;
@@ -41,8 +41,8 @@
 }
 
 .card.selected {
-    box-shadow: 0 0.125rem 0 0 $color-primary-500;
-    border: 1px solid $color-primary-500;
+    box-shadow: 0 0.125rem 0 0 var(--color-primary-500);
+    border: 1px solid var(--color-primary-500);
 
     .selected-checkbox {
         opacity: 1;
@@ -80,7 +80,7 @@
         &.visible {
             opacity: 1;
             transform: perspective(500px) translateZ(-44px) translateY(0px);
-            background-color: $color-grey-100;
+            background-color: var(--color-grey-100);
             transition: transform 0.3s, color 0.3s;
         }
     }
@@ -108,7 +108,7 @@
 
     .placeholder {
         text-align: center;
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 
     .preview {

packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.scss

@@ -18,7 +18,7 @@ vdr-asset-gallery {
 
 .paging-controls {
     padding-top: 6px;
-    border-top: 1px solid $color-grey-200;
+    border-top: 1px solid var(--color-grey-200);
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;

packages/admin-ui/src/lib/core/src/shared/components/chip/chip.component.scss

@@ -6,35 +6,38 @@
 
 .wrapper {
     display: flex;
-    border: 1px solid $color-grey-400;
+    border: 1px solid var(--color-grey-400);
     border-radius: 3px;
     margin: 6px;
     &.with-background {
-        color: transparentize($color-grey-100, 0.2);
+        color: var(--color-grey-100);
         border-color: transparent;
+        .chip-label {
+            opacity: 0.9;
+        }
     }
 
     &.warning {
-        border-color: $color-warning-200;
+        border-color: var(--color-warning-200);
         .chip-label {
-            color: $color-warning-600;
-            background-color: $color-warning-100;
+            color: var(--color-warning-600);
+            background-color: var(--color-warning-100);
         }
     }
 
     &.success {
-        border-color: $color-success-200;
+        border-color: var(--color-success-200);
         .chip-label {
-            color: $color-success-600;
-            background-color: $color-success-100;
+            color: var(--color-success-600);
+            background-color: var(--color-success-100);
         }
     }
 
     &.error {
-        border-color: $color-error-200;
+        border-color: var(--color-error-200);
         .chip-label {
-            color: $color-error-600;
-            background-color: $color-error-100;
+            color: var(--color-error-600);
+            background-color: var(--color-error-100);
         }
     }
 
@@ -50,7 +53,7 @@
 }
 
 .chip-icon {
-    border-left: 1px solid transparentize($color-grey-100, 0.5);
+    border-left: 1px solid var(--color-grey-300);
     padding: 0 3px;
     line-height: 1em;
     display: flex;

packages/admin-ui/src/lib/core/src/shared/components/datetime-picker/datetime-picker.component.scss

@@ -21,9 +21,9 @@ input.selected-datetime {
     margin: 0;
     border-radius: 0;
     border-left: none;
-    border-color: $color-grey-300;
+    border-color: var(--color-grey-300);
     background-color: white;
-    color: $color-grey-500;
+    color: var(--color-grey-500);
     display: none;
     &.visible {
         display: block;
@@ -42,8 +42,8 @@ input.selected-datetime {
 table.calendar-table {
     padding: 6px;
     &:focus {
-        outline: 1px solid $color-primary-500;
-        box-shadow: 0 0 1px 2px $color-primary-100;
+        outline: 1px solid var(--color-primary-500);
+        box-shadow: 0 0 1px 2px var(--color-primary-100);
     }
     td {
         width: 24px;
@@ -52,31 +52,31 @@ table.calendar-table {
         user-select: none;
     }
     .day-cell {
-        background-color: $color-grey-200;
-        color: $color-grey-500;
+        background-color: var(--color-grey-200);
+        color: var(--color-grey-500);
 
         cursor: pointer;
         transition: background-color 0.1s;
         &.current-month {
             background-color: white;
-            color: $color-grey-800;
+            color: var(--color-grey-800);
         }
         &.selected {
-            background-color: $color-primary-500;
+            background-color: var(--color-primary-500);
             color: white;
         }
         &.viewing:not(.selected) {
-            background-color: $color-primary-200;
+            background-color: var(--color-primary-200);
         }
         &.today {
-            border: 1px solid $color-grey-400;
+            border: 1px solid var(--color-grey-400);
         }
         &:hover:not(.selected):not(.disabled) {
-            background-color: $color-primary-100;
+            background-color: var(--color-primary-100);
         }
         &.disabled {
             cursor: default;
-            color: $color-grey-300;
+            color: var(--color-grey-300);
         }
     }
 }

packages/admin-ui/src/lib/core/src/shared/components/edit-note-dialog/edit-note-dialog.component.scss

@@ -5,10 +5,10 @@
     justify-content: space-between;
     align-items: baseline;
     .public {
-        color: $color-warning-500;
+        color: var(--color-warning-500);
     }
     .private {
-        color: $color-success-500;
+        color: var(--color-success-500);
     }
 }
 textarea.note {

packages/admin-ui/src/lib/core/src/shared/components/empty-placeholder/empty-placeholder.component.scss

@@ -3,7 +3,7 @@
 .empty-state {
     text-align: center;
     padding: 60px;
-    color: $color-grey-400;
+    color: var(--color-grey-400);
     width: 100%;
 
     .empty-label {

packages/admin-ui/src/lib/core/src/shared/components/entity-info/entity-info.component.scss

@@ -1,7 +1,7 @@
 @import "variables";
 
 .info-button {
-    color: $color-grey-500;
+    color: var(--color-grey-500);
 }
 .entity-info {
     margin: 0 12px;

packages/admin-ui/src/lib/core/src/shared/components/extension-host/extension-host.component.scss

@@ -27,7 +27,7 @@ iframe {
     transition: background-color 0.3s;
     text-align: center;
     &.launched {
-        background-color: $color-grey-300;
+        background-color: var(--color-grey-300);
     }
 }
 

packages/admin-ui/src/lib/core/src/shared/components/focal-point-control/focal-point-control.component.scss

@@ -38,7 +38,7 @@
         border-color: white;
     }
     50% {
-        border-color: $color-warning-500;
+        border-color: var(--color-warning-500);
     }
     100% {
         border-color: white

packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss

@@ -34,7 +34,7 @@
         ::ng-deep input {
             flex: 1;
             &[disabled] {
-                background-color: $color-grey-200;
+                background-color: var(--color-grey-200);
             }
         }
         button.edit-button {

packages/admin-ui/src/lib/core/src/shared/components/labeled-data/labeled-data.component.scss

@@ -6,7 +6,7 @@
 }
 .label-title {
     font-size: 12px;
-    color: $color-grey-400;
+    color: var(--color-grey-400);
     line-height: 12px;
     margin-bottom: -4px;
 }

packages/admin-ui/src/lib/core/src/shared/components/language-selector/language-selector.component.scss

@@ -1,4 +1,4 @@
 @import "variables";
 .code {
-    color: $color-grey-400;
+    color: var(--color-grey-400);
 }

packages/admin-ui/src/lib/core/src/shared/components/object-tree/object-tree.component.scss

@@ -36,6 +36,6 @@
 }
 
 .key {
-    color: $color-grey-400;
+    color: var(--color-grey-400);
 }
 

packages/admin-ui/src/lib/core/src/shared/components/pagination-controls/pagination-controls.component.scss

@@ -13,7 +13,7 @@ pagination-template {
     li > a {
         cursor: pointer;
         &:hover, &:focus {
-            border-bottom-color: $color-grey-300;
+            border-bottom-color: var(--color-grey-300);
             text-decoration: none;
         }
     }
@@ -24,6 +24,6 @@ pagination-template {
         user-select: none;
     }
     li > div.current {
-        border-bottom-color: $color-primary-500;
+        border-bottom-color: var(--color-primary-500);
     }
 }

packages/admin-ui/src/lib/core/src/shared/components/product-selector/product-selector.component.scss

@@ -6,5 +6,5 @@
 
 .sku {
     margin-left: 12px;
-    color: $color-grey-500;
+    color: var(--color-grey-500);
 }

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/external-image-dialog/external-image-dialog.component.scss

@@ -14,6 +14,6 @@
         }
     }
     .placeholder {
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 }

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.scss

@@ -17,23 +17,23 @@
     position: sticky;
     top: 24px;
     margin-top: 6px;
-    border: 1px solid $color-grey-300;
+    border: 1px solid var(--color-grey-300);
     border-bottom: none;
-    background-color: $color-grey-200;
+    background-color: var(--color-grey-200);
     padding: 6px 12px;
 }
 
 ::ng-deep .vdr-prosemirror {
     background-color: white;
     min-height: 128px;
-    border: 1px solid $color-grey-300;
+    border: 1px solid var(--color-grey-300);
     border-radius: 0 0 3px 3px;
     transition: border-color 0.2s;
     overflow: auto;
 
     &:focus {
-        border-color: $color-primary-500 !important;
-        box-shadow: 0 0 1px 1px $color-primary-100;
+        border-color: var(--color-primary-500) !important;
+        box-shadow: 0 0 1px 1px var(--color-primary-100);
     }
 
     /* Add space around the hr to make clicking it easier */

packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss

@@ -10,8 +10,8 @@
 .toggle {
     @include no-select();
     cursor: pointer;
-    background-color: $color-grey-100;
-    border: 2px solid $color-grey-400;
+    background-color: var(--color-grey-100);
+    border: 2px solid var(--color-grey-400);
     padding: 0 6px;
     border-radius: 50%;
     width: 32px;
@@ -19,7 +19,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: $color-grey-300;
+    color: var(--color-grey-300);
     transition: background-color 0.2s, border 0.2s;
 
     &.small {
@@ -28,18 +28,20 @@
     }
 
     &:not(.disabled):hover {
-        border-color: $color-success-500;
-        background-color: transparentize($color-success-500, 0.9);
+        border-color: var(--color-success-500);
+        background-color: var(--color-success-400);
+        opacity: 0.9;
     }
 
     &.selected {
-        background-color: $color-success-500;
-        border-color: darken($color-success-500, 5%);
+        background-color: var(--color-success-500);
+        border-color: var(--color-success-600);
         color: white;
 
         &:not(.disabled):hover {
-            background-color: transparentize($color-success-500, 0.2);
-            border-color: $color-success-500;
+            background-color: var(--color-success-500);
+            border-color: var(--color-success-400);
+            opacity: 0.9;
         }
     }
 

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss

@@ -6,7 +6,7 @@
     &:first-of-type {
         .timeline {
             &:before {
-                border-left-color: $color-grey-100;
+                border-left-color: var(--color-grey-100);
             }
         }
         .entry-body {
@@ -18,7 +18,7 @@
     display: flex;
 }
 .timeline {
-    border-left: 2px solid $color-primary-100;
+    border-left: 2px solid var(--color-primary-100);
     padding-bottom: 8px;
     position: relative;
 
@@ -28,7 +28,7 @@
         width: 2px;
         height: 32px;
         left: -2px;
-        border-left: 2px solid $color-primary-100;
+        border-left: 2px solid var(--color-primary-100);
     }
     &:after {
         content: '';
@@ -36,8 +36,8 @@
         border-radius: 50%;
         width: 8px;
         height: 8px;
-        background-color: $color-grey-200;
-        border: 1px solid $color-grey-400;
+        background-color: var(--color-grey-200);
+        border: 1px solid var(--color-grey-400);
         position: absolute;
         left: -5px;
         top: 32px;
@@ -54,9 +54,9 @@
         align-items: center;
         justify-content: center;
         border-radius: 50%;
-        color: $color-primary-600;
-        background-color: $color-grey-100;
-        border: 1px solid $color-grey-300;
+        color: var(--color-primary-600);
+        background-color: var(--color-grey-100);
+        border: 1px solid var(--color-grey-300);
         display: none;
     }
 }
@@ -80,7 +80,7 @@
     padding-left: 12px;
     line-height: 16px;
     margin-left: 12px;
-    color: $color-grey-500;
+    color: var(--color-grey-500);
     overflow: visible;
     max-height: 100px;
     transition: max-height 0.2s, padding-top 0.2s, opacity 0.2s 0.2s;
@@ -88,19 +88,19 @@
 
 .featured-entry ::ng-deep {
     .title {
-        color: $color-grey-800;
+        color: var(--color-grey-800);
         font-size: 16px;
         line-height: 26px;
     }
     .note-text {
-        color: $color-grey-800;
+        color: var(--color-grey-800);
         white-space: pre-wrap;
     }
 }
 
 .detail {
     display: flex;
-    color: $color-grey-400;
+    color: var(--color-grey-400);
     font-size: 12px;
     .time {
     }
@@ -112,37 +112,37 @@
 
 .muted {
     .timeline, .timeline .custom-icon {
-        color: $color-grey-400;
+        color: var(--color-grey-400);
     }
 }
 
 .success {
     .timeline, .timeline .custom-icon {
-        color: $color-success-400;
+        color: var(--color-success-400);
     }
     .timeline:after {
-        background-color: $color-success-200;
-        border: 1px solid $color-success-400;
+        background-color: var(--color-success-200);
+        border: 1px solid var(--color-success-400);
     }
 }
 
 .error {
     .timeline, .timeline .custom-icon {
-        color: $color-error-400;
+        color: var(--color-error-400);
     }
     .timeline:after {
-        background-color: $color-error-200;
-        border: 1px solid $color-error-400;
+        background-color: var(--color-error-200);
+        border: 1px solid var(--color-error-400);
     }
 }
 
 .warning {
     .timeline, .timeline .custom-icon {
-        color: $color-warning-400;
+        color: var(--color-warning-400);
     }
     .timeline:after {
-        background-color: $color-warning-200;
-        border: 1px solid $color-warning-400;
+        background-color: var(--color-warning-200);
+        border: 1px solid var(--color-warning-400);
     }
 }
 

packages/admin-ui/src/lib/core/src/shared/components/title-input/title-input.component.scss

@@ -6,7 +6,7 @@
 
     ::ng-deep input {
         font-size: 18px;
-        color: $color-grey-700;
+        color: var(--color-grey-700);
         max-width: 100%;
         &:not(:focus) {
             border-color: transparent !important;
@@ -26,14 +26,14 @@
         position: absolute;
         right: 8px;
         top: 6px;
-        color: $color-grey-300;
+        color: var(--color-grey-300);
         opacity: 0;
         transition: opacity 0.2s;
     }
 
     &:hover {
         ::ng-deep input:not(:focus) {
-            background-color: $color-grey-200 !important;
+            background-color: var(--color-grey-200) !important;
         }
         .edit-icon {
             opacity: 1;
@@ -46,7 +46,7 @@
         }
         &:hover {
             ::ng-deep input:not(:focus) {
-                background-color: $color-grey-200 !important;
+                background-color: var(--color-grey-200) !important;
             }
         }
     }

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 .list-container {
-    border: 1px solid $color-grey-300;
+    border: 1px solid var(--color-grey-300);
     border-radius: 3px;
     padding: 12px;
 }
@@ -19,7 +19,7 @@
 
 .cdk-drag-preview {
     font-size: 13px;
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
     opacity: 0.8;
     border-radius: 4px;
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component.scss

@@ -6,14 +6,14 @@
     align-items: center;
     transition: background-color 0.2s;
     &:hover {
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 }
 .thumb {
     margin-right: 6px;
 }
 .sku {
-    color: $color-grey-400;
+    color: var(--color-grey-400);
     font-size: smaller;
     line-height: 1em;
 }

packages/admin-ui/src/lib/customer/src/components/address-card/address-card.component.scss

@@ -15,5 +15,5 @@ clr-input-container {
 
 .is-default {
     margin: 0;
-    color: $color-success-500;
+    color: var(--color-success-500);
 }

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.scss

@@ -2,5 +2,5 @@
 
 .last-login {
     margin-left: 6px;
-    color: $color-grey-500;
+    color: var(--color-grey-500);
 }

packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.scss

@@ -10,7 +10,7 @@
         margin-top: 0;
 
         tr.active {
-            background-color: $color-grey-200;
+            background-color: var(--color-grey-200);
         }
         &.expanded {
             // Fix for Firefox layout https://github.com/vendure-ecommerce/vendure/issues/531

packages/admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.scss

@@ -24,11 +24,11 @@ textarea.note {
     margin-right: 6px;
 }
 .note-text {
-    color: $color-grey-800;
+    color: var(--color-grey-800);
     white-space: pre-wrap;
 }
 
 .address-string {
     font-size: smaller;
-    color: $color-grey-500;
+    color: var(--color-grey-500);
 }

packages/admin-ui/src/lib/customer/src/components/customer-status-label/customer-status-label.component.scss

@@ -1,8 +1,8 @@
 @import "variables";
 
 .registered-user-icon {
-    color: $color-grey-300;
+    color: var(--color-grey-300);
 }
 .verified-user-icon {
-    color: $color-success-500;
+    color: var(--color-success-500);
 }

packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.scss

@@ -6,7 +6,7 @@
 }
 
 .placeholder {
-    color: $color-grey-300;
+    color: var(--color-grey-300);
     text-align: center;
     .version {
         font-size: 3em;
@@ -14,7 +14,7 @@
         line-height: 1em;
     }
     ::ng-deep .clr-i-outline {
-        fill: $color-grey-200;
+        fill: var(--color-grey-200);
     }
 }
 
@@ -43,7 +43,7 @@ vdr-dashboard-widget {
 }
 
 .dashboard-row.cdk-drop-list-dragging, .dashboard-row.cdk-drop-list-receiving  {
-    border: 1px dashed $color-grey-300;
+    border: 1px dashed var(--color-grey-300);
     padding: 6px;
 }
 .dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder) {

packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.scss

@@ -12,7 +12,7 @@
     line-height: 3rem;
 }
 .stat-label {
-    color: $color-grey-700;
+    color: var(--color-grey-700);
     text-transform: uppercase;
 }
 .date-range {

packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.scss

@@ -5,5 +5,5 @@
     justify-content: space-between;
 }
 .placeholder {
-    color: $color-grey-200;
+    color: var(--color-grey-200);
 }

packages/admin-ui/src/lib/login/src/components/login/login.component.scss

@@ -16,7 +16,7 @@
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    color: $color-grey-300;
+    color: var(--color-grey-300);
 
     span + span {
         margin-left: 5px;

packages/admin-ui/src/lib/order/src/components/cancel-order-dialog/cancel-order-dialog.component.scss

@@ -27,10 +27,10 @@
         }
     }
     tr.ignore {
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
     .is-cancelled td {
         text-decoration: line-through;
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 }

packages/admin-ui/src/lib/order/src/components/fulfill-order-dialog/fulfill-order-dialog.component.scss

@@ -31,6 +31,6 @@
         }
     }
     tr.ignore {
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 }

packages/admin-ui/src/lib/order/src/components/line-fulfillment/line-fulfillment.component.scss

@@ -1,18 +1,18 @@
 @import "variables";
 
 .item-fulfilled {
-    color: $color-success-500;
+    color: var(--color-success-500);
 }
 .item-partially-fulfilled {
-    color: $color-warning-500;
+    color: var(--color-warning-500);
 }
 .item-not-fulfilled {
-    color: $color-error-500;
+    color: var(--color-error-500);
 }
 
 .fulfillment-detail {
     margin: 6px 12px;
     &:not(:last-of-type) {
-        border-bottom: 1px dashed $color-grey-300;
+        border-bottom: 1px dashed var(--color-grey-300);
     }
 }

packages/admin-ui/src/lib/order/src/components/line-refunds/line-refunds.component.scss

@@ -1,5 +1,5 @@
 @import "variables";
 
 :host {
-    color: $color-error-500;
+    color: var(--color-error-500);
 }

packages/admin-ui/src/lib/order/src/components/order-custom-fields-card/order-custom-fields-card.component.scss

@@ -7,7 +7,7 @@ vdr-custom-field-control {
 
 .custom-field-form {
     ::ng-deep .clr-control-label {
-        color: $color-grey-400;
+        color: var(--color-grey-400);
     }
 
     &.editable {

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.scss

@@ -10,6 +10,6 @@
 .order-cards {
     h6 {
         margin-top: 6px;
-        color: $color-grey-500;
+        color: var(--color-grey-500);
     }
 }

packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.scss

@@ -5,6 +5,6 @@
     @include order-table;
 
     tr.modified td {
-        background-color: $color-warning-100;
+        background-color: var(--color-warning-100);
     }
 }

packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.scss

@@ -27,10 +27,10 @@
     justify-content: space-between;
     align-items: baseline;
     .public {
-        color: $color-warning-500;
+        color: var(--color-warning-500);
     }
     .private {
-        color: $color-success-500;
+        color: var(--color-success-500);
     }
 }
 textarea.note {
@@ -40,7 +40,7 @@ textarea.note {
     margin-right: 6px;
 }
 .note-text {
-    color: $color-grey-800;
+    color: var(--color-grey-800);
     white-space: pre-wrap;
 }
 
@@ -50,9 +50,9 @@ textarea.note {
 .note-visibility {
     text-transform: lowercase;
     &.public {
-        color: $color-warning-500;
+        color: var(--color-warning-500);
     }
     &.private {
-        color: $color-success-500;
+        color: var(--color-success-500);
     }
 }

packages/admin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.scss

@@ -8,5 +8,5 @@
 
 .refund-icon {
     margin-right: 6px;
-    color: $color-grey-400;
+    color: var(--color-grey-400);
 }

packages/admin-ui/src/lib/order/src/components/order-process-graph/order-process-edge.component.scss

@@ -2,22 +2,22 @@
 
 .edge {
     position: absolute;
-    border: 1px solid $color-grey-300;
-    background-color: $color-grey-300;
+    border: 1px solid var(--color-grey-300);
+    background-color: var(--color-grey-300);
     opacity: 0.3;
     transition: border 0.2s, opacity 0.2s, background-color 0.2s;
     &.active {
-        border-color: $color-primary-500;
-        background-color: $color-primary-500;
+        border-color: var(--color-primary-500);
+        background-color: var(--color-primary-500);
         opacity: 1;
         .arrow {
-            color: $color-primary-500;
+            color: var(--color-primary-500);
         }
     }
     .arrow {
         position: absolute;
         bottom: -4px;
         left: -8px;
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 }

packages/admin-ui/src/lib/order/src/components/order-process-graph/order-process-node.component.scss

@@ -10,30 +10,30 @@
 }
 .node {
     display: inline-block;
-    border: 2px solid $color-grey-300;
+    border: 2px solid var(--color-grey-300);
     border-radius: 3px;
     padding: 3px 6px;
     z-index: 1;
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
     opacity: 0.7;
     transition: opacity 0.2s, background-color 0.2s, color 0.2s;
     cursor: default;
     &.active-target {
-        border-color: $color-primary-500;
+        border-color: var(--color-primary-500);
         opacity: 0.9;
     }
 }
 .cancelled-wrapper {
     display: flex;
     align-items: center;
-    color: $color-grey-300;
+    color: var(--color-grey-300);
     transition: color 0.2s, opacity 0.2s;
     opacity: 0.7;
 }
 .cancelled-edge {
     width: 48px;
     height: 2px;
-    background-color: $color-grey-300;
+    background-color: var(--color-grey-300);
     transition: background-color 0.2s;
 }
 clr-icon {
@@ -48,14 +48,14 @@ clr-icon {
     }
     .node {
         opacity: 1;
-        background-color: $color-primary-600;
-        border-color: $color-primary-600;
-        color: $color-primary-100;
+        background-color: var(--color-primary-600);
+        border-color: var(--color-primary-600);
+        color: var(--color-primary-100);
     }
     .cancelled-wrapper {
-        color: $color-error-500;
+        color: var(--color-error-500);
     }
     .cancelled-edge {
-        background-color: $color-error-500;
+        background-color: var(--color-error-500);
     }
 }

packages/admin-ui/src/lib/order/src/components/order-table/order-table-mixin.scss

@@ -4,32 +4,32 @@
 
     .is-cancelled td {
         text-decoration: line-through;
-        background-color: $color-grey-200;
+        background-color: var(--color-grey-200);
     }
 
     .sub-total td {
-        border-top: 1px dashed $color-grey-300;
+        border-top: 1px dashed var(--color-grey-300);
     }
 
     .total td {
         font-weight: bold;
-        border-top: 1px dashed $color-grey-300;
+        border-top: 1px dashed var(--color-grey-300);
     }
 
     .order-line-custom-field {
-        background-color: $color-grey-100;
+        background-color: var(--color-grey-100);
 
         .custom-field-ellipsis {
-            color: $color-grey-300;
+            color: var(--color-grey-300);
         }
     }
 
     .net-price {
         font-size: 11px;
-        color: $color-grey-400;
+        color: var(--color-grey-400);
     }
     .promotions-label {
-        text-decoration: underline dotted $color-grey-300;
+        text-decoration: underline dotted var(--color-grey-300);
         font-size: 11px;
         margin-top: 6px;
         cursor: pointer;

packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.scss

@@ -11,5 +11,5 @@
     padding: 0;
     border: none;
     cursor: pointer;
-    color: $color-primary-600;
+    color: var(--color-primary-600);
 }

packages/admin-ui/src/lib/order/src/components/refund-order-dialog/refund-order-dialog.component.scss

@@ -16,7 +16,7 @@
         }
     }
     tr.ignore {
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 }
 .cancel-checkbox-wrapper {
@@ -39,10 +39,10 @@ clr-checkbox-wrapper {
         font-size: 18px;
     }
     .refund-total-error {
-        color: $color-error-500;
+        color: var(--color-error-500);
     }
     &.disabled {
-        color: $color-grey-300;
+        color: var(--color-grey-300);
     }
 }
 .prorated-wrapper {

packages/admin-ui/src/lib/settings/src/components/permission-grid/permission-grid.component.scss

@@ -1,5 +1,5 @@
 @import "variables";
 
 td.permission-group {
-    background-color: $color-grey-200;
+    background-color: var(--color-grey-200);
 }

packages/admin-ui/src/lib/settings/src/components/role-list/role-list.component.scss

@@ -1,5 +1,5 @@
 @import "variables";
 
 .default-role-label {
-    color: $color-grey-400;
+    color: var(--color-grey-400);
 }

packages/admin-ui/src/lib/settings/src/components/shipping-eligibility-test-result/shipping-eligibility-test-result.component.scss

@@ -14,5 +14,5 @@
 }
 
 clr-icon.error {
-    color: $color-error-500;
+    color: var(--color-error-500);
 }

packages/admin-ui/src/lib/settings/src/components/shipping-method-test-result/shipping-method-test-result.component.scss

@@ -1,13 +1,13 @@
 @import "variables";
 .test-result {
     &.success .card-block {
-        background-color: $color-success-100;
+        background-color: var(--color-success-100);
     }
     &.error .card-block {
-        background-color: $color-error-100;
+        background-color: var(--color-error-100);
     }
     &.unknown .card-block {
-        background-color: $color-grey-100;
+        background-color: var(--color-grey-100);
     }
 }
 .result-details {
@@ -20,10 +20,10 @@
 .eligible-icon {
     display: inline-block;
     .success {
-        color: $color-success-500;
+        color: var(--color-success-500);
     }
     .error {
-        color: $color-error-500;
+        color: var(--color-error-500);
     }
 }
 .price-row {

packages/admin-ui/src/lib/settings/src/components/test-order-builder/test-order-builder.component.scss

@@ -1,6 +1,6 @@
 @import "variables";
 .empty-placeholder {
-    color: $color-grey-400;
+    color: var(--color-grey-400);
     text-align: center;
 }
 .empty-text {

packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.scss

@@ -10,7 +10,7 @@
         margin-top: 0;
 
         tr.active {
-            background-color: $color-grey-200;
+            background-color: var(--color-grey-200);
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/zone-member-list/zone-member-list.component.scss

@@ -1,12 +1,12 @@
 @import "variables";
 
 .members-header {
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
     position: sticky;
     top: 0;
     padding: 6px;
     z-index: 5;
-    border-bottom: 1px solid $color-grey-300;
+    border-bottom: 1px solid var(--color-grey-300);
 
     .header-title-row {
         display: flex;

packages/admin-ui/src/lib/static/styles/_variables.scss

@@ -68,3 +68,60 @@ $breakpoint-small: 768px;
 
 // spacing
 $space-unit: 6px;
+
+:root {
+    --color-primary-100: #{$color-primary-100};
+    --color-primary-200: #{$color-primary-200};
+    --color-primary-300: #{$color-primary-300};
+    --color-primary-400: #{$color-primary-400};
+    --color-primary-500: #{$color-primary-500};
+    --color-primary-600: #{$color-primary-600};
+    --color-primary-700: #{$color-primary-700};
+    --color-primary-800: #{$color-primary-800};
+    --color-primary-900: #{$color-primary-900};
+    --color-secondary-100: #{$color-secondary-100};
+    --color-secondary-200: #{$color-secondary-200};
+    --color-secondary-300: #{$color-secondary-300};
+    --color-secondary-400: #{$color-secondary-400};
+    --color-secondary-500: #{$color-secondary-500};
+    --color-secondary-600: #{$color-secondary-600};
+    --color-secondary-700: #{$color-secondary-700};
+    --color-secondary-800: #{$color-secondary-800};
+    --color-secondary-900: #{$color-secondary-900};
+    --color-success-100: #{$color-success-100};
+    --color-success-200: #{$color-success-200};
+    --color-success-300: #{$color-success-300};
+    --color-success-400: #{$color-success-400};
+    --color-success-500: #{$color-success-500};
+    --color-success-600: #{$color-success-600};
+    --color-success-700: #{$color-success-700};
+    --color-success-800: #{$color-success-800};
+    --color-success-900: #{$color-success-900};
+    --color-error-100: #{$color-error-100};
+    --color-error-200: #{$color-error-200};
+    --color-error-300: #{$color-error-300};
+    --color-error-400: #{$color-error-400};
+    --color-error-500: #{$color-error-500};
+    --color-error-600: #{$color-error-600};
+    --color-error-700: #{$color-error-700};
+    --color-error-800: #{$color-error-800};
+    --color-error-900: #{$color-error-900};
+    --color-warning-100: #{$color-warning-100};
+    --color-warning-200: #{$color-warning-200};
+    --color-warning-300: #{$color-warning-300};
+    --color-warning-400: #{$color-warning-400};
+    --color-warning-500: #{$color-warning-500};
+    --color-warning-600: #{$color-warning-600};
+    --color-warning-700: #{$color-warning-700};
+    --color-warning-800: #{$color-warning-800};
+    --color-warning-900: #{$color-warning-900};
+    --color-grey-100: #{$color-grey-100};
+    --color-grey-200: #{$color-grey-200};
+    --color-grey-300: #{$color-grey-300};
+    --color-grey-400: #{$color-grey-400};
+    --color-grey-500: #{$color-grey-500};
+    --color-grey-600: #{$color-grey-600};
+    --color-grey-700: #{$color-grey-700};
+    --color-grey-800: #{$color-grey-800};
+    --color-grey-900: #{$color-grey-900};
+}

packages/admin-ui/src/lib/static/styles/theme/_forms.scss

@@ -33,7 +33,7 @@
 
 input, select {
     border-radius: 3px !important;
-    border: 1px solid $color-grey-300 !important;
+    border: 1px solid var(--color-grey-300) !important;
     padding: 5px !important;
     height: initial !important;
     transition: background-color 0.2s, box-shadow 0.2s !important;
@@ -41,8 +41,8 @@ input, select {
         background: white !important;
     }
     &:focus {
-        border-color: $color-primary-500 !important;
-        box-shadow: 0 0 1px 1px $color-primary-100;
+        border-color: var(--color-primary-500) !important;
+        box-shadow: 0 0 1px 1px var(--color-primary-100);
     }
 }
 
@@ -110,10 +110,10 @@ select {
     padding-top: 9px;
 }
 .ng-select.ng-select-focused>.ng-select-container {
-    border-color: $color-primary-500 !important;
-    box-shadow: 0 0 1px 1px $color-primary-100;
+    border-color: var(--color-primary-500) !important;
+    box-shadow: 0 0 1px 1px var(--color-primary-100);
     border-radius: 3px;
 }
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-    background-color: $color-grey-200;
+    background-color: var(--color-grey-200);
 }

packages/admin-ui/src/lib/static/styles/theme/_theme.scss

@@ -2,15 +2,15 @@
 @import "forms";
 
 .main-container {
-    background-color: $color-grey-100;
+    background-color: var(--color-grey-100);
 }
 
 a:link, a:visited {
-    color: $color-primary-600;
+    color: var(--color-primary-600);
 }
 
 a:focus, button:focus {
-    outline-color: $color-primary-400;
+    outline-color: var(--color-primary-400);
 }
 
 .align-center {
@@ -18,15 +18,15 @@ a:focus, button:focus {
 }
 
 .btn-link.btn-warning {
-    color: $color-warning-500;
+    color: var(--color-warning-500);
 
     &:hover {
-        color: $color-warning-600;
+        color: var(--color-warning-600);
     }
 }
 
 .table {
-    border-color: $color-grey-200;
+    border-color: var(--color-grey-200);
 
     td.align-middle {
         vertical-align: middle!important;
@@ -46,7 +46,7 @@ button.icon-button {
     border: none;
     background: none;
     cursor: pointer;
-    color: $color-grey-500;
+    color: var(--color-grey-500);
 }
 @media screen and (min-width: $breakpoint-small) {
     .full-label {

packages/admin-ui/src/lib/system/src/components/health-check/health-check.component.scss

@@ -10,6 +10,6 @@
     }
     .last-checked {
         font-weight: normal;
-        color: $color-grey-500;
+        color: var(--color-grey-500);
     }
 }