From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 13 Oct 2019 21:16:47 +0000 (+0100)
Subject: Update changelog
X-Git-Tag: 0.8.0~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=48515c4f7298433867f4a7ffd1e1b5c1dcaf645f;p=thirdparty%2Fbulma.git

Update changelog
---

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9f0e3ba8..716c99382 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,105 @@
 # Bulma Changelog
 
-## Upcoming release
+## 0.8.0
+
+### Big update
+
+#### Larger controls
+
+Controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
+
+```sass
+$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.
+
+#### 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:
+
+```scss
+$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:
+
+```sass
+$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