Seed Button - v0.3.0

Update

Update button colors with seed-color-scheme config 🖌

This allows for better flexibility in adjusting button colors. The user can now leverage the _color() mixin/function, without having to manually import config files + doing _deep-extend() (which was the previous work-around).

The color defines are flagged with default, and live under /configs/_color.scss.

Examples:

Let's say, we want to override the default buttons base background, border, and text colors. You can now do this:

// Import the color scheme dependency
@import "pack/seed-color-scheme/_index";

// Use the _color() mixin, and pass in whatever key/values you wish to set
@include _color((
  button: (
    default: (
      background: (
        default: red,
      ),
      border: (
        default: red,
      ),
      text: (
        default: red,
      ),
    ),
  ),
));

// Add seed-button
@import "pack/seed-button/_index";

This update would have made this much easier to accomplish.

Dependency updates

Added

• seed-color-scheme#v0.3.0

Removed

• seed-states

Seed Button - v0.2.2

Updates

• Refactored tests
• Add .npmignore to reduce extra files being downloaded

Seed Button - v0.2.1

Updates

• Normalize box-shadow for link modifier (active, focus, focus:active)
• Add tests

Resolves: #15

Seed Button - v0.2.0

Updates

Style rules

• Change link:focus border to transparent
• Change link:focus + state border to transparent
• Change link:focus text-decoration to underline

Tests

• Add tests for changes

Maintanence

• Update dependencies
• Add .npmignore
• Remove example/dist + updates build scripts

Add focus+state styles for button link

Resolves: #13

Seed Button - v0.1.0

Changes

Adds generator mixins

2 mixins have been added to make it easier to generate the styles for this component pack, but also allows users to add new styles to be generated.

The mixins are:

@include generate-button-styles;
@include generate-button-states;

Note: generate-button-styles includes generate-button-states, but it only does this if the appropriate attribute is defined in the configuration.

A button style configuration looks like this:

$config: (
  _generate-states: false
  background: (
    default: #3197D6,
    hover: darken(#3197D6, 4),
    active: darken(#3197D6, 8)
  ),
  border: (
    default: #237AB3,
    hover: #237AB3,
    active: #237AB3,
    focus: #237AB3
  ),
  box-shadow: (
    focus: 0 0 0 1px rgba(white, 0.4) inset
  ),
  text: #fff
) !default;

The output css will look something like this:

.c-button--primary {
  background-color: #3197D6;
  border-color: #237AB3;
  color: #fff; }
  .c-button--primary:not([disabled]):not(.is-disabled):hover {
    background-color: #288cca;
    border-color: #237AB3; }
  .c-button--primary:not([disabled]):not(.is-disabled):active {
    background-color: #2581b9;
    border-color: #237AB3; }
  .c-button--primary:not([disabled]):not(.is-disabled):focus {
    border-color: #237AB3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset; }
    .c-button--primary:not([disabled]):not(.is-disabled):focus:active {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px 2px rgba(0, 0, 0, 0.2) inset; }

By default, the primary and link styles are included in $seed-button-styles.