color-palette

// Utility Color Classes

$gng: (
    // Brand colors
    "base": #3e3e3e,
    "link": #f79637,
    "hover": #f79637,
    "button-fill": #f36e21,
    "button-text": #f79637,
    "cats-header": #5ECCC8,
    "disable": #ACACAC,
    "disable-bg": #EFEFEF,
    "border": #D9D9D9,
    "icons": #E4AFE4,
    "muted": #767474,
    "green":#049888,
    "light-bg-pink":#f8eae1,
    "light-grey-btn": #dfdfdf,
    "light-green":#89c545,
    "light-black": #615e5e,
    "light-grey": #f5f5f5,
    "light-dark-grey": #9c9595,
    "light-white-grey" :#f9f9f9,
    "light-mid-grey" :#898989,
    "light-dark-grey-1" :#d0cece,

    // b&w
    "black": #000000,
    "white": #FFFFFF,
    "transparent": transparent,
    // social
    "facebook": #3B5998,
    "linkedin": #007BB5,
    "google": #E02F2F,
    "twitter": #00aced,
    "pinterest":#cb2027,
    "instagram":#6a453b,
);

$colors: (
    "gng": $gng
) !default;

$fixed-colors: (
    "gng": $gng
) !default;

// Color Classes

@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    @if $color_type == "base" {
      .bg-#{$color_name} {
        background-color: $color_value;
      }
      .#{$color_name}-text {
        color: $color_value;
      }
    } @else if $color_name != "gng" {
      .bg-#{$color_name}.#{$color_type} {
        background-color: $color_value;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value;
      }
    }
  }
}

// Shade classes
@each $color, $color_value in $gng {
  .bg-#{$color} {
    background-color: $color_value !important;
  }
  .#{$color}-text {
    color: $color_value!important;
  }
}

// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)

@function color-maker($color, $type) {
  @if map-has-key($fixed-colors, $color) {
    $curr_color: map-get($fixed-colors, $color);
    @if map-has-key($curr_color, $type) {
      @return map-get($curr_color, $type);
    }
  }
  @warn "Unknown `#{name}` in $colors.";
  @return null;
}