Updated colors and buttons based on review (ezsystems#46)

ezpublishlegacy · May 30, 2017 · cafe875 · cafe875
1 parent 6442d98
commit cafe875
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 194 deletions.
diff --git a/ui-guidelines/css/components-buttons.css b/ui-guidelines/css/components-buttons.css
@@ -4,16 +4,15 @@
     text-align: center;
     cursor: pointer;
     letter-spacing: .5px;
-    border: 1px solid #f15a10;
-    background-color: #f15a10;
+    border: 1px solid #757575;
+    background-color: #757575;
     color: #fff;
     font-size: 1em;
-    font-weight: bold;
 }
 
 .ez-button:hover:not([disabled]) {
-    border: 1px solid #c3480b;
-    background-color: #c3480b;
+    border: 1px solid #5c5c5c;
+    background-color: #5c5c5c;
 }
 
 .ez-button:focus,
@@ -27,7 +26,24 @@
     opacity: .3;
 }
 
+.ez-button-primary {
+    font-weight: bold;
+    border: 1px solid #f15a10;
+    background-color: #f15a10;
+}
+
+.ez-button-primary:hover:not([disabled]) {
+    border: 1px solid #c3480b;
+    background-color: #c3480b;
+}
+
+.ez-button-primary:focus,
+.ez-button-primary:active {
+    box-shadow: 0 0 4px 2px #2b84b1;
+}
+
 .ez-button-secondary {
+    font-weight: bold;
     border: 1px solid #0f6d95;
     background-color: #0f6d95;
 }
@@ -39,7 +55,7 @@
 
 .ez-button-secondary:focus,
 .ez-button-secondary:active {
-    box-shadow: 0 0 4px 2px #fcb700;
+    box-shadow: 0 0 4px 2px #2b84b1;
 }
 
 .ez-button-neutral {
@@ -55,10 +71,11 @@
 
 .ez-button-neutral:focus,
 .ez-button-neutral:active {
-    box-shadow: 0 0 4px 2px #fcb700;
+    box-shadow: 0 0 4px 2px #2b84b1;
 }
 
 .ez-button-negative {
+    font-weight: bold;
     border: 1px solid #cb2540;
     background-color: #cb2540;
 }
@@ -74,6 +91,7 @@
 }
 
 .ez-button-ghost {
+    font-weight: bold;
     border: 2px solid #0f6d95;
     background-color: transparent;
     color: #0f6d95;
@@ -87,7 +105,7 @@
 
 .ez-button-ghost:focus,
 .ez-button-ghost:active {
-    box-shadow: 0 0 4px 2px #fcb700;
+    box-shadow: 0 0 4px 2px #2b84b1;
 }
 
 .ez-button [class^="ez-icon-"] {
@@ -157,7 +175,7 @@
 
 .ez-action-discoverybar:focus,
 .ez-action-discoverybar:active {
-    box-shadow: 0 0 4px 2px #fcb700;
+    box-shadow: 0 0 4px 2px #2b84b1;
 }
 
 .ez-action-actionbar {
@@ -170,7 +188,7 @@
 
 .ez-action-actionbar:focus,
 .ez-action-actionbar:active {
-    box-shadow: 0 0 4px 2px #fcb700;
+    box-shadow: 0 0 4px 2px #2b84b1;
 }
 
 .ez-action-preview {
@@ -203,7 +221,7 @@
 
 .ez-action-iconwrapper-preview:focus,
 .ez-action-iconwrapper-preview:active {
-    box-shadow: 0 0 4px 2px #fcb700;
+    box-shadow: 0 0 4px 2px #2b84b1;
 }
 
 .ez-action-icon-preview {

diff --git a/ui-guidelines/css/resources-colors.css b/ui-guidelines/css/resources-colors.css
@@ -31,99 +31,50 @@
     background-color: #a01d32;
 }
 
-/*Secondary colors*/
-.c-action-bar {
-    background-color: #106d95;
-}
-
-.c-discovery-bar {
-    background-color: #667076;
-}
-
-.c-focus-background {
-    background-color: #2b84b1;
-}
-
-.c-focus-background-alt {
-    background-color: #fcb700;
-}
-
 /*Text colors*/
-.c-text {
+.c-text-base {
     background-color: #333;
 }
 
-.c-text-white {
+.c-text-base-inverted {
     background-color: #fff; 
 }
 
-.c-text-ctype {
-    background-color: #878787;
+.c-text-hyperlink {
+    background-color: #0645ad;
 }
 
-.c-text-validation {
+.c-text-error {
     background-color: #d92d42;
 }
 
-.c-hyperlink {
-    background-color: #0645ad;
-}
-
-.c-breadcrumb {
-    background-color: #0a4b67;
+.c-text-base-pale {
+    background-color: #878787;
 }
 
-.c-breadcrumb-disabled {
+.c-text-base-light {
     background-color: #6b6b6b;
 }
 
-.c-text-translation {
+.c-text-base-medium {
     background-color: #4b4b4b;
 }
 
-/*Background colors*/
-.c-background {
-    background-color: #fafafa; 
+.c-text-base-deep {
+    background-color: #0a4b67;
 }
 
-.c-background-header {
-    background-color: #e7e7e7; 
+/*Secondary colors*/
+.c-ground-base {
+    background-color: #fafafa; 
 }
 
-.c-background-content {
+.c-ground-base-light {
     background-color: #f3f3f3; 
 }
 
-.c-background-section-main {
-    background-color: #e3e3e3; 
-}
-
-.c-background-section {
-    background-color: #dbdbdb; 
-}
-
-.c-background-fieldtype {
-    background-color: #bbb;
-}
-
-.c-background-stu-actionbar {
-    background-color: #ebebeb; 
-}
-
-.c-background-stu-landing {
-    background-color: #969696;
-}
-
-.c-background-stu-timeline {
-    background-color: #ccc;
-}
-
-.c-background-stu-timeline-line {
-    background-color: #dedede; 
-}
-
-.c-background-table {
-    background-color: #c2c2c2;
+.c-ground-base-medium {
+    background-color: #e5e3e3; 
 }
 
 /*Notification colors*/