hsnaydd / buttono

.c-button {
  // Note that! The exact path will differ depending on your folder structure.
  @import "node_modules/buttono/buttono";

  $buttono-font-family: Helvetica;

  @include buttono-block();

  &--default {
    @include buttono-style-modifier();
  }

  &--primary {
    @include buttono-style-modifier($background-color: lightblue);
  }
}

// Background color lightness on hover for buttons.
// Type: number
$buttono-function-factor: -20% !default;

// Background lightness threshold. With this variable, the mixin decides
// the text color of the button. if the background color lightness is
// greater than the threshold, the mixin chooses the alternative color.
// Type: number
$buttono-background-color-lightness-threshold: 70% !default;

// Font family for button elements.
// Type: string
$buttono-font-family: null !default;

// Default background color for `buttono-style-modifier` mixin.
// Type: color
$buttono-background-color: #e0e0e0 !default;

// Default Background color on hover.
// `auto` value means that the mixin generates the background
// color on hover itself
// Type: color | auto
$buttono-background-color-hover: auto !default;

// Default border radius.
// Type: number
$buttono-border-radius: 3px !default;

// Default font size.
// Type: number
$buttono-font-size: 16px !default;

// Default line-height.
// Type: number
$buttono-line-height: (24 / 16) !default;

// Font color for buttons.
// Type: color
$buttono-color: #fff !default;

// Alternative font color for buttons.
// Type: color
$buttono-color-alt: #333 !default;

// Padding inside buttons.
// Type: list
$buttono-padding: 10px 20px !default;

// Border width for buttons.
// Type: number
$buttono-border-width: 0 !default;

// Transition duration for buttons.
// Type: number
$buttono-transition-duration: 0.4s !default;

// Transition property for buttons.
// Type: list
$buttono-transition-property: background-color, color, border-color !default;

// You can specify whether to include "disabled styles" through this variable
// Type: boolean
$buttono-include-disabled-styles: true !default;

// Opacity for a disabled button.
// Type: number
$buttono-opacity-disabled: 0.5 !default;

// You can specify whether to include "focus styles" through this variable
// Type: boolean
$buttono-include-focus-styles: true !default;

// Default outline width on focus state
// Type: number
$buttono-outline-width-focus: 2px !default;

// Default outline style on focus state
// Type: string
$buttono-outline-style-focus: dotted !default;

// Default outline color in focus state
// `auto` value means that the mixin generates the outline color on focus itself
// Type: color | auto
$buttono-outline-color-focus: auto !default;

// Default outline offset in focus state
// Type: string
$buttono-outline-offset-focus: 1px !default;

@mixin buttono-block(

  // Transition duration for buttons.
  // Type: number
  $transition-duration: $buttono-transition-duration,

  // Transition Property for buttons
  // Type: list
  $transition-property: $buttono-transition-property,

  // Border width for buttons
  // Type: number
  $border-width: $buttono-border-width,

  // Cursor for buttons
  // Type: string
  $cursor: pointer,

  // Font family for buttons
  // Type: string
  $font-family: $buttono-font-family,

  // Font size for buttons
  // Type: number
  $font-size: $buttono-font-size,

  // Line height for buttons
  // Type: number
  $line-height: $buttono-line-height,

  // Padding inside buttons.
  // Type: number
  $padding: $buttono-padding,

  // Text align for buttons
  // Type: string
  $text-align: center,

  // Vertical align for buttons
  // Type: string
  $vertical-align: middle,

  // Display property for buttons
  // Type: string
  $display: inline-block,

  // You can specify whether to include "disabled styles" through this variable
  // Type: boolean
  $include-disabled-styles: $buttono-include-disabled-styles
) {
  // ... mixin content ...
}

@mixin buttono-style-modifier(
  // Background color for button.
  // Type: color
  $background-color: $buttono-background-color,

  // Background color on hover for button.
  // `auto` value means that the mixin generates the background
  // color on hover itself
  // Type: color | auto
  $background-color-hover: $buttono-background-color-hover,

  // Font color for button.
  // `auto` value means that the mixin decides which color to apply to the button
  // if the background color lightness is
  // lower than the threshold, the mixin chooses the normal color,
  // if not chooses the alternative color.
  // Type: color | auto
  $color: auto,

  // Font color for button on hover.
  // `auto` value means that the mixin decides which color to apply to the button
  // if the background color hover lightness is
  // lower than the threshold, the mixin chooses the normal color,
  // if not chooses the alternative color.
  // Type: color | auto
  $color-hover: auto,

  // Border width for buttons.
  // Type: number
  $border-width: $buttono-border-width,

  // Border color for buttons.
  // if you want to remove this propery from mixin output, pass this argument with null value
  // if the argument value is `undefined` the mixin will set the background color to border color.
  // Type: color | undefined
  $border-color: undefined,

  // Border color for buttons on hover.
  // `undefined` value means that the mixin will set the background color to border color.
  // `auto` value means that the mixin will generate the background color for hover state
  // Type: color | undefined | auto
  $border-color-hover: undefined,

  // Border radius for buttons.
  // Type: number
  $border-radius: $buttono-border-radius,

  // Background color lightness threshold
  // if you want to overwrite the global background color lightness threshold,
  // pass this argument with the value that you want.
  // Type: number
  $background-color-lightness-threshold: $buttono-background-color-lightness-threshold,

  // Opacity for a disabled button.
  // Type: number
  $opacity-disabled: $buttono-opacity-disabled

  // You can overwrite the global include-disabled-styles variable with this argument.
  // Type: boolean
  $include-disabled-styles: $buttono-include-disabled-styles,

  // Background color for button on disabled status.
  // `undefined` value means that the background color in disabled state will be the same with the background color in normal state
  // Type: color | undefined
  $background-color-disabled: undefined,

  // Border color for button on disabled status.
  // `undefined` value means that the border color in disabled state will be the same with the background color in normal state
  // Type: color | undefined
  $border-color-disabled: undefined,

  // Font color for button on disabled status.
  // `undefined` value means that the font color in disabled state will be the same with the font color in normal state
  // Type: color | undefined
  $color-disabled: undefined,

  // You can specify whether to include "focus styles" through this variable
  // Type: boolean
  $include-focus-styles: $buttono-include-focus-styles,

  // Outline width on focus state
  // Type: number
  $outline-width-focus: $buttono-outline-width-focus,

  // Outline style on focus state
  // Type: string
  $outline-style-focus: $buttono-outline-style-focus,

  // Outline color in focus state
  // `auto` value means that the mixin generates the outline color on focus itself
  // Type: color | auto
  $outline-color-focus: $buttono-outline-color-focus,

  // Outline offset in focus state
  // Type: string
  $outline-offset-focus: $buttono-outline-offset-focus
) {
  // ... mixin content ...
}