variables.scss

// Boilerplate: This file is appended to every SFC style block
// and used in my-styles to set up bulma and buefy appearance

// Import Bulma's utilities
@import '../../node_modules/bulma/sass/utilities/_all';

// Brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$ultra-red: #FF6978;
$celeste: #B1EDE8;
$eggplant: #6D435A;
$brown: #757763;
$baby-powder: #FFFCF9;
$beige: #EFF0EB;

// To bulma vars
$family-sans-serif: "Nunito", sans-serif;
$widescreen-enabled: false;
$fullhd-enabled: false;
$primary: $purple;
$primary-invert: findColorInvert($purple);
$info: $pink;
$info-invert: findColorInvert($info);
$success: $celeste;
$success-invert: findColorInvert($success);
$warning: $eggplant;
$warning-invert: findColorInvert($warning);
$danger: $ultra-red;
$danger-invert: findColorInvert($danger);
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $purple;

$myColors: (
  'primary': ($primary, $primary-invert),
  'info': ($info, $info-invert),
  'success': ($success, $success-invert),
  'warning': ($warning, $warning-invert),
  'danger': ($danger, $danger-invert),
  // you may add more here for `.is-<key>` classes
);