feat(admin-ui): Enable theming by use of css custom properties

Relates to #391

packages/admin-ui/package.json

@@ -29,10 +29,10 @@
     "@angular/router": "10.1.4",
     "@apollo/client": "^3.0.0",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@clr/angular": "^4.0.3",
-    "@clr/core": "^4.0.3",
-    "@clr/icons": "^4.0.3",
-    "@clr/ui": "^4.0.3",
+    "@clr/angular": "^4.0.8",
+    "@clr/core": "^4.0.8",
+    "@clr/icons": "^4.0.8",
+    "@clr/ui": "^4.0.8",
     "@ng-select/ng-select": "^5.0.3",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",

packages/admin-ui/scripts/compile-styles.js

@@ -6,7 +6,7 @@ const sass = require('sass');
 // non-Angular ui extensions.
 const outFile = path.join(__dirname, '../package/static/theme.min.css');
 const result = sass.renderSync({
-    file: path.join(__dirname, '../src/lib/static/styles/theme.scss'),
+    file: path.join(__dirname, '../src/lib/static/styles/ui-extension-theme.scss'),
     importer,
     includePaths: [path.join(__dirname, '../src/lib/static/styles')],
     outputStyle: 'compressed',
@@ -15,7 +15,6 @@ const result = sass.renderSync({
 
 fs.writeFileSync(outFile, result.css, 'utf8');
 
-
 function importer(url, prev, done) {
     let file = url;
     // Handle the imports prefixed with ~

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

@@ -5,7 +5,7 @@
             name="searchTerm"
             [formControl]="searchTerm"
             [placeholder]="'asset.search-asset-name' | translate"
-            class="search-input"
+            class="search-input ml3"
         />
     </vdr-ab-left>
     <vdr-ab-right>

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;
@@ -12,7 +11,7 @@ vdr-asset-gallery {
 
 .paging-controls {
     padding-top: 6px;
-    border-top: 1px solid var(--color-grey-200);
+    border-top: 1px solid var(--color-component-border-100);
     display: flex;
     justify-content: space-between;
 }

packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.scss

@@ -1,4 +1,3 @@
-@import "variables";
 
 vdr-channel-assignment-control {
     min-width: 200px;

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

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

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

@@ -1,6 +1,6 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <clr-checkbox-wrapper class="expand-all-toggle">
+        <clr-checkbox-wrapper class="expand-all-toggle ml3">
             <input type="checkbox" clrCheckbox [(ngModel)]="expandAll" />
             <label>{{ 'catalog.expand-all-collections' | translate }}</label>
         </clr-checkbox-wrapper>

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     height: 100%;
@@ -48,7 +47,7 @@
 
 .paging-controls {
     padding-top: 6px;
-    border-top: 1px solid var(--color-grey-200);
+    border-top: 1px solid var(--color-component-border-100);
     display: flex;
     justify-content: space-between;
 }

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

@@ -1,19 +1,17 @@
-@import "variables";
 
 :host {
     display: block;
 }
 .collection {
-    background-color: white;
+    background-color: var(--color-component-bg-100);
     font-size: 0.65rem;
-    color: rgba(0, 0, 0, 0.87);
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
     margin-bottom: 2px;
     border-left: 2px solid transparent;
     transition: border-left-color 0.2s;
 
     &.private {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
 
     .collection-detail {
@@ -21,10 +19,10 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid var(--color-grey-200);
+        border-bottom: 1px solid var(--color-component-border-100);
 
         &.active {
-            background-color: var(--color-grey-200);
+            background-color: var(--clr-global-selection-color);
         }
 
         &.depth-1 { padding-left: 12px + 24px; }
@@ -41,7 +39,7 @@
 
 .tree-node {
     display: block;
-    background: white;
+    background: var(--color-component-bg-100);
     overflow: hidden;
     &.cdk-drop-list-dragging {
         > .collection {
@@ -52,7 +50,7 @@
 
 .drag-placeholder {
     min-height: 120px;
-    background-color: var(--color-grey-300);
+    background-color: var(--color-component-bg-300);
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .visible-toggle {
     margin-top: -3px !important;

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

@@ -1,7 +1,6 @@
-@import "variables";
 
 td {
     &.private {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;
@@ -21,7 +20,7 @@
 .variants-preview {
     tr.disabled {
         td {
-            background-color: var(--color-grey-100);
+            background-color: var(--color-component-bg-100);
             color: var(--color-grey-400);
         }
     }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .input-wrapper {
     background-color: white;
@@ -25,7 +24,7 @@
             outline: none;
         }
         &:disabled {
-            background-color: var(--color-grey-100);
+            background-color: var(--color-component-bg-100);
         }
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     width: 340px;
@@ -15,7 +14,7 @@
 
 .featured-asset {
     text-align: center;
-    background: var(--color-grey-200);
+    background: var(--color-component-bg-200);
     padding: 6px;
     cursor: pointer;
 
@@ -42,7 +41,7 @@
     .asset-thumb {
         margin: 3px;
         padding: 0;
-        border: 2px solid var(--color-grey-200);
+        border: 2px solid var(--color-component-border-100);
         cursor: pointer;
 
         &.featured {
@@ -67,7 +66,7 @@
     align-items: center;
     justify-content: center;
     width: 50px;
-    background-color: var(--color-grey-100);
+    background-color: var(--color-component-bg-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 +78,7 @@
     width: 60px;
     height: 50px;
     .asset-thumb {
-        background-color: var(--color-grey-300);
+        background-color: var(--color-component-bg-300);
         height: 100%;
         width: 54px;
     }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     ::ng-deep {
@@ -21,7 +20,8 @@ vdr-action-bar clr-toggle-wrapper {
         border-radius: 3px 0 0 3px !important;
     }
     .icon-button {
-        border: 1px solid var(--color-grey-300);
+        border: 1px solid var(--color-component-border-300);
+        background-color: var(--color-component-bg-100);
         border-radius: 0 3px 3px 0;
         border-left: none;
     }

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

@@ -7,7 +7,7 @@
                 (searchTermChange)="setSearchTerm($event)"
                 (facetValueChange)="setFacetValueIds($event)"
             ></vdr-product-search-input>
-            <vdr-dropdown class="search-settings-menu">
+            <vdr-dropdown class="search-settings-menu mr3">
                 <button type="button" class="icon-button" vdrDropdownTrigger>
                     <clr-icon shape="cog"></clr-icon>
                 </button>

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

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

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

@@ -1,4 +1,3 @@
-@import "variables";
 @import "mixins";
 
 :host {
@@ -19,10 +18,10 @@ ng-select {
 
 .search-header {
     padding: 8px 10px;
-    border-bottom: 1px solid var(--color-grey-200);
+    border-bottom: 1px solid var(--color-component-border-100);
     cursor: pointer;
 
     &.selected, &:hover {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .option-groups {
     display: flex;
@@ -15,7 +14,7 @@
 .variants-preview {
     tr.disabled {
         td {
-            background-color: var(--color-grey-100);
+            background-color: var(--color-component-bg-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 var(--color-grey-200);
+    border: 1px solid var(--color-component-border-100);
     border-radius: 3px;
     padding: 6px 18px;
 
@@ -21,7 +21,7 @@
     transition: background-color 0.2s;
     min-height: 330px;
     &.disabled {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
     .header-row {
         display: flex;
@@ -118,7 +118,7 @@
     }
 
     .option-group-name {
-        color: var(--color-grey-400);
+        color: var(--color-text-200);
         text-transform: uppercase;
         font-size: 10px;
         margin-right: 3px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .placeholder {
     color: var(--color-grey-300);
@@ -13,6 +12,6 @@
 td {
     transition: background-color 0.2s;
     &.disabled {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 .progress {
     position: absolute;
     overflow: hidden;

packages/admin-ui/src/lib/core/src/common/utilities/string-to-color.ts

@@ -3,32 +3,22 @@
  */
 export function stringToColor(input: string): string {
     if (!input || input === '') {
-        return '#fff';
+        return 'var(--color-component-bg-100)';
     }
     const safeColors = [
-        // '#FF4343',
-        // '#9A0089',
-        // '#881798',
         '#10893E',
         '#107C10',
         '#7E735F',
         '#2F5646',
-        // '#D13438',
-        // '#C239B3',
-        // '#B146C2',
         '#498205',
         '#847545',
-        // '#EF6950',
-        // '#BF0077',
         '#744DA9',
         '#018574',
         '#486860',
         '#525E54',
         '#647C64',
         '#567C73',
-        // '#DA3B01',
         '#8764B8',
-        // '#C30052',
         '#515C6B',
         '#4A5459',
         '#69797E',

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;

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

@@ -3,12 +3,13 @@
 :host {
     // flex: 0 0 auto;
     order: -1;
-    background-color: var(--color-grey-200);
+    background-color: var(--clr-nav-background-color);
 }
 
 nav.sidenav {
     height: 100%;
     width: 10.8rem;
+    border-right-color: var(--clr-sidenav-border-color);
 }
 
 .nav-list clr-icon {
@@ -25,7 +26,7 @@ nav.sidenav {
     height: 10px;
     position: absolute;
     border-radius: 50%;
-    border: 1px solid var(--color-grey-200);
+    border: 1px solid var(--color-component-border-100);
 
     &.info {
         background-color: var(--color-primary-600);

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 @keyframes fadeIn {
     0% { opacity: 0; }

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

@@ -1,14 +1,13 @@
-@import "variables";
 
 :host {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    background-color: var(--color-grey-100);
+    background-color: var(--color-component-bg-100);
     position: sticky;
     top: -24px;
     z-index: 25;
-    border-bottom: 1px solid var(--color-grey-300);
+    border-bottom: 1px solid var(--color-component-border-200);
 
     > .grow {
         flex: 1;

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

@@ -1,14 +1,14 @@
-@import "variables";
 
 :host {
     display: inline-flex;
 }
 
 .affix {
+    color: var(--color-grey-800);
     display: flex;
     align-items: center;
     background-color: var(--color-grey-200);
-    border: 1px solid var(--color-grey-300);
+    border: 1px solid var(--color-component-border-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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .file-input {
     display: none;
@@ -7,7 +6,7 @@
 .drop-zone {
     position: fixed;
     background-color: var(--color-primary-500);
-    border: 3px dashed var(--color-grey-400);
+    border: 3px dashed var(--color-component-border-300);
     opacity: 0;
     visibility: hidden;
     z-index: 1000;

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

@@ -80,7 +80,7 @@
         &.visible {
             opacity: 1;
             transform: perspective(500px) translateZ(-44px) translateY(0px);
-            background-color: var(--color-grey-100);
+            background-color: var(--color-component-bg-100);
             transition: transform 0.3s, color 0.3s;
         }
     }

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

@@ -2,6 +2,7 @@
     <div class="title-row">
         {{ 'asset.select-assets' | translate }}
         <vdr-asset-file-input
+            class="ml3"
             (selectFiles)="createAssets($event)"
             [uploading]="uploading"
             dropZoneTarget=".modal-content"

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;
@@ -18,7 +17,7 @@ vdr-asset-gallery {
 
 .paging-controls {
     padding-top: 6px;
-    border-top: 1px solid var(--color-grey-200);
+    border-top: 1px solid var(--color-component-border-100);
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;

packages/admin-ui/src/lib/core/src/shared/components/channel-assignment-control/channel-assignment-control.component.scss

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     min-width: 200px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: inline-block;

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

@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 :host {
     display: inline-block;
@@ -6,7 +6,7 @@
 
 .wrapper {
     display: flex;
-    border: 1px solid var(--color-grey-400);
+    border: 1px solid var(--color-component-border-300);
     border-radius: 3px;
     margin: 6px;
     &.with-background {
@@ -18,29 +18,28 @@
     }
 
     &.warning {
-        border-color: var(--color-warning-200);
+        border-color: var(--color-chip-warning-border);
         .chip-label {
-            color: var(--color-warning-600);
-            background-color: var(--color-warning-100);
+            color: var(--color-chip-warning-text);
+            background-color: var(--color-chip-warning-bg);
         }
     }
 
     &.success {
-        border-color: var(--color-success-200);
+        border-color: var(--color-chip-success-border);
         .chip-label {
-            color: var(--color-success-600);
-            background-color: var(--color-success-100);
+            color: var(--color-chip-success-text);
+            background-color: var(--color-chip-success-bg);
         }
     }
 
     &.error {
-        border-color: var(--color-error-200);
+        border-color: var(--color-chip-error-border);
         .chip-label {
-            color: var(--color-error-600);
-            background-color: var(--color-error-100);
+            color: var(--color-chip-error-text);
+            background-color: var(--color-chip-error-bg);
         }
     }
-
 }
 
 .chip-label {
@@ -53,7 +52,7 @@
 }
 
 .chip-icon {
-    border-left: 1px solid var(--color-grey-300);
+    border-left: 1px solid var(--color-component-border-200);
     padding: 0 3px;
     line-height: 1em;
     display: flex;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;
@@ -21,7 +20,7 @@ input.selected-datetime {
     margin: 0;
     border-radius: 0;
     border-left: none;
-    border-color: var(--color-grey-300);
+    border-color: var(--color-component-border-200);
     background-color: white;
     color: var(--color-grey-500);
     display: none;
@@ -52,7 +51,7 @@ table.calendar-table {
         user-select: none;
     }
     .day-cell {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
         color: var(--color-grey-500);
 
         cursor: pointer;
@@ -69,7 +68,7 @@ table.calendar-table {
             background-color: var(--color-primary-200);
         }
         &.today {
-            border: 1px solid var(--color-grey-400);
+            border: 1px solid var(--color-component-border-300);
         }
         &:hover:not(.selected):not(.disabled) {
             background-color: var(--color-primary-100);

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .visibility-select {
     display: flex;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .empty-state {
     text-align: center;

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

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

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 iframe {
     position: absolute;
@@ -27,7 +26,7 @@ iframe {
     transition: background-color 0.3s;
     text-align: center;
     &.launched {
-        background-color: var(--color-grey-300);
+        background-color: var(--color-component-bg-300);
     }
 }
 

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

@@ -1,11 +1,10 @@
-@import "variables";
 
 :host {
     display: inline-block;
 }
 
 .facet-name {
-    color: transparentize($color-grey-100, 0.5);
+    color: var(--color-grey-100);
     text-transform: uppercase;
     font-size: 10px;
     margin-right: 3px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 @import "mixins";
 
 :host {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     position: relative;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;
@@ -34,7 +33,7 @@
         ::ng-deep input {
             flex: 1;
             &[disabled] {
-                background-color: var(--color-grey-200);
+                background-color: var(--color-component-bg-200);
             }
         }
         button.edit-button {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .address-lines {
     list-style-type: none;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;
@@ -6,7 +5,7 @@
 }
 .label-title {
     font-size: 12px;
-    color: var(--color-grey-400);
+    color: var(--color-text-300);
     line-height: 12px;
     margin-bottom: -4px;
 }

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

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

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {}
 
@@ -36,6 +35,6 @@
 }
 
 .key {
-    color: var(--color-grey-400);
+    color: var(--color-text-300);
 }
 

packages/admin-ui/src/lib/core/src/shared/components/order-state-label/order-state-label.component.scss

@@ -1,4 +1,3 @@
-@import "variables";
 
 clr-icon {
     margin-right: 3px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 pagination-template {
     display: block;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .preview {
     display: flex;

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

@@ -72,7 +72,7 @@
     }
 
     .ProseMirror-menuseparator {
-        border-right: 1px solid var(--color-grey-300);
+        border-right: 1px solid var(--color-component-border-200);
         margin-right: 3px;
     }
 
@@ -111,7 +111,7 @@
         position: absolute;
         background: white;
         color: var(--color-grey-600);
-        border: 1px solid var(--color-grey-300);
+        border: 1px solid var(--color-component-border-200);
         padding: 2px;
     }
 
@@ -126,7 +126,7 @@
     }
 
     .ProseMirror-menu-dropdown-item:hover {
-        background: var(--color-grey-100);
+        background: var(--color-component-bg-100);
     }
 
     .ProseMirror-menu-submenu-wrap {
@@ -153,12 +153,12 @@
     }
 
     .ProseMirror-menu-active {
-        background: var(--color-grey-100);
+        background: var(--color-component-bg-100);
         border-radius: 4px;
     }
 
     .ProseMirror-menu-active {
-        background: var(--color-grey-100);
+        background: var(--color-component-bg-100);
         border-radius: 4px;
     }
 
@@ -181,7 +181,7 @@
         top: 0;
         left: 0;
         right: 0;
-        background: var(--color-grey-100);
+        background: var(--color-component-bg-100);
         z-index: 10;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
@@ -267,7 +267,7 @@
 
     .ProseMirror-prompt input[type='text'],
     .ProseMirror-prompt textarea {
-        background: var(--color-grey-100);
+        background: var(--color-component-bg-100);
         border: none;
         outline: none;
     }
@@ -307,7 +307,7 @@
 
     #editor,
     .editor {
-        background: white;
+        background: var(--color-form-input-bg);
         color: black;
         background-clip: padding-box;
         border-radius: 4px;
@@ -334,5 +334,6 @@
 
     .ProseMirror p {
         margin-bottom: 0.5rem;
+        color: var(--color-grey-800);
     }
 }

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

@@ -17,16 +17,17 @@
     position: sticky;
     top: 24px;
     margin-top: 6px;
-    border: 1px solid var(--color-grey-300);
+    border: 1px solid var(--color-component-border-200);
     border-bottom: none;
-    background-color: var(--color-grey-200);
+    background-color: var(--color-component-bg-200);
+    color: var(--color-icon-button);
     padding: 6px 12px;
 }
 
 ::ng-deep .vdr-prosemirror {
-    background-color: white;
+    background: var(--color-form-input-bg);
     min-height: 128px;
-    border: 1px solid var(--color-grey-300);
+    border: 1px solid var(--color-component-border-200);
     border-radius: 0 0 3px 3px;
     transition: border-color 0.2s;
     overflow: auto;

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: var(--color-grey-100);
-    border: 2px solid var(--color-grey-400);
+    background-color: var(--color-component-bg-100);
+    border: 2px solid var(--color-component-border-300);
     padding: 0 6px;
     border-radius: 50%;
     width: 32px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;
@@ -6,7 +5,7 @@
     &:first-of-type {
         .timeline {
             &:before {
-                border-left-color: var(--color-grey-100);
+                border-left-color: var(--color-timeline-thread);
             }
         }
         .entry-body {
@@ -18,7 +17,7 @@
     display: flex;
 }
 .timeline {
-    border-left: 2px solid var(--color-primary-100);
+    border-left: 2px solid var(--color-timeline-thread);
     padding-bottom: 8px;
     position: relative;
 
@@ -28,7 +27,7 @@
         width: 2px;
         height: 32px;
         left: -2px;
-        border-left: 2px solid var(--color-primary-100);
+        border-left: 2px solid var(--color-timeline-thread);
     }
     &:after {
         content: '';
@@ -36,8 +35,8 @@
         border-radius: 50%;
         width: 8px;
         height: 8px;
-        background-color: var(--color-grey-200);
-        border: 1px solid var(--color-grey-400);
+        background-color: var(--color-component-bg-200);
+        border: 1px solid var(--color-component-border-300);
         position: absolute;
         left: -5px;
         top: 32px;
@@ -55,8 +54,8 @@
         justify-content: center;
         border-radius: 50%;
         color: var(--color-primary-600);
-        background-color: var(--color-grey-100);
-        border: 1px solid var(--color-grey-300);
+        background-color: var(--color-component-bg-100);
+        border: 1px solid var(--color-component-border-200);
         display: none;
     }
 }
@@ -80,7 +79,7 @@
     padding-left: 12px;
     line-height: 16px;
     margin-left: 12px;
-    color: var(--color-grey-500);
+    color: var(--color-text-200);
     overflow: visible;
     max-height: 100px;
     transition: max-height 0.2s, padding-top 0.2s, opacity 0.2s 0.2s;
@@ -88,19 +87,19 @@
 
 .featured-entry ::ng-deep {
     .title {
-        color: var(--color-grey-800);
+        color: var(--color-text-100);
         font-size: 16px;
         line-height: 26px;
     }
     .note-text {
-        color: var(--color-grey-800);
+        color: var(--color-text-100);
         white-space: pre-wrap;
     }
 }
 
 .detail {
     display: flex;
-    color: var(--color-grey-400);
+    color: var(--color-text-300);
     font-size: 12px;
     .time {
     }
@@ -112,7 +111,7 @@
 
 .muted {
     .timeline, .timeline .custom-icon {
-        color: var(--color-grey-400);
+        color: var(--color-text-300);
     }
 }
 

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;
@@ -6,12 +5,15 @@
 
     ::ng-deep input {
         font-size: 18px;
-        color: var(--color-grey-700);
+        color: var(--clr-p1-color);
         max-width: 100%;
         &:not(:focus) {
             border-color: transparent !important;
             background-color: transparent !important;
         }
+        &:focus {
+            background-color: var(--clr-global-app-background);
+        }
     }
 
     ::ng-deep .clr-control-container {
@@ -33,7 +35,7 @@
 
     &:hover {
         ::ng-deep input:not(:focus) {
-            background-color: var(--color-grey-200) !important;
+            background-color: var(--color-component-bg-200) !important;
         }
         .edit-icon {
             opacity: 1;

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 var(--color-grey-300);
+    border: 1px solid var(--color-component-border-200);
     border-radius: 3px;
     padding: 12px;
 }
@@ -19,7 +19,7 @@
 
 .cdk-drag-preview {
     font-size: 13px;
-    background-color: var(--color-grey-100);
+    background-color: var(--color-component-bg-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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .variant {
     margin-bottom: 6px;
@@ -6,7 +5,7 @@
     align-items: center;
     transition: background-color 0.2s;
     &:hover {
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
 }
 .thumb {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 clr-input-container {
     margin-bottom: 12px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .last-login {
     margin-left: 6px;

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: var(--color-grey-200);
+            background-color: var(--color-component-bg-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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .entry-list {
     margin-top: 24px;
@@ -24,11 +23,11 @@ textarea.note {
     margin-right: 6px;
 }
 .note-text {
-    color: var(--color-grey-800);
+    color: var(--color-text-100);
     white-space: pre-wrap;
 }
 
 .address-string {
     font-size: smaller;
-    color: var(--color-grey-500);
+    color: var(--color-text-200);
 }

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

@@ -5,7 +5,7 @@
             name="searchTerm"
             [formControl]="searchTerm"
             [placeholder]="'customer.search-customers-by-email' | translate"
-            class="search-input"
+            class="search-input ml3"
         />
     </vdr-ab-left>
     <vdr-ab-right>

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .search-input {
     margin-top: 6px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .registered-user-icon {
     color: var(--color-grey-300);

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;

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

@@ -43,7 +43,7 @@ vdr-dashboard-widget {
 }
 
 .dashboard-row.cdk-drop-list-dragging, .dashboard-row.cdk-drop-list-receiving  {
-    border: 1px dashed var(--color-grey-300);
+    border: 1px dashed var(--color-component-border-200);
     padding: 6px;
 }
 .dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder) {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 vdr-data-table {
     ::ng-deep {

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

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

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: flex;

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

@@ -1,8 +1,7 @@
 @import 'variables';
 
 .login-wrapper {
-    background-image: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
-    background-repeat: repeat;
+    background: var(--login-page-bg);
     background-size: auto;
     justify-content: center;
 }

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

@@ -31,6 +31,6 @@
     }
     .is-cancelled td {
         text-decoration: line-through;
-        background-color: var(--color-grey-200);
+        background-color: var(--color-component-bg-200);
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .item-fulfilled {
     color: var(--color-success-500);
@@ -13,6 +12,6 @@
 .fulfillment-detail {
     margin: 6px 12px;
     &:not(:last-of-type) {
-        border-bottom: 1px dashed var(--color-grey-300);
+        border-bottom: 1px dashed var(--color-component-border-200);
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     color: var(--color-error-500);

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 vdr-custom-field-control {
     margin-bottom: 6px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 @import "mixins";
 @import "../order-table/order-table-mixin";
 
@@ -10,6 +9,6 @@
 .order-cards {
     h6 {
         margin-top: 6px;
-        color: var(--color-grey-500);
+        color: var(--color-text-200);
     }
 }

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

@@ -1,4 +1,3 @@
-@import "variables";
 @import "../order-table/order-table-mixin";
 
 .order-table {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .payment-header {
     display: flex;

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

@@ -2,8 +2,8 @@
 
 .edge {
     position: absolute;
-    border: 1px solid var(--color-grey-300);
-    background-color: var(--color-grey-300);
+    border: 1px solid var(--color-component-border-200);
+    background-color: var(--color-component-bg-300);
     opacity: 0.3;
     transition: border 0.2s, opacity 0.2s, background-color 0.2s;
     &.active {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     display: block;

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

@@ -10,11 +10,11 @@
 }
 .node {
     display: inline-block;
-    border: 2px solid var(--color-grey-300);
+    border: 2px solid var(--color-component-border-200);
     border-radius: 3px;
     padding: 3px 6px;
     z-index: 1;
-    background-color: var(--color-grey-100);
+    background-color: var(--color-component-bg-100);
     opacity: 0.7;
     transition: opacity 0.2s, background-color 0.2s, color 0.2s;
     cursor: default;
@@ -33,7 +33,7 @@
 .cancelled-edge {
     width: 48px;
     height: 2px;
-    background-color: var(--color-grey-300);
+    background-color: var(--color-component-bg-300);
     transition: background-color 0.2s;
 }
 clr-icon {

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

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

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

@@ -1,4 +1,3 @@
-@import "variables";
 @import "order-table-mixin";
 
 .order-table {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 :host {
     height: 100%;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .search-input {
     margin-top: 6px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 ::ng-deep ng-select {
     .ng-value > span {

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

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

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

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

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

@@ -1,4 +1,3 @@
-@import "variables";
 .result-details {
     transition: opacity 0.2s;
     &.stale {

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

@@ -1,4 +1,3 @@
-@import "variables";
 
 .testing-tool {
     margin-top: 48px;

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

@@ -1,4 +1,3 @@
-@import "variables";
 .test-result {
     &.success .card-block {
         background-color: var(--color-success-100);
@@ -7,7 +6,7 @@
         background-color: var(--color-error-100);
     }
     &.unknown .card-block {
-        background-color: var(--color-grey-100);
+        background-color: var(--color-component-bg-100);
     }
 }
 .result-details {

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

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

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: var(--color-grey-200);
+            background-color: var(--color-component-bg-200);
         }
     }
 }

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

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