title: React SCSS: Argument `$color` of `rgba($color, $alpha)` must be a color
body: <p>I'm building a react application with SCSS.</p>
  <p>With the following <code>_variables.scss</code> and <code>_overrides.scss</code> files, I receive the following error: <code>argument $color of rgba($color, $alpha) must be a color</code>. I am fairly new to SCSS within react so I am unsure how to troubleshoot this issue.</p>
  <p>variables.scss</p>
  <pre><code>
  $white:    #fff !default;
  $gray-100: #f8f9fa !default;
  $gray-200: #e9ecef !default;
  $gray-300: #d6dee5 !default;
  $gray-400: #c1ccd3 !default;
  $gray-500: #a3aeb7 !default;
  $gray-600: #798892 !default;
  $gray-700: #495057 !default;
  $gray-800: #3c484f !default;
  $gray-900: #29323a !default;
  $black:    #000 !default;
  $gray-light: $gray-100 !default;
  
  $blue:         #005792 !default;
  $indigo:       #7f3ddb !default;
  $purple:       #1A86D0 !default;
  $pink:         #e54e9a !default;
  $red:          #E30613 !default;
  $orange:       #ff7d47 !default;
  $yellow:       #FDA700 !default;
  $green:        #68ca66 !default;
  $teal:         #21AE8C !default;
  $cyan:         #17a2b8 !default;
  $dark-gray:    #D7DFE6 !default;
  $gray-inverse: #002B49 !default;
  $subtle-white: #EAF0F6 !default;
  
  $theme-colors: (
    primary: $red,
    secondary: $gray-600,
    success: $teal,
    info: $purple,
    warning: $yellow,
    danger: $orange,
    dark: $gray-800,
    inverse: $gray-inverse,
    gray: $gray-300,
    light: $gray-100,
    default: #e9ecef,
    primary-light: #dee4ee,
    success-light: #ecfaec,
    info-light: #f2fafa,
    warning-light: #fdf7e6,
    danger-light: #fff2ef,
  );
  </code></pre>
  <p>variables.scss</p>
  <pre><code>.alert-info {
    background: theme-color('info');
    color: $white;
  
    &amp;.alert-transparent {
      color: theme-color('info');
      background: rgba(theme-color('info'), $alert-transparent);
    }
  
    .btn:not(.btn-default) {
      background: rgba($white, 0.8);
      color: theme-color('info');
    }
  }
  </code></pre>
  <p>theme.scss</p>
  <pre><code>@import '~bootstrap/scss/functions';
  @import 'variables';
  @import '~bootstrap/scss/bootstrap';
  @import 'overrides';
  
  </code></pre>
  <p>Can anyone identify what may be the issue? Thanks so much for the assistance.</p>