refactor(admin-ui): Remove hard-coded hex color values

vendure-ecommerce · Jan 7, 2021 · 165cac3 · 165cac3
1 parent 2835507
commit 165cac3
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 41 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss b/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss
@@ -14,7 +14,7 @@
     li:not(:last-child)::after {
         content: '›';
         top: 0;
-        color: #7e7e7e;
+        color: var(--color-grey-400);
         margin-left: 10px;
     }
 }
diff --git a/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss b/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss
@@ -18,7 +18,3 @@
 .trigger clr-icon {
     color: white;
 }
-.btn.btn-outline:hover {
-    background-color: #e1f1f62e;
-}
-
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss
@@ -75,25 +75,6 @@ element.style {
 .tooltip.tooltip-sm > .tooltip-content, .tooltip .tooltip-content.tooltip-sm {
     width: 5rem;
 }
-.tooltip.tooltip-top-left > .tooltip-content, .tooltip .tooltip-content.tooltip-top-left {
-    color: #fff;
-    font-size: 0.541667rem;
-    font-weight: 400;
-    letter-spacing: normal;
-    background: #000;
-    border-radius: 0.125rem;
-    line-height: 0.75rem;
-    margin: 0;
-    padding: 0.375rem 0.5rem;
-    width: 10rem;
-    position: absolute;
-    top: auto;
-    bottom: 100%;
-    right: 50%;
-    left: auto;
-    border-bottom-right-radius: 0;
-    margin-bottom: 0.666667rem;
-}
 
 .tooltip:hover > .tooltip-content {
     right: 12px;

diff --git a/...admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss b/...admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss
@@ -31,7 +31,7 @@
     }
 
     .ProseMirror-selectednode {
-        outline: 2px solid #8cf;
+        outline: 2px solid var(--color-primary-500);
     }
 
     /* Make sure li selections wrap around markers */
@@ -47,7 +47,7 @@
         right: -2px;
         top: -2px;
         bottom: -2px;
-        border: 2px solid #8cf;
+        border: 2px solid var(--color-primary-500);
         pointer-events: none;
     }
 
@@ -72,7 +72,7 @@
     }
 
     .ProseMirror-menuseparator {
-        border-right: 1px solid #ddd;
+        border-right: 1px solid var(--color-grey-300);
         margin-right: 3px;
     }
 
@@ -110,8 +110,8 @@
     .ProseMirror-menu-submenu {
         position: absolute;
         background: white;
-        color: #666;
-        border: 1px solid #aaa;
+        color: var(--color-grey-600);
+        border: 1px solid var(--color-grey-300);
         padding: 2px;
     }
 
@@ -126,7 +126,7 @@
     }
 
     .ProseMirror-menu-dropdown-item:hover {
-        background: #f2f2f2;
+        background: var(--color-grey-100);
     }
 
     .ProseMirror-menu-submenu-wrap {
@@ -153,12 +153,12 @@
     }
 
     .ProseMirror-menu-active {
-        background: #eee;
+        background: var(--color-grey-100);
         border-radius: 4px;
     }
 
     .ProseMirror-menu-active {
-        background: #eee;
+        background: var(--color-grey-100);
         border-radius: 4px;
     }
 
@@ -176,12 +176,12 @@
         border-top-right-radius: inherit;
         position: relative;
         min-height: 1em;
-        color: #666;
+        color: var(--color-grey-600);
         padding: 1px 6px;
         top: 0;
         left: 0;
         right: 0;
-        background: white;
+        background: var(--color-grey-100);
         z-index: 10;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
@@ -243,7 +243,7 @@
 
     .ProseMirror blockquote {
         padding-left: 1em;
-        border-left: 3px solid #eee;
+        border-left: 3px solid var(--color-grey-100);
         margin-left: 0;
         margin-right: 0;
     }
@@ -262,12 +262,12 @@
         margin: 0;
         font-weight: normal;
         font-size: 100%;
-        color: #444;
+        color: var(--color-grey-500);
     }
 
     .ProseMirror-prompt input[type='text'],
     .ProseMirror-prompt textarea {
-        background: #eee;
+        background: var(--color-grey-100);
         border: none;
         outline: none;
     }
@@ -280,7 +280,7 @@
         position: absolute;
         left: 2px;
         top: 1px;
-        color: #666;
+        color: var(--color-grey-400);
         border: none;
         background: transparent;
         padding: 0;
@@ -292,8 +292,8 @@
     }
 
     .ProseMirror-invalid {
-        background: #ffc;
-        border: 1px solid #cc7;
+        background: var(--color-warning-200);
+        border: 1px solid var(--color-warning-300);
         border-radius: 4px;
         padding: 5px 10px;
         position: absolute;

diff --git a/...es/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss b/...es/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss
@@ -47,7 +47,7 @@
 
     &:focus {
         outline: none;
-        box-shadow: 0 0 2px 2px #6bc1e3;
+        box-shadow: 0 0 2px 2px var(--color-primary-500);
     }
 
     &.disabled {