Sass Mixin For BEM-style Buttons – buttono

Preview:

Description:

buttono is a customizable Sass mixin for creating BEM (Block, Element, Modifier) style buttons for modern web apps.

How to use it:

1. Install and download.

# Yarn
$ yarn add buttono
# NPM
$ npm install buttono --save

2. Create BEM style buttons.

.c-button {
  @import "/path/to/buttono/buttono";
  $buttono-font-family: 'Roboto';
  @include buttono-block();
  &--default {
    @include buttono-style-modifier();
  }
  &--info {
    @include buttono-style-modifier($background-color: lightblue);
  }
}

<button class="c-button c-button--default">Default</button>
<button class="c-button c-button--info">Info</button>

3. Default variables.

$buttono-function-factor: -20% !default;
$buttono-background-color-lightness-threshold: 70% !default;
$buttono-font-family: null !default;
$buttono-background-color: #e0e0e0 !default;
$buttono-background-color-hover: auto !default;
$buttono-border-radius: 3px !default;
$buttono-font-size: 16px !default;
$buttono-line-height: (24 / 16) !default;
$buttono-color: #fff !default;
$buttono-color-alt: #333 !default;
$buttono-padding: 10px 20px !default;
$buttono-border-width: 0 !default;
$buttono-transition-duration: 0.4s !default;
$buttono-transition-property: background-color, color, border-color !default;
$buttono-include-disabled-styles: true !default;
$buttono-opacity-disabled: 0.7 !default;
$buttono-include-focus-styles: true !default;
$buttono-outline-width-focus: 2px !default;
$buttono-outline-style-focus: dotted !default;
$buttono-outline-color-focus: auto !default;
$buttono-outline-offset-focus: 1px !default;

4. Default mixins.

@mixin buttono-block(
  $transition-duration: $buttono-transition-duration,
  $transition-property: $buttono-transition-property,
  $border-width: $buttono-border-width,
  $cursor: pointer,
  $font-family: $buttono-font-family,
  $font-size: $buttono-font-size,
  $line-height: $buttono-line-height,
  $padding: $buttono-padding,
  $text-align: center,
  $vertical-align: middle,
  $display: inline-block,
  $include-disabled-styles: $buttono-include-disabled-styles
) {
  display: $display;
  padding: $padding;
  border: $border-width solid transparent;
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  text-align: $text-align;
  transition-duration: $transition-duration;
  user-select: none;
  vertical-align: $vertical-align;
  &:not(:disabled):not([aria-disabled='true']) {
    cursor: $cursor;
  }
  @if not($transition-duration == null) {
    transition-property: $transition-property;
  }
  &:hover,
  &:focus {
    text-decoration: none;
  }
  @if $include-disabled-styles {
    &:disabled,
    &[aria-disabled='true'] {
      box-shadow: none;
    }
  }
}
@mixin buttono-style-modifier(
  $background-color: $buttono-background-color,
  $background-color-hover: $buttono-background-color-hover,
  $color: auto,
  $color-hover: auto,
  $border-width: $buttono-border-width,
  $border-color: undefined,
  $border-color-hover: undefined,
  $border-radius: $buttono-border-radius,
  $background-color-lightness-threshold: $buttono-background-color-lightness-threshold,
  $opacity-disabled: $buttono-opacity-disabled,
  $include-disabled-styles: $buttono-include-disabled-styles,
  $background-color-disabled: undefined,
  $border-color-disabled: undefined,
  $color-disabled: undefined,
  $include-focus-styles: $buttono-include-focus-styles,
  $outline-width-focus: $buttono-outline-width-focus,
  $outline-style-focus: $buttono-outline-style-focus,
  $outline-color-focus: $buttono-outline-color-focus,
  $outline-offset-focus: $buttono-outline-offset-focus
) {
  @if $background-color-hover == auto {
    $background-color-hover: scale-color($background-color, $lightness: $buttono-function-factor);
  }
  @if ($border-color == auto) and not($background-color == null) {
    $border-color: scale-color($background-color, $lightness: $buttono-function-factor);
  }
  @if ($border-color-hover == auto) and not($background-color-hover == null) {
    $border-color-hover: scale-color($background-color-hover, $lightness: $buttono-function-factor);
  }
  @if $border-color == undefined {
    $border-color: $background-color;
  }
  @if $border-color-hover == undefined {
    $border-color-hover: $background-color-hover;
  }
  $background-color-lightness: 0;
  $background-color-hover-lightness: 0;
  @if not($background-color == null) {
    $background-color-lightness: lightness($background-color);
  }
  @if $background-color == transparent {
    $background-color-lightness: $background-color-lightness-threshold + 1%;
  }
  @if not($background-color-hover == null) {
    $background-color-hover-lightness: lightness($background-color-hover);
  }
  @if $color == auto {
    $color: if(
      $background-color-lightness > $background-color-lightness-threshold,
      $buttono-color-alt,
      $buttono-color
    );
  }
  @if $color-hover == auto {
    $color-hover: if(
      $background-color-hover-lightness > $background-color-lightness-threshold,
      $buttono-color-alt,
      $buttono-color
    );
  }
  background-color: $background-color;
  border-color: $border-color;
  border-radius: $border-radius;
  color: $color;
  @if not($border-width == $buttono-border-width) {
    border-width: $border-width;
  }
  &:hover {
    background-color: $background-color-hover;
    border-color: $border-color-hover;
    color: $color-hover;
  }
  @if $outline-color-focus == auto {
    $outline-color-focus: if(
      $background-color-lightness > $background-color-lightness-threshold,
      $color,
      $background-color
    );
  }
  @if $include-focus-styles {
    &:focus {
      outline: $outline-width-focus $outline-style-focus $outline-color-focus;
      outline-offset: $outline-offset-focus;
    }
  }
  @if $background-color-disabled == undefined {
    $background-color-disabled: $background-color;
  }
  @if $border-color-disabled == undefined {
    $border-color-disabled: $background-color;
  }
  @if $color-disabled == undefined {
    $color-disabled: $color;
  }
  @if $include-disabled-styles {
    &:disabled,
    &[aria-disabled='true'] {
      background-color: $background-color-disabled;
      border-color: $border-color-disabled;
      color: $color-disabled;
      opacity: $opacity-disabled;
    }
  }
}

Changelog:

v1.0.4 (07/04/2021)

• Bugfix