Merge pull request #173 from dani-cl-madrid/fix/improved-sucess-color…

…-visibility-in-white-backgrounds Improved sucess color visibility in white backgrounds
CenturyLinkCloud · Jun 25, 2019 · 9700315 · 9700315
2 parents e265793 + 418ca66
commit 9700315
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cyclops",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "cyclops: The UI/UX Pattern Guide",
   "scripts": {
     "test": "gulp test",

diff --git a/src/less/variables.less b/src/less/variables.less
@@ -81,7 +81,7 @@
 @body-bg:                     #F8F9F9;
 @primary-body-bg:             #FFF;
 
-@brand-success:               #48D597;
+@brand-success:               #097A49;
 @brand-info:                  #4288F3;
 @brand-warning:               #FDB630;
 @brand-danger:                #E43B34;
@@ -188,7 +188,7 @@
 @btn-primary-bg:              @brand-primary;
 
 @btn-success-color:           @btn-default-color;
-@btn-success-bg:              @brand-success;
+@btn-success-bg:              @brand-secondary;
 
 @btn-danger-color:            #FFF;
 @btn-danger-bg:               @brand-danger;
@@ -224,7 +224,7 @@
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
-@state-success-text:          #27B875;
+@state-success-text:          @brand-success;
 @state-success-bg:            #DAF5E9;
 @state-success-border:        darken(spin(@state-success-bg, -10), 5%); // #C6F0D6
 @state-info-text:             #005BED;

diff --git a/www/views/buttons.html b/www/views/buttons.html
@@ -23,6 +23,9 @@ <h3><a href="#tags">Tags</a></h3>
     <section class="pl-section" id="types">
       <h3><a href="#types">Types</a></h3>
       <p>Six different button types are available for most situations.</p>
+      <div class="alert alert-info">
+        <p>Please, limit usage of <code>btn-success</code> to dark backgrounds. </p>
+      </div>
       <div class="pl-example">
         {{> buttons/types }}
       </div>

diff --git a/www/views/icons.html b/www/views/icons.html
@@ -48,7 +48,10 @@ <h2>Sizes</h2>
 
 <section id="color" class="pl-section">
   <h2>Color</h2>
-  <p>Four basic colors are provided. By default, icons are the same color as text.
+  <p>Five basic colors are provided. By default, icons are the same color as text.
+    <div class="alert alert-info">
+  <p>Please, limit usage of <code>green</code> icons to dark backgrounds. </p>
+  </div>
   <div class="pl-example">
     {{> icons/colors }}
   </div>
@@ -57,6 +60,7 @@ <h2>Color</h2>
 &lt;svg class=&quot;cyclops-icon md&quot; aria-hidden=&quot;true&quot;&gt;&lt;use xlink:href=&#39;#icon-hyperscale&#39; /&gt;&lt;/svg&gt;
 &lt;svg class=&quot;cyclops-icon md green&quot; aria-hidden=&quot;true&quot;&gt;&lt;use xlink:href=&#39;#icon-hyperscale&#39; /&gt;&lt;/svg&gt;
 &lt;svg class=&quot;cyclops-icon md danger&quot; aria-hidden=&quot;true&quot;&gt;&lt;use xlink:href=&#39;#icon-hyperscale&#39; /&gt;&lt;/svg&gt;
+&lt;svg class=&quot;cyclops-icon md warning&quot; aria-hidden=&quot;true&quot;&gt;&lt;use xlink:href=&#39;#icon-hyperscale&#39; /&gt;&lt;/svg&gt;
 &lt;svg class=&quot;cyclops-icon md info&quot; aria-hidden=&quot;true&quot;&gt;&lt;use xlink:href=&#39;#icon-hyperscale&#39; /&gt;&lt;/svg&gt;
     </code>
   </pre>