beyond_canvas 0.22.0.pre → 0.23.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a4ead3a43e09b4b3e09f2b34189ae10000390b92cc9114311229b3b7564cdd7
-  data.tar.gz: b1f7cf8af577809cff6869bb70e5dae13b79ba9af101e462e41b1ab6bafa3d8d
+  metadata.gz: b1de2d82164f7101979a0becd0510d4ba32071d9033b6a52fa7994c89884c0c7
+  data.tar.gz: 9d78929e71b97c887814da55ae64722be0ac5aa6f835167c9516df056ad99f4b
 SHA512:
-  metadata.gz: 53c3c8df6355da6859e55458b3cec85b6caaf1dac8fcce848e5dd590636d42c1018f9765fd5f8b8e478bc2d79c6d503b9fa8211fdccb317b9af1ab509cf26a51
-  data.tar.gz: a29c6b62aae56c8a3dc379252a22c6b84f8c014a38011669b5b2d3939009927631eae03f2b2663b688703c17b736e0cf2431fcc10003641e404cc97998128144
+  metadata.gz: abeafe5140b724a90a4c156d909dc4c2a06d9a5e757be3ff4a4e1d92c36454181fe584776bceb84fbdd4149cb9483e7494325a21e606dd0a5cc5bbb06ac57051
+  data.tar.gz: e738177bf4e47df314ab879242279aa28edb2b128d08a4789936bab37d5a049dc769d57acfe21c1f3ccdc3165a3ef744ef2e99cf1cf717e9a283a81362c43427

data/app/assets/images/icons/adblocker.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265 265">
+    <polygon class="surface" points="160.21 93.5 116.18 93.5 85.05 124.63 85.05 168.66 116.18 199.79 132.95 199.79 132.95 259.83 139.95 259.83 139.95 199.79 160.21 199.79 191.34 168.66 191.34 124.63 160.21 93.5"/>
+    <path class="bubbles" d="M68.8,38.6a4.46,4.46,0,0,1-4.4-4.5,4.53,4.53,0,0,1,4.5-4.4,4.45,4.45,0,1,1-.1,8.9ZM130.6,1a2.26,2.26,0,0,0-2.3,2.3,2.3,2.3,0,0,0,4.6,0A2.26,2.26,0,0,0,130.6,1ZM54.8,138.6a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,54.8,138.6Zm56.7-94.4a2.3,2.3,0,1,0-4.6,0,2.2,2.2,0,0,0,2.3,2.3A2.26,2.26,0,0,0,111.5,44.2Zm-39,25.6a2.35,2.35,0,1,0,2.3,2.4A2.23,2.23,0,0,0,72.5,69.8ZM69,105.4a2.3,2.3,0,1,0,2.3,2.3A2.33,2.33,0,0,0,69,105.4ZM30.59,65a2.35,2.35,0,0,0,2.4-2.3,2.23,2.23,0,0,0-2.3-2.4,2.35,2.35,0,1,0-.1,4.7ZM45.2,8a2.35,2.35,0,1,0,2.3,2.4A2.23,2.23,0,0,0,45.2,8Zm-16,92.37a4.45,4.45,0,1,0-4.4-4.5A4.34,4.34,0,0,0,29.2,100.4Zm0,69.5a5.91,5.91,0,0,0-5.9,5.9,5.9,5.9,0,0,0,11.8,0A6,6,0,0,0,29.2,169.9ZM7.7,134.6a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,7.7,134.6ZM114.8,65.42a4.7,4.7,0,1,0,4.7,4.7A4.69,4.69,0,0,0,114.8,65.42ZM239.5,164a5.9,5.9,0,1,0,5.8,5.9A5.83,5.83,0,0,0,239.5,164Zm-14.72-61.17a4.8,4.8,0,0,0-4.8,4.8,4.8,4.8,0,0,0,9.6,0A4.8,4.8,0,0,0,224.78,102.83ZM257.3,74.5a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,257.3,74.5Zm-2.63,49.76a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,254.67,124.26Zm-5.56-92.44a2.3,2.3,0,1,0,2.3,2.3A2.26,2.26,0,0,0,249.11,31.82Zm-27,106.58a2.3,2.3,0,1,0,2.3,2.3A2.2,2.2,0,0,0,222.1,138.4ZM158.8,74.5a2.3,2.3,0,1,0,2.3,2.3A2.33,2.33,0,0,0,158.8,74.5Zm52.31-60.73a2.35,2.35,0,1,0,2.3,2.4A2.23,2.23,0,0,0,211.11,13.77ZM165.7,12.1a4.1,4.1,0,1,0,4.1,4.1A4.12,4.12,0,0,0,165.7,12.1Zm-7.6,33a2.33,2.33,0,0,0-2.3-2.3,2.3,2.3,0,1,0,2.3,2.3Zm46,0a4.7,4.7,0,1,0,4.7,4.7A4.69,4.69,0,0,0,204.1,45.1Zm.38,34.58a2.3,2.3,0,1,0,2.3,2.3A2.33,2.33,0,0,0,204.48,79.68Z" transform="translate(0 -1)"/>
+    <path class="outline" d="M144.37,125.34h-7.5V122h-9v6.67h-7.5v14.76h-6.9l-.34,20.28L124,181.85h24.41l3.43-25.75V134.72h-7.5Zm6,10.88V156l-3.25,24.35H124.87l-10.24-17,.32-18.38h5.4v12.35h1.52V130.18h6v22.34h1.5v-29h6v30.21h1.5V126.84h6V156.1h1.5V136.22ZM137.25,263.71V205.82h17.57l31.57-31.57V129.61L154.82,98H110.18L78.61,129.61v44.64l31.57,31.57h17.57v57.89H0v1.5H265v-1.5ZM97.93,191.46,114.7,174.7l-1.06-1.06L96.87,190.4,94.46,188l16.76-16.76-1.06-1.06L93.4,186.92,80.11,173.63v-43.4L110.8,99.54h43.4l13.41,13.4-15.34,15.33,1.06,1.06L168.67,114l2.41,2.42-15.33,15.33,1.06,1.06,15.33-15.33,12.75,12.75v43.4L154.2,204.32H110.8Zm31.32,72.25V205.82h6.5v57.89Z" transform="translate(0 -1)"/>
+</svg>

data/app/assets/images/icons/checkbox_checked.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#97C344" d="M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z"></path></svg>

data/app/assets/images/icons/checkbox_unchecked.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z"></path></svg>

data/app/assets/images/icons/external_link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg>

data/app/assets/images/icons/toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="44" height="24" rx="12" ry="12"></rect><path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.4-10-10-10zm-.6 13.5l-1.8 1.9-1.8-1.8L6.6 14l1.8-1.8 2.5 2.6 6.9-6.9 1.8 1.8-6.9 6.7z"></path><path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.5-10-10-10zm5.3 13.4l-1.8 1.8-3.4-3.4-3.4 3.4-1.8-1.8 3.4-3.4-3.4-3.4L10 7.7l3.4 3.4 3.4-3.4 1.8 1.8-3.5 3.4 3.5 3.4z"></path></svg>

data/app/assets/images/icons/toggle_checked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.3 2.9 20 20">
+  <path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.4-10-10-10zm-.6 13.5l-1.8 1.9-1.8-1.8L6.6 14l1.8-1.8 2.5 2.6 6.9-6.9 1.8 1.8-6.9 6.7z"/>
+</svg>

data/app/assets/images/icons/toggle_unchecked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.3 2.9 20 20">
+  <path d="M13.3 2.9c-5.6 0-10 4.4-10 10s4.4 10 10 10 10-4.4 10-10-4.5-10-10-10zm5.3 13.4l-1.8 1.8-3.4-3.4-3.4 3.4-1.8-1.8 3.4-3.4-3.4-3.4L10 7.7l3.4 3.4 3.4-3.4 1.8 1.8-3.5 3.4 3.5 3.4z"/>
+</svg>

data/app/assets/javascripts/beyond_canvas/base.js

@@ -2,6 +2,7 @@
  * Warning: This file is auto-generated, do not modify. Instead, make your changes in 'app/javascript/beyond_canvas/' and run `yarn build`
  */
 //= require jquery3
+//= require rails-ujs
 //= require_self
 
 (function(factory) {
@@ -11,7 +12,7 @@
   var SPINNER_ANIMATION_TIMEOUT = 125;
   var BUTTON_SELECTORS = '[class^="button"]';
   (function($) {
-    var onDOMReady = function onDOMReady(e) {
+    var onDOMReady = function onDOMReady() {
       var inputs = $("input, textarea, select").not(":input[type=button], :input[type=submit], :input[type=reset]");
       inputs.each(function() {
         var input = $(this);
@@ -29,26 +30,33 @@
     $(document).on("confirm:complete", function() {
       $.restoreActionElements();
     });
-    $(document).on("click", BUTTON_SELECTORS, function() {
+    $(document).on("click", BUTTON_SELECTORS, function(e) {
+      var _e$target$attributes$;
       var button = $(this);
+      if (((_e$target$attributes$ = e.target.attributes.getNamedItem("target")) == null ? void 0 : _e$target$attributes$.value) === "_blank") return;
       $.disableActionElements();
       if (!button.hasClass("button--no-spinner")) {
         $(this).showSpinner();
       }
     });
     $(document).on("ready page:load turbolinks:load", onDOMReady);
+    $(document).on("beforeunload turbolinks:before-visit", function() {
+      $.restoreActionElements();
+    });
   })(jQuery);
   $.extend({
     restoreActionElements: function restoreActionElements() {
-      $(BUTTON_SELECTORS).each(function(_, button) {
-        setTimeout(function() {
-          $(button).find(".spinner").hide();
-          $(button).width($(button).data("oldWidth"));
-        }, SPINNER_ANIMATION_TIMEOUT);
-      });
-      $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
-        $(this).removeClass("actions--disabled");
-      });
+      setTimeout(function() {
+        $(BUTTON_SELECTORS).each(function(_, button) {
+          setTimeout(function() {
+            $(button).find(".spinner").hide();
+            $(button).width($(button).data("oldWidth"));
+          }, SPINNER_ANIMATION_TIMEOUT);
+        });
+        $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
+          $(this).removeClass("actions--disabled");
+        });
+      }, 100);
     },
     disableActionElements: function disableActionElements() {
       $('a, input[type="submit"], input[type="button"], input[type="reset"], button').each(function() {
@@ -99,22 +107,32 @@
       }, 100);
     };
     $(document).on("click", ".flash__close", function() {
-      closeAlert();
+      $.closeAlert();
     });
-    $(document).on("ready page:load turbolinks:load", onDOMReady);
+    $(document).on("ready page:load turbolinks:load bc.flash.shown", onDOMReady);
   })(jQuery);
-  function closeAlert() {
-    $(".flash").removeClass("flash--shown").delay(700).queue(function() {
-      $(this).remove();
-    });
-  }
+  $.extend({
+    showFlash: function showFlash(status, message) {
+      var flash = '\n        <div class="flash">\n          <div class="flash__icon flash__icon--' + status + '">\n            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"></path></svg>\n          </div>\n          <div class="flash__message">\n            ' + message + '\n          </div>\n          <div class="flash__close">\n            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>\n          </div>\n        </div>';
+      $(document).trigger("bc.flash.show");
+      $("#flash").html(flash);
+      $(document).trigger("bc.flash.shown");
+    },
+    closeAlert: function closeAlert() {
+      $(document).trigger("bc.flash.hide");
+      $(".flash").removeClass("flash--shown").delay(700).queue(function() {
+        $(this).remove();
+      });
+      $(document).trigger("bc.flash.hidden");
+    }
+  });
   (function($) {
     var onDOMReady = function onDOMReady() {
       $('input[type="file"]').each(function() {
         var $input = $(this), $label = $(".input__file__text." + $input.attr("id")), labelVal = $label.html();
         $input.on("change", function(e) {
           var fileName = "";
-          if (this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "").replace("{count}", this.files.length); else if (e.target.value) fileName = e.target.value.split("\\").pop();
+          if (this.files && this.files.length > 1) fileName = (this.getAttribute("data-multiple-caption") || "{count} files selected").replace("{count}", this.files.length); else if (e.target.value) fileName = e.target.value.split("\\").pop();
           if (fileName) $label.html('<svg class="input__file__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z"/></svg>' + fileName); else $label.html(labelVal);
         });
         $input.on("focus", function() {
@@ -124,23 +142,51 @@
         });
       });
     };
+    $(document).on("ready page:load turbolinks:load", function() {
+      var observer = new MutationObserver(function() {
+        return onDOMReady();
+      });
+      onDOMReady();
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    });
+  })(jQuery);
+  (function($) {
+    var onDOMReady = function onDOMReady() {
+      $(".modal").each(function() {
+        $(this).hide().css("visibility", "visible");
+      });
+    };
+    $(document).on("click", '[data-toggle="modal"]', function(e) {
+      e.preventDefault();
+      var dataTarget = $(this).attr("data-target");
+      $.restoreActionElements();
+      $(dataTarget).showModal();
+    });
+    $(document).on("click", '[data-dismiss="modal"]', function(e) {
+      e.preventDefault();
+      var dataTarget = $(this).closest(".modal");
+      $.restoreActionElements();
+      $(dataTarget).hideModal();
+    });
     $(document).on("ready page:load turbolinks:load", onDOMReady);
   })(jQuery);
-  $.extend({
-    displayModal: function displayModal(content, options) {
-      if (options === void 0) {
-        options = {};
-      }
-      $("#modal").find("#modal__content").html(content);
-      $("#modal").css("display", "flex");
+  $.fn.extend({
+    showModal: function showModal() {
+      var modal = $(this);
+      modal.trigger("bc.modal.show");
       $.restoreActionElements();
-      $(document).trigger("modal:opened", options["extraEventParameters"]);
+      modal.css("display", "flex");
+      modal.trigger("bc.modal.shown");
     },
-    closeModal: function closeModal() {
-      $("#modal").find("#modal__content").empty();
-      $("#modal").css("display", "none");
+    hideModal: function hideModal() {
+      var modal = $(this);
+      modal.trigger("bc.modal.hide");
       $.restoreActionElements();
-      $(document).trigger("modal:closed");
+      modal.hide();
+      modal.trigger("bc.modal.hidden");
     }
   });
 });

data/app/assets/stylesheets/beyond_canvas/base.scss

@@ -1,39 +1,40 @@
 @import "bourbon";
 
 @import "settings/breakpoints";
-@import "settings/variables";
+@import "settings/constant_variables";
+@import "settings/base_variables";
 @import "settings/reset_css";
 @import "settings/typography";
 
 @import "utilities/functions";
 @import "utilities/mixins";
 
-@import "components/action_bar";
-@import "components/actions";
-@import "components/breadcrumbs";
+@import "components/action_bar"; // Done
+@import "components/actions"; // Done
+@import "components/breadcrumbs"; // Done
 @import "components/buttons";
 @import "components/cards";
 @import "components/collapse";
-@import "components/comments";
 @import "components/debug";
-@import "components/flash";
-@import "components/forms";
+@import "components/flash"; // Done
+@import "components/forms"; // Done
 @import "components/grids";
 @import "components/inputs";
-@import "components/layouts";
+@import "components/layouts"; // Done
 @import "components/links";
 @import "components/main";
-@import "components/margins";
+@import "components/margins"; // Done
 @import "components/markdown";
 @import "components/menu";
-@import "components/modals";
-@import "components/notices";
-@import "components/relative";
+@import "components/modals"; // Done
+@import "components/notices"; // Done
+@import "components/relative"; // Done
 @import "components/scrollbox";
-@import "components/select2";
+@import "components/select2"; // Done
 @import "components/sidebar";
-@import "components/spinner";
-@import "components/statuses";
-@import "components/tables";
-@import "components/texts";
-@import "components/titles";
+@import "components/spinner"; // Done
+@import "components/statuses"; // Done
+@import "components/step_list"; // Done
+@import "components/tables"; // Done
+@import "components/texts"; // Done
+@import "components/titles"; // Done

data/app/assets/stylesheets/beyond_canvas/components/_action_bar.scss

@@ -1,8 +1,8 @@
 .action_bar {
   width: 100%;
-  height: $action-bar-height;
-  background-color: $action-bar-background;
-  border-bottom: $action-bar-shadow;
+  height: var(--header-bar-height);
+  background-color: var(--workspace-toolbar-background);
+  border-bottom: var(--workspace-toolbar-border);
   padding: 0 25px;
   box-sizing: border-box;
   display: flex;
@@ -13,16 +13,21 @@
   z-index: 999;
 
   &--menu {
-    top: $menu-height;
+    top: var(--menu-height);
   }
 
-  &--left {
+  &--left,
+  &--right {
     display: flex;
+    align-items: center;
+    min-width: 50%;
+  }
+
+  &--left {
     justify-content: flex-start;
   }
 
   &--right {
-    display: flex;
     justify-content: flex-end;
   }
 }

data/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss

@@ -5,7 +5,7 @@
   .home-icon {
     width: 12px;
     height: 12px;
-    fill: $breadcrum-color-current;
+    fill: var(--breadcrumb-icon);
   }
 
   .arrow-right {
@@ -13,20 +13,20 @@
     height: 8px;
     margin-left: 7px;
     margin-right: 7px;
-    fill: $breadcrum-color;
+    fill: var(--breadcrumb-text);
   }
 }
 
 .breadcrumb {
   &__item {
-    color: $breadcrum-color-current;
+    color: var(--breadcrumb-link);
 
     &:hover {
-      color: $breadcrum-color-hover
+      color: var(--breadcrumb-link-hover);
     }
 
     &--current {
-      color: $breadcrum-color;
+      color: var(--breadcrumb-text);
       pointer-events: none;
     }
   }

data/app/assets/stylesheets/beyond_canvas/components/_buttons.scss

@@ -1,75 +1,62 @@
 %button {
-  @include padding($button-padding);
-
-  @if $button-box-shadow != true {
-    padding-top: 7px;
-  }
-
   align-items: center;
-  border-radius: $button-border-radius;
-  border-width: 1px;
-  border-style: solid;
+  border-radius: var(--button-borderRadius);
+  border-width: 0;
   cursor: pointer;
   display: inline-flex;
-  font-weight: $button-font-weight;
+  font-weight: 700;
   justify-content: flex-end;
   line-height: 1;
   outline: none;
+  padding: var(--button-horizontal-padding) 12px;
   transition: $main-transition;
+  white-space: nowrap;
 }
 
 %button_disabled {
-  border-color: $button-disabled-background;
-  background-color: $button-disabled-background;
+  border-color: var(--button-disabled-background);
+  background-color: var(--button-disabled-background);
   pointer-events: none;
-  color: $button-disabled-color;
-  text-shadow: $button-disabled-text-shadow;
+  color: var(--button-disabled-text);
+  text-shadow: var(--button-disabled-textShadow);
   border-bottom-color: #aaaaaa;
 }
 
+@mixin button-border-bottom($border-bottom-color) {
+  border-bottom: var(--button-borderBottom-width) solid var(#{$border-bottom-color});
+}
 
-@mixin button-solid($background, $color) {
-  @include background-color-darken($background, 10%);
-
-  color: $color;
-
-  .spinner {
-    display: none;
+@mixin button-solid($background, $background-hover, $color) {
+  @include spinner($color);
 
-    > div {
-      background-color: $color;
-    }
-  }
+  background-color: var(#{$background});
+  color: var(#{$color});
 
   &:hover {
-    border-color: darken($background, 10%);
+    background-color: var(#{$background-hover});
   }
 }
 
-@mixin button-transparent($background) {
-  background-color: transparent;
-  border-color: $background;
-  color: $background;
+@mixin button-transparent($background, $background-hover, $color) {
+  @include spinner($color);
 
-  .spinner {
-    display: none;
-
-    > div {
-      background-color: $background;
-    }
-  }
+  background-color: var(#{$background});
+  color: var(#{$color});
+  padding: calc(var(--button-horizontal-padding) - var(--button-outline-border-width)) 12px var(--button-horizontal-padding);
+  border: var(--button-outline-border-width) solid var(--button-outline-border-color);
 
   &:hover {
-    background-color: lighten($background, 40%);
+    background-color: var(#{$background-hover});
   }
 }
 
-@mixin button-border($background) {
-  border-color: $background;
+@mixin spinner($background) {
+  .spinner {
+    display: none;
 
-  @if $button-box-shadow == true {
-    border-bottom-width: 2px;
-    border-bottom-color: darken($background, 10%);
+    > div {
+      background-color: var(#{$background});
+    }
   }
 }
 
@@ -77,42 +64,34 @@ input[type=file][disabled] ~ .button__transparent--primary {
   @extend %button_disabled;
 }
 
+[class^='button__'] {
+  &:disabled,
+  &[disabled] {
+    @extend %button_disabled;
+  }
+}
+
 .button {
   &__solid {
     &--primary {
       @extend %button;
 
-      @include button-solid($button-primary-background, $button-primary-color);
-      @include button-border($button-primary-background);
-
-      &:disabled,
-      &[disabled] {
-        @extend %button_disabled;
-      }
+      @include button-solid(--button-primary-background, --button-primary-background-hover, --button-text);
+      @include button-border-bottom(--button-primary-borderBottom-color);
     }
 
     &--secondary {
       @extend %button;
 
-      @include button-solid($button-secondary-background, $button-secondary-color);
-      @include button-border($button-secondary-background);
-
-      &:disabled,
-      &[disabled] {
-        @extend %button_disabled;
-      }
+      @include button-solid(--button-default-background, --button-default-background-hover, --button-text);
+      @include button-border-bottom(--button-default-borderBottom-color);
     }
 
     &--danger {
       @extend %button;
 
-      @include button-solid($button-danger-background, $button-danger-color);
-      @include button-border($button-danger-background);
-
-      &:disabled,
-      &[disabled] {
-        @extend %button_disabled;
-      }
+      @include button-solid(--button-danger-background, --button-danger-background-hover, --button-text);
+      @include button-border-bottom(--button-danger-borderBottom-color);
     }
   }
 
@@ -120,37 +99,8 @@ input[type=file][disabled] ~ .button__transparent--primary {
     &--primary {
       @extend %button;
 
-      @include button-transparent($button-primary-background);
-      @include button-border($button-primary-background);
-
-      &:disabled,
-      &[disabled] {
-        @extend %button_disabled;
-      }
-    }
-
-    &--secondary {
-      @extend %button;
-
-      @include button-transparent($button-secondary-background);
-      @include button-border($button-secondary-background);
-
-      &:disabled,
-      &[disabled] {
-        @extend %button_disabled;
-      }
-    }
-
-    &--danger {
-      @extend %button;
-
-      @include button-transparent($button-danger-background);
-      @include button-border($button-danger-background);
-
-      &:disabled,
-      &[disabled] {
-        @extend %button_disabled;
-      }
+      @include button-transparent(--button-outline-background, --button-outline-background-hover, --button-outline-text);
+      @include button-border-bottom(--button-primary-borderBottom-color);
     }
   }
 }