feat(admin-ui): Standardise colour palette

Closes ##41
vendure-ecommerce · May 6, 2019 · 9cb73ae · 9cb73ae
1 parent 058749a
commit 9cb73ae
Show file tree

Hide file tree

Showing 31 changed files with 132 additions and 81 deletions.
diff --git a/admin-ui/angular.json b/admin-ui/angular.json
@@ -31,7 +31,6 @@
             ],
             "styles": [
               "./node_modules/@clr/icons/clr-icons.min.css",
-              "./node_modules/@clr/ui/clr-ui.min.css",
               "src/styles/styles.scss",
               "./node_modules/trix/dist/trix.css"
             ],

diff --git a/admin-ui/src/app/app.component.scss b/admin-ui/src/app/app.component.scss
@@ -3,7 +3,7 @@
     position: absolute;
     overflow: hidden;
     height: 4px;
-    background-color: $color-grey-5;
+    background-color: $color-grey-500;
     opacity: 0;
     transition: opacity 0.1s;
     &.visible {

diff --git a/admin-ui/src/app/catalog/components/asset-file-input/asset-file-input.component.scss b/admin-ui/src/app/catalog/components/asset-file-input/asset-file-input.component.scss
@@ -6,8 +6,8 @@
 
 .drop-zone {
     position: fixed;
-    background-color: transparentize($color-brand, 0.7);
-    border: 3px dashed $color-grey-4;
+    background-color: transparentize($color-primary-500, 0.7);
+    border: 3px dashed $color-grey-400;
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
@@ -34,7 +34,7 @@
 
     &.dragging-over {
         border-color: white;
-        background-color: transparentize($color-brand, 0.3);
+        background-color: transparentize($color-primary-500, 0.3);
         transition: background-color 0.2s, border 0.2s;
         .drop-label {
             opacity: 1;

diff --git a/admin-ui/src/app/catalog/components/asset-gallery/asset-gallery.component.scss b/admin-ui/src/app/catalog/components/asset-gallery/asset-gallery.component.scss
@@ -18,8 +18,8 @@
     padding-bottom: 12px;
 
     .card:hover {
-        box-shadow: 0 0.125rem 0 0 $color-brand;
-        border: 1px solid $color-brand;
+        box-shadow: 0 0.125rem 0 0 $color-primary-500;
+        border: 1px solid $color-primary-500;
     }
 }
 
@@ -30,7 +30,7 @@
 .selected-checkbox {
     opacity: 0;
     position: absolute;
-    color: $color-success;
+    color: $color-success-500;
     background-color: white;
     border-radius: 50%;
     top: -12px;
@@ -40,8 +40,8 @@
 }
 
 .card.selected {
-    box-shadow: 0 0.125rem 0 0 $color-brand;
-    border: 1px solid $color-brand;
+    box-shadow: 0 0.125rem 0 0 $color-primary-500;
+    border: 1px solid $color-primary-500;
 
     .selected-checkbox {
         opacity: 1;
@@ -76,7 +76,7 @@
         &.visible {
             opacity: 1;
             transform: perspective(500px) translateZ(-44px) translateY(0px);
-            background-color: $color-grey-1;
+            background-color: $color-grey-100;
             transition: transform 0.3s, color 0.3s;
         }
     }
@@ -88,7 +88,7 @@
         transition: opacity 0.3s, visibility 0s 0.3s;
         .trigger {
             cursor: pointer;
-            color: $color-grey-4;
+            color: $color-grey-400;
             text-decoration: underline;
         }
         &.visible {
@@ -100,7 +100,7 @@
 
     .placeholder {
         text-align: center;
-        color: $color-grey-3;
+        color: $color-grey-300;
     }
 
     .preview {

diff --git a/admin-ui/src/app/catalog/components/asset-list/asset-list.component.scss b/admin-ui/src/app/catalog/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-2;
+    border-top: 1px solid $color-grey-200;
     display: flex;
     justify-content: space-between;
 }

diff --git a/admin-ui/src/app/catalog/components/asset-picker-dialog/asset-picker-dialog.component.scss b/admin-ui/src/app/catalog/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-2;
+    border-top: 1px solid $color-grey-200;
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;

diff --git a/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.scss b/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.scss
@@ -1,12 +1,12 @@
 @import "variables";
 
 .contents-header {
-    background-color: $color-grey-1;
+    background-color: $color-grey-100;
     position: sticky;
     top: 0;
     padding: 6px;
     z-index: 1;
-    border-bottom: 1px solid $color-grey-3;
+    border-bottom: 1px solid $color-grey-300;
 
     .header-title-row {
         display: flex;

diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss
@@ -13,10 +13,10 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid $color-grey-2;
+        border-bottom: 1px solid $color-grey-200;
 
         &.active {
-            background-color: $color-grey-2;
+            background-color: $color-grey-200;
         }
 
         &.depth-1 { padding-left: 12px + 24px; }
@@ -38,7 +38,7 @@
 
 .drag-placeholder {
     min-height: 120px;
-    background-color: $color-grey-3;
+    background-color: $color-grey-300;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 

diff --git a/admin-ui/src/app/catalog/components/product-assets/product-assets.component.scss b/admin-ui/src/app/catalog/components/product-assets/product-assets.component.scss
@@ -10,12 +10,12 @@
 
 .placeholder {
     text-align: center;
-    color: $color-grey-3;
+    color: $color-grey-300;
 }
 
 .featured-asset {
     text-align: center;
-    background: $color-grey-2;
+    background: $color-grey-200;
     padding: 6px;
 
     &.compact {
@@ -40,16 +40,16 @@
     .asset-thumb {
         margin: 3px;
         padding: 0;
-        border: 2px solid $color-grey-2;
+        border: 2px solid $color-grey-200;
         cursor: pointer;
 
         &.featured {
-            border-color: $color-brand;
+            border-color: $color-primary-500;
         }
     }
 
     .remove-asset {
-        color: $color-warning;
+        color: $color-warning-500;
     }
 
     &.compact {

diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.scss b/admin-ui/src/app/catalog/components/product-list/product-list.component.scss
@@ -3,10 +3,10 @@
 .image-placeholder {
     width: 50px;
     height: 50px;
-    background-color: $color-grey-2;
+    background-color: $color-grey-200;
     .placeholder {
         text-align: center;
-        color: $color-grey-3;
+        color: $color-grey-300;
     }
 }
 .search-form {

diff --git a/...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss b/...-ui/src/app/catalog/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-2;
+    border: 1px solid $color-grey-200;
     border-radius: 3px;
     padding: 6px 18px;
 

diff --git a/...i/src/app/catalog/components/product-variants-table/product-variants-table.component.scss b/...i/src/app/catalog/components/product-variants-table/product-variants-table.component.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 .placeholder {
-    color: $color-grey-3;
+    color: $color-grey-300;
 }
 
 input {

diff --git a/admin-ui/src/app/catalog/components/select-option-group/select-option-group.component.scss b/admin-ui/src/app/catalog/components/select-option-group/select-option-group.component.scss
@@ -18,14 +18,14 @@ vdr-select-toggle {
 .group {
     display: flex;
     padding: 6px 12px;
-    border-bottom: 1px solid $color-grey-2;
+    border-bottom: 1px solid $color-grey-200;
 
     .name-code {
         flex: 1;
     }
 
     .code {
-        color: $color-grey-4;
+        color: $color-grey-400;
     }
 
     .options {

diff --git a/admin-ui/src/app/core/components/main-nav/main-nav.component.scss b/admin-ui/src/app/core/components/main-nav/main-nav.component.scss
@@ -3,7 +3,7 @@
 :host {
     flex: 0 0 auto;
     order: -1;
-    background-color: $color-grey-2;
+    background-color: $color-grey-200;
 }
 
 nav.sidenav {

diff --git a/admin-ui/src/app/core/components/notification/notification.component.scss b/admin-ui/src/app/core/components/notification/notification.component.scss
@@ -19,22 +19,22 @@
         max-width: 98vw;
         word-wrap: break-word;
         padding: 10px;
-        background-color: $color-grey-5;
+        background-color: $color-grey-500;
         color: white;
         transition: opacity 1s, top 0.3s;
         opacity: 0;
 
         &.success {
-            background-color: $color-success;
+            background-color: $color-success-500;
         }
         &.error {
-            background-color: $color-error;
+            background-color: $color-error-500;
         }
         &.warning {
-            background-color: $color-warning;
+            background-color: $color-warning-500;
         }
         &.info {
-            background-color: $color-info;
+            background-color: $color-secondary-500;
         }
 
         &.visible {

diff --git a/admin-ui/src/app/customer/components/address-card/address-card.component.scss b/admin-ui/src/app/customer/components/address-card/address-card.component.scss
@@ -20,5 +20,5 @@ clr-input-container {
 
 .is-default {
     margin: 0;
-    color: $color-success;
+    color: $color-success-500;
 }
diff --git a/...ui/src/app/customer/components/customer-status-label/customer-status-label.component.scss b/...ui/src/app/customer/components/customer-status-label/customer-status-label.component.scss
@@ -1,8 +1,8 @@
 @import "variables";
 
 .registered-user-icon {
-    color: $color-grey-3;
+    color: $color-grey-300;
 }
 .verified-user-icon {
-    color: $color-success;
+    color: $color-success-500;
 }
diff --git a/admin-ui/src/app/dashboard/components/dashboard/dashboard.component.scss b/admin-ui/src/app/dashboard/components/dashboard/dashboard.component.scss
@@ -1,14 +1,14 @@
 @import "variables";
 
 .placeholder {
-    color: $color-grey-3;
+    color: $color-grey-300;
     text-align: center;
     .version {
         font-size: 3em;
         margin: 24px;
         line-height: 1em;
     }
     ::ng-deep .clr-i-outline {
-        fill: $color-grey-2;
+        fill: $color-grey-200;
     }
 }
diff --git a/admin-ui/src/app/login/components/login/login.component.scss b/admin-ui/src/app/login/components/login/login.component.scss
@@ -16,5 +16,5 @@
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    color: $color-grey-3;
+    color: $color-grey-300;
 }
diff --git a/admin-ui/src/app/order/components/order-detail/order-detail.component.scss b/admin-ui/src/app/order/components/order-detail/order-detail.component.scss
@@ -7,11 +7,11 @@ ul.payment-metadata {
 .order-lines {
 
     .sub-total td {
-        border-top: 1px dashed $color-grey-3;
+        border-top: 1px dashed $color-grey-300;
     }
 
     .total td {
         font-weight: bold;
-        border-top: 1px dashed $color-grey-3;
+        border-top: 1px dashed $color-grey-300;
     }
 }
diff --git a/admin-ui/src/app/settings/components/country-list/country-list.component.scss b/admin-ui/src/app/settings/components/country-list/country-list.component.scss
@@ -1,5 +1,5 @@
 @import "variables";
 
 clr-icon.enabled {
-    color: $color-success;
+    color: $color-success-500;
 }
diff --git a/admin-ui/src/app/shared/components/action-bar/action-bar.component.scss b/admin-ui/src/app/shared/components/action-bar/action-bar.component.scss
@@ -4,9 +4,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: $color-grey-1;
+    background-color: $color-grey-100;
     position: sticky;
     top: -24px;
     z-index: 25;
-    border-bottom: 1px solid $color-grey-3;
+    border-bottom: 1px solid $color-grey-300;
 }
diff --git a/admin-ui/src/app/shared/components/affixed-input/affixed-input.component.scss b/admin-ui/src/app/shared/components/affixed-input/affixed-input.component.scss
@@ -6,11 +6,11 @@
 .affix {
     display: flex;
     align-items: center;
-    background-color: $color-grey-2;
+    background-color: $color-grey-200;
     top: 1px;
     padding: 3px;
     line-height: .58333rem;
-    border-bottom: 1px solid $color-grey-4;
+    border-bottom: 1px solid $color-grey-400;
     transition: border 0.2s;
 }
 

diff --git a/admin-ui/src/app/shared/components/chip/chip.component.scss b/admin-ui/src/app/shared/components/chip/chip.component.scss
@@ -6,11 +6,11 @@
 
 .wrapper {
     display: flex;
-    border: 1px solid $color-grey-4;
+    border: 1px solid $color-grey-400;
     border-radius: 3px;
     margin: 6px;
     &.with-background {
-        color: transparentize($color-grey-1, 0.2);
+        color: transparentize($color-grey-100, 0.2);
         border-color: transparent;
     }
 }
@@ -21,7 +21,7 @@
 }
 
 .chip-icon {
-    border-left: 1px solid transparentize($color-grey-1, 0.5);
+    border-left: 1px solid transparentize($color-grey-100, 0.5);
     padding: 0 3px;
     line-height: 1em;
     display: flex;

diff --git a/admin-ui/src/app/shared/components/data-table/data-table.component.scss b/admin-ui/src/app/shared/components/data-table/data-table.component.scss
@@ -25,7 +25,7 @@ thead th {
 .empty-state {
     text-align: center;
     padding: 60px;
-    color: $color-grey-4;
+    color: $color-grey-400;
 
     .empty-label {
         margin-top: 12px;

diff --git a/admin-ui/src/app/shared/components/facet-value-chip/facet-value-chip.component.scss b/admin-ui/src/app/shared/components/facet-value-chip/facet-value-chip.component.scss
@@ -5,7 +5,7 @@
 }
 
 .facet-name {
-    color: transparentize($color-grey-1, 0.5);
+    color: transparentize($color-grey-100, 0.5);
     text-transform: uppercase;
     font-size: 10px;
 }