// hint-variables.scss
// 
// Declares some variables used within the library.


// default tooltip height
$tooltipHeight: 28px;

// border-width for tooltip arrow
$arrowBorderWidth: 6px;

// horizontal arrow offset
$arrowOffsetX: 3 * $arrowBorderWidth;

// text-shadow darken percentage
$textShadowDarkenAmount: 25%;

// transition distance
$transitionDistance: 8px;


// Various colors
// Default color is blackish
$defaultColor: hsl(0, 0%, 22%);

// Error color
$errorColor: hsl(1, 40%, 50%);

// Warning color
$warningColor: hsl(38, 46%, 54%);

// Info Color
$infoColor: hsl(200, 50%, 45%);

// Success Color
$successColor: hsl(121, 32%, 40%);
// hint-variables.scss
// 
// Declares some variables used within the library.


// default tooltip height
$tooltipHeight: 28px !default;

// border-width for tooltip arrow
$arrowBorderWidth: 6px !default;

// horizontal arrow offset
$arrowOffsetX: 3 * $arrowBorderWidth !default;

// text-shadow darken percentage
$textShadowDarkenAmount: 25% !default;

// transition distance
$transitionDistance: 8px !default;


// Various colors
// Default color is blackish
$defaultColor: hsl(0, 0%, 22%) !default;

// Error color
$errorColor: hsl(1, 40%, 50%) !default;

// Warning color
$warningColor: hsl(38, 46%, 54%) !default;

// Info Color
$infoColor: hsl(200, 50%, 45%) !default;

// Success Color
$successColor: hsl(121, 32%, 40%) !default;

Add !default statement for variables
Add !default statement for variables

It will allow user to overwrite properly the values, before including defaults values.