page and layout colors (#588)

* placeholder colors * progress colors
clay · Aug 18, 2016 · 3b19efa · 3b19efa
1 parent d2b9bde
commit 3b19efa
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 15 deletions.
diff --git a/services/components/add-component.js b/services/components/add-component.js
@@ -108,7 +108,11 @@ function addToProp(args, pane) {
  * @returns {Promise}
  */
 function addComponent(pane, field, name, prevRef) {
-  progress.start('save');
+  if (dom.closest(pane, '.kiln-page-area')) {
+    progress.start('page');
+  } else {
+    progress.start('layout');
+  }
   removeParentPlaceholder(field);
   return Promise.all([edit.createComponent(name), edit.getData(field.ref)])
     .then(function (promises) {
@@ -132,7 +136,7 @@ function addComponent(pane, field, name, prevRef) {
         return render.addComponentsHandlers(newEl).then(function () {
           focus.unfocus();
           select.unselect();
-          progress.done('save');
+          progress.done();
           return select.select(newEl);
         });
       });

diff --git a/services/edit/index.js b/services/edit/index.js
@@ -96,9 +96,15 @@ function validate(data, schema) {
  */
 function save(data) {
   var uri = data[refProp],
-    schemaPromise = data._schema && Promise.resolve(data._schema) || cache.getSchema(uri);
+    schemaPromise = data._schema && Promise.resolve(data._schema) || cache.getSchema(uri),
+    el = dom.find(`[${references.referenceAttribute}="${uri}"]`);
+
+  if (el && dom.closest(el, '.kiln-page-area')) {
+    progress.start('page');
+  } else {
+    progress.start('layout');
+  }
 
-  progress.start('save');
   // get the schema and validate data
   return schemaPromise.then(function (schema) {
     var validationErrors = validate(data, schema);

diff --git a/services/progress.js b/services/progress.js
@@ -4,7 +4,7 @@ var _ = require('lodash'),
   boxShadow = '0 0 10px 0',
   colors = {
     // these are taken from styleguide/_colors.scss
-    save: '#a17355',
+    draft: '#a17355',
     publish: '#149524',
     offline: '#888',
     error: '#DD2F1C',

diff --git a/styleguide/_colors.scss b/styleguide/_colors.scss
@@ -1,5 +1,5 @@
 // blue - used for page-specific components
-$blue-10: #F0F7F9;
+$blue-10: #f6fdff;
 $blue-25: #C5E0E9;
 $blue-50: #8BC0D4;
 $blue-75: #51A2BF;
@@ -21,10 +21,10 @@ $orange-100: #cc8e28;
 $orange: $orange-100;
 
 // purple - used for layout-specific components
-$purple-10: rgba(104,76,120,0.10);
-$purple-25: #D9D2DD;
-$purple-50: #B4A5BC;
-$purple-75: #8F799B;
+$purple-10: #fbf3ff;
+$purple-25: #e1cfec;
+$purple-50: #bc99d1;
+$purple-75: #8d6e9f;
 $purple-100: #694C79;
 $purple: $purple-100;
 

diff --git a/styleguide/placeholder.scss b/styleguide/placeholder.scss
@@ -5,8 +5,8 @@
 
 .kiln-placeholder {
   align-items: center;
-  background-color: $grey;
-  border: 1px dashed $black-25;
+  background-color: $purple-10;
+  border: 1px dashed $purple-50;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -16,20 +16,30 @@
   width: 100%;
 }
 
+.kiln-page-area .kiln-placeholder {
+  background-color: $blue-10;
+  border: 1px dashed $blue-50;
+}
+
 .kiln-placeholder,
 .kiln-placeholder .placeholder-label {
   @include secondary-text();
 
-  color: $black-50;
+  color: $purple-75;
   text-align: center;
 }
 
+.kiln-page-area .kiln-placeholder,
+.kiln-page-area .kiln-placeholder .placeholder-label {
+  color: $blue-75;
+}
+
 // permanent placeholder - always displays, even when there is data in fields
 
 .kiln-permanent-placeholder {
   align-items: center;
   background-color: $grey;
-  border: 1px dashed $black-25;
+  border: 1px dotted $black-25;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -49,7 +59,6 @@
 }
 
 // add component button - added to placeholders of empty component lists
-.kiln-placeholder .placeholder-add-component,
 .kiln-permanent-placeholder .placeholder-add-component {
   margin-top: 5px;
   padding: 10px;
@@ -74,3 +83,47 @@
     transition: 50ms fill ease-out;
   }
 }
+
+.kiln-placeholder .placeholder-add-component {
+  margin-top: 5px;
+  padding: 10px;
+
+  svg,
+  svg * {
+    fill: $purple-50;
+    transition: 150ms fill ease-out;
+  }
+
+  // subtle hover style
+  &:hover svg,
+  &:hover svg * {
+    fill: darken($purple-50, 5%);
+    transition: 150ms fill ease-out;
+  }
+
+  // subtle active style
+  &:active svg,
+  &:active svg * {
+    fill: darken($purple-50, 10%);
+    transition: 50ms fill ease-out;
+  }
+}
+
+.kiln-page-area .kiln-placeholder .placeholder-add-component {
+  svg,
+  svg * {
+    fill: $blue-50;
+  }
+
+  // subtle hover style
+  &:hover svg,
+  &:hover svg * {
+    fill: darken($blue-50, 5%);
+  }
+
+  // subtle active style
+  &:active svg,
+  &:active svg * {
+    fill: darken($blue-50, 10%);
+  }
+}