Merge branch 'master' into css-variables-with-fallback

docs/_includes/components/spacing-table.html

@@ -17,13 +17,23 @@
   <tbody>
     {% for shortcut in include.shortcuts %}
       {% for direction in include.directions %}
-        <tr>
-          <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
-          <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
-          {% for value in include.values %}
-            <td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
-          {% endfor %}
-        </tr>
+        {% if direction[0] == 'all' %}
+          <tr>
+            <td><code>{{ shortcut[0] }}</code></td>
+            <td><code>{{ shortcut[1] }}</code></td>
+            {% for value in include.values %}
+              <td><code>{{ shortcut[1] }}-{{ value[0] }}</code></td>
+            {% endfor %}
+          </tr>
+        {% else %}
+          <tr>
+            <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
+            <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
+            {% for value in include.values %}
+              <td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
+            {% endfor %}
+          </tr>
+        {% endif %}
       {% endfor %}
 
       <tr>

docs/documentation/helpers/spacing-helpers.html

@@ -12,6 +12,7 @@ shortcuts:
   margin: m
   padding: p
 directions:
+  all: a
   top: t
   right: r
   bottom: b

sass/components/navbar.sass

@@ -49,6 +49,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
 
 $navbar-breakpoint: $desktop !default
 
+$navbar-colors: $colors !default
+
 =navbar-fixed
   left: 0
   position: fixed
@@ -98,7 +100,7 @@ $navbar-breakpoint: $desktop !default
   min-height: var(--navbar-height)
   position: relative
   z-index: var(--navbar-z)
-  @each $name, $pair in $colors
+  @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/elements/button.sass

@@ -33,6 +33,8 @@ $button-static-color: $text-light !default
 $button-static-background-color: $scheme-main-ter !default
 $button-static-border-color: $border !default
 
+$button-colors: $colors !default
+
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
@@ -115,7 +117,7 @@ $button-static-border-color: $border !default
       background-color: transparent
       border-color: transparent
       box-shadow: none
-  @each $name, $pair in $colors
+  @each $name, $pair in $button-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/elements/notification.sass

@@ -5,6 +5,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
 
+$notification-colors: $colors !default
+
 .notification
   --notification-background-color: #{$notification-background-color}
   --notification-radius: #{$notification-radius}
@@ -40,7 +42,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
   .content
     color: currentColor
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $notification-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/elements/progress.sass

@@ -6,6 +6,8 @@ $progress-border-radius: var(--radius-rounded, #{$radius-rounded}) !default
 
 $progress-indeterminate-duration: 1.5s !default
 
+$progress-colors: $colors !default
+
 .progress
   --progress-border-radius: #{$progress-border-radius}
   --progress-bar-background-color: #{$progress-bar-background-color}
@@ -33,7 +35,7 @@ $progress-indeterminate-duration: 1.5s !default
     background-color: var(--progress-value-background-color)
     border: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $progress-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &::-webkit-progress-value

sass/elements/table.sass

@@ -23,6 +23,8 @@ $table-row-active-color: var(--primary-invert, #{$primary-invert}) !default
 $table-striped-row-even-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
 $table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
 
+$table-colors: $colors !default
+
 .table
   --table-body-background-color: #{$table-body-background-color}
   --table-color: #{$table-color}
@@ -53,7 +55,7 @@ $table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme
     padding: var(--table-cell-padding)
     vertical-align: top
     // Colors
-    @each $name, $pair in $colors
+    @each $name, $pair in $table-colors
       $color: nth($pair, 1)
       $color-invert: nth($pair, 2)
       &.is-#{$name}

sass/elements/tag.sass

@@ -3,6 +3,8 @@ $tag-color: var(--text, #{$text}) !default
 $tag-radius: var(--radius, #{$radius}) !default
 $tag-delete-margin: 1px !default
 
+$tag-colors: $colors !default
+
 .tags
   align-items: center
   display: flex
@@ -76,7 +78,7 @@ $tag-delete-margin: 1px !default
     +ltr-property("margin", 0.25rem, false)
     +ltr-property("margin", -0.375rem)
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $tag-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/form/checkbox-radio.sass

@@ -11,7 +11,8 @@
   &:hover
     color: var(--checkbox-radio-hover-color)
   &[disabled],
-  fieldset[disabled] &
+  fieldset[disabled] &,
+  input[disabled]
     color: var(--checkbox-radio-disabled-color)
     cursor: not-allowed
 

sass/form/file.sass

@@ -11,6 +11,8 @@ $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
 
+$file-colors: $form-colors !default
+
 .file
   --file-radius: #{$file-radius}
   --file-cta-hover-color: #{$file-cta-hover-color}
@@ -30,7 +32,7 @@ $file-name-max-width: 16em !default
   justify-content: flex-start
   position: relative
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $file-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/form/input-textarea.sass

@@ -2,6 +2,8 @@ $textarea-padding: var(--control-padding-horizontal, #{$control-padding-horizont
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
+$textarea-colors: $form-colors !default
+
 %input-textarea
   @extend %input
   box-shadow: var(--input-shadow, #{$input-shadow})
@@ -10,7 +12,7 @@ $textarea-min-height: 8em !default
   &[readonly]
     box-shadow: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $textarea-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       border-color: var(--#{$name}, #{$color})

sass/form/select.sass

@@ -1,3 +1,5 @@
+$select-colors: $form-colors !default
+
 .select
   --select-arrow: #{$input-arrow}
   --select-disabled-border-color: #{$input-disabled-border-color}
@@ -45,7 +47,7 @@
     &::after
       border-color: var(--select-hover-color)
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $select-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &:not(:hover)::after

sass/form/shared.sass

@@ -1,3 +1,5 @@
+$form-colors: $colors !default
+
 $input-color: var(--text-strong, #{$text-strong}) !default
 $input-background-color: var(--scheme-main, #{$scheme-main}) !default
 $input-border-color: var(--border, #{$border}) !default

sass/form/tools.sass

@@ -6,6 +6,8 @@ $help-size: var(--size-small, #{$size-small}) !default
 
 $control-font-size: var(--size-normal, #{$size-normal}) !default
 
+$label-colors: $form-colors !default
+
 .label
   --label-color: #{$label-color}
   --label-font-size: #{$label-font-size}
@@ -31,7 +33,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
   display: block
   font-size: var(--help-font-size)
   margin-top: 0.25rem
-  @each $name, $pair in $colors
+  @each $name, $pair in $label-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       color: var(--#{$name}, #{$color})

sass/helpers/_all.sass

@@ -2,6 +2,7 @@
 @charset "utf-8"
 
 @import "color.sass"
+@import "flexbox.sass"
 @import "float.sass"
 @import "other.sass"
 @import "overflow.sass"

sass/helpers/flexbox.sass

@@ -0,0 +1,35 @@
+$flex-directions-values: row, row-reverse, column, column-reverse
+@each $value in $flex-directions-values
+    .is-flex-direction-#{$value}
+        flex-direction: $value !important
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse
+@each $value in $flex-wrap-values
+    .is-flex-wrap-#{$value}
+        flex-wrap: $value !important
+
+$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
+@each $value in $justify-content-values
+    .is-justify-content-#{$value}
+        justify-content: $value !important
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
+@each $value in $align-content-values
+    .is-align-content-#{$value}
+        align-content: $value !important
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
+@each $value in $align-items-values
+    .is-align-items-#{$value}
+        align-items: $value !important
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
+@each $value in $align-self-values
+    .is-align-self-#{$value}
+        align-self: $value !important
+
+$flex-operators: grow, shrink
+@each $operator in $flex-operators
+    @for $i from 0 through 5
+        .is-flex-#{$operator}-#{$i}
+            flex-#{$operator}: $i !important

sass/helpers/spacing.sass

@@ -12,6 +12,9 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
 
 @each $property, $shortcut in $spacing-shortcuts
   @each $name, $value in $spacing-values
+    // All directions
+    .#{$shortcut}-#{$name}
+      #{$property}: $value !important
     // Cardinal directions
     @each $direction, $suffix in $spacing-directions
       .#{$shortcut}#{$suffix}-#{$name}

sass/layout/hero.sass

@@ -3,6 +3,8 @@ $hero-body-padding-small: 1.5rem !default
 $hero-body-padding-medium: 9rem 1.5rem !default
 $hero-body-padding-large: 18rem 1.5rem !default
 
+$hero-colors: $colors !default
+
 // Main container
 .hero
   --hero-body-padding: #{$hero-body-padding}
@@ -20,7 +22,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
     ul
       border-bottom: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $hero-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/utilities/_all.sass

@@ -3,7 +3,7 @@
 
 @import "initial-variables.sass"
 @import "functions.sass"
-@import "derived-variables.scss"
+@import "derived-variables.sass"
 @import "animations.sass"
 @import "mixins.sass"
 @import "controls.sass"

sass/utilities/derived-variables.sass

@@ -0,0 +1,114 @@
+$primary: var(--turquoise, #{$turquoise}) !default
+
+$info: var(--cyan, #{$cyan}) !default
+$success: var(--green, #{$green}) !default
+$warning: var(--yellow, #{$yellow}) !default
+$danger: var(--red, #{$red}) !default
+
+$light: var(--white-ter, #{$white-ter}) !default
+$dark: var(--grey-darker, #{$grey-darker}) !default
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$cyan-invert: findColorInvert($cyan) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: findColorInvert($primary, $turquoise) !default
+$primary-light: findLightColor($primary, $turquoise) !default
+$primary-dark: findDarkColor($primary, $turquoise) !default
+$info-invert: findColorInvert($info, $cyan) !default
+$info-light: findLightColor($info, $cyan) !default
+$info-dark: findDarkColor($info, $cyan) !default
+$success-invert: findColorInvert($success, $green) !default
+$success-light: findLightColor($success, $green) !default
+$success-dark: findDarkColor($success, $green) !default
+$warning-invert: findColorInvert($warning, $yellow) !default
+$warning-light: findLightColor($warning, $yellow) !default
+$warning-dark: findDarkColor($warning, $yellow) !default
+$danger-invert: findColorInvert($danger, $red) !default
+$danger-light: findLightColor($danger, $red) !default
+$danger-dark: findDarkColor($danger, $red) !default
+$light-invert: findColorInvert($light, $white-ter) !default
+$light-light: findLightColor($light, $white-ter) !default
+$light-dark: findDarkColor($light, $white-ter) !default
+$dark-invert: findColorInvert($dark, $grey-darker) !default
+$dark-light: findLightColor($dark, $grey-darker) !default
+$dark-dark: findDarkColor($dark, $grey-darker) !default
+
+// General colors
+
+$scheme-main: var(--white, #{$white}) !default
+$scheme-main-bis: var(--white-bis, #{$white-bis}) !default
+$scheme-main-ter: var(--white-ter, #{$white-ter}) !default
+$scheme-invert: var(--black, #{$black}) !default
+$scheme-invert-rgb: bulmaToRGB($black) !default
+$scheme-invert-bis: var(--black-bis, #{$black-bis}) !default
+$scheme-invert-ter: var(--black-ter, #{$black-ter}) !default
+
+$background: var(--white-ter, #{$white-ter}) !default
+
+$border: var(--grey-lighter, #{$grey-lighter}) !default
+$border-rgb: bulmaToRGB($grey-lighter) !default
+$border-hover: var(--grey-light, #{$grey-light}) !default
+$border-light: var(--grey-lightest, #{$grey-lightest}) !default
+$border-light-hover: var(--grey-light, #{$grey-light}) !default
+
+// Text colors
+
+$text: var(--grey-dark, #{$grey-dark}) !default
+$text-invert: findColorInvert($text, $grey-dark) !default
+$text-light: var(--grey, #{$grey}) !default
+$text-strong: var(--grey-darker, #{$grey-darker}) !default
+
+// Code colors
+
+$code: var(--red, #{darken($red, 15%)}) !default
+$code-background: var(--background, #{$background}) !default
+
+$pre: var(--text, #{$text}) !default
+$pre-background: var(--background, #{$background}) !default
+
+// Link colors
+
+$link: var(--blue, #{$blue}) !default
+$link-rgb: bulmaToRGB($blue) !default
+$link-invert: findColorInvert($link, $blue) !default
+$link-light: findLightColor($link, $blue) !default
+$link-dark: findDarkColor($link, $blue) !default
+$link-visited: var(--purple, #{$purple}) !default
+
+$link-hover: var(--grey-darker, #{$grey-darker}) !default
+$link-hover-border: var(--grey-light, #{$grey-light}) !default
+
+$link-focus: var(--grey-darker, #{$grey-darker}) !default
+$link-focus-border: var(--blue, #{$blue}) !default
+
+$link-active: var(--grey-darker, #{$grey-darker}) !default
+$link-active-border: var(--grey-dark, #{$grey-dark}) !default
+
+// Typography
+
+$family-primary: var(--family-sans-serif, #{$family-sans-serif}) !default
+$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default
+$family-code: var(--family-monospace, #{$family-monospace}) !default
+
+$size-small: var(--size-7, #{size-7}) !default
+$size-normal: var(--size-6, #{size-6}) !default
+$size-medium: var(--size-5, #{size-5}) !default
+$size-large: var(--size-4, #{size-4}) !default
+
+// Lists and maps
+$custom-colors: null !default
+$custom-shades: null !default
+
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
+
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

sass/utilities/derived-variables.scss

@@ -1,139 +0,0 @@
-$primary: var(--turquoise, #{$turquoise}) !default;
-
-$info   : var(--cyan, #{$cyan}) !default;
-$success: var(--green, #{$green}) !default;
-$warning: var(--yellow, #{$yellow}) !default;
-$danger : var(--red, #{$red}) !default;
-
-$light  : var(--white-ter, #{$white-ter}) !default;
-$dark   : var(--grey-darker, #{$grey-darker}) !default;
-
-// Invert colors
-
-$orange-invert   : findColorInvert($orange) !default;
-$yellow-invert   : findColorInvert($yellow) !default;
-$green-invert    : findColorInvert($green) !default;
-$turquoise-invert: findColorInvert($turquoise) !default;
-$cyan-invert     : findColorInvert($cyan) !default;
-$blue-invert     : findColorInvert($blue) !default;
-$purple-invert   : findColorInvert($purple) !default;
-$red-invert      : findColorInvert($red) !default;
-
-$primary-invert  : findColorInvert($primary, $turquoise) !default;
-$primary-light   : findLightColor($primary, $turquoise) !default;
-$primary-dark    : findDarkColor($primary, $turquoise) !default;
-$info-invert     : findColorInvert($info, $cyan) !default;
-$info-light      : findLightColor($info, $cyan) !default;
-$info-dark       : findDarkColor($info, $cyan) !default;
-$success-invert  : findColorInvert($success, $green) !default;
-$success-light   : findLightColor($success, $green) !default;
-$success-dark    : findDarkColor($success, $green) !default;
-$warning-invert  : findColorInvert($warning, $yellow) !default;
-$warning-light   : findLightColor($warning, $yellow) !default;
-$warning-dark    : findDarkColor($warning, $yellow) !default;
-$danger-invert   : findColorInvert($danger, $red) !default;
-$danger-light    : findLightColor($danger, $red) !default;
-$danger-dark     : findDarkColor($danger, $red) !default;
-$light-invert    : findColorInvert($light, $white-ter) !default;
-$light-light     : findLightColor($light, $white-ter) !default;
-$light-dark      : findDarkColor($light, $white-ter) !default;
-$dark-invert     : findColorInvert($dark, $grey-darker) !default;
-$dark-light      : findLightColor($dark, $grey-darker) !default;
-$dark-dark       : findDarkColor($dark, $grey-darker) !default;
-
-// General colors
-
-$scheme-main       : var(--white, #{$white}) !default;
-$scheme-main-bis   : var(--white-bis, #{$white-bis}) !default;
-$scheme-main-ter   : var(--white-ter, #{$white-ter}) !default;
-$scheme-invert     : var(--black, #{$black}) !default;
-$scheme-invert-rgb : bulmaToRGB($black) !default;
-$scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
-$scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
-
-$background        : var(--white-ter, #{$white-ter}) !default;
-
-$border            : var(--grey-lighter, #{$grey-lighter}) !default;
-$border-rgb        : bulmaToRGB($grey-lighter) !default;
-$border-hover      : var(--grey-light, #{$grey-light}) !default;
-$border-light      : var(--grey-lightest, #{$grey-lightest}) !default;
-$border-light-hover: var(--grey-light, #{$grey-light}) !default;
-
-// Text colors
-
-$text       : var(--grey-dark, #{$grey-dark}) !default;
-$text-invert: findColorInvert($text, $grey-dark) !default;
-$text-light : var(--grey, #{$grey}) !default;
-$text-strong: var(--grey-darker, #{$grey-darker}) !default;
-
-// Code colors
-
-$code           : var(--red, #{darken($red, 15%)}) !default;
-$code-background: var(--background, #{$background}) !default;
-
-$pre            : var(--text, #{$text}) !default;
-$pre-background : var(--background, #{$background}) !default;
-
-// Link colors
-
-$link              : var(--blue, #{$blue}) !default;
-$link-rgb          : bulmaToRGB($blue) !default;
-$link-invert       : findColorInvert($link, $blue) !default;
-$link-light        : findLightColor($link, $blue) !default;
-$link-dark         : findDarkColor($link, $blue) !default;
-$link-visited      : var(--purple, #{$purple}) !default;
-
-$link-hover        : var(--grey-darker, #{$grey-darker}) !default;
-$link-hover-border : var(--grey-light, #{$grey-light}) !default;
-
-$link-focus        : var(--grey-darker, #{$grey-darker}) !default;
-$link-focus-border : var(--blue, #{$blue}) !default;
-
-$link-active       : var(--grey-darker, #{$grey-darker}) !default;
-$link-active-border: var(--grey-dark, #{$grey-dark}) !default;
-
-// Typography
-
-$family-primary  : var(--family-sans-serif, #{$family-sans-serif}) !default;
-$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
-$family-code     : var(--family-monospace, #{$family-monospace}) !default;
-
-$size-small : var(--size-7, #{size-7}) !default;
-$size-normal: var(--size-6, #{size-6}) !default;
-$size-medium: var(--size-5, #{size-5}) !default;
-$size-large : var(--size-4, #{size-4}) !default;
-
-// Lists and maps
-$custom-colors: null !default;
-$custom-shades: null !default;
-
-$colors: mergeColorMaps(
-(
-  "white"  : ($white, $black),
-  "black"  : ($black, $white),
-  "light"  : ($light, $light-invert),
-  "dark"   : ($dark, $dark-invert),
-  "primary": ($primary, $primary-invert, $primary-light, $primary-dark),
-  "link"   : ($link, $link-invert, $link-light, $link-dark),
-  "info"   : ($info, $info-invert, $info-light, $info-dark),
-  "success": ($success, $success-invert, $success-light, $success-dark),
-  "warning": ($warning, $warning-invert, $warning-light, $warning-dark),
-  "danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
-  $custom-colors
-) !default;
-
-$shades: mergeColorMaps(
-(
-  "black-bis"   : $black-bis,
-  "black-ter"   : $black-ter,
-  "grey-darker" : $grey-darker,
-  "grey-dark"   : $grey-dark,
-  "grey"        : $grey,
-  "grey-light"  : $grey-light,
-  "grey-lighter": $grey-lighter,
-  "white-ter"   : $white-ter,
-  "white-bis"   : $white-bis),
-  $custom-shades
-) !default;
-
-$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

test/sass/override.scss

@@ -32,5 +32,10 @@ $custom-colors: (
   "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
 );
 
+$spacing-shortcuts: ("margin": "mg");
+$spacing-horizontal: "h";
+$spacing-vertical: null;
+$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
+
 // Import the rest of Bulma
 @import "../../bulma";