SASS: map-get not returning a color usable by darken

Viewed 690

Codesandbox Example

I am themeing bootstrap using their documentation HERE. I am getting the following error when trying to use the darken() function.

argument $color of darken($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);
  }
1 Answers

Just noticed the answer in the comments after working out you had the extra 'link' in the @each list. —You should pull this question down or mark it as answered!

But so you don’t make the same mistake again and so don’t have to maintain 2 lists, it would be much better to just loop over the $theme-colors map eg:

@each $variant, $variant-color in $theme-colors {
  $oc: darken($variant-color, 7.5%);
  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: $oc;
    color: $oc;
  }
}

Ref: https://sass-lang.com/documentation/at-rules/control/each#with-maps

Updated version of your Codesandbox Example

Related