Bulma: Should all variables be documented?

[rdebeasi]

Overview of the problem

This is about the Bulma Docs
I'm using Bulma version 0.7.4

Description

Currently, the only variables listed in the variables documentation are the ones in initial-variables.sass and derived-variables.sass. Other variables, such as the ones in forms.sass, aren't documented.

Would it be appropriate for a contributor to add these variables to the documentation? Alternately, are these variables like "private APIs" that are subject to change without warning and so should not be documented?

Bulma rocks - thank you for building it!!

[Rainbowlemon]

Yes, I completely agree. Moreover, I think that the variable naming and referencing in general needs a huge overhaul. I'm currently working on an app that's designed with a dark theme, and navigating bulma's variables is a nightmare. It kinda' makes variable defaults obsolete when, e.g., $title-color: $grey-dark is used - because if I change $grey-dark to a light colour, it then makes absolutely no sense.

[rdebeasi]

Moreover, I think that the variable naming and referencing in general needs a huge overhaul.

Totally fair. That's probably a big enough request to be its own issue.

It kinda' makes variable defaults obsolete when, e.g., $title-color: $grey-dark is used - because if I change $grey-dark to a light colour, it then makes absolutely no sense.

I wonder if it would help to generate two stylesheets, one with $title-color: $grey-dark and one with $title-color: $white. That way you wouldn't have to give the color variables confusing values. Alternately, you could use CSS variables, which can be changed at runtime. If you'd like to discuss building dark and light themes in Bluma, feel free to join the conversation in Gitter!

Anyway, I'd like to keep this issue focused on one question: Should these undocumented variables be documented, or is the lack of docs here intentional? Thank you!! :smile: :dog: :rocket:

[rdebeasi]

In other news, I can't spell. :joy:

[emkajeej]

I personally use a _variables.scss in my projects in which I have manually added all variables from the core .sass files, which I can then easily override for theming purposes.
Based on 0.7.2 (yes I need to update):

//* Bulma Component Config  */
//* v0.7.2          */
//*             */
//***************************/

//*************************************/
//* GENERIC VARIABLES                 */
//*************************************/
$body-background-color: $white !default;
$body-size: 16px !default;
$body-rendering: optimizeLegibility !default;
$body-family: $family-primary !default;
$body-color: $text !default;
$body-weight: $weight-normal !default;
$body-line-height: 1.5 !default;

$code-family: $family-code !default;
$code-padding: 0.25em 0.5em 0.25em !default;
$code-weight: normal !default;
$code-size: 0.875em !default;

$hr-background-color: $background !default;
$hr-height: 2px !default;
$hr-margin: 1.5rem 0 !default;

$strong-color: $text-strong !default;
$strong-weight: $weight-bold !default;

//***************************/
//* GLOBAL UI               */
//***************************/
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;

$control-border-width: 1px !default;

$control-height: 2.25em !default;
$control-line-height: 1.5 !default;

$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;

//*************************************/
//* LAYOUT COMPONENTS                 */
//*************************************/

//***************************/
//* SECTION                 */
//***************************/
$section-padding: 3rem 1.5rem !default;
$section-padding-medium: 9rem 1.5rem !default;
$section-padding-large: 18rem 1.5rem !default;


//***************************/
//* FOOTER                  */
//***************************/
$footer-background-color: $white-bis !default;



//*************************************/
//* FORM COMPONENTS                   */
//*************************************/

//***************************/
//* GENERAL                 */
//***************************/
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;
$control-padding-vertical: calc(0.375em - 1px) !default;
$control-padding-horizontal: calc(0.625em - 1px) !default;

$label-color: $grey-darker !default;
$label-weight: $weight-bold !default;

$help-size: $size-small !default;


//***************************/
//* INPUTS                  */
//***************************/
$input-color: $grey-darker !default;
$input-background-color: $white !default;
$input-border-color: $grey-lighter !default;
$input-height: $control-height !default;
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;

$input-hover-color: $grey-darker !default;
$input-hover-border-color: $grey-light !default;

$input-focus-color: $grey-darker !default;
$input-focus-border-color: $link !default;
$input-focus-box-shadow-size: 0 0 0 0.125em !default;
$input-focus-box-shadow-color: rgba($link, 0.25) !default;

$input-disabled-color: $text-light !default;
$input-disabled-background-color: $background !default;
$input-disabled-border-color: $background !default;

$input-arrow: $link !default;

$input-icon-color: $grey-lighter !default;
$input-icon-active-color: $grey !default;

$input-radius: $radius !default;


//***************************/
//* FILE INPUT              */
//***************************/
$file-border-color: $border !default;
$file-radius: $radius !default;

$file-cta-background-color: $white-ter !default;
$file-cta-color: $grey-dark !default;
$file-cta-hover-color: $grey-darker !default;
$file-cta-active-color: $grey-darker !default;

$file-name-border-color: $border !default;
$file-name-border-style: solid !default;
$file-name-border-width: 1px 1px 1px 0 !default;
$file-name-max-width: 16em !default;



//*************************************/
//* ELEMENTS                          */
//*************************************/

//***************************/
//* BOX                     */
//***************************/
$box-color: $text !default;
$box-background-color: $white !default;
$box-radius: $radius-large !default;
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$box-padding: 1.25rem !default;

$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default;
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default;


//***************************/
//* BUTTON                  */
//***************************/
$button-color: $grey-darker !default;
$button-background-color: $white !default;

$button-border-color: $grey-lighter !default;
$button-border-width: $control-border-width !default;

$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
$button-padding-horizontal: 0.75em !default;

$button-hover-color: $link-hover !default;
$button-hover-border-color: $link-hover-border !default;

$button-focus-color: $link-focus !default;
$button-focus-border-color: $link-focus-border !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
$button-focus-box-shadow-color: rgba($link, 0.25) !default;

$button-active-color: $link-active !default;
$button-active-border-color: $link-active-border !default;

$button-text-color: $text !default;
$button-text-hover-background-color: $background !default;
$button-text-hover-color: $text-strong !default;

$button-disabled-background-color: $white !default;
$button-disabled-border-color: $grey-lighter !default;
$button-disabled-shadow: none !default;

$button-disabled-opacity: 0.5 !default;

$button-static-color: $grey !default;
$button-static-background-color: $white-ter !default;
$button-static-border-color: $grey-lighter !default;


//***************************/
//* CONTENT (CMS) CONTAINER */
//***************************/
$content-heading-color: $text-strong !default;
$content-heading-weight: $weight-semibold !default;
$content-heading-line-height: 1.125 !default;

$content-blockquote-background-color: $background !default;
$content-blockquote-border-left: 5px solid $border !default;
$content-blockquote-padding: 1.25em 1.5em !default;

$content-pre-padding: 1.25em 1.5em !default;

$content-table-cell-border: 1px solid $border !default;
$content-table-cell-border-width: 0 0 1px !default;
$content-table-cell-padding: 0.5em 0.75em !default;
$content-table-cell-heading-color: $text-strong !default;
$content-table-head-cell-border-width: 0 0 2px !default;
$content-table-head-cell-color: $text-strong !default;
$content-table-foot-cell-border-width: 2px 0 0 !default;
$content-table-foot-cell-color: $text-strong !default;



//***************************/
//* ICON                    */
//***************************/
$icon-dimensions: 1.5rem !default;
$icon-dimensions-small: 1rem !default;
$icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;



//***************************/
//* LIST                    */
//***************************/

$list-background-color: $white !default;
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$list-radius: $radius !default;
$list-item-border: 1px solid $border !default;
$list-item-color: $text !default;
$list-item-active-background-color: $link !default;
$list-item-active-color: $link-invert !default;
$list-item-hover-background-color: $background !default;



//***************************/
//* THUMBNAIL IMAGES        */
//***************************/
$dimensions: 16 24 32 48 64 96 128 !default;


//***************************/
//* NOTIFICATION            */
//***************************/
$notification-background-color: $background !default;
$notification-radius: $radius !default;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;


//***************************/
//* PROGRESS BAR            */
//***************************/
$progress-bar-background-color: $border !default;
$progress-value-background-color: $text !default;


//***************************/
//* TABLE                   */
//***************************/
$table-color: $grey-darker !default;
$table-background-color: $white !default;

$table-cell-border: 1px solid $grey-lighter !default;
$table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 0.5em 0.75em !default;
$table-cell-heading-color: $text-strong !default;

$table-head-cell-border-width: 0 0 2px !default;
$table-head-cell-color: $text-strong !default;
$table-foot-cell-border-width: 2px 0 0 !default;
$table-foot-cell-color: $text-strong !default;

$table-row-hover-background-color: $white-bis !default;

$table-row-active-background-color: $primary !default;
$table-row-active-color: $primary-invert !default;

$table-striped-row-even-background-color: $white-bis !default;
$table-striped-row-even-hover-background-color: $white-ter !default;



//***************************/
//* TAG                     */
//***************************/
$tag-background-color: $background !default;
$tag-color: $text !default;
$tag-radius: $radius !default;
$tag-delete-margin: 1px !default;


//***************************/
//* TITLES & SUBTITLES      */
//***************************/
$title-color: $grey-darker !default;
$title-size: $size-3 !default;
$title-weight: $weight-semibold !default;
$title-line-height: 1.125 !default;
$title-strong-color: inherit !default;
$title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default;

$subtitle-color: $grey-dark !default;
$subtitle-size: $size-5 !default;
$subtitle-weight: $weight-normal !default;
$subtitle-line-height: 1.25 !default;
$subtitle-strong-color: $grey-darker !default;
$subtitle-strong-weight: $weight-semibold !default;
$subtitle-negative-margin: -1.25rem !default;


//*************************************/
//* PAGE COMPONENTS                   */
//*************************************/

//***************************/
//* BREADCRUMB              */
//***************************/
$breadcrumb-item-color: $link !default;
$breadcrumb-item-hover-color: $link-hover !default;
$breadcrumb-item-active-color: $text-strong !default;

$breadcrumb-item-padding-vertical: 0 !default;
$breadcrumb-item-padding-horizontal: 0.75em !default;

$breadcrumb-item-separator-color: $grey-light !default;


//***************************/
//* CARD                    */
//***************************/
$card-color: $text !default;
$card-background-color: $white !default;
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;

$card-header-background-color: transparent !default;
$card-header-color: $text-strong !default;
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default;
$card-header-weight: $weight-bold !default;

$card-content-background-color: transparent !default;

$card-footer-background-color: transparent !default;
$card-footer-border-top: 1px solid $border !default;


//***************************/
//* DROPDOWN                */
//***************************/
$dropdown-content-background-color: $white !default;
$dropdown-content-arrow: $link !default;
$dropdown-content-offset: 4px !default;
$dropdown-content-radius: $radius !default;
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$dropdown-content-z: 20 !default;

$dropdown-item-color: $grey-dark !default;
$dropdown-item-hover-color: $black !default;
$dropdown-item-hover-background-color: $background !default;
$dropdown-item-active-color: $link-invert !default;
$dropdown-item-active-background-color: $link !default;

$dropdown-divider-background-color: $border !default;


//***************************/
//* MENU                    */
//***************************/
$menu-item-color: $text !default;
$menu-item-radius: $radius-small !default;
$menu-item-hover-color: $text-strong !default;
$menu-item-hover-background-color: $background !default;
$menu-item-active-color: $link-invert !default;
$menu-item-active-background-color: $link !default;

$menu-list-border-left: 1px solid $border !default;

$menu-label-color: $text-light !default;


//***************************/
//* MESSAGE                 */
//***************************/
$message-background-color: $background !default;
$message-radius: $radius !default;

$message-header-background-color: $text !default;
$message-header-color: $text-invert !default;
$message-header-weight: $weight-bold !default;
$message-header-padding: 0.75em 1em !default;
$message-header-radius: $radius !default;

$message-body-border-color: $border !default;
$message-body-border-width: 0 0 0 4px !default;
$message-body-color: $text !default;
$message-body-padding: 1.25em 1.5em !default;
$message-body-radius: $radius !default;

$message-body-pre-background-color: $white !default;
$message-body-pre-code-background-color: transparent !default;

$message-header-body-border-width: 0 !default;


//***************************/
//* MODAL                   */
//***************************/
$modal-z: 40 !default;

$modal-background-background-color: rgba($black, 0.86) !default;

$modal-content-width: 640px !default;
$modal-content-margin-mobile: 20px !default;
$modal-content-spacing-mobile: 160px !default;
$modal-content-spacing-tablet: 40px !default;

$modal-close-dimensions: 40px !default;
$modal-close-right: 20px !default;
$modal-close-top: 20px !default;

$modal-card-spacing: 40px !default;

$modal-card-head-background-color: $background !default;
$modal-card-head-border-bottom: 1px solid $border !default;
$modal-card-head-padding: 20px !default;
$modal-card-head-radius: $radius-large !default;

$modal-card-title-color: $text-strong !default;
$modal-card-title-line-height: 1 !default;
$modal-card-title-size: $size-4 !default;

$modal-card-foot-radius: $radius-large !default;
$modal-card-foot-border-top: 1px solid $border !default;

$modal-card-body-background-color: $white !default;
$modal-card-body-padding: 20px !default;


//***************************/
//* NAVBAR                  */
//***************************/
$navbar-background-color: $white !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: $background !default;
$navbar-height: 3.25rem !default;
$navbar-padding-vertical: 1rem !default;
$navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;

$navbar-item-color: $grey-dark !default;
$navbar-item-hover-color: $link !default;
$navbar-item-hover-background-color: $white-bis !default;
$navbar-item-active-color: $black !default;
$navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !default;

$navbar-burger-color: $navbar-item-color !default;

$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: $link !default;
$navbar-tab-active-color: $link !default;
$navbar-tab-active-background-color: transparent !default;
$navbar-tab-active-border-bottom-color: $link !default;
$navbar-tab-active-border-bottom-style: solid !default;
$navbar-tab-active-border-bottom-width: 3px !default;

$navbar-dropdown-background-color: $white !default;
$navbar-dropdown-border-top: 2px solid $border !default;
$navbar-dropdown-offset: -4px !default;
$navbar-dropdown-arrow: $link !default;
$navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-z: 20 !default;

$navbar-dropdown-boxed-radius: $radius-large !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;

$navbar-dropdown-item-hover-color: $black !default;
$navbar-dropdown-item-hover-background-color: $background !default;
$navbar-dropdown-item-active-color: $link !default;
$navbar-dropdown-item-active-background-color: $background !default;

$navbar-divider-background-color: $background !default;
$navbar-divider-height: 2px !default;

$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;

$navbar-breakpoint: $desktop !default;

//***************************/
//* PAGINATION              */
//***************************/
$pagination-color: $grey-darker !default;
$pagination-border-color: $grey-lighter !default;
$pagination-margin: -0.25rem !default;
$pagination-min-width: $control-height !default;

$pagination-hover-color: $link-hover !default;
$pagination-hover-border-color: $link-hover-border !default;

$pagination-focus-color: $link-focus !default;
$pagination-focus-border-color: $link-focus-border !default;

$pagination-active-color: $link-active !default;
$pagination-active-border-color: $link-active-border !default;

$pagination-disabled-color: $grey !default;
$pagination-disabled-background-color: $grey-lighter !default;
$pagination-disabled-border-color: $grey-lighter !default;

$pagination-current-color: $link-invert !default;
$pagination-current-background-color: $link !default;
$pagination-current-border-color: $link !default;

$pagination-ellipsis-color: $grey-light !default;

$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default;


//***************************/
//* PANEL                   */
//***************************/
$panel-item-border: 1px solid $border !default;

$panel-heading-background-color: $background !default;
$panel-heading-color: $text-strong !default;
$panel-heading-line-height: 1.25 !default;
$panel-heading-padding: 0.5em 0.75em !default;
$panel-heading-radius: $radius !default;
$panel-heading-size: 1.25em !default;
$panel-heading-weight: $weight-light !default;

$panel-tab-border-bottom: 1px solid $border !default;
$panel-tab-active-border-bottom-color: $link-active-border !default;
$panel-tab-active-color: $link-active !default;

$panel-list-item-color: $text !default;
$panel-list-item-hover-color: $link !default;

$panel-block-color: $text-strong !default;
$panel-block-hover-background-color: $background !default;
$panel-block-active-border-left-color: $link !default;
$panel-block-active-color: $link-active !default;
$panel-block-active-icon-color: $link !default;

$panel-icon-color: $text-light !default;


//***************************/
//* TABS                    */
//***************************/
$tabs-border-bottom-color: $border !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;
$tabs-link-color: $text !default;
$tabs-link-hover-border-bottom-color: $text-strong !default;
$tabs-link-hover-color: $text-strong !default;
$tabs-link-active-border-bottom-color: $link !default;
$tabs-link-active-color: $link !default;
$tabs-link-padding: 0.5em 1em !default;

$tabs-boxed-link-radius: $radius !default;
$tabs-boxed-link-hover-background-color: $background !default;
$tabs-boxed-link-hover-border-bottom-color: $border !default;

$tabs-boxed-link-active-background-color: $white !default;
$tabs-boxed-link-active-border-color: $border !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;

$tabs-toggle-link-border-color: $border !default;
$tabs-toggle-link-border-style: solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: $background !default;
$tabs-toggle-link-hover-border-color: $border-hover !default;
$tabs-toggle-link-radius: $radius !default;
$tabs-toggle-link-active-background-color: $link !default;
$tabs-toggle-link-active-border-color: $link !default;
$tabs-toggle-link-active-color: $link-invert !default;

[PayteR]

Or there should be a snippet like this from @emkajeej somewhere to download or grab from node_modules package to use.

[lesleslie]

In the spirit of @emkajeej, here is my _variables.scss curated list for v0.7.5. It would be nice to see something like this in the root sass directory and documentation.

// Bulma v0.7.5 variables

// Colors

$black: hsl(0, 0%, 4%);
$black-bis: hsl(0, 0%, 7%);
$black-ter: hsl(0, 0%, 14%);

$grey-darker: hsl(0, 0%, 21%);
$grey-dark: hsl(0, 0%, 29%);
$grey: hsl(0, 0%, 48%);
$grey-light: hsl(0, 0%, 71%);
$grey-lighter: hsl(0, 0%, 86%);

$white-ter: hsl(0, 0%, 96%);
$white-bis: hsl(0, 0%, 98%);
$white: hsl(0, 0%, 100%);

$orange: hsl(14, 100%, 53%);
$yellow: hsl(48, 100%, 67%);
$green: hsl(141, 71%, 48%);
$turquoise: hsl(171, 100%, 41%);
$cyan: hsl(204, 86%, 53%);
$blue: hsl(217, 71%, 53%);
$purple: hsl(271, 100%, 71%);
$red: hsl(348, 100%, 61%);

$primary: $turquoise;

$info: $cyan;
$success: $green;
$warning: $yellow;
$danger: $red;

$light: $white-ter;
$dark: $grey-darker;

// Invert colors

$orange-invert: findColorInvert($orange);
$yellow-invert: findColorInvert($yellow);
$green-invert: findColorInvert($green);
$turquoise-invert: findColorInvert($turquoise);
$cyan-invert: findColorInvert($cyan);
$blue-invert: findColorInvert($blue);
$purple-invert: findColorInvert($purple);
$red-invert: findColorInvert($red);

$primary-invert: $turquoise-invert;
$info-invert: $cyan-invert;
$success-invert: $green-invert;
$warning-invert: $yellow-invert;
$danger-invert: $red-invert;
$light-invert: $dark;
$dark-invert: $light;

// General colors

$background: $white-ter;

$border: $grey-lighter;
$border-hover: $grey-light;

// Text colors

$text: $grey-dark;
$text-invert: findColorInvert($text);
$text-light: $grey;
$text-strong: $grey-darker;

// Link colors

$link: $blue;
$link-invert: $blue-invert;
$link-visited: $purple;

$link-hover: $grey-darker;
$link-hover-border: $grey-light;

$link-focus: $grey-darker;
$link-focus-border: $blue;

$link-active: $grey-darker;
$link-active-border: $grey-dark;

// Typography

$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$family-monospace: monospace;
$render-mode: optimizeLegibility;

$size-1: 3rem;
$size-2: 2.5rem;
$size-3: 2rem;
$size-4: 1.5rem;
$size-5: 1.25rem;
$size-6: 1rem;
$size-7: .75rem;

$weight-light: 300;
$weight-normal: 400;
$weight-medium: 500;
$weight-semibold: 600;
$weight-bold: 700;

$strong-color: $text-strong;
$strong-weight: $weight-bold;

$family-primary: $family-sans-serif;
$family-secondary: $family-sans-serif;
$family-code: $family-monospace;

$size-small: $size-7;
$size-normal: $size-6;
$size-medium: $size-5;
$size-large: $size-4;

$small-font-size: .875em;

// Spacing

$block-spacing: 1.5rem;

// Responsiveness

$gap: 32px;
$tablet: 769px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$widescreen-enabled: true;
$fullhd: 1344px + (2 * $gap);
$fullhd-enabled: true;

// Miscellaneous

$easing: ease-out;
$radius-small: 2px;
$radius: 4px;
$radius-large: 6px;
$radius-rounded: 290486px;
$speed: 86ms;

// Flags

$variable-columns: true;

// Lists and maps

$custom-colors: null;
$custom-shades: null;

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors);
$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);

$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;

// Controls

$control-radius: $radius;
$control-radius-small: $radius-small;

$control-border-width: 1px;

$control-height: 2.25em;
$control-line-height: 1.5;

$control-padding-vertical: calc(.375em - #{$control-border-width});
$control-padding-horizontal: calc(.625em - #{$control-border-width});

// Body

$body-background-color: $white;
$body-size: 16px;
$body-min-width: 300px;
$body-rendering: optimizeLegibility;
$body-family: $family-primary;
$body-overflow-x: hidden;
$body-overflow-y: scroll;

$body-color: $text;
$body-font-size: 1em;
$body-weight: $weight-normal;
$body-line-height: 1.5;

// Code

$code: $red;
$code-background: $background;
$code-family: $family-code;
$code-padding: .25em .5em .25em;
$code-weight: normal;
$code-size: .875em;

// HR

$hr-background-color: $background;
$hr-height: 2px;
$hr-margin: 1.5rem 0;

// PRE

$pre: $text;
$pre-background: $background;
$pre-font-size: .875em;
$pre-padding: 1.25rem 1.5rem;
$pre-code-font-size: 1em;

// Columns

$column-gap: .75rem;

// Tiles

$tile-spacing: .75rem;

// Footer

$footer-background-color: $white-bis;
$footer-color: false;
$footer-padding: 3rem 1.5rem 6rem;

// Section

$section-padding: 3rem 1.5rem;
$section-padding-medium: 9rem 1.5rem;
$section-padding-large: 18rem 1.5rem;

// File

$file-border-color: $border;
$file-radius: $radius;

$file-cta-background-color: $white-ter;
$file-cta-color: $grey-dark;
$file-cta-hover-color: $grey-darker;
$file-cta-active-color: $grey-darker;

$file-name-border-color: $border;
$file-name-border-style: solid;
$file-name-border-width: 1px 1px 1px 0;
$file-name-max-width: 16em;

// Input

$input-color: $grey-darker;
$input-background-color: $white;
$input-border-color: $grey-lighter;
$input-height: $control-height;
$input-shadow: inset 0 1px 2px rgba($black, .1);
$input-placeholder-color: rgba($input-color, .3);

$input-hover-color: $grey-darker;
$input-hover-border-color: $grey-light;

$input-focus-color: $grey-darker;
$input-focus-border-color: $link;
$input-focus-box-shadow-size: 0 0 0 .125em;
$input-focus-box-shadow-color: rgba($link, .25);

$input-disabled-color: $text-light;
$input-disabled-background-color: $background;
$input-disabled-border-color: $background;
$input-disabled-placeholder-color: rgba($input-disabled-color, .3);

$input-arrow: $link;

$input-icon-color: $grey-lighter;
$input-icon-active-color: $grey;

$input-radius: $radius;

// Label

$label-color: $grey-darker;
$label-weight: $weight-bold;

// Help

$help-size: $size-small;

// Box

$box-color: $text;
$box-background-color: $white;
$box-radius: $radius-large;
$box-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);
$box-padding: 1.25rem;

$box-link-hover-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px $link;
$box-link-active-shadow: inset 0 1px 2px rgba($black, .2), 0 0 0 1px $link;

// Button

$button-color: $grey-darker;
$button-background-color: $white;
$button-family: false;

$button-border-color: $grey-lighter;
$button-border-width: $control-border-width;

$button-padding-vertical: calc(.375em - #{$button-border-width});
$button-padding-horizontal: .75em;

$button-hover-color: $link-hover;
$button-hover-border-color: $link-hover-border;

$button-focus-color: $link-focus;
$button-focus-border-color: $link-focus-border;
$button-focus-box-shadow-size: 0 0 0 .125em;
$button-focus-box-shadow-color: rgba($link, .25);

$button-active-color: $link-active;
$button-active-border-color: $link-active-border;

$button-text-color: $text;
$button-text-hover-background-color: $background;
$button-text-hover-color: $text-strong;

$button-disabled-background-color: $white;
$button-disabled-border-color: $grey-lighter;
$button-disabled-shadow: none;
$button-disabled-opacity: .5;

$button-static-color: $grey;
$button-static-background-color: $white-ter;
$button-static-border-color: $grey-lighter;

// Container

$container-offset: (2 * $gap);

// Content

$content-heading-color: $text-strong;
$content-heading-weight: $weight-semibold;
$content-heading-line-height: 1.125;

$content-blockquote-background-color: $background;
$content-blockquote-border-left: 5px solid $border;
$content-blockquote-padding: 1.25em 1.5em;

$content-pre-padding: 1.25em 1.5em;

$content-table-cell-border: 1px solid $border;
$content-table-cell-border-width: 0 0 1px;
$content-table-cell-padding: .5em .75em;
$content-table-cell-heading-color: $text-strong;
$content-table-head-cell-border-width: 0 0 2px;
$content-table-head-cell-color: $text-strong;
$content-table-foot-cell-border-width: 2px 0 0;
$content-table-foot-cell-color: $text-strong;

// Icon

$icon-dimensions: 1.5rem;
$icon-dimensions-small: 1rem;
$icon-dimensions-medium: 2rem;
$icon-dimensions-large: 3rem;

// Image

$dimensions: 16 24 32 48 64 96 128;

// Notification

$notification-background-color: $background;
$notification-radius: $radius;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem;

// Progress

$progress-bar-background-color: $border;
$progress-value-background-color: $text;
$progress-border-radius: $radius-rounded;

$progress-indeterminate-duration: 1.5s;

// Table

$table-color: $grey-darker;
$table-background-color: $white;

$table-cell-border: 1px solid $grey-lighter;
$table-cell-border-width: 0 0 1px;
$table-cell-padding: .5em .75em;
$table-cell-heading-color: $text-strong;

$table-head-cell-border-width: 0 0 2px;
$table-head-cell-color: $text-strong;
$table-foot-cell-border-width: 2px 0 0;
$table-foot-cell-color: $text-strong;

$table-head-background-color: transparent;
$table-body-background-color: transparent;
$table-foot-background-color: transparent;

$table-row-hover-background-color: $white-bis;

$table-row-active-background-color: $primary;
$table-row-active-color: $primary-invert;

$table-striped-row-even-background-color: $white-bis;
$table-striped-row-even-hover-background-color: $white-ter;

// Tag

$tag-background-color: $background;
$tag-color: $text;
$tag-radius: $radius;
$tag-delete-margin: 1px;

// Title

$title-color: $grey-darker;
$title-family: false;
$title-size: $size-3;
$title-weight: $weight-semibold;
$title-line-height: 1.125;
$title-strong-color: inherit;
$title-strong-weight: inherit;
$title-sub-size: .75em;
$title-sup-size: .75em;

$subtitle-color: $grey-dark;
$subtitle-family: false;
$subtitle-size: $size-5;
$subtitle-weight: $weight-normal;
$subtitle-line-height: 1.25;
$subtitle-strong-color: $grey-darker;
$subtitle-strong-weight: $weight-semibold;
$subtitle-negative-margin: -1.25rem;

// Breadcrumb

$breadcrumb-item-color: $link;
$breadcrumb-item-hover-color: $link-hover;
$breadcrumb-item-active-color: $text-strong;

$breadcrumb-item-padding-vertical: 0;
$breadcrumb-item-padding-horizontal: .75em;

$breadcrumb-item-separator-color: $grey-light;

// Card

$card-color: $text;
$card-background-color: $white;
$card-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);

$card-header-background-color: transparent;
$card-header-color: $text-strong;
$card-header-padding: .75rem;
$card-header-shadow: 0 1px 2px rgba($black, .1);
$card-header-weight: $weight-bold;

$card-content-background-color: transparent;
$card-content-padding: 1.5rem;

$card-footer-background-color: transparent;
$card-footer-border-top: 1px solid $border;
$card-footer-padding: .75rem;

$card-media-margin: $block-spacing;

// Dropdown

$dropdown-menu-min-width: 12rem;

$dropdown-content-background-color: $white;
$dropdown-content-arrow: $link;
$dropdown-content-offset: 4px;
$dropdown-content-padding-bottom: .5rem;
$dropdown-content-padding-top: .5rem;
$dropdown-content-radius: $radius;
$dropdown-content-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);
$dropdown-content-z: 20;

$dropdown-item-color: $grey-dark;
$dropdown-item-hover-color: $black;
$dropdown-item-hover-background-color: $background;
$dropdown-item-active-color: $link-invert;
$dropdown-item-active-background-color: $link;

$dropdown-divider-background-color: $border;

// Level

$level-item-spacing: ($block-spacing / 2);

// List

$list-background-color: $white;
$list-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);
$list-radius: $radius;

$list-item-border: 1px solid $border;
$list-item-color: $text;
$list-item-active-background-color: $link;
$list-item-active-color: $link-invert;
$list-item-hover-background-color: $background;

// Menu

$menu-item-color: $text;
$menu-item-radius: $radius-small;
$menu-item-hover-color: $text-strong;
$menu-item-hover-background-color: $background;
$menu-item-active-color: $link-invert;
$menu-item-active-background-color: $link;

$menu-list-border-left: 1px solid $border;
$menu-list-line-height: 1.25;
$menu-list-link-padding: .5em .75em;
$menu-nested-list-margin: .75em;
$menu-nested-list-padding-left: .75em;

$menu-label-color: $text-light;
$menu-label-font-size: .75em;
$menu-label-letter-spacing: .1em;
$menu-label-spacing: 1em;

// Message

$message-background-color: $background;
$message-radius: $radius;

$message-header-background-color: $text;
$message-header-color: $text-invert;
$message-header-weight: $weight-bold;
$message-header-padding: .75em 1em;
$message-header-radius: $radius;

$message-body-border-color: $border;
$message-body-border-width: 0 0 0 4px;
$message-body-color: $text;
$message-body-padding: 1.25em 1.5em;
$message-body-radius: $radius;

$message-body-pre-background-color: $white;
$message-body-pre-code-background-color: transparent;

$message-header-body-border-width: 0;
$message-colors: $colors;

// Modal

$modal-z: 40;

$modal-background-background-color: rgba($black, .86);

$modal-content-width: 640px;
$modal-content-margin-mobile: 20px;
$modal-content-spacing-mobile: 160px;
$modal-content-spacing-tablet: 40px;

$modal-close-dimensions: 40px;
$modal-close-right: 20px;
$modal-close-top: 20px;

$modal-card-spacing: 40px;

$modal-card-head-background-color: $background;
$modal-card-head-border-bottom: 1px solid $border;
$modal-card-head-padding: 20px;
$modal-card-head-radius: $radius-large;

$modal-card-title-color: $text-strong;
$modal-card-title-line-height: 1;
$modal-card-title-size: $size-4;

$modal-card-foot-radius: $radius-large;
$modal-card-foot-border-top: 1px solid $border;

$modal-card-body-background-color: $white;
$modal-card-body-padding: 20px;

// Navbar

$navbar-background-color: $white;
$navbar-box-shadow-size: 0 2px 0 0;
$navbar-box-shadow-color: $background;
$navbar-height: 3.25rem;
$navbar-padding-vertical: 1rem;
$navbar-padding-horizontal: 2rem;
$navbar-z: 30;
$navbar-fixed-z: 30;

$navbar-item-color: $grey-dark;
$navbar-item-hover-color: $link;
$navbar-item-hover-background-color: $white-bis;
$navbar-item-active-color: $black;
$navbar-item-active-background-color: transparent;
$navbar-item-img-max-height: 1.75rem;

$navbar-burger-color: $navbar-item-color;

$navbar-tab-hover-background-color: transparent;
$navbar-tab-hover-border-bottom-color: $link;
$navbar-tab-active-color: $link;
$navbar-tab-active-background-color: transparent;
$navbar-tab-active-border-bottom-color: $link;
$navbar-tab-active-border-bottom-style: solid;
$navbar-tab-active-border-bottom-width: 3px;

$navbar-dropdown-background-color: $white;
$navbar-dropdown-border-top: 2px solid $border;
$navbar-dropdown-offset: -4px;
$navbar-dropdown-arrow: $link;
$navbar-dropdown-radius: $radius-large;
$navbar-dropdown-z: 20;

$navbar-dropdown-boxed-radius: $radius-large;
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, .1), 0 0 0 1px rgba($black, .1);

$navbar-dropdown-item-hover-color: $black;
$navbar-dropdown-item-hover-background-color: $background;
$navbar-dropdown-item-active-color: $link;
$navbar-dropdown-item-active-background-color: $background;

$navbar-divider-background-color: $background;
$navbar-divider-height: 2px;

$navbar-bottom-box-shadow-size: 0 -2px 0 0;

$navbar-breakpoint: $desktop;

// Pagination

$pagination-color: $grey-darker;
$pagination-border-color: $grey-lighter;
$pagination-margin: -.25rem;
$pagination-min-width: $control-height;

$pagination-item-font-size: 1em;
$pagination-item-margin: .25rem;
$pagination-item-padding-left: .5em;
$pagination-item-padding-right: .5em;

$pagination-hover-color: $link-hover;
$pagination-hover-border-color: $link-hover-border;

$pagination-focus-color: $link-focus;
$pagination-focus-border-color: $link-focus-border;

$pagination-active-color: $link-active;
$pagination-active-border-color: $link-active-border;

$pagination-disabled-color: $grey;
$pagination-disabled-background-color: $grey-lighter;
$pagination-disabled-border-color: $grey-lighter;

$pagination-current-color: $link-invert;
$pagination-current-background-color: $link;
$pagination-current-border-color: $link;

$pagination-ellipsis-color: $grey-light;

$pagination-shadow-inset: inset 0 1px 2px rgba($black, .2);

// Panel

$panel-margin: $block-spacing;
$panel-item-border: 1px solid $border;

$panel-heading-background-color: $background;
$panel-heading-color: $text-strong;
$panel-heading-line-height: 1.25;
$panel-heading-padding: .5em .75em;
$panel-heading-radius: $radius;
$panel-heading-size: 1.25em;
$panel-heading-weight: $weight-light;

$panel-tabs-font-size: .875em;
$panel-tab-border-bottom: 1px solid $border;
$panel-tab-active-border-bottom-color: $link-active-border;
$panel-tab-active-color: $link-active;

$panel-list-item-color: $text;
$panel-list-item-hover-color: $link;

$panel-block-color: $text-strong;
$panel-block-hover-background-color: $background;
$panel-block-active-border-left-color: $link;
$panel-block-active-color: $link-active;
$panel-block-active-icon-color: $link;

$panel-icon-color: $text-light;

// Tabs

$tabs-border-bottom-color: $border;
$tabs-border-bottom-style: solid;
$tabs-border-bottom-width: 1px;
$tabs-link-color: $text;
$tabs-link-hover-border-bottom-color: $text-strong;
$tabs-link-hover-color: $text-strong;
$tabs-link-active-border-bottom-color: $link;
$tabs-link-active-color: $link;
$tabs-link-padding: .5em 1em;

$tabs-boxed-link-radius: $radius;
$tabs-boxed-link-hover-background-color: $background;
$tabs-boxed-link-hover-border-bottom-color: $border;

$tabs-boxed-link-active-background-color: $white;
$tabs-boxed-link-active-border-color: $border;
$tabs-boxed-link-active-border-bottom-color: transparent;

$tabs-toggle-link-border-color: $border;
$tabs-toggle-link-border-style: solid;
$tabs-toggle-link-border-width: 1px;
$tabs-toggle-link-hover-background-color: $background;
$tabs-toggle-link-hover-border-color: $border-hover;
$tabs-toggle-link-radius: $radius;
$tabs-toggle-link-active-background-color: $link;
$tabs-toggle-link-active-border-color: $link;
$tabs-toggle-link-active-color: $link-invert;

// Extensions

// Checkradio

$checkbox-radius: $radius;
$checkbox-border: .1rem solid $grey-lighter;
$checkbox-block-background: $white-ter;
$checkbox-checked-width: .1rem;
$checkradio-focus: 1px dotted $grey-light;
$checkradio-top-offset: 0;

// Divider

$divider-background-color: $grey-lighter;
$divider-thickness: .1rem;
$divider-font-size: $size-7;
$divider-color: $grey-light;

// Page-loader

$pageloader-opacity: 1;

// Pricing table

$pageloader-opacity: 1;// Bulma v0.7.5 variables

// Colors

$black: hsl(0, 0%, 4%);
$black-bis: hsl(0, 0%, 7%);
$black-ter: hsl(0, 0%, 14%);

$grey-darker: hsl(0, 0%, 21%);
$grey-dark: hsl(0, 0%, 29%);
$grey: hsl(0, 0%, 48%);
$grey-light: hsl(0, 0%, 71%);
$grey-lighter: hsl(0, 0%, 86%);

$white-ter: hsl(0, 0%, 96%);
$white-bis: hsl(0, 0%, 98%);
$white: hsl(0, 0%, 100%);

$orange: hsl(14, 100%, 53%);
$yellow: hsl(48, 100%, 67%);
$green: hsl(141, 71%, 48%);
$turquoise: hsl(171, 100%, 41%);
$cyan: hsl(204, 86%, 53%);
$blue: hsl(217, 71%, 53%);
$purple: hsl(271, 100%, 71%);
$red: hsl(348, 100%, 61%);

$primary: $turquoise;

$info: $cyan;
$success: $green;
$warning: $yellow;
$danger: $red;

$light: $white-ter;
$dark: $grey-darker;

// Invert colors

$orange-invert: findColorInvert($orange);
$yellow-invert: findColorInvert($yellow);
$green-invert: findColorInvert($green);
$turquoise-invert: findColorInvert($turquoise);
$cyan-invert: findColorInvert($cyan);
$blue-invert: findColorInvert($blue);
$purple-invert: findColorInvert($purple);
$red-invert: findColorInvert($red);

$primary-invert: $turquoise-invert;
$info-invert: $cyan-invert;
$success-invert: $green-invert;
$warning-invert: $yellow-invert;
$danger-invert: $red-invert;
$light-invert: $dark;
$dark-invert: $light;

// General colors

$background: $white-ter;

$border: $grey-lighter;
$border-hover: $grey-light;

// Text colors

$text: $grey-dark;
$text-invert: findColorInvert($text);
$text-light: $grey;
$text-strong: $grey-darker;

// Link colors

$link: $blue;
$link-invert: $blue-invert;
$link-visited: $purple;

$link-hover: $grey-darker;
$link-hover-border: $grey-light;

$link-focus: $grey-darker;
$link-focus-border: $blue;

$link-active: $grey-darker;
$link-active-border: $grey-dark;

// Typography

$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$family-monospace: monospace;
$render-mode: optimizeLegibility;

$size-1: 3rem;
$size-2: 2.5rem;
$size-3: 2rem;
$size-4: 1.5rem;
$size-5: 1.25rem;
$size-6: 1rem;
$size-7: .75rem;

$weight-light: 300;
$weight-normal: 400;
$weight-medium: 500;
$weight-semibold: 600;
$weight-bold: 700;

$strong-color: $text-strong;
$strong-weight: $weight-bold;

$family-primary: $family-sans-serif;
$family-secondary: $family-sans-serif;
$family-code: $family-monospace;

$size-small: $size-7;
$size-normal: $size-6;
$size-medium: $size-5;
$size-large: $size-4;

$small-font-size: .875em;

// Spacing

$block-spacing: 1.5rem;

// Responsiveness

$gap: 32px;
$tablet: 769px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$widescreen-enabled: true;
$fullhd: 1344px + (2 * $gap);
$fullhd-enabled: true;

// Miscellaneous

$easing: ease-out;
$radius-small: 2px;
$radius: 4px;
$radius-large: 6px;
$radius-rounded: 290486px;
$speed: 86ms;

// Flags

$variable-columns: true;

// Lists and maps

$custom-colors: null;
$custom-shades: null;

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors);
$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);

$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;

// Controls

$control-radius: $radius;
$control-radius-small: $radius-small;

$control-border-width: 1px;

$control-height: 2.25em;
$control-line-height: 1.5;

$control-padding-vertical: calc(.375em - #{$control-border-width});
$control-padding-horizontal: calc(.625em - #{$control-border-width});

// Body

$body-background-color: $white;
$body-size: 16px;
$body-min-width: 300px;
$body-rendering: optimizeLegibility;
$body-family: $family-primary;
$body-overflow-x: hidden;
$body-overflow-y: scroll;

$body-color: $text;
$body-font-size: 1em;
$body-weight: $weight-normal;
$body-line-height: 1.5;

// Code

$code: $red;
$code-background: $background;
$code-family: $family-code;
$code-padding: .25em .5em .25em;
$code-weight: normal;
$code-size: .875em;

// HR

$hr-background-color: $background;
$hr-height: 2px;
$hr-margin: 1.5rem 0;

// PRE

$pre: $text;
$pre-background: $background;
$pre-font-size: .875em;
$pre-padding: 1.25rem 1.5rem;
$pre-code-font-size: 1em;

// Columns

$column-gap: .75rem;

// Tiles

$tile-spacing: .75rem;

// Footer

$footer-background-color: $white-bis;
$footer-color: false;
$footer-padding: 3rem 1.5rem 6rem;

// Section

$section-padding: 3rem 1.5rem;
$section-padding-medium: 9rem 1.5rem;
$section-padding-large: 18rem 1.5rem;

// File

$file-border-color: $border;
$file-radius: $radius;

$file-cta-background-color: $white-ter;
$file-cta-color: $grey-dark;
$file-cta-hover-color: $grey-darker;
$file-cta-active-color: $grey-darker;

$file-name-border-color: $border;
$file-name-border-style: solid;
$file-name-border-width: 1px 1px 1px 0;
$file-name-max-width: 16em;

// Input

$input-color: $grey-darker;
$input-background-color: $white;
$input-border-color: $grey-lighter;
$input-height: $control-height;
$input-shadow: inset 0 1px 2px rgba($black, .1);
$input-placeholder-color: rgba($input-color, .3);

$input-hover-color: $grey-darker;
$input-hover-border-color: $grey-light;

$input-focus-color: $grey-darker;
$input-focus-border-color: $link;
$input-focus-box-shadow-size: 0 0 0 .125em;
$input-focus-box-shadow-color: rgba($link, .25);

$input-disabled-color: $text-light;
$input-disabled-background-color: $background;
$input-disabled-border-color: $background;
$input-disabled-placeholder-color: rgba($input-disabled-color, .3);

$input-arrow: $link;

$input-icon-color: $grey-lighter;
$input-icon-active-color: $grey;

$input-radius: $radius;

// Label

$label-color: $grey-darker;
$label-weight: $weight-bold;

// Help

$help-size: $size-small;

// Box

$box-color: $text;
$box-background-color: $white;
$box-radius: $radius-large;
$box-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);
$box-padding: 1.25rem;

$box-link-hover-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px $link;
$box-link-active-shadow: inset 0 1px 2px rgba($black, .2), 0 0 0 1px $link;

// Button

$button-color: $grey-darker;
$button-background-color: $white;
$button-family: false;

$button-border-color: $grey-lighter;
$button-border-width: $control-border-width;

$button-padding-vertical: calc(.375em - #{$button-border-width});
$button-padding-horizontal: .75em;

$button-hover-color: $link-hover;
$button-hover-border-color: $link-hover-border;

$button-focus-color: $link-focus;
$button-focus-border-color: $link-focus-border;
$button-focus-box-shadow-size: 0 0 0 .125em;
$button-focus-box-shadow-color: rgba($link, .25);

$button-active-color: $link-active;
$button-active-border-color: $link-active-border;

$button-text-color: $text;
$button-text-hover-background-color: $background;
$button-text-hover-color: $text-strong;

$button-disabled-background-color: $white;
$button-disabled-border-color: $grey-lighter;
$button-disabled-shadow: none;
$button-disabled-opacity: .5;

$button-static-color: $grey;
$button-static-background-color: $white-ter;
$button-static-border-color: $grey-lighter;

// Container

$container-offset: (2 * $gap);

// Content

$content-heading-color: $text-strong;
$content-heading-weight: $weight-semibold;
$content-heading-line-height: 1.125;

$content-blockquote-background-color: $background;
$content-blockquote-border-left: 5px solid $border;
$content-blockquote-padding: 1.25em 1.5em;

$content-pre-padding: 1.25em 1.5em;

$content-table-cell-border: 1px solid $border;
$content-table-cell-border-width: 0 0 1px;
$content-table-cell-padding: .5em .75em;
$content-table-cell-heading-color: $text-strong;
$content-table-head-cell-border-width: 0 0 2px;
$content-table-head-cell-color: $text-strong;
$content-table-foot-cell-border-width: 2px 0 0;
$content-table-foot-cell-color: $text-strong;

// Icon

$icon-dimensions: 1.5rem;
$icon-dimensions-small: 1rem;
$icon-dimensions-medium: 2rem;
$icon-dimensions-large: 3rem;

// Image

$dimensions: 16 24 32 48 64 96 128;

// Notification

$notification-background-color: $background;
$notification-radius: $radius;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem;

// Progress

$progress-bar-background-color: $border;
$progress-value-background-color: $text;
$progress-border-radius: $radius-rounded;

$progress-indeterminate-duration: 1.5s;

// Table

$table-color: $grey-darker;
$table-background-color: $white;

$table-cell-border: 1px solid $grey-lighter;
$table-cell-border-width: 0 0 1px;
$table-cell-padding: .5em .75em;
$table-cell-heading-color: $text-strong;

$table-head-cell-border-width: 0 0 2px;
$table-head-cell-color: $text-strong;
$table-foot-cell-border-width: 2px 0 0;
$table-foot-cell-color: $text-strong;

$table-head-background-color: transparent;
$table-body-background-color: transparent;
$table-foot-background-color: transparent;

$table-row-hover-background-color: $white-bis;

$table-row-active-background-color: $primary;
$table-row-active-color: $primary-invert;

$table-striped-row-even-background-color: $white-bis;
$table-striped-row-even-hover-background-color: $white-ter;

// Tag

$tag-background-color: $background;
$tag-color: $text;
$tag-radius: $radius;
$tag-delete-margin: 1px;

// Title

$title-color: $grey-darker;
$title-family: false;
$title-size: $size-3;
$title-weight: $weight-semibold;
$title-line-height: 1.125;
$title-strong-color: inherit;
$title-strong-weight: inherit;
$title-sub-size: .75em;
$title-sup-size: .75em;

$subtitle-color: $grey-dark;
$subtitle-family: false;
$subtitle-size: $size-5;
$subtitle-weight: $weight-normal;
$subtitle-line-height: 1.25;
$subtitle-strong-color: $grey-darker;
$subtitle-strong-weight: $weight-semibold;
$subtitle-negative-margin: -1.25rem;

// Breadcrumb

$breadcrumb-item-color: $link;
$breadcrumb-item-hover-color: $link-hover;
$breadcrumb-item-active-color: $text-strong;

$breadcrumb-item-padding-vertical: 0;
$breadcrumb-item-padding-horizontal: .75em;

$breadcrumb-item-separator-color: $grey-light;

// Card

$card-color: $text;
$card-background-color: $white;
$card-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);

$card-header-background-color: transparent;
$card-header-color: $text-strong;
$card-header-padding: .75rem;
$card-header-shadow: 0 1px 2px rgba($black, .1);
$card-header-weight: $weight-bold;

$card-content-background-color: transparent;
$card-content-padding: 1.5rem;

$card-footer-background-color: transparent;
$card-footer-border-top: 1px solid $border;
$card-footer-padding: .75rem;

$card-media-margin: $block-spacing;

// Dropdown

$dropdown-menu-min-width: 12rem;

$dropdown-content-background-color: $white;
$dropdown-content-arrow: $link;
$dropdown-content-offset: 4px;
$dropdown-content-padding-bottom: .5rem;
$dropdown-content-padding-top: .5rem;
$dropdown-content-radius: $radius;
$dropdown-content-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);
$dropdown-content-z: 20;

$dropdown-item-color: $grey-dark;
$dropdown-item-hover-color: $black;
$dropdown-item-hover-background-color: $background;
$dropdown-item-active-color: $link-invert;
$dropdown-item-active-background-color: $link;

$dropdown-divider-background-color: $border;

// Level

$level-item-spacing: ($block-spacing / 2);

// List

$list-background-color: $white;
$list-shadow: 0 2px 3px rgba($black, .1), 0 0 0 1px rgba($black, .1);
$list-radius: $radius;

$list-item-border: 1px solid $border;
$list-item-color: $text;
$list-item-active-background-color: $link;
$list-item-active-color: $link-invert;
$list-item-hover-background-color: $background;

// Menu

$menu-item-color: $text;
$menu-item-radius: $radius-small;
$menu-item-hover-color: $text-strong;
$menu-item-hover-background-color: $background;
$menu-item-active-color: $link-invert;
$menu-item-active-background-color: $link;

$menu-list-border-left: 1px solid $border;
$menu-list-line-height: 1.25;
$menu-list-link-padding: .5em .75em;
$menu-nested-list-margin: .75em;
$menu-nested-list-padding-left: .75em;

$menu-label-color: $text-light;
$menu-label-font-size: .75em;
$menu-label-letter-spacing: .1em;
$menu-label-spacing: 1em;

// Message

$message-background-color: $background;
$message-radius: $radius;

$message-header-background-color: $text;
$message-header-color: $text-invert;
$message-header-weight: $weight-bold;
$message-header-padding: .75em 1em;
$message-header-radius: $radius;

$message-body-border-color: $border;
$message-body-border-width: 0 0 0 4px;
$message-body-color: $text;
$message-body-padding: 1.25em 1.5em;
$message-body-radius: $radius;

$message-body-pre-background-color: $white;
$message-body-pre-code-background-color: transparent;

$message-header-body-border-width: 0;
$message-colors: $colors;

// Modal

$modal-z: 40;

$modal-background-background-color: rgba($black, .86);

$modal-content-width: 640px;
$modal-content-margin-mobile: 20px;
$modal-content-spacing-mobile: 160px;
$modal-content-spacing-tablet: 40px;

$modal-close-dimensions: 40px;
$modal-close-right: 20px;
$modal-close-top: 20px;

$modal-card-spacing: 40px;

$modal-card-head-background-color: $background;
$modal-card-head-border-bottom: 1px solid $border;
$modal-card-head-padding: 20px;
$modal-card-head-radius: $radius-large;

$modal-card-title-color: $text-strong;
$modal-card-title-line-height: 1;
$modal-card-title-size: $size-4;

$modal-card-foot-radius: $radius-large;
$modal-card-foot-border-top: 1px solid $border;

$modal-card-body-background-color: $white;
$modal-card-body-padding: 20px;

// Navbar

$navbar-background-color: $white;
$navbar-box-shadow-size: 0 2px 0 0;
$navbar-box-shadow-color: $background;
$navbar-height: 3.25rem;
$navbar-padding-vertical: 1rem;
$navbar-padding-horizontal: 2rem;
$navbar-z: 30;
$navbar-fixed-z: 30;

$navbar-item-color: $grey-dark;
$navbar-item-hover-color: $link;
$navbar-item-hover-background-color: $white-bis;
$navbar-item-active-color: $black;
$navbar-item-active-background-color: transparent;
$navbar-item-img-max-height: 1.75rem;

$navbar-burger-color: $navbar-item-color;

$navbar-tab-hover-background-color: transparent;
$navbar-tab-hover-border-bottom-color: $link;
$navbar-tab-active-color: $link;
$navbar-tab-active-background-color: transparent;
$navbar-tab-active-border-bottom-color: $link;
$navbar-tab-active-border-bottom-style: solid;
$navbar-tab-active-border-bottom-width: 3px;

$navbar-dropdown-background-color: $white;
$navbar-dropdown-border-top: 2px solid $border;
$navbar-dropdown-offset: -4px;
$navbar-dropdown-arrow: $link;
$navbar-dropdown-radius: $radius-large;
$navbar-dropdown-z: 20;

$navbar-dropdown-boxed-radius: $radius-large;
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, .1), 0 0 0 1px rgba($black, .1);

$navbar-dropdown-item-hover-color: $black;
$navbar-dropdown-item-hover-background-color: $background;
$navbar-dropdown-item-active-color: $link;
$navbar-dropdown-item-active-background-color: $background;

$navbar-divider-background-color: $background;
$navbar-divider-height: 2px;

$navbar-bottom-box-shadow-size: 0 -2px 0 0;

$navbar-breakpoint: $desktop;

// Pagination

$pagination-color: $grey-darker;
$pagination-border-color: $grey-lighter;
$pagination-margin: -.25rem;
$pagination-min-width: $control-height;

$pagination-item-font-size: 1em;
$pagination-item-margin: .25rem;
$pagination-item-padding-left: .5em;
$pagination-item-padding-right: .5em;

$pagination-hover-color: $link-hover;
$pagination-hover-border-color: $link-hover-border;

$pagination-focus-color: $link-focus;
$pagination-focus-border-color: $link-focus-border;

$pagination-active-color: $link-active;
$pagination-active-border-color: $link-active-border;

$pagination-disabled-color: $grey;
$pagination-disabled-background-color: $grey-lighter;
$pagination-disabled-border-color: $grey-lighter;

$pagination-current-color: $link-invert;
$pagination-current-background-color: $link;
$pagination-current-border-color: $link;

$pagination-ellipsis-color: $grey-light;

$pagination-shadow-inset: inset 0 1px 2px rgba($black, .2);

// Panel

$panel-margin: $block-spacing;
$panel-item-border: 1px solid $border;

$panel-heading-background-color: $background;
$panel-heading-color: $text-strong;
$panel-heading-line-height: 1.25;
$panel-heading-padding: .5em .75em;
$panel-heading-radius: $radius;
$panel-heading-size: 1.25em;
$panel-heading-weight: $weight-light;

$panel-tabs-font-size: .875em;
$panel-tab-border-bottom: 1px solid $border;
$panel-tab-active-border-bottom-color: $link-active-border;
$panel-tab-active-color: $link-active;

$panel-list-item-color: $text;
$panel-list-item-hover-color: $link;

$panel-block-color: $text-strong;
$panel-block-hover-background-color: $background;
$panel-block-active-border-left-color: $link;
$panel-block-active-color: $link-active;
$panel-block-active-icon-color: $link;

$panel-icon-color: $text-light;

// Tabs

$tabs-border-bottom-color: $border;
$tabs-border-bottom-style: solid;
$tabs-border-bottom-width: 1px;
$tabs-link-color: $text;
$tabs-link-hover-border-bottom-color: $text-strong;
$tabs-link-hover-color: $text-strong;
$tabs-link-active-border-bottom-color: $link;
$tabs-link-active-color: $link;
$tabs-link-padding: .5em 1em;

$tabs-boxed-link-radius: $radius;
$tabs-boxed-link-hover-background-color: $background;
$tabs-boxed-link-hover-border-bottom-color: $border;

$tabs-boxed-link-active-background-color: $white;
$tabs-boxed-link-active-border-color: $border;
$tabs-boxed-link-active-border-bottom-color: transparent;

$tabs-toggle-link-border-color: $border;
$tabs-toggle-link-border-style: solid;
$tabs-toggle-link-border-width: 1px;
$tabs-toggle-link-hover-background-color: $background;
$tabs-toggle-link-hover-border-color: $border-hover;
$tabs-toggle-link-radius: $radius;
$tabs-toggle-link-active-background-color: $link;
$tabs-toggle-link-active-border-color: $link;
$tabs-toggle-link-active-color: $link-invert;

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rdebeasi]

Hi! Not stale. This question still applies to Bluma 0.8.0. Thank you!

forms.sass was deprecated in 0.7.5 and was replaced with individual component stylesheets. These stylesheets still have undocumented variables, and it's still clear whether consumers of bulma can safely utilize these variables.

[anarchist-jon]

Here is the variables file I am using for version 0.8.0:

// BULMA v0.8.0 VARIABLES

// INITIAL VARIABLES

// Colors
$black: hsl(0, 0%, 4%);
$black-bis: hsl(0, 0%, 7%);
$black-ter: hsl(0, 0%, 14%);

$grey-darker: hsl(0, 0%, 21%);
$grey-dark: hsl(0, 0%, 29%);
$grey: hsl(0, 0%, 48%);
$grey-light: hsl(0, 0%, 71%);
$grey-lighter: hsl(0, 0%, 86%);
$grey-lightest: hsl(0, 0%, 93%);

$white-ter: hsl(0, 0%, 96%);
$white-bis: hsl(0, 0%, 98%);
$white: hsl(0, 0%, 100%);

$orange: hsl(14, 100%, 53%);
$yellow: hsl(48, 100%, 67%);
$green: hsl(141, 53%, 53%);
$turquoise: hsl(171, 100%, 41%);
$cyan: hsl(204, 71%, 53%);
$blue: hsl(217, 71%, 53%);
$purple: hsl(271, 100%, 71%);
$red: hsl(348, 86%, 61%);

// Typography
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
$family-monospace: monospace;
$render-mode: optimizeLegibility;

$size-1: 3rem;
$size-2: 2.5rem;
$size-3: 2rem;
$size-4: 1.5rem;
$size-5: 1.25rem;
$size-6: 1rem;
$size-7: 0.75rem;

$weight-light: 300;
$weight-normal: 400;
$weight-medium: 500;
$weight-semibold: 600;
$weight-bold: 700;

// Spacing
$block-spacing: 1.5rem;

// Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px;
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px;
// 960px container + 4rem
$desktop: 960px + (2 * $gap);
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap);
$widescreen-enabled: true;
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap);
$fullhd-enabled: true;

// Miscellaneous
$easing: ease-out;
$radius-small: 2px;
$radius: 4px;
$radius-large: 6px;
$radius-rounded: 290486px;
$speed: 86ms;

// Flags
$variable-columns: true;

//DERIVED VARIABLES

$primary: $turquoise;

$info: $cyan;
$success: $green;
$warning: $yellow;
$danger: $red;

$light: $white-ter;
$dark: $grey-darker;

// Invert colors

$orange-invert: findColorInvert($orange);
$yellow-invert: findColorInvert($yellow);
$green-invert: findColorInvert($green);
$turquoise-invert: findColorInvert($turquoise);
$cyan-invert: findColorInvert($cyan);
$blue-invert: findColorInvert($blue);
$purple-invert: findColorInvert($purple);
$red-invert: findColorInvert($red);

$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);

// General colors

$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;

$background: $white-ter;

$border: $grey-lighter;
$border-hover: $grey-light;
$border-light: $grey-lightest;
$border-light-hover: $grey-light;

// Text colors

$text: $grey-dark;
$text-invert: findColorInvert($text);
$text-light: $grey;
$text-strong: $grey-darker;

// Code colors

$code: $red;
$code-background: $background;

$pre: $text;
$pre-background: $background;

// Link colors

$link: $blue;
$link-invert: findColorInvert($link);
$link-light: findLightColor($link);
$link-dark: findDarkColor($link);
$link-visited: $purple;

$link-hover: $grey-darker;
$link-hover-border: $grey-light;

$link-focus: $grey-darker;
$link-focus-border: $blue;

$link-active: $grey-darker;
$link-active-border: $grey-dark;

// Typography

$family-primary: $family-sans-serif;
$family-secondary: $family-sans-serif;
$family-code: $family-monospace;

$size-small: $size-7;
$size-normal: $size-6;
$size-medium: $size-5;
$size-large: $size-4;

// Lists and maps
$custom-colors: null;
$custom-shades: null;

$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
);
$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
);

$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;

// CONTROLS

$control-radius: $radius;
$control-radius-small: $radius-small;

$control-border-width: 1px;

$control-height: 2.5em;
$control-line-height: 1.5;

$control-padding-vertical: calc(0.5em - #{$control-border-width});
$control-padding-horizontal: calc(0.75em - #{$control-border-width});

// GENERIC

$body-background-color: $scheme-main;
$body-size: 16px;
$body-min-width: 300px;
$body-rendering: optimizeLegibility;
$body-family: $family-primary;
$body-overflow-x: hidden;
$body-overflow-y: scroll;

$body-color: $text;
$body-font-size: 1em;
$body-weight: $weight-normal;
$body-line-height: 1.5;

$code-family: $family-code;
$code-padding: 0.25em 0.5em 0.25em;
$code-weight: normal;
$code-size: 0.875em;

$small-font-size: 0.875em;

$hr-background-color: $background;
$hr-height: 2px;
$hr-margin: 1.5rem 0;

$strong-color: $text-strong;
$strong-weight: $weight-bold;

$pre-font-size: 0.875em;
$pre-padding: 1.25rem 1.5rem;
$pre-code-font-size: 1em;

// ELEMENTS

// Box

$box-color: $text;
$box-background-color: $scheme-main;
$box-radius: $radius-large;
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0px 0 1px rgba($scheme-invert, 0.02);
$box-padding: 1.25rem;

$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0 0 1px $link;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2),
0 0 0 1px $link;

// Button

$button-color: $text-strong;
$button-background-color: $scheme-main;
$button-family: false;

$button-border-color: $border;
$button-border-width: $control-border-width;

$button-padding-vertical: calc(0.5em - #{$button-border-width});
$button-padding-horizontal: 1em;

$button-hover-color: $link-hover;
$button-hover-border-color: $link-hover-border;

$button-focus-color: $link-focus;
$button-focus-border-color: $link-focus-border;
$button-focus-box-shadow-size: 0 0 0 0.125em;
$button-focus-box-shadow-color: bulmaRgba($link, 0.25);

$button-active-color: $link-active;
$button-active-border-color: $link-active-border;

$button-text-color: $text;
$button-text-decoration: underline;
$button-text-hover-background-color: $background;
$button-text-hover-color: $text-strong;

$button-disabled-background-color: $scheme-main;
$button-disabled-border-color: $border;
$button-disabled-shadow: none;
$button-disabled-opacity: 0.5;

$button-static-color: $text-light;
$button-static-background-color: $scheme-main-ter;
$button-static-border-color: $border;

// Container

$container-offset: (2 * $gap);

// Content

$content-heading-color: $text-strong;
$content-heading-weight: $weight-semibold;
$content-heading-line-height: 1.125;

$content-blockquote-background-color: $background;
$content-blockquote-border-left: 5px solid $border;
$content-blockquote-padding: 1.25em 1.5em;

$content-pre-padding: 1.25em 1.5em;

$content-table-cell-border: 1px solid $border;
$content-table-cell-border-width: 0 0 1px;
$content-table-cell-padding: 0.5em 0.75em;
$content-table-cell-heading-color: $text-strong;
$content-table-head-cell-border-width: 0 0 2px;
$content-table-head-cell-color: $text-strong;
$content-table-foot-cell-border-width: 2px 0 0;
$content-table-foot-cell-color: $text-strong;

// Icon

$icon-dimensions: 1.5rem;
$icon-dimensions-small: 1rem;
$icon-dimensions-medium: 2rem;
$icon-dimensions-large: 3rem;

// Image

$dimensions: 16 24 32 48 64 96 128;

// Notification

$notification-background-color: $background;
$notification-code-background-color: $scheme-main;
$notification-radius: $radius;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem;

// Progress

$progress-bar-background-color: $border-light;
$progress-value-background-color: $text;
$progress-border-radius: $radius-rounded;

$progress-indeterminate-duration: 1.5s;

// Table

$table-color: $text-strong;
$table-background-color: $scheme-main;

$table-cell-border: 1px solid $border;
$table-cell-border-width: 0 0 1px;
$table-cell-padding: 0.5em 0.75em;
$table-cell-heading-color: $text-strong;

$table-head-cell-border-width: 0 0 2px;
$table-head-cell-color: $text-strong;
$table-foot-cell-border-width: 2px 0 0;
$table-foot-cell-color: $text-strong;

$table-head-background-color: transparent;
$table-body-background-color: transparent;
$table-foot-background-color: transparent;

$table-row-hover-background-color: $scheme-main-bis;

$table-row-active-background-color: $primary;
$table-row-active-color: $primary-invert;

$table-striped-row-even-background-color: $scheme-main-bis;
$table-striped-row-even-hover-background-color: $scheme-main-ter;

// Tag

$tag-background-color: $background;
$tag-color: $text;
$tag-radius: $radius;
$tag-delete-margin: 1px;

// Title

$title-color: $text-strong;
$title-family: false;
$title-size: $size-3;
$title-weight: $weight-semibold;
$title-line-height: 1.125;
$title-strong-color: inherit;
$title-strong-weight: inherit;
$title-sub-size: 0.75em;
$title-sup-size: 0.75em;

$subtitle-color: $text;
$subtitle-family: false;
$subtitle-size: $size-5;
$subtitle-weight: $weight-normal;
$subtitle-line-height: 1.25;
$subtitle-strong-color: $text-strong;
$subtitle-strong-weight: $weight-semibold;
$subtitle-negative-margin: -1.25rem;

// FORM

// File

$file-border-color: $border;
$file-radius: $radius;

$file-cta-background-color: $scheme-main-ter;
$file-cta-color: $text;
$file-cta-hover-color: $text-strong;
$file-cta-active-color: $text-strong;

$file-name-border-color: $border;
$file-name-border-style: solid;
$file-name-border-width: 1px 1px 1px 0;
$file-name-max-width: 16em;

// Input textarea

$textarea-padding: $control-padding-horizontal;
$textarea-max-height: 40em;
$textarea-min-height: 8em;

// Shared

$input-color: inherit;
$input-background-color: $scheme-main;
$input-border-color: $border;
$input-height: $control-height;
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05);
$input-placeholder-color: bulmaRgba($input-color, 0.3);

$input-hover-color: $text-strong;
$input-hover-border-color: $border-hover;

$input-focus-color: $text-strong;
$input-focus-border-color: $link;
$input-focus-box-shadow-size: 0 0 0 0.125em;
$input-focus-box-shadow-color: bulmaRgba($link, 0.25);

$input-disabled-color: $text-light;
$input-disabled-background-color: $background;
$input-disabled-border-color: $background;
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3);

$input-arrow: $link;

$input-icon-color: $border;
$input-icon-active-color: $text;

$input-radius: $radius;

// Tools

$label-color: $text-strong;
$label-weight: $weight-bold;

$help-size: $size-small;

// COMPONENTS

// Breadcrumb

$breadcrumb-item-color: $link;
$breadcrumb-item-hover-color: $link-hover;
$breadcrumb-item-active-color: $text-strong;

$breadcrumb-item-padding-vertical: 0;
$breadcrumb-item-padding-horizontal: 0.75em;

$breadcrumb-item-separator-color: $border-hover;

// Card

$card-color: $text;
$card-background-color: $scheme-main;
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0px 0 1px rgba($scheme-invert, 0.02);

$card-header-background-color: transparent;
$card-header-color: $text-strong;
$card-header-padding: 0.75rem 1rem;
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1);
$card-header-weight: $weight-bold;

$card-content-background-color: transparent;
$card-content-padding: 1.5rem;

$card-footer-background-color: transparent;
$card-footer-border-top: 1px solid $border-light;
$card-footer-padding: 0.75rem;

$card-media-margin: $block-spacing;

// Dropdown

$dropdown-menu-min-width: 12rem;

$dropdown-content-background-color: $scheme-main;
$dropdown-content-arrow: $link;
$dropdown-content-offset: 4px;
$dropdown-content-padding-bottom: 0.5rem;
$dropdown-content-padding-top: 0.5rem;
$dropdown-content-radius: $radius;
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0px 0 1px rgba($scheme-invert, 0.02);
$dropdown-content-z: 20;

$dropdown-item-color: $text;
$dropdown-item-hover-color: $scheme-invert;
$dropdown-item-hover-background-color: $background;
$dropdown-item-active-color: $link-invert;
$dropdown-item-active-background-color: $link;

$dropdown-divider-background-color: $border-light;

// Level

$level-item-spacing: ($block-spacing / 2);

// List

$list-background-color: $scheme-main;
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1),
0 0 0 1px rgba($scheme-invert, 0.1);
$list-radius: $radius;

$list-item-border: 1px solid $border;
$list-item-color: $text;
$list-item-active-background-color: $link;
$list-item-active-color: $link-invert;
$list-item-hover-background-color: $background;

// Media

$media-border-color: bulmaRgba($border, 0.5);

// Menu

$menu-item-color: $text;
$menu-item-radius: $radius-small;
$menu-item-hover-color: $text-strong;
$menu-item-hover-background-color: $background;
$menu-item-active-color: $link-invert;
$menu-item-active-background-color: $link;

$menu-list-border-left: 1px solid $border;
$menu-list-line-height: 1.25;
$menu-list-link-padding: 0.5em 0.75em;
$menu-nested-list-margin: 0.75em;
$menu-nested-list-padding-left: 0.75em;

$menu-label-color: $text-light;
$menu-label-font-size: 0.75em;
$menu-label-letter-spacing: 0.1em;
$menu-label-spacing: 1em;

// Message

$message-background-color: $background;
$message-radius: $radius;

$message-header-background-color: $text;
$message-header-color: $text-invert;
$message-header-weight: $weight-bold;
$message-header-padding: 0.75em 1em;
$message-header-radius: $radius;

$message-body-border-color: $border;
$message-body-border-width: 0 0 0 4px;
$message-body-color: $text;
$message-body-padding: 1.25em 1.5em;
$message-body-radius: $radius;

$message-body-pre-background-color: $scheme-main;
$message-body-pre-code-background-color: transparent;

$message-header-body-border-width: 0;
$message-colors: $colors;

// Modal

$modal-z: 40;

$modal-background-background-color: bulmaRgba($scheme-invert, 0.86);

$modal-content-width: 640px;
$modal-content-margin-mobile: 20px;
$modal-content-spacing-mobile: 160px;
$modal-content-spacing-tablet: 40px;

$modal-close-dimensions: 40px;
$modal-close-right: 20px;
$modal-close-top: 20px;

$modal-card-spacing: 40px;

$modal-card-head-background-color: $background;
$modal-card-head-border-bottom: 1px solid $border;
$modal-card-head-padding: 20px;
$modal-card-head-radius: $radius-large;

$modal-card-title-color: $text-strong;
$modal-card-title-line-height: 1;
$modal-card-title-size: $size-4;

$modal-card-foot-radius: $radius-large;
$modal-card-foot-border-top: 1px solid $border;

$modal-card-body-background-color: $scheme-main;
$modal-card-body-padding: 20px;

// Navbar

$navbar-background-color: $scheme-main;
$navbar-box-shadow-size: 0 2px 0 0;
$navbar-box-shadow-color: $background;
$navbar-height: 3.25rem;
$navbar-padding-vertical: 1rem;
$navbar-padding-horizontal: 2rem;
$navbar-z: 30;
$navbar-fixed-z: 30;

$navbar-item-color: $text;
$navbar-item-hover-color: $link;
$navbar-item-hover-background-color: $scheme-main-bis;
$navbar-item-active-color: $scheme-invert;
$navbar-item-active-background-color: transparent;
$navbar-item-img-max-height: 1.75rem;

$navbar-burger-color: $navbar-item-color;

$navbar-tab-hover-background-color: transparent;
$navbar-tab-hover-border-bottom-color: $link;
$navbar-tab-active-color: $link;
$navbar-tab-active-background-color: transparent;
$navbar-tab-active-border-bottom-color: $link;
$navbar-tab-active-border-bottom-style: solid;
$navbar-tab-active-border-bottom-width: 3px;

$navbar-dropdown-background-color: $scheme-main;
$navbar-dropdown-border-top: 2px solid $border;
$navbar-dropdown-offset: -4px;
$navbar-dropdown-arrow: $link;
$navbar-dropdown-radius: $radius-large;
$navbar-dropdown-z: 20;

$navbar-dropdown-boxed-radius: $radius-large;
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1),
0 0 0 1px rgba($scheme-invert, 0.1);

$navbar-dropdown-item-hover-color: $scheme-invert;
$navbar-dropdown-item-hover-background-color: $background;
$navbar-dropdown-item-active-color: $link;
$navbar-dropdown-item-active-background-color: $background;

$navbar-divider-background-color: $background;
$navbar-divider-height: 2px;

$navbar-bottom-box-shadow-size: 0 -2px 0 0;

$navbar-breakpoint: $desktop;

// Pagination

$pagination-color: $text-strong;
$pagination-border-color: $border;
$pagination-margin: -0.25rem;
$pagination-min-width: $control-height;

$pagination-item-font-size: 1em;
$pagination-item-margin: 0.25rem;
$pagination-item-padding-left: 0.5em;
$pagination-item-padding-right: 0.5em;

$pagination-hover-color: $link-hover;
$pagination-hover-border-color: $link-hover-border;

$pagination-focus-color: $link-focus;
$pagination-focus-border-color: $link-focus-border;

$pagination-active-color: $link-active;
$pagination-active-border-color: $link-active-border;

$pagination-disabled-color: $text-light;
$pagination-disabled-background-color: $border;
$pagination-disabled-border-color: $border;

$pagination-current-color: $link-invert;
$pagination-current-background-color: $link;
$pagination-current-border-color: $link;

$pagination-ellipsis-color: $grey-light;

$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);

// Panel

$panel-margin: $block-spacing;
$panel-item-border: 1px solid $border-light;
$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);

$panel-heading-background-color: $border-light;
$panel-heading-color: $text-strong;
$panel-heading-line-height: 1.25;
$panel-heading-padding: 0.75em 1em;
$panel-heading-radius: $radius;
$panel-heading-size: 1.25em;
$panel-heading-weight: $weight-bold;

$panel-tabs-font-size: 0.875em;
$panel-tab-border-bottom: 1px solid $border;
$panel-tab-active-border-bottom-color: $link-active-border;
$panel-tab-active-color: $link-active;

$panel-list-item-color: $text;
$panel-list-item-hover-color: $link;

$panel-block-color: $text-strong;
$panel-block-hover-background-color: $background;
$panel-block-active-border-left-color: $link;
$panel-block-active-color: $link-active;
$panel-block-active-icon-color: $link;

$panel-icon-color: $text-light;
$panel-colors: $colors;

// Tabs

$tabs-border-bottom-color: $border;
$tabs-border-bottom-style: solid;
$tabs-border-bottom-width: 1px;
$tabs-link-color: $text;
$tabs-link-hover-border-bottom-color: $text-strong;
$tabs-link-hover-color: $text-strong;
$tabs-link-active-border-bottom-color: $link;
$tabs-link-active-color: $link;
$tabs-link-padding: 0.5em 1em;

$tabs-boxed-link-radius: $radius;
$tabs-boxed-link-hover-background-color: $background;
$tabs-boxed-link-hover-border-bottom-color: $border;

$tabs-boxed-link-active-background-color: $scheme-main;
$tabs-boxed-link-active-border-color: $border;
$tabs-boxed-link-active-border-bottom-color: transparent;

$tabs-toggle-link-border-color: $border;
$tabs-toggle-link-border-style: solid;
$tabs-toggle-link-border-width: 1px;
$tabs-toggle-link-hover-background-color: $background;
$tabs-toggle-link-hover-border-color: $border-hover;
$tabs-toggle-link-radius: $radius;
$tabs-toggle-link-active-background-color: $link;
$tabs-toggle-link-active-border-color: $link;
$tabs-toggle-link-active-color: $link-invert;

// GRID

// Columns

$column-gap: 0.75rem;

// Tiles

$tile-spacing: 0.75rem;

// LAYOUT

// Footer

$footer-background-color: $scheme-main-bis;
$footer-color: false;
$footer-padding: 3rem 1.5rem 6rem;

// Hero

$hero-body-padding: 3rem 1.5rem;
$hero-body-padding-small: 1.5rem;
$hero-body-padding-medium: 9rem 1.5rem;
$hero-body-padding-large: 18rem 1.5rem;

// Section

$section-padding: 3rem 1.5rem;
$section-padding-medium: 9rem 1.5rem;
$section-padding-large: 18rem 1.5rem;

[marcoczen]

I personally use a _variables.scss in my projects in which I have manually added all variables from the core .sass files, which I can then easily override for theming purposes.
Based on 0.7.2 (yes I need to update):

//* Bulma Component Config  */
//* v0.7.2            */
//*               */
//***************************/

//*************************************/
//* GENERIC VARIABLES                 */
//*************************************/
$body-background-color: $white !default;
$body-size: 16px !default;
$body-rendering: optimizeLegibility !default;
$body-family: $family-primary !default;
$body-color: $text !default;
$body-weight: $weight-normal !default;
$body-line-height: 1.5 !default;

$code-family: $family-code !default;
$code-padding: 0.25em 0.5em 0.25em !default;
$code-weight: normal !default;
$code-size: 0.875em !default;

$hr-background-color: $background !default;
$hr-height: 2px !default;
$hr-margin: 1.5rem 0 !default;

$strong-color: $text-strong !default;
$strong-weight: $weight-bold !default;

//***************************/
//* GLOBAL UI               */
//***************************/
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;

$control-border-width: 1px !default;

$control-height: 2.25em !default;
$control-line-height: 1.5 !default;

$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;

//*************************************/
//* LAYOUT COMPONENTS                 */
//*************************************/

//***************************/
//* SECTION                 */
//***************************/
$section-padding: 3rem 1.5rem !default;
$section-padding-medium: 9rem 1.5rem !default;
$section-padding-large: 18rem 1.5rem !default;


//***************************/
//* FOOTER                  */
//***************************/
$footer-background-color: $white-bis !default;



//*************************************/
//* FORM COMPONENTS                   */
//*************************************/

//***************************/
//* GENERAL                 */
//***************************/
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;
$control-padding-vertical: calc(0.375em - 1px) !default;
$control-padding-horizontal: calc(0.625em - 1px) !default;

$label-color: $grey-darker !default;
$label-weight: $weight-bold !default;

$help-size: $size-small !default;


//***************************/
//* INPUTS                  */
//***************************/
$input-color: $grey-darker !default;
$input-background-color: $white !default;
$input-border-color: $grey-lighter !default;
$input-height: $control-height !default;
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;

$input-hover-color: $grey-darker !default;
$input-hover-border-color: $grey-light !default;

$input-focus-color: $grey-darker !default;
$input-focus-border-color: $link !default;
$input-focus-box-shadow-size: 0 0 0 0.125em !default;
$input-focus-box-shadow-color: rgba($link, 0.25) !default;

$input-disabled-color: $text-light !default;
$input-disabled-background-color: $background !default;
$input-disabled-border-color: $background !default;

$input-arrow: $link !default;

$input-icon-color: $grey-lighter !default;
$input-icon-active-color: $grey !default;

$input-radius: $radius !default;


//***************************/
//* FILE INPUT              */
//***************************/
$file-border-color: $border !default;
$file-radius: $radius !default;

$file-cta-background-color: $white-ter !default;
$file-cta-color: $grey-dark !default;
$file-cta-hover-color: $grey-darker !default;
$file-cta-active-color: $grey-darker !default;

$file-name-border-color: $border !default;
$file-name-border-style: solid !default;
$file-name-border-width: 1px 1px 1px 0 !default;
$file-name-max-width: 16em !default;



//*************************************/
//* ELEMENTS                          */
//*************************************/

//***************************/
//* BOX                     */
//***************************/
$box-color: $text !default;
$box-background-color: $white !default;
$box-radius: $radius-large !default;
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$box-padding: 1.25rem !default;

$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default;
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default;


//***************************/
//* BUTTON                  */
//***************************/
$button-color: $grey-darker !default;
$button-background-color: $white !default;

$button-border-color: $grey-lighter !default;
$button-border-width: $control-border-width !default;

$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
$button-padding-horizontal: 0.75em !default;

$button-hover-color: $link-hover !default;
$button-hover-border-color: $link-hover-border !default;

$button-focus-color: $link-focus !default;
$button-focus-border-color: $link-focus-border !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
$button-focus-box-shadow-color: rgba($link, 0.25) !default;

$button-active-color: $link-active !default;
$button-active-border-color: $link-active-border !default;

$button-text-color: $text !default;
$button-text-hover-background-color: $background !default;
$button-text-hover-color: $text-strong !default;

$button-disabled-background-color: $white !default;
$button-disabled-border-color: $grey-lighter !default;
$button-disabled-shadow: none !default;

$button-disabled-opacity: 0.5 !default;

$button-static-color: $grey !default;
$button-static-background-color: $white-ter !default;
$button-static-border-color: $grey-lighter !default;


//***************************/
//* CONTENT (CMS) CONTAINER */
//***************************/
$content-heading-color: $text-strong !default;
$content-heading-weight: $weight-semibold !default;
$content-heading-line-height: 1.125 !default;

$content-blockquote-background-color: $background !default;
$content-blockquote-border-left: 5px solid $border !default;
$content-blockquote-padding: 1.25em 1.5em !default;

$content-pre-padding: 1.25em 1.5em !default;

$content-table-cell-border: 1px solid $border !default;
$content-table-cell-border-width: 0 0 1px !default;
$content-table-cell-padding: 0.5em 0.75em !default;
$content-table-cell-heading-color: $text-strong !default;
$content-table-head-cell-border-width: 0 0 2px !default;
$content-table-head-cell-color: $text-strong !default;
$content-table-foot-cell-border-width: 2px 0 0 !default;
$content-table-foot-cell-color: $text-strong !default;



//***************************/
//* ICON                    */
//***************************/
$icon-dimensions: 1.5rem !default;
$icon-dimensions-small: 1rem !default;
$icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;



//***************************/
//* LIST                    */
//***************************/

$list-background-color: $white !default;
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$list-radius: $radius !default;
$list-item-border: 1px solid $border !default;
$list-item-color: $text !default;
$list-item-active-background-color: $link !default;
$list-item-active-color: $link-invert !default;
$list-item-hover-background-color: $background !default;



//***************************/
//* THUMBNAIL IMAGES        */
//***************************/
$dimensions: 16 24 32 48 64 96 128 !default;


//***************************/
//* NOTIFICATION            */
//***************************/
$notification-background-color: $background !default;
$notification-radius: $radius !default;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;


//***************************/
//* PROGRESS BAR            */
//***************************/
$progress-bar-background-color: $border !default;
$progress-value-background-color: $text !default;


//***************************/
//* TABLE                   */
//***************************/
$table-color: $grey-darker !default;
$table-background-color: $white !default;

$table-cell-border: 1px solid $grey-lighter !default;
$table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 0.5em 0.75em !default;
$table-cell-heading-color: $text-strong !default;

$table-head-cell-border-width: 0 0 2px !default;
$table-head-cell-color: $text-strong !default;
$table-foot-cell-border-width: 2px 0 0 !default;
$table-foot-cell-color: $text-strong !default;

$table-row-hover-background-color: $white-bis !default;

$table-row-active-background-color: $primary !default;
$table-row-active-color: $primary-invert !default;

$table-striped-row-even-background-color: $white-bis !default;
$table-striped-row-even-hover-background-color: $white-ter !default;



//***************************/
//* TAG                     */
//***************************/
$tag-background-color: $background !default;
$tag-color: $text !default;
$tag-radius: $radius !default;
$tag-delete-margin: 1px !default;


//***************************/
//* TITLES & SUBTITLES      */
//***************************/
$title-color: $grey-darker !default;
$title-size: $size-3 !default;
$title-weight: $weight-semibold !default;
$title-line-height: 1.125 !default;
$title-strong-color: inherit !default;
$title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default;

$subtitle-color: $grey-dark !default;
$subtitle-size: $size-5 !default;
$subtitle-weight: $weight-normal !default;
$subtitle-line-height: 1.25 !default;
$subtitle-strong-color: $grey-darker !default;
$subtitle-strong-weight: $weight-semibold !default;
$subtitle-negative-margin: -1.25rem !default;


//*************************************/
//* PAGE COMPONENTS                   */
//*************************************/

//***************************/
//* BREADCRUMB              */
//***************************/
$breadcrumb-item-color: $link !default;
$breadcrumb-item-hover-color: $link-hover !default;
$breadcrumb-item-active-color: $text-strong !default;

$breadcrumb-item-padding-vertical: 0 !default;
$breadcrumb-item-padding-horizontal: 0.75em !default;

$breadcrumb-item-separator-color: $grey-light !default;


//***************************/
//* CARD                    */
//***************************/
$card-color: $text !default;
$card-background-color: $white !default;
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;

$card-header-background-color: transparent !default;
$card-header-color: $text-strong !default;
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default;
$card-header-weight: $weight-bold !default;

$card-content-background-color: transparent !default;

$card-footer-background-color: transparent !default;
$card-footer-border-top: 1px solid $border !default;


//***************************/
//* DROPDOWN                */
//***************************/
$dropdown-content-background-color: $white !default;
$dropdown-content-arrow: $link !default;
$dropdown-content-offset: 4px !default;
$dropdown-content-radius: $radius !default;
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$dropdown-content-z: 20 !default;

$dropdown-item-color: $grey-dark !default;
$dropdown-item-hover-color: $black !default;
$dropdown-item-hover-background-color: $background !default;
$dropdown-item-active-color: $link-invert !default;
$dropdown-item-active-background-color: $link !default;

$dropdown-divider-background-color: $border !default;


//***************************/
//* MENU                    */
//***************************/
$menu-item-color: $text !default;
$menu-item-radius: $radius-small !default;
$menu-item-hover-color: $text-strong !default;
$menu-item-hover-background-color: $background !default;
$menu-item-active-color: $link-invert !default;
$menu-item-active-background-color: $link !default;

$menu-list-border-left: 1px solid $border !default;

$menu-label-color: $text-light !default;


//***************************/
//* MESSAGE                 */
//***************************/
$message-background-color: $background !default;
$message-radius: $radius !default;

$message-header-background-color: $text !default;
$message-header-color: $text-invert !default;
$message-header-weight: $weight-bold !default;
$message-header-padding: 0.75em 1em !default;
$message-header-radius: $radius !default;

$message-body-border-color: $border !default;
$message-body-border-width: 0 0 0 4px !default;
$message-body-color: $text !default;
$message-body-padding: 1.25em 1.5em !default;
$message-body-radius: $radius !default;

$message-body-pre-background-color: $white !default;
$message-body-pre-code-background-color: transparent !default;

$message-header-body-border-width: 0 !default;


//***************************/
//* MODAL                   */
//***************************/
$modal-z: 40 !default;

$modal-background-background-color: rgba($black, 0.86) !default;

$modal-content-width: 640px !default;
$modal-content-margin-mobile: 20px !default;
$modal-content-spacing-mobile: 160px !default;
$modal-content-spacing-tablet: 40px !default;

$modal-close-dimensions: 40px !default;
$modal-close-right: 20px !default;
$modal-close-top: 20px !default;

$modal-card-spacing: 40px !default;

$modal-card-head-background-color: $background !default;
$modal-card-head-border-bottom: 1px solid $border !default;
$modal-card-head-padding: 20px !default;
$modal-card-head-radius: $radius-large !default;

$modal-card-title-color: $text-strong !default;
$modal-card-title-line-height: 1 !default;
$modal-card-title-size: $size-4 !default;

$modal-card-foot-radius: $radius-large !default;
$modal-card-foot-border-top: 1px solid $border !default;

$modal-card-body-background-color: $white !default;
$modal-card-body-padding: 20px !default;


//***************************/
//* NAVBAR                  */
//***************************/
$navbar-background-color: $white !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: $background !default;
$navbar-height: 3.25rem !default;
$navbar-padding-vertical: 1rem !default;
$navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;

$navbar-item-color: $grey-dark !default;
$navbar-item-hover-color: $link !default;
$navbar-item-hover-background-color: $white-bis !default;
$navbar-item-active-color: $black !default;
$navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !default;

$navbar-burger-color: $navbar-item-color !default;

$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: $link !default;
$navbar-tab-active-color: $link !default;
$navbar-tab-active-background-color: transparent !default;
$navbar-tab-active-border-bottom-color: $link !default;
$navbar-tab-active-border-bottom-style: solid !default;
$navbar-tab-active-border-bottom-width: 3px !default;

$navbar-dropdown-background-color: $white !default;
$navbar-dropdown-border-top: 2px solid $border !default;
$navbar-dropdown-offset: -4px !default;
$navbar-dropdown-arrow: $link !default;
$navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-z: 20 !default;

$navbar-dropdown-boxed-radius: $radius-large !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;

$navbar-dropdown-item-hover-color: $black !default;
$navbar-dropdown-item-hover-background-color: $background !default;
$navbar-dropdown-item-active-color: $link !default;
$navbar-dropdown-item-active-background-color: $background !default;

$navbar-divider-background-color: $background !default;
$navbar-divider-height: 2px !default;

$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;

$navbar-breakpoint: $desktop !default;

//***************************/
//* PAGINATION              */
//***************************/
$pagination-color: $grey-darker !default;
$pagination-border-color: $grey-lighter !default;
$pagination-margin: -0.25rem !default;
$pagination-min-width: $control-height !default;

$pagination-hover-color: $link-hover !default;
$pagination-hover-border-color: $link-hover-border !default;

$pagination-focus-color: $link-focus !default;
$pagination-focus-border-color: $link-focus-border !default;

$pagination-active-color: $link-active !default;
$pagination-active-border-color: $link-active-border !default;

$pagination-disabled-color: $grey !default;
$pagination-disabled-background-color: $grey-lighter !default;
$pagination-disabled-border-color: $grey-lighter !default;

$pagination-current-color: $link-invert !default;
$pagination-current-background-color: $link !default;
$pagination-current-border-color: $link !default;

$pagination-ellipsis-color: $grey-light !default;

$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default;


//***************************/
//* PANEL                   */
//***************************/
$panel-item-border: 1px solid $border !default;

$panel-heading-background-color: $background !default;
$panel-heading-color: $text-strong !default;
$panel-heading-line-height: 1.25 !default;
$panel-heading-padding: 0.5em 0.75em !default;
$panel-heading-radius: $radius !default;
$panel-heading-size: 1.25em !default;
$panel-heading-weight: $weight-light !default;

$panel-tab-border-bottom: 1px solid $border !default;
$panel-tab-active-border-bottom-color: $link-active-border !default;
$panel-tab-active-color: $link-active !default;

$panel-list-item-color: $text !default;
$panel-list-item-hover-color: $link !default;

$panel-block-color: $text-strong !default;
$panel-block-hover-background-color: $background !default;
$panel-block-active-border-left-color: $link !default;
$panel-block-active-color: $link-active !default;
$panel-block-active-icon-color: $link !default;

$panel-icon-color: $text-light !default;


//***************************/
//* TABS                    */
//***************************/
$tabs-border-bottom-color: $border !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;
$tabs-link-color: $text !default;
$tabs-link-hover-border-bottom-color: $text-strong !default;
$tabs-link-hover-color: $text-strong !default;
$tabs-link-active-border-bottom-color: $link !default;
$tabs-link-active-color: $link !default;
$tabs-link-padding: 0.5em 1em !default;

$tabs-boxed-link-radius: $radius !default;
$tabs-boxed-link-hover-background-color: $background !default;
$tabs-boxed-link-hover-border-bottom-color: $border !default;

$tabs-boxed-link-active-background-color: $white !default;
$tabs-boxed-link-active-border-color: $border !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;

$tabs-toggle-link-border-color: $border !default;
$tabs-toggle-link-border-style: solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: $background !default;
$tabs-toggle-link-hover-border-color: $border-hover !default;
$tabs-toggle-link-radius: $radius !default;
$tabs-toggle-link-active-background-color: $link !default;
$tabs-toggle-link-active-border-color: $link !default;
$tabs-toggle-link-active-color: $link-invert !default;

Anyway some one could update this for 0.8.2 ? Bulma Newbie here ...

[rdebeasi]

Hi folks! I noticed that the release notes for 0.8.0 provide an example of overriding $control-height. This variable isn't mentioned in the variable docs. From that information, it sounds users of Bulma could override any variable they'd like. There are no variables that need to be treated like "private APIs."

That answers my question, so I'm going to close this issue.

It's awesome that you all are sharing and discussing custom Bulma configs! I'd encourage you to share this code in a gist or a repo in the future. Thanks, and keep building awesome stuff! :)

[mother10]

For those who want the most recent one, here's the Bulma variables list for version 0.9.0. There is some explanation in the beginning of the file. It has a lot of commentlines, if you cut and paste it into a scss file, they are more readable.

Also I added some extra:

• For those coming from other frameworks, and looking for a "missing" accordion or something else, the last part of the file contains the links to the extensions (as comments). Now you can search in 1 file for what you might miss.

• Also there is a list of "empty" HTML elements that Bulma has no styling for (yet), like "article", "address", "aside" etcetera.

// ================================================================================================
//
// Variables Bulma version 0.9.0
//
// All variables must be set BEFORE importing Bulma itself.
//
//
// Bulma is organised in sets of files, each for a certain component, or element, or general functions.
//
// Thats why this variables file is structured as follows:
// First you find the variables for one (1) certain Bulma sass file, followed by the @import of
// that specific sass file. The import itself is behind comment slashes.
// The whole block belonging to 1 sass-file starts with 2 --- lines and ends with 1 * line
// Not all files have or make use of variables, so some have none.
//
// Now if you want the complete bulma, you dont have to remove any slashes.
// If you only want some parts of Bulma, you have to remove the slashes before that(those) specific file(s).
// Dont forget some files are always necessary, see the docs.
//
// This varibles file is expected to be in the same directory as the original bulma.sass file.
// You might have to check the import directory-path of each file, if your path is different.
// ================================================================================================

// -------------------------------------------------------------------- initial-variables BEGIN ---
// ------------------------------------------------------------------------------------------------
// Initial variables
//
// The initial variables have a literal value.

// ==================== Colors ====================

$black: hsl(0, 0%, 4%) ;
$black-bis: hsl(0, 0%, 7%) ;
$black-ter: hsl(0, 0%, 14%) ;

$grey-darker: hsl(0, 0%, 21%) ;
$grey-dark: hsl(0, 0%, 29%) ;
$grey: hsl(0, 0%, 48%) ;
$grey-light: hsl(0, 0%, 71%) ;
$grey-lighter: hsl(0, 0%, 86%) ;
$grey-lightest: hsl(0, 0%, 93%) ;

$white-ter: hsl(0, 0%, 96%) ;
$white-bis: hsl(0, 0%, 98%) ;
$white: hsl(0, 0%, 100%) ;

$orange: hsl(14, 100%, 53%) ;
$yellow: hsl(48, 100%, 67%) ;
$green: hsl(141, 53%, 53%) ;
$turquoise: hsl(171, 100%, 41%) ;
$cyan: hsl(204, 71%, 53%) ;
$blue: hsl(217, 71%, 53%) ;
$purple: hsl(271, 100%, 71%) ;
$red: hsl(348, 86%, 61%) ;

// ==================== Typography ====================

$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
"Helvetica", "Arial", sans-serif ;
$family-monospace: monospace ;
$render-mode: optimizeLegibility ;

$size-1: 3rem ;
$size-2: 2.5rem ;
$size-3: 2rem ;
$size-4: 1.5rem ;
$size-5: 1.25rem ;
$size-6: 1rem ;
$size-7: 0.75rem ;

$weight-light: 300 ;
$weight-normal: 400 ;
$weight-medium: 500 ;
$weight-semibold: 600 ;
$weight-bold: 700 ;

// ==================== Spacing ====================

$block-spacing: 1.5rem ;

// ==================== Responsiveness ====================
// ================================================================== Breakpoints
// Breakpoints, used in navbar.sass container.sass and mixins.sass
//
// Define the dimensions at which a breakpoint will occur,
// for to different screen sizes, for use in media queries.

// ...............................The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px ;
// ...............................960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px ;
// ...............................960px container + 4rem
$desktop: 960px + (2 * $gap) ;
// ...............................1152px container + 4rem
$widescreen: 1152px + (2 * $gap) ;
$widescreen-enabled: true ;
// ...............................1344px container + 4rem
$fullhd: 1344px + (2 * $gap) ;
$fullhd-enabled: true ;

// ==================== Miscellaneous ====================

$easing: ease-out ;
$radius-small: 2px ;
$radius: 4px ;
$radius-large: 6px ;
$radius-rounded: 290486px ;
$speed: 86ms ;

// ==================== Flags ====================

$variable-columns: true ;
$rtl: false ;
// =============================================================
// @import "sass/utilities/initial-variables.sass"
// ********************* initial-variables END *

// ---------------------------------------------------------------------------- functions BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/utilities/functions.sass"
// =============================================================
// *********************** functions END *

// -------------------------------------------------------------------- derived-variables BEGIN ---
// ------------------------------------------------------------------------------------------------
// Derived variables
//
// These are variables with a value that references another variable.
//

$primary: $turquoise ;

$info : $cyan ;
$success: $green ;
$warning: $yellow ;
$danger : $red ;

$light : $white-ter ;
$dark : $grey-darker ;

// ==================== Invert colors ====================

$orange-invert : findColorInvert($orange) ;
$yellow-invert : findColorInvert($yellow) ;
$green-invert : findColorInvert($green) ;
$turquoise-invert: findColorInvert($turquoise) ;
$cyan-invert : findColorInvert($cyan) ;
$blue-invert : findColorInvert($blue) ;
$purple-invert : findColorInvert($purple) ;
$red-invert : findColorInvert($red) ;

$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) ;

// ==================== General colors ====================

$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 ;

$background : $white-ter ;

$border : $grey-lighter ;
$border-hover : $grey-light ;
$border-light : $grey-lightest ;
$border-light-hover: $grey-light ;

// ==================== Text colors ====================

$text : $grey-dark ;
$text-invert: findColorInvert($text) ;
$text-light : $grey ;
$text-strong: $grey-darker ;

// ==================== Code colors ====================
// Code: A codeblock inside an article.

$code : $red ;
$code-background: $background ;

$pre : $text ;
$pre-background : $background ;

// ==================== Link colors ====================
//
// Style anchor elements.

$link : $blue ;
$link-invert : findColorInvert($link) ;
$link-light : findLightColor($link) ;
$link-dark : findDarkColor($link) ;
$link-visited : $purple ;

$link-hover : $grey-darker ;
$link-hover-border : $grey-light ;

$link-focus : $grey-darker ;
$link-focus-border : $blue ;

$link-active : $grey-darker ;
$link-active-border: $grey-dark ;

// ==================== Typography ====================

$family-primary : $family-sans-serif ;
$family-secondary: $family-sans-serif ;
$family-code : $family-monospace ;

$size-small : $size-7 ;
$size-normal: $size-6 ;
$size-medium: $size-5 ;
$size-large : $size-4 ;

// ==================== Lists and maps ====================
$custom-colors: null ;
$custom-shades: null ;

$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
) ;

$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
) ;

$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 ;
// =============================================================
// @import "sass/utilities/derived-variables.scss"
// ********************* derived-variables END *

// --------------------------------------------------------------------------- animations BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/utilities/animations.sass"
// =============================================================
// *********************** animations * END *

// ------------------------------------------------------------------------------- mixins BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/utilities/mixins.sass"
// =============================================================
// ************************ mixins END *

// ----------------------------------------------------------------------------- controls BEGIN ---
// ------------------------------------------------------------------------------------------------
$control-radius: $radius ;
$control-radius-small: $radius-small ;

$control-border-width: 1px ;

$control-height: 2.5em ;
$control-line-height: 1.5 ;

$control-padding-vertical: calc(0.5em - #{$control-border-width}) ;
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) ;
// =============================================================
// @import "sass/utilities/controls.sass"
// ************************ controls END *

// ---------------------------------------------------------------------------- minireset BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/base/minireset.sass"
//
// Reset paddings margins borders etcetera, of a lot of HTML elements
// =============================================================
// *********************** minireset END *

// ------------------------------------------------------------------------------ generic BEGIN ---
// ------------------------------------------------------------------------------------------------
$body-background-color: $scheme-main ;
$body-size: 16px ;
$body-min-width: 300px ;
$body-rendering: optimizeLegibility ;
$body-family: $family-primary ;
$body-overflow-x: hidden ;
$body-overflow-y: scroll ;

$body-color: $text ;
$body-font-size: 1em ;
$body-weight: $weight-normal ;
$body-line-height: 1.5 ;

$code-family: $family-code ;
$code-padding: 0.25em 0.5em 0.25em ;
$code-weight: normal ;
$code-size: 0.875em ;

$small-font-size: 0.875em ;

$hr-background-color: $background ;
$hr-height: 2px ;
$hr-margin: 1.5rem 0 ;

$strong-color: $text-strong ;
$strong-weight: $weight-bold ;

$pre-font-size: 0.875em ;
$pre-padding: 1.25rem 1.5rem ;
$pre-code-font-size: 1em ;
// =============================================================
// @import "sass/base/generic.sass"
// ************************ generic * END *

// ---------------------------------------------------------------------------------- box BEGIN ---
// ------------------------------------------------------------------------------------------------
$box-color: $text ;
$box-background-color: $scheme-main ;
$box-radius: $radius-large ;
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px
rgba($scheme-invert, 0.02) ;
$box-padding: 1.25rem ;

$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link ;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link ;
// =============================================================
// @import "sass/elements/box.sass"
// ************************* box END *

// ------------------------------------------------------------------------------- button BEGIN ---
// ------------------------------------------------------------------------------------------------
$button-color: $text-strong ;
$button-background-color: $scheme-main ;
$button-family: false ;

$button-border-color: $border ;
$button-border-width: $control-border-width ;

$button-padding-vertical: calc(0.5em - #{$button-border-width}) ;
$button-padding-horizontal: 1em ;

$button-hover-color: $link-hover ;
$button-hover-border-color: $link-hover-border ;

$button-focus-color: $link-focus ;
$button-focus-border-color: $link-focus-border ;
$button-focus-box-shadow-size: 0 0 0 0.125em ;
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) ;

$button-active-color: $link-active ;
$button-active-border-color: $link-active-border ;

$button-text-color: $text ;
$button-text-decoration: underline ;
$button-text-hover-background-color: $background ;
$button-text-hover-color: $text-strong ;

$button-disabled-background-color: $scheme-main ;
$button-disabled-border-color: $border ;
$button-disabled-shadow: none ;
$button-disabled-opacity: 0.5 ;

$button-static-color: $text-light ;
$button-static-background-color: $scheme-main-ter ;
$button-static-border-color: $border ;
// =============================================================
// @import "sass/elements/button.sass"
// ************************ button END *

// ---------------------------------------------------------------------------- container BEGIN ---
// ------------------------------------------------------------------------------------------------
$container-offset: (2 * $gap) ;
// =============================================================
// @import "sass/elements/container.sass"
// *********************** container END *

// ------------------------------------------------------------------------------ content BEGIN ---
// ------------------------------------------------------------------------------------------------
$content-heading-color: $text-strong ;
$content-heading-weight: $weight-semibold ;
$content-heading-line-height: 1.125 ;

$content-blockquote-background-color: $background ;
$content-blockquote-border-left: 5px solid $border ;
$content-blockquote-padding: 1.25em 1.5em ;

$content-pre-padding: 1.25em 1.5em ;

$content-table-cell-border: 1px solid $border ;
$content-table-cell-border-width: 0 0 1px ;
$content-table-cell-padding: 0.5em 0.75em ;
$content-table-cell-heading-color: $text-strong ;
$content-table-head-cell-border-width: 0 0 2px ;
$content-table-head-cell-color: $text-strong ;
$content-table-foot-cell-border-width: 2px 0 0 ;
$content-table-foot-cell-color: $text-strong ;
// =============================================================
// @import "sass/elements/content.sass"
// ************************ content * END *

// --------------------------------------------------------------------------------- icon BEGIN ---
// ------------------------------------------------------------------------------------------------
$icon-dimensions: 1.5rem ;
$icon-dimensions-small: 1rem ;
$icon-dimensions-medium: 2rem ;
$icon-dimensions-large: 3rem ;
// =============================================================
// @import "sass/elements/icon.sass"
// ************************* icon * END *

// -------------------------------------------------------------------------------- image BEGIN ---
// ------------------------------------------------------------------------------------------------
// used with

$dimensions: 16 24 32 48 64 96 128 ;
// =============================================================
// @import "sass/elements/image.sass"
// ************************* image END *

// ------------------------------------------------------------------------- notification BEGIN ---
// ------------------------------------------------------------------------------------------------
$notification-background-color: $background ;
$notification-code-background-color: $scheme-main ;
$notification-radius: $radius ;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem ;
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem ;
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem ;
// =============================================================
// @import "sass/elements/notification.sass"
// ********************** notification END *

// ----------------------------------------------------------------------------- progress BEGIN ---
// ------------------------------------------------------------------------------------------------
$progress-bar-background-color: $border-light ;
$progress-value-background-color: $text ;
$progress-border-radius: $radius-rounded ;

$progress-indeterminate-duration: 1.5s ;
// =============================================================
// @import "sass/elements/progress.sass"
// ************************ progress END *

// -------------------------------------------------------------------------------- table BEGIN ---
// ------------------------------------------------------------------------------------------------
$table-color: $text-strong ;
$table-background-color: $scheme-main ;

$table-cell-border: 1px solid $border ;
$table-cell-border-width: 0 0 1px ;
$table-cell-padding: 0.5em 0.75em ;
$table-cell-heading-color: $text-strong ;

$table-head-cell-border-width: 0 0 2px ;
$table-head-cell-color: $text-strong ;
$table-foot-cell-border-width: 2px 0 0 ;
$table-foot-cell-color: $text-strong ;

$table-head-background-color: transparent ;
$table-body-background-color: transparent ;
$table-foot-background-color: transparent ;

$table-row-hover-background-color: $scheme-main-bis ;

$table-row-active-background-color: $primary ;
$table-row-active-color: $primary-invert ;

$table-striped-row-even-background-color: $scheme-main-bis ;
$table-striped-row-even-hover-background-color: $scheme-main-ter ;
// =============================================================
// @import "sass/elements/table.sass"
// ************************* table END *

// ---------------------------------------------------------------------------------- tag BEGIN ---
// ------------------------------------------------------------------------------------------------
$tag-background-color: $background ;
$tag-color: $text ;
$tag-radius: $radius ;
$tag-delete-margin: 1px ;
// =============================================================
// @import "sass/elements/tag.sass"
// ************************* tag END *

// -------------------------------------------------------------------------------- title BEGIN ---
// ------------------------------------------------------------------------------------------------
$title-color: $text-strong ;
$title-family: false ;
$title-size: $size-3 ;
$title-weight: $weight-semibold ;
$title-line-height: 1.125 ;
$title-strong-color: inherit ;
$title-strong-weight: inherit ;
$title-sub-size: 0.75em ;
$title-sup-size: 0.75em ;

$subtitle-color: $text ;
$subtitle-family: false ;
$subtitle-size: $size-5 ;
$subtitle-weight: $weight-normal ;
$subtitle-line-height: 1.25 ;
$subtitle-strong-color: $text-strong ;
$subtitle-strong-weight: $weight-semibold ;
$subtitle-negative-margin: -1.25rem ;
// =============================================================
// @import "sass/elements/title.sass"
// ************************* title END *

// -------------------------------------------------------------------------------- other BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/elements/other.sass"
// =============================================================
// ************************* other END *

// -------------------------------------------------------------------------- form-shared BEGIN ---
// ------------------------------------------------------------------------------------------------
$input-color: $text-strong ;
$input-background-color: $scheme-main ;
$input-border-color: $border ;
$input-height: $control-height ;
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) ;
$input-placeholder-color: bulmaRgba($input-color, 0.3) ;

$input-hover-color: $text-strong ;
$input-hover-border-color: $border-hover ;

$input-focus-color: $text-strong ;
$input-focus-border-color: $link ;
$input-focus-box-shadow-size: 0 0 0 0.125em ;
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) ;

$input-disabled-color: $text-light ;
$input-disabled-background-color: $background ;
$input-disabled-border-color: $background ;
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) ;

$input-arrow: $link ;

$input-icon-color: $border ;
$input-icon-active-color: $text ;

$input-radius: $radius ;
// =============================================================
// @import "sass/form/shared.sass"
// *********************** form-shared END *

// ------------------------------------------------------------------ form-input-textarea BEGIN ---
// ------------------------------------------------------------------------------------------------
$textarea-padding: $control-padding-horizontal ;
$textarea-max-height: 40em ;
$textarea-min-height: 8em ;
// =============================================================
// @import "sass/form/input-textarea.sass"
// ******************** form-input-textarea * END *

// ------------------------------------------------------------------ form-checkbox-radio BEGIN ---
// ------------------------------------------------------------------------------------------------
// older versions had styling variables for this.
// =============================================================
// @import "sass/form/checkbox-radio.sass"
// =============================================================
// ******************** form-checkbox-radio * END *

// -------------------------------------------------------------------------- form-select BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/form/select.sass"
// =============================================================
// *********************** form-select END *

// ---------------------------------------------------------------------------- form-file BEGIN ---
// ------------------------------------------------------------------------------------------------
$file-border-color: $border ;
$file-radius: $radius ;

$file-cta-background-color: $scheme-main-ter ;
$file-cta-color: $text ;
$file-cta-hover-color: $text-strong ;
$file-cta-active-color: $text-strong ;

$file-name-border-color: $border ;
$file-name-border-style: solid ;
$file-name-border-width: 1px 1px 1px 0 ;
$file-name-max-width: 16em ;
// =============================================================
// @import "sass/form/file.sass"
// *********************** form-file END *

// --------------------------------------------------------------------------- form-tools BEGIN ---
// ------------------------------------------------------------------------------------------------
$label-color: $text-strong ;
$label-weight: $weight-bold ;

$help-size: $size-small ;
// =============================================================
// @import "sass/form/tools.sass"
// *********************** form-tools * END *

// --------------------------------------------------------------------------- breadcrumb BEGIN ---
// ------------------------------------------------------------------------------------------------
$breadcrumb-item-color: $link ;
$breadcrumb-item-hover-color: $link-hover ;
$breadcrumb-item-active-color: $text-strong ;

$breadcrumb-item-padding-vertical: 0 ;
$breadcrumb-item-padding-horizontal: 0.75em ;

$breadcrumb-item-separator-color: $border-hover ;
// =============================================================
// @import "sass/components/breadcrumb.sass"
// *********************** breadcrumb * END *

// --------------------------------------------------------------------------------- card BEGIN ---
// ------------------------------------------------------------------------------------------------
$card-color: $text ;
$card-background-color: $scheme-main ;
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px
rgba($scheme-invert, 0.02) ;

$card-header-background-color: transparent ;
$card-header-color: $text-strong ;
$card-header-padding: 0.75rem 1rem ;
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) ;
$card-header-weight: $weight-bold ;

$card-content-background-color: transparent ;
$card-content-padding: 1.5rem ;

$card-footer-background-color: transparent ;
$card-footer-border-top: 1px solid $border-light ;
$card-footer-padding: 0.75rem ;

$card-media-margin: $block-spacing ;
// =============================================================
// @import "sass/components/card.sass"
// ************************* card * END *

// ----------------------------------------------------------------------------- dropdown BEGIN ---
// ------------------------------------------------------------------------------------------------
$dropdown-menu-min-width: 12rem ;

$dropdown-content-background-color: $scheme-main ;
$dropdown-content-arrow: $link ;
$dropdown-content-offset: 4px ;
$dropdown-content-padding-bottom: 0.5rem ;
$dropdown-content-padding-top: 0.5rem ;
$dropdown-content-radius: $radius ;
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px
rgba($scheme-invert, 0.02) ;
$dropdown-content-z: 20 ;

$dropdown-item-color: $text ;
$dropdown-item-hover-color: $scheme-invert ;
$dropdown-item-hover-background-color: $background ;
$dropdown-item-active-color: $link-invert ;
$dropdown-item-active-background-color: $link ;

$dropdown-divider-background-color: $border-light ;
// =============================================================
// @import "sass/components/dropdown.sass"
// ************************ dropdown END *

// -------------------------------------------------------------------------------- level BEGIN ---
// ------------------------------------------------------------------------------------------------
$level-item-spacing: ($block-spacing / 2) ;
// =============================================================
// @import "sass/components/level.sass"
// ************************* level END *

// -------------------------------------------------------------------------------- media BEGIN ---
// ------------------------------------------------------------------------------------------------
$media-border-color: bulmaRgba($border, 0.5) ;
$media-spacing: 1rem;
$media-spacing-large: 1.5rem;
// =============================================================
// @import "sass/components/media.sass"
// ************************* media END *

// --------------------------------------------------------------------------------- menu BEGIN ---
// ------------------------------------------------------------------------------------------------
$menu-item-color: $text ;
$menu-item-radius: $radius-small ;
$menu-item-hover-color: $text-strong ;
$menu-item-hover-background-color: $background ;
$menu-item-active-color: $link-invert ;
$menu-item-active-background-color: $link ;

$menu-list-border-left: 1px solid $border ;
$menu-list-line-height: 1.25 ;
$menu-list-link-padding: 0.5em 0.75em ;
$menu-nested-list-margin: 0.75em ;
$menu-nested-list-padding-left: 0.75em ;

$menu-label-color: $text-light ;
$menu-label-font-size: 0.75em ;
$menu-label-letter-spacing: 0.1em ;
$menu-label-spacing: 1em ;
// =============================================================
// @import "sass/components/menu.sass"
// ************************* menu * END *

// ------------------------------------------------------------------------------ message BEGIN ---
// ------------------------------------------------------------------------------------------------
$message-background-color: $background ;
$message-radius: $radius ;

$message-header-background-color: $text ;
$message-header-color: $text-invert ;
$message-header-weight: $weight-bold ;
$message-header-padding: 0.75em 1em ;
$message-header-radius: $radius ;

$message-body-border-color: $border ;
$message-body-border-width: 0 0 0 4px ;
$message-body-color: $text ;
$message-body-padding: 1.25em 1.5em ;
$message-body-radius: $radius ;

$message-body-pre-background-color: $scheme-main ;
$message-body-pre-code-background-color: transparent ;

$message-header-body-border-width: 0 ;
$message-colors: $colors ;
// =============================================================
// @import "sass/components/message.sass"
// ************************ message * END *

// -------------------------------------------------------------------------------- modal BEGIN ---
// ------------------------------------------------------------------------------------------------
$modal-z: 40 ;

$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) ;

$modal-content-width: 640px ;
$modal-content-margin-mobile: 20px ;
$modal-content-spacing-mobile: 160px ;
$modal-content-spacing-tablet: 40px ;

$modal-close-dimensions: 40px ;
$modal-close-right: 20px ;
$modal-close-top: 20px ;

$modal-card-spacing: 40px ;

$modal-card-head-background-color: $background ;
$modal-card-head-border-bottom: 1px solid $border ;
$modal-card-head-padding: 20px ;
$modal-card-head-radius: $radius-large ;

$modal-card-title-color: $text-strong ;
$modal-card-title-line-height: 1 ;
$modal-card-title-size: $size-4 ;

$modal-card-foot-radius: $radius-large ;
$modal-card-foot-border-top: 1px solid $border ;

$modal-card-body-background-color: $scheme-main ;
$modal-card-body-padding: 20px ;
// =============================================================
// @import "sass/components/modal.sass"
// ************************* modal END *

// ------------------------------------------------------------------------------- navbar BEGIN ---
// ------------------------------------------------------------------------------------------------
$navbar-background-color: $scheme-main ;
$navbar-box-shadow-size: 0 2px 0 0 ;
$navbar-box-shadow-color: $background ;
$navbar-height: 3.25rem ;
$navbar-padding-vertical: 1rem ;
$navbar-padding-horizontal: 2rem ;
$navbar-z: 30 ;
$navbar-fixed-z: 30 ;

$navbar-item-color: $text ;
$navbar-item-hover-color: $link ;
$navbar-item-hover-background-color: $scheme-main-bis ;
$navbar-item-active-color: $scheme-invert ;
$navbar-item-active-background-color: transparent ;
$navbar-item-img-max-height: 1.75rem ;

$navbar-burger-color: $navbar-item-color ;

$navbar-tab-hover-background-color: transparent ;
$navbar-tab-hover-border-bottom-color: $link ;
$navbar-tab-active-color: $link ;
$navbar-tab-active-background-color: transparent ;
$navbar-tab-active-border-bottom-color: $link ;
$navbar-tab-active-border-bottom-style: solid ;
$navbar-tab-active-border-bottom-width: 3px ;

$navbar-dropdown-background-color: $scheme-main ;
$navbar-dropdown-border-top: 2px solid $border ;
$navbar-dropdown-offset: -4px ;
$navbar-dropdown-arrow: $link ;
$navbar-dropdown-radius: $radius-large ;
$navbar-dropdown-z: 20 ;

$navbar-dropdown-boxed-radius: $radius-large ;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px
bulmaRgba($scheme-invert, 0.1) ;

$navbar-dropdown-item-hover-color: $scheme-invert ;
$navbar-dropdown-item-hover-background-color: $background ;
$navbar-dropdown-item-active-color: $link ;
$navbar-dropdown-item-active-background-color: $background ;

$navbar-divider-background-color: $background ;
$navbar-divider-height: 2px ;

$navbar-bottom-box-shadow-size: 0 -2px 0 0 ;

$navbar-breakpoint: $desktop ;
// =============================================================
// @import "sass/components/navbar.sass"
// ************************ navbar END *

// --------------------------------------------------------------------------- pagination BEGIN ---
// ------------------------------------------------------------------------------------------------
$pagination-color: $text-strong ;
$pagination-border-color: $border ;
$pagination-margin: -0.25rem ;
$pagination-min-width: $control-height ;

$pagination-item-font-size: 1em ;
$pagination-item-margin: 0.25rem ;
$pagination-item-padding-left: 0.5em ;
$pagination-item-padding-right: 0.5em ;

$pagination-hover-color: $link-hover ;
$pagination-hover-border-color: $link-hover-border ;

$pagination-focus-color: $link-focus ;
$pagination-focus-border-color: $link-focus-border ;

$pagination-active-color: $link-active ;
$pagination-active-border-color: $link-active-border ;

$pagination-disabled-color: $text-light ;
$pagination-disabled-background-color: $border ;
$pagination-disabled-border-color: $border ;

$pagination-current-color: $link-invert ;
$pagination-current-background-color: $link ;
$pagination-current-border-color: $link ;

$pagination-ellipsis-color: $grey-light ;

$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
// =============================================================
// @import "sass/components/pagination.sass"
// *********************** pagination * END *

// -------------------------------------------------------------------------------- panel BEGIN ---
// ------------------------------------------------------------------------------------------------
$panel-margin: $block-spacing ;
$panel-item-border: 1px solid $border-light ;
$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) ;

$panel-heading-background-color: $border-light ;
$panel-heading-color: $text-strong ;
$panel-heading-line-height: 1.25 ;
$panel-heading-padding: 0.75em 1em ;
$panel-heading-radius: $radius ;
$panel-heading-size: 1.25em ;
$panel-heading-weight: $weight-bold ;

$panel-tabs-font-size: 0.875em ;
$panel-tab-border-bottom: 1px solid $border ;
$panel-tab-active-border-bottom-color: $link-active-border ;
$panel-tab-active-color: $link-active ;

$panel-list-item-color: $text ;
$panel-list-item-hover-color: $link ;

$panel-block-color: $text-strong ;
$panel-block-hover-background-color: $background ;
$panel-block-active-border-left-color: $link ;
$panel-block-active-color: $link-active ;
$panel-block-active-icon-color: $link ;

$panel-icon-color: $text-light ;
$panel-colors: $colors ;
// =============================================================
// @import "sass/components/panel.sass"
// ************************* panel END *

// --------------------------------------------------------------------------------- tabs BEGIN ---
// ------------------------------------------------------------------------------------------------
$tabs-border-bottom-color: $border ;
$tabs-border-bottom-style: solid ;
$tabs-border-bottom-width: 1px ;
$tabs-link-color: $text ;
$tabs-link-hover-border-bottom-color: $text-strong ;
$tabs-link-hover-color: $text-strong ;
$tabs-link-active-border-bottom-color: $link ;
$tabs-link-active-color: $link ;
$tabs-link-padding: 0.5em 1em ;

$tabs-boxed-link-radius: $radius ;
$tabs-boxed-link-hover-background-color: $background ;
$tabs-boxed-link-hover-border-bottom-color: $border ;

$tabs-boxed-link-active-background-color: $scheme-main ;
$tabs-boxed-link-active-border-color: $border ;
$tabs-boxed-link-active-border-bottom-color: transparent ;

$tabs-toggle-link-border-color: $border ;
$tabs-toggle-link-border-style: solid ;
$tabs-toggle-link-border-width: 1px ;
$tabs-toggle-link-hover-background-color: $background ;
$tabs-toggle-link-hover-border-color: $border-hover ;
$tabs-toggle-link-radius: $radius ;
$tabs-toggle-link-active-background-color: $link ;
$tabs-toggle-link-active-border-color: $link ;
$tabs-toggle-link-active-color: $link-invert ;
// =============================================================
// @import "sass/components/tabs.sass"
// ************************* tabs * END *

// ------------------------------------------------------------------------------ columns BEGIN ---
// ------------------------------------------------------------------------------------------------
$column-gap: 0.75rem ;
// =============================================================
// @import "sass/grid/columns.sass"
// ************************ columns * END *

// -------------------------------------------------------------------------------- tiles BEGIN ---
// ------------------------------------------------------------------------------------------------
$tile-spacing: 0.75rem ;
// =============================================================
// @import "sass/grid/tiles.sass"
// ************************* tiles END *

// -------------------------------------------------------------------------------- color BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/helpers/color.sass"
// =============================================================
// ************************* color END *

// -------------------------------------------------------------------------------- float BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/helpers/float.sass"
// =============================================================
// ************************* float END *

// -------------------------------------------------------------------------------- other BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/helpers/other.sass"
// =============================================================
// ************************* other END *

// ----------------------------------------------------------------------------- overflow BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/helpers/overflow.sass"
// =============================================================
// ************************ overflow END *

// ----------------------------------------------------------------------------- position BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/helpers/position.sass"
// =============================================================
// ************************ position END *

// ------------------------------------------------------------------------------ spacing BEGIN ---
// ------------------------------------------------------------------------------------------------
$spacing-shortcuts: ("margin": "m", "padding": "p") ;
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") ;
$spacing-horizontal: "x" ;
$spacing-vertical: "y" ;
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem,
"6": 3rem) ;
// =============================================================
// @import "sass/helpers/spacing.sass"
// ************************ spacing * END *

// --------------------------------------------------------------------------- typography BEGIN ---
// ------------------------------------------------------------------------------------------------
// =============================================================
// @import "sass/helpers/typography.sass"
// =============================================================
// *********************** typography * END *

// --------------------------------------------------------------------------- visibility BEGIN ---
// ------------------------------------------------------------------------------------------------
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
// =============================================================
// @import "sass/helpers/visibility.sass"
// *********************** visibility * END *

// --------------------------------------------------------------------------------- hero BEGIN ---
// ------------------------------------------------------------------------------------------------
$hero-body-padding: 3rem 1.5rem ;
$hero-body-padding-small: 1.5rem ;
$hero-body-padding-medium: 9rem 1.5rem ;
$hero-body-padding-large: 18rem 1.5rem ;
// =============================================================
// @import "sass/layout/hero.sass"
// ************************* hero * END *

// ------------------------------------------------------------------------------ section BEGIN ---
// ------------------------------------------------------------------------------------------------
//
// These are for .section, not for

$section-padding: 3rem 1.5rem ;
$section-padding-medium: 9rem 1.5rem ;
$section-padding-large: 18rem 1.5rem ;
// =============================================================
// @import "sass/layout/section.sass"
// ************************ section * END *

// ------------------------------------------------------------------------------- footer BEGIN ---
// ------------------------------------------------------------------------------------------------
//
// These are for .footer, not for

$footer-background-color: $scheme-main-bis ;
$footer-color: false ;
$footer-padding: 3rem 1.5rem 6rem ;
// =============================================================
// @import "sass/layout/footer.sass"
// ************************ footer END *

// ------------------------------------------------------------------------------------------------
// Below are some elements and classes that have no special styling in Bulma (yet)
// Check sass/base/minireset.sass for resets of a lot of HTML elements.
// ------------------------------------------------------------------------------------------------

// ========================================================================================= address
// address
//

// ========================================================================================= article
// article
//

// =========================================================================================== aside
// aside
//

// ========================================================================================= details
// details
//

// ========================================================================================== header
// header
//

// ============================================================================================ main
// main
//

// ============================================================================================ mark
// mark
//

// ========================================================================================= summary
// summary
//

// ============================================================================================ time
// time
//

// ================================================================================================
// ================================================================================================
// Below are some extensions, for those coming from other frameworks, who might be missing
// certain components
// ================================================================================================
// ================================================================================================

// =========================================================================================== Steps
// Steps
// An in-depth steps extension for multi-step forms or wizards
// https://octoshrimpy.github.io/bulma-o-steps/

// ========================================================================= Accordion - Collapsible
// Accordion - Collapsible
// Used to be a simple accordion extension at: https://wikiki.github.io/components/accordion/
// New version with a lot of new functionalities and its documentation is now available on
// https://github.com/CreativeBulma/bulma-collapsible/

// ========================================================================== Carousel - Collapsible
// Carousel - Collapsible
// Used to be a simple carousel at: https://wikiki.github.io/components/carousel/
// New version with a lot of new functionalities and its documentation is now available on
// https://github.com/CreativeBulma/bulma-collapsible/

// ======================================================================================= QuickView
// QuickView
// Display a quick view of data without leaving the current page
// https://wikiki.github.io/components/quickview/

// ====================================================================================== IconPicker
// IconPicker
// Display an input as an Icon Picker to ease the user icon selection.
// https://wikiki.github.io/form/iconpicker/

// ======================================================================================= TagsInput
// TagsInput
// Used to be a simple way of adding tags at: https://wikiki.github.io/form/tagsinput/
// New version with a lot of new functionalities and its documentation is now available on
// https://github.com/CreativeBulma/bulma-tagsinput/

// ======================================================================================= Tagsfield
// Tagsfield
// multi-line tags input control
// https://github.com/vyachkonovalov/bulma-tagsfield

// =================================================================================== Pricing table
// Pricing table
// Display a pricing table easily.
// https://wikiki.github.io/components/pricingtable/

// ============================================================================= megamenu for v0.7.5
// megamenu for v0.7.5
// Bulma extension to make Mega Menu.
// https://github.com/hunzaboy/bulma-megamenu

// ========================================================================================== Slider
// Slider
// Display a classic slider with different colors, sizes, and states
// https://wikiki.github.io/form/slider/

// ================================================================================= AxureRP Library
// AxureRP Library
// Axure Library with all components that are implemented in the Bulma CSS Framework.
// https://github.com/AGmakonts/Bulma.io-axure

// ====================================================================================== Checkradio
// Checkradio
// Make classic checkbox and radio sexier with different colors, sizes, and states
// https://wikiki.github.io/form/checkradio/

// ========================================================================================== Switch
// Switch
// Display the classic checkbox as a switch button with different colors, sizes, and states
// https://wikiki.github.io/form/switch/

// =============================================================================== Steps Alternative
// Steps Alternative
// Keep track of where you are in multi steps forms and wizards.
// https://aramvisser.github.io/bulma-steps/

// ========================================================================================= Divider
// Divider
// Vertical/horizontal divider to segment your design. at:https://wikiki.github.io/layout/divider/
// Aternative at: https://github.com/CreativeBulma/bulma-divider/

// ======================================================================================== Calendar
// Calendar
// Display a calendar with different colors and sizes
// https://wikiki.github.io/components/calendar/

// ===================================================================================== Page-loader
// Page-loader
// Display a page-loader to inform users that content is loading, in different colors.
// https://wikiki.github.io/elements/pageloader/

// ========================================================================================== ribbon
// ribbon
// extension to show a ribbon on boxes
// https://github.com/Wikiki/bulma-ribbon

// =========================================================================================== Badge
// Badge
// Display a badge element in different colors. at:https://wikiki.github.io/elements/badge/
// More advanced component: https://github.com/CreativeBulma/bulma-badge/

// =========================================================================================== Steps
// Steps
// Display steps for a process (like sign-up or an order form) with different colors, sizes, and states
// https://wikiki.github.io/components/steps/

// ========================================================================================= Tooltip
// Tooltip
// Display a tooltip attached to any kind of element with different positioning.
// https://wikiki.github.io/elements/tooltip/
// More advanced at: https://github.com/CreativeBulma/bulma-tooltip/

// ======================================================================================== Timeline
// Timeline
// Display a vertical timeline, in different colors, sizes, and states.
// https://wikiki.github.io/components/timeline/

// =========================================================================================== Toast
// Toast
// Display toasts.
// https://github.com/rfoel/bulma-toast

// ======================================================================================= Dashboard
// Dashboard
// extension that enables you to write dashboard-style interfaces with fixed horizontal panels.
// https://github.com/lucperkins/bulma-dashboard

// ====================================================================================== Block list
// Block list
// block style list elements
// https://github.com/chrisrhymes/bulma-block-list