From dbbe158d21caabfffa2c7c5c56ebc2e615fc9fda Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Thu, 6 Aug 2020 11:03:06 +0200
Subject: [PATCH] Buttons: Ghost Dimmed (#9626)

* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* ghost dimmed

* add to page/crayons
---
 .../javascripts/utilities/buildArticleHTML.js      |  4 ++--
 app/assets/stylesheets/components/buttons.scss     | 14 ++++++++++++++
 app/assets/stylesheets/config/_colors.scss         |  4 ++++
 app/assets/stylesheets/themes/hacker.scss          |  4 ++++
 app/assets/stylesheets/themes/minimal.scss         |  4 ++++
 app/assets/stylesheets/themes/night.scss           |  2 ++
 app/assets/stylesheets/themes/pink.scss            |  4 ++++
 app/javascript/articles/components/SaveButton.jsx  |  2 +-
 .../crayons/Button/__stories__/Button.stories.jsx  |  2 ++
 .../Button/__stories__/button.html.stories.jsx     | 10 ++++++++++
 app/views/articles/_actions.html.erb               |  2 +-
 app/views/articles/_v2_form.html.erb               |  4 ++--
 .../dashboards/_dashboard_article_row.html.erb     |  4 ++--
 app/views/pages/crayons.html.erb                   | 10 ++++++++++
 14 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index 863876f90..af8b03566 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -62,7 +62,7 @@ function buildArticleHTML(article) {
       commentsDisplay =
         '<a href="' +
         article.path +
-        '#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>' +
+        '#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost-dimmed crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>' +
         commentsCount +
         '<span class="hidden s:inline">&nbsp;comments</span></a>';
     }
@@ -101,7 +101,7 @@ function buildArticleHTML(article) {
       reactionsDisplay =
         '<a href="' +
         article.path +
-        '" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"/></svg>' +
+        '" class="crayons-btn crayons-btn--s crayons-btn--ghost-dimmed crayons-btn--icon-left"><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"/></svg>' +
         reactionsCount +
         '<span class="hidden s:inline">&nbsp;reactions</span></a>';
     }
diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss
index e2c78bf2d..e1a2d1699 100644
--- a/app/assets/stylesheets/components/buttons.scss
+++ b/app/assets/stylesheets/components/buttons.scss
@@ -92,6 +92,7 @@
     --font-size: var(--fs-s);
     --with-icon-padding: var(--su-2);
     --icon-margin: var(--su-1);
+    font-weight: normal;
   }
 
   &--l {
@@ -174,6 +175,19 @@
     --color-inverted-hover: var(--accent-brand-lighter);
   }
 
+  &-dimmed {
+    --bg: var(--button-ghost-bg);
+    --bg-hover: var(--button-ghost-bg-hover);
+    --color: var(--button-ghost-dimmed-color);
+    --color-hover: var(--button-ghost-dimmed-color-hover);
+    --shadow: none;
+    --shadow-hover: none;
+    --bg-inverted: var(--button-ghost-inverted-bg);
+    --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
+    --color-inverted: var(--accent-ghost-dimmed-inverted-color);
+    --color-inverted-hover: var(--accent-ghost-dimmed-inverted-color-hover);
+  }
+
   &-success {
     --bg: var(--button-ghost-bg);
     --bg-hover: var(--button-ghost-bg-hover);
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index 9d287d2d1..ff8018c4a 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -154,11 +154,15 @@
   --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
   --button-ghost-color: var(--base-80);
   --button-ghost-color-hover: var(--base-100);
+  --button-ghost-dimmed-color: var(--base-60);
+  --button-ghost-dimmed-color-hover: var(--base-100);
   //-- Inverted
   --button-ghost-inverted-bg: transparent;
   --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
   --button-ghost-inverted-color: var(--base-30);
   --button-ghost-inverted-color-hover: var(--base-10);
+  --button-ghost-dimmed-inverted-color: var(--base-50);
+  --button-ghost-dimmed-inverted-color-hover: var(--base-100);
 
   // Forms
   --form-bg: var(--base-0);
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index 19747b39a..3c0cec61f 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -147,11 +147,15 @@
   --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
   --button-ghost-color: var(--base-80);
   --button-ghost-color-hover: var(--base-100);
+  --button-ghost-dimmed-color: var(--base-60);
+  --button-ghost-dimmed-color-hover: var(--base-100);
   //-- Inverted
   --button-ghost-inverted-bg: transparent;
   --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
   --button-ghost-inverted-color: var(--base-30);
   --button-ghost-inverted-color-hover: var(--base-10);
+  --button-ghost-inverted-color: var(--base-30);
+  --button-ghost-inverted-color-hover: var(--base-10);
 
   // Forms
   --form-bg: var(--base-0);
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index c0bb202b6..8817bb409 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -145,11 +145,15 @@
   --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
   --button-ghost-color: var(--base-80);
   --button-ghost-color-hover: var(--base-100);
+  --button-ghost-dimmed-color: var(--base-60);
+  --button-ghost-dimmed-color-hover: var(--base-100);
   //-- Inverted
   --button-ghost-inverted-bg: transparent;
   --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
   --button-ghost-inverted-color: var(--base-30);
   --button-ghost-inverted-color-hover: var(--base-10);
+  --button-ghost-dimmed-inverted-color: var(--base-50);
+  --button-ghost-dimmed-inverted-color-hover: var(--base-100);
 
   // Forms
   --form-bg: #f4f5f7;
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index 8ab1dce93..71032a318 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -147,6 +147,8 @@
   --button-ghost-bg-hover: rgba(255, 255, 255, 0.035);
   --button-ghost-color: var(--base-80);
   --button-ghost-color-hover: var(--base-100);
+  --button-ghost-dimmed-color: var(--base-60);
+  --button-ghost-dimmed-color-hover: var(--base-100);
   //-- Inverted
   --button-ghost-inverted-bg: transparent;
   --button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1);
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index f03c47860..2808ac1af 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -145,11 +145,15 @@
   --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
   --button-ghost-color: var(--base-90);
   --button-ghost-color-hover: var(--base-100);
+  --button-ghost-dimmed-color: var(--base-60);
+  --button-ghost-dimmed-color-hover: var(--base-100);
   //-- Inverted
   --button-ghost-inverted-bg: transparent;
   --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
   --button-ghost-inverted-color: var(--base-30);
   --button-ghost-inverted-color-hover: var(--base-10);
+  --button-ghost-dimmed-inverted-color: var(--base-50);
+  --button-ghost-dimmed-inverted-color-hover: var(--base-100);
 
   // Forms
   --form-bg: #fff7f9;
diff --git a/app/javascript/articles/components/SaveButton.jsx b/app/javascript/articles/components/SaveButton.jsx
index 5450fae88..11beea1c7 100644
--- a/app/javascript/articles/components/SaveButton.jsx
+++ b/app/javascript/articles/components/SaveButton.jsx
@@ -34,7 +34,7 @@ export class SaveButton extends Component {
         <button
           type="button"
           className={`crayons-btn crayons-btn--s ${
-            isBookmarked ? 'crayons-btn--ghost' : 'crayons-btn--secondary'
+            isBookmarked ? 'crayons-btn--ghost-dimmed' : 'crayons-btn--secondary'
           }`}
           data-initial-feed
           data-reactable-id={article.id}
diff --git a/app/javascript/crayons/Button/__stories__/Button.stories.jsx b/app/javascript/crayons/Button/__stories__/Button.stories.jsx
index 177f67118..111bf9342 100644
--- a/app/javascript/crayons/Button/__stories__/Button.stories.jsx
+++ b/app/javascript/crayons/Button/__stories__/Button.stories.jsx
@@ -38,6 +38,7 @@ export const Default = () => (
         Danger: 'danger',
         Ghost: 'ghost',
         'Ghost Brand': 'ghost-brand',
+        'Ghost Dimmed': 'ghost-dimmed',
         'Ghost Success': 'ghost-success',
         'Ghost Warning': 'ghost-warning',
         'Ghost Danger': 'ghost-danger',
@@ -112,6 +113,7 @@ export const ButtonWithIcon = () => {
           Danger: 'danger',
           Ghost: 'ghost',
           'Ghost Brand': 'ghost-brand',
+          'Ghost Dimmed': 'ghost-dimmed',
           'Ghost Success': 'ghost-success',
           'Ghost Warning': 'ghost-warning',
           'Ghost Danger': 'ghost-danger',
diff --git a/app/javascript/crayons/Button/__stories__/button.html.stories.jsx b/app/javascript/crayons/Button/__stories__/button.html.stories.jsx
index fdfc8e430..bab68e1e8 100644
--- a/app/javascript/crayons/Button/__stories__/button.html.stories.jsx
+++ b/app/javascript/crayons/Button/__stories__/button.html.stories.jsx
@@ -59,6 +59,16 @@ Ghost.story = {
   name: 'Ghost',
 };
 
+export const GhostDimmed = () => (
+  <button type="button" className="crayons-btn crayons-btn--ghost-dimmed">
+    Ghost Dimmed Button label
+  </button>
+);
+
+Ghost.story = {
+  name: 'Ghost Dimmed',
+};
+
 export const GhostBrand = () => (
   <button type="button" className="crayons-btn crayons-btn--ghost-brand">
     Ghost Brand Button label
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb
index 2acb72d63..b0f468eb4 100644
--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@@ -26,7 +26,7 @@
     <% end %>
 
     <div class="align-center m:relative">
-      <button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
+      <button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
         <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
       </button>
       <div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
diff --git a/app/views/articles/_v2_form.html.erb b/app/views/articles/_v2_form.html.erb
index 6e35aa9ad..09044f4c4 100644
--- a/app/views/articles/_v2_form.html.erb
+++ b/app/views/articles/_v2_form.html.erb
@@ -37,7 +37,7 @@
       </div>
 
       <div class="crayons-article-form__close">
-        <a href="/" class="crayons-btn crayons-btn--ghost crayons-btn--icon" title="Close the editor">
+        <a href="/" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon" title="Close the editor">
           <%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: "Close") %>
         </a>
       </div>
@@ -67,7 +67,7 @@
       <% end %>
       <div class="crayons-article-form__body text-padding">
         <div class="crayons-article-form__toolbar">
-          <button class="crayons-btn crayons-btn--ghost crayons-btn--icon-left fw-normal" type="button">
+          <button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-left fw-normal" type="button">
             <%= (inline_svg_tag("image.svg", aria: true, class: "crayons-icon", title: "Image") + "Upload image").delete!("\n").html_safe %>
             <input type="file" id="image-upload-field" class="w-100 h-100 absolute left-0 right-0 top-0 bottom-0 overflow-hidden opacity-0 cursor-pointer" multiple accept="image/*" data-max-file-size-mb="25" />
           </button>
diff --git a/app/views/dashboards/_dashboard_article_row.html.erb b/app/views/dashboards/_dashboard_article_row.html.erb
index 178cb2e72..370230fbd 100644
--- a/app/views/dashboards/_dashboard_article_row.html.erb
+++ b/app/views/dashboards/_dashboard_article_row.html.erb
@@ -24,7 +24,7 @@
     <% end %>
   </div>
 
-  <div class="fs-s color-base-70">
+  <div class="fs-s color-base-60">
     <% if !article.published? %>
       <a href="<%= article.path %>/edit" class="crayons-indicator crayons-indicator--accent">Draft</a>
     <% else %>
@@ -59,7 +59,7 @@
         </span>
 
         <% if article.user_subscriptions_count > 0 %>
-          <a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="flex items-center crayons-btn crayons-btn--ghost crayons-btn--s fw-normal color-base-70" title="Subscriptions">
+          <a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="flex items-center crayons-btn crayons-btn--ghost-dimmed crayons-btn--s" title="Subscriptions">
             <%= inline_svg_tag("small-data.svg", aria: true, class: "crayons-icon mr-1", title: "Data") %>
             <%= article.user_subscriptions_count %>
           </a>
diff --git a/app/views/pages/crayons.html.erb b/app/views/pages/crayons.html.erb
index 732b86b23..3b5536f50 100644
--- a/app/views/pages/crayons.html.erb
+++ b/app/views/pages/crayons.html.erb
@@ -656,6 +656,16 @@
           <td><button class="crayons-btn crayons-btn--ghost" disabled>Button label</button></td>
           <td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost crayons-btn--inverted">Button label</button></td>
         </tr>
+        <tr>
+          <td class="fs-s">.crayons-btn--ghost-dimmed</td>
+          <td><button class="crayons-btn crayons-btn--ghost-dimmed">Button label</button></td>
+          <td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
+          <td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
+          <td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
+          <td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
+          <td><button class="crayons-btn crayons-btn--ghost-dimmed" disabled>Button label</button></td>
+          <td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--inverted">Button label</button></td>
+        </tr>
         <tr>
           <td class="fs-s">.crayons-btn--ghost-brand</td>
           <td><button class="crayons-btn crayons-btn--ghost-brand">Button label</button></td>