v0.12.1: color buttons

codidact · Jun 6, 2021 · 8a991ae · 8a991ae
1 parent fd08579
commit 8a991ae
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 9 deletions.
diff --git a/dist/codidact.css b/dist/codidact.css
diff --git a/dist/codidact.css.map b/dist/codidact.css.map
diff --git a/dist/common/common.css b/dist/common/common.css
diff --git a/dist/common/common.css.map b/dist/common/common.css.map
diff --git a/docs/components/buttons/index.html b/docs/components/buttons/index.html
@@ -206,6 +206,16 @@ <h5 id="example-danger">Example</h5><div class="d-example"><pre class="d-example
 &lt;button class=&quot;button is-danger is-filled&quot;&gt;filled danger button&lt;/button&gt;</code></pre><div class="d-example-preview undefined"><button class="button is-danger">default danger button</button>
 <button class="button is-danger is-outlined">outlined danger button</button>
 <button class="button is-danger is-filled">filled danger button</button></div></div>
+<p>You can also use any other available secondary colors to create a button of that color (for instance, for informational or success buttons):</p>
+<h5 id="example-colors">Example</h5><div class="d-example"><pre class="d-example-code"><code>&lt;button class=&quot;button is-green&quot;&gt;default green button&lt;/button&gt;
+&lt;button class=&quot;button is-green is-outlined&quot;&gt;outlined green button&lt;/button&gt;
+&lt;button class=&quot;button is-green is-filled&quot;&gt;filled green button&lt;/button&gt;
+&lt;button class=&quot;button is-teal&quot;&gt;default teal button&lt;/button&gt;
+&lt;button class=&quot;button is-yellow&quot;&gt;default yellow button&lt;/button&gt;</code></pre><div class="d-example-preview undefined"><button class="button is-green">default green button</button>
+<button class="button is-green is-outlined">outlined green button</button>
+<button class="button is-green is-filled">filled green button</button>
+<button class="button is-teal">default teal button</button>
+<button class="button is-yellow">default yellow button</button></div></div>
 <h2>Muted buttons</h2>
 <p>Sometimes actions are not available or should only be considered secondary to others. For these cases, it's possible to use muted buttons.</p>
 <p>As primary and danger buttons, muted buttons can have different levels of importance. There are default buttons, which have the least priority, then outlined and then filled buttons.</p>

diff --git a/docs/dist/codidact.css b/docs/dist/codidact.css
diff --git a/docs/dist/codidact.css.map b/docs/dist/codidact.css.map
diff --git a/docs/dist/common/common.css b/docs/dist/common/common.css
diff --git a/docs/dist/common/common.css.map b/docs/dist/common/common.css.map
diff --git a/docs_src/components/buttons.md b/docs_src/components/buttons.md
@@ -31,6 +31,16 @@ As primary buttons, danger buttons can have different levels of importance. Ther
 <button class="button is-danger is-filled">filled danger button</button>
 {% endexample %}
 
+You can also use any other available secondary colors to create a button of that color (for instance, for informational or success buttons):
+
+{% example "colors" %}
+<button class="button is-green">default green button</button>
+<button class="button is-green is-outlined">outlined green button</button>
+<button class="button is-green is-filled">filled green button</button>
+<button class="button is-teal">default teal button</button>
+<button class="button is-yellow">default yellow button</button>
+{% endexample %}
+
 ## Muted buttons
 
 Sometimes actions are not available or should only be considered secondary to others. For these cases, it's possible to use muted buttons.

diff --git a/example.py b/example.py
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codidact/co-design",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Co-Design is the design and component framework for Codidact",
   "author": "luap42",
   "repository": {

diff --git a/src/common/_buttons.scss b/src/common/_buttons.scss
@@ -54,6 +54,52 @@
     }
   }
 
+  @each $color-name, $base-color in $secondary-colors {
+    &.is-#{$color-name} {
+      background-color: lighten($base-color, 32.5%);
+      color: darken($base-color, 30%);
+
+      &:hover {
+        background-color: lighten($base-color, 30%);
+        color: darken($base-color, 30%);
+      }
+
+      &:active, &.is-active {
+        background-color: lighten($base-color, 25%);
+        color: darken($base-color, 30%);
+      }
+
+      &.is-outlined {
+        background-color: #ffffff;
+        border-color: lighten($base-color, 5%);
+
+        &:hover {
+          background-color: lighten($base-color, 32.5%);
+          border-color: darken($base-color, 15%);
+        }
+
+        &:active, &.is-active {
+          background-color: lighten($base-color, 30%);
+          border-color: darken($base-color, 25%);
+        }
+      }
+
+      &.is-filled {
+        background-color: darken($base-color, 15%);
+        color: white;
+
+        &:hover {
+          background-color: darken($base-color, 25%);
+          color: white;
+        }
+
+        &:active, &.is-active {
+          background-color: darken($base-color, 35%);
+          color: white;
+        }
+      }
+    }
+  }
 
   &.is-danger {
     background-color: lighten($button-danger-color, 32.5%);