Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update bulma to the latest version 🚀 #414

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

greenkeeper[bot]
Copy link
Contributor

@greenkeeper greenkeeper bot commented Dec 3, 2019

The dependency 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.

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 🌴

greenkeeper bot added a commit that referenced this pull request Mar 23, 2020
@greenkeeper
Copy link
Contributor Author

greenkeeper bot commented Mar 23, 2020

  • The dependency 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

Commits

The new version differs by 56 commits.

There are 56 commits in total.

See the full diff

greenkeeper bot added a commit that referenced this pull request Apr 11, 2020
@greenkeeper
Copy link
Contributor Author

greenkeeper bot commented Apr 11, 2020

  • The dependency bulma was updated from 0.7.5 to 0.8.2.

Update to this version instead 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

0 participants