I am themeing bootstrap using their documentation HERE. I am getting the following error when trying to use the darken() function.
argument
$colorofdarken($color, $amount)must be a color
I've poked around other questions regarding this error but most of those seem to be related to the load order of the bootstrap imports. I don't think that is what is going on here. It seems like whatever is being returned from map-get() is not considered a color by darken().
Example:
// Color Palette
$soft-black: #333333;
$digital-green: #2e7d32;
$digital-green-accent: rgba(47, 127, 51, .10);
$light-green: #84bd00;
$gold: #f0b323;
$gray: #797979;
$gray-accent: rgba(51, 51, 51, 0.44);
$white: #ffffff;
$light-grey: #d2d2d2;
$red: #cc092f;
$dark-green: #005005;
$background-green: #e9eeee;
$background-grey: #f5f5f5;
$teal: #208484;
$colors: (
"soft-black": $soft-black,
"digital-green": $digital-green,
"light-green": $light-green,
"gold": $gold,
"gray": purple,
"white": $white,
"light-grey": pink,
"red": $red,
"dark-green": $dark-green,
"background-green": $background-green,
"background-grey": $background-grey,
"teal": $teal,
);
// Overriding bootstraps theme colors
$theme-colors: (
"primary": $digital-green,
"secondary": $gray,
"success": $light-green,
"info": $teal,
"warning": $gold,
"danger": $red,
"light": $white,
"dark": $soft-black
);
// Hard overrides.
// When no sass variables exist to override in bootstrap
@each $variant in ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark', 'link') {
$oc: darken(map-get($theme-colors, $variant), 7.5%);
.btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
background-color: $oc;
color: $oc;
}
}
Whats odd is that this works though:
.btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
background-color: map-get($theme-colors, $variant);
color: map-get($theme-colors, $variant);
}