Im fairly new to CSS styling, and currently loading bootstrap into my scss main file, where im setting some colors (primary, secondary, danger, etc.) as a theme.

However, it seems that my button text gets distorted as a result of the color-contrast function in the bootstrap/functions.scss.

I would like to keep using this function for all colors except the "secondary". Is it possible to override this and define the btn-secondary-color without going through the color-contrast function?

Currently my main.scss looks like this:

$primary: #44698E;
$secondary: #90A1BC;
$danger: #D3745F;
$hoverblue: #edf6ff;
$darkblue: #103E67;
$dragoverGreen: #bfe3bf;
$dragoverRed: #e8a09e;

@import "../../node_modules/bootstrap/scss/bootstrap";

$btn-secondary-color: white;