Update bulma to the latest version 🚀

[greenkeeper]

The devDependency bulma was updated from 0.7.5 to 0.8.0.

This version is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

---

Publisher: jgthms
License: MIT

Release Notes for 0.8.0

Big update

Larger form controls

Controls and buttons are now 2.5em high. You can revert this resizing by setting these previous values:

$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})
$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em 

Light and dark colors

Each main color ("primary", "info", "success", "warning", "danger") now has a *-light and *-dark version. They are calculated using 2 new color functions:

• findLightColor() which finds the light version of a color
• findDarkolor() which finds the dark version of a color

The light colors are used by the button element, while the light and dark colors are used by the message component.

Panel colors

The panel component is now available in all the different colors.

4-value color map

The $colors Sass map now accepts, for each of its values, a map of up to 4 values. For example: the key "info" now has the ($info, $info-invert, $info-light, $info-dark) map.

If you provide a $custom-colors map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:

$custom-colors: (
  "lime": (lime),
  "tomato": (tomato, white),
  "orange": ($orange, $orange-invert, $orange-light),
  "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
);

This is processed by the updated mergeColorMaps() Sass function.

Scheme variables

There are 6 new $scheme derived variables: $scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter
They replace the $white and $black occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:

$scheme-main: $black
$scheme-invert: $white
// etc.

That is also why most of the codebase now references derived variables ($text, $background, $border etc.) instead of initial ones ($grey, $grey-lighter, $grey-darker etc.): updating the derived variables will affect all elements and components directly.

Initial variables

• $green: hsl(141, 53%, 53%)
• $cyan: hsl(204, 71%, 53%)
• $red: hsl(348, 86%, 61%)

Derived variables

• $primary-invert: findColorInvert($primary)

• $primary-light: findLightColor($primary)

• $primary-dark: findDarkColor($primary)

• $info-invert: findColorInvert($info)

• $info-light: findLightColor($info)

• $info-dark: findDarkColor($info)

• $success-invert: findColorInvert($success)

• $success-light: findLightColor($success)

• $success-dark: findDarkColor($success)

• $warning-invert: findColorInvert($warning)

• $warning-light: findLightColor($warning)

• $warning-dark: findDarkColor($warning)

• $danger-invert: findColorInvert($danger)

• $danger-light: findLightColor($danger)

• $danger-dark: findDarkColor($danger)

• $light-invert: findColorInvert($light)

• $dark-invert: findColorInvert($dark)

• $scheme-main: $white

• $scheme-main-bis: $white-bis

• $scheme-main-ter: $white-ter

• $scheme-invert: $black

• $scheme-invert-bis: $black-bis

• $scheme-invert-ter: $black-ter

Other variables

• $control-height: 2.5em
• $control-padding-vertical: calc(0.5em - #{$control-border-width})
• $control-padding-horizontal: calc(0.75em - #{$control-border-width})
• $media-border-color: rgba($border, 0.5)
• $notification-code-background-color: $scheme-main
• $panel-radius: $radius-large
• $panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
• $textarea-padding: $control-padding-horizontal
• $textarea-max-height: 40em
• $textarea-min-height: 8em

Bug fixes

• Fix #2647 -> Missing meta tags in snippet
• Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
• Fix #2060 -> height: auto on HTML audio element breaks height of element
• Fix #706 -> Derive -invert variables using findColorInvert()
• #1608 Fix #1552 -> .container.is-fluid margins

New features

• #2563 .image has a new .is-fullwidth modifier

Commits

The new version differs by 71 commits.

• 35e3ccb Build 0.8.0
• 9a28ea1 Fix form controls docs
• 7b35fd0 Update blog post
• c2d785a Write 0.8 blog post
• 1a6b00e Improve layout docs
• 48515c4 Update changelog
• a87e20b Improve form documentation
• e539036 Improve components documentation
• d4c7731 Add more color documentation, Add light buttons to docs
• d0c84b9 Update variable JSONs
• 817c676 Add dark Bulma example
• ac0399d Only use derived variables
• 0f988ea Add color scheme
• 5131f2a Add light/dark color functions
• 46b3edf Update panel, Fix icon buttons

There are 71 commits in total.

See the full diff

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper bot 🌴

[coveralls]

Coverage remained the same at 90.054% when pulling e6ea5eb on greenkeeper/bulma-0.8.0 into aa4a457 on master.

[greenkeeper]

• The devDependency bulma was updated from 0.7.5 to 0.8.1.

Update to this version instead 🚀

Release Notes for 0.8.1

Improvements

• #2709 Add light colors to the notification element
• #2740 Fixes #2739 -> Add variables size for layout hero
• Fix #2741 -> Create bulmaRgba() function to support inherit value
• #2756 Add $button-text-decoration variable

Bug fixes

• #2664 Fixes #2671 -> Add $panel-colors variable

Commits

The new version differs by 56 commits.

• 6a067df Build 0.8.1
• 4af9686 Add override test
• 0d74423 Update dependencies
• 3f650b6 Update sponsors
• 02630c0 remote duplicate code
• f75ae3d Add multiple Sass tests
• 4b2bc00 Fixes #2862 (#2874)
• d6f91db Update expo March 2020
• 35770d1 Update backers page
• c6e3719 Update sponsors
• 6d6e5e5 bulma-spacing added to extensions
• 962f454 Update sponsors
• 0c43b9e Remove unnecessary tag in Button element documentation page
• 2196b24 Added link to Nunjucks Bulma Starterkit on github to the bottom of the table
• 1d95fd9 Update Love January 2020

There are 56 commits in total.

See the full diff

[greenkeeper]

• The devDependency bulma was updated from 0.7.5 to 0.8.2.

Update to this version instead 🚀