SCSS Color Management Mixins.

_color_palettes.scss

// Mixin to return the color code
// 
// $palettes      - Array containing the palette.
// $palette_name  - The name of the palette.
// $property_name - The name of the property.
// $tone_name     - (option) The name of the tone.
// $state_name    - (option) The name of the state of tone.
// 
@function palette( $palettes, $palette_name, $property_name, $state_name: 'normal', $tone_name: 'base' ){
  $error_color : #cc0000;
  $palette     : '';
  $property    : '';
  $tone        : '';
  $state       : '';
  $property    : '';

  // Get palette
  @if map-has-key( $palettes, $palette_name ) {
    $palette: map-get( $palettes, $palette_name );
  } @else {
    @warn "Name in the palette : #{$palette_name} is not defined.";
    @return $error_color;
  }

  // Get tone
  @if map-has-key( $palette, $tone_name ) {
    $tone: map-get( $palette, $tone_name );
  } @else {
    @warn "Tone in the palette : #{$tone_name} is not defined.";
    @return $error_color;
  }

  // Get property
  @if map-has-key( $tone, $state_name ) {
    $state: map-get( $tone, $state_name );
  } @else {
    @warn "State in the palette: #{$state_name} is not defined.";
    @return $error_color;
  }

  // Get property
  @if map-has-key( $state, $property_name ) {
    $property: map-get( $state, $property_name );
  } @else {
    @warn "Property in the palette: #{$property_name} is not defined.";
    @return $error_color;
  }

  @return $property;
}

_colors.scss

$PALETTES: (
  'card': ( 
    'base': (
      'normal': (
        border:     transparent,
        color:      #333,
        background: #fafafa,
        box-shadow: rgba( 0, 0, 0, .05 )
      ),
      'hover': (
        border:     #cc0000,
        color:      #333,
        background: #fff,
        box-shadow: rgba( 0, 0, 0, .1 )
      ),
      'current': (
        border:     #333,
        color:      #fff,
        background: #444,
        box-shadow: rgba( 0, 0, 0, .05 )
      )
    )
  )
);

style.scss

// Color Palettes
@import 'color_palettes';
@import 'colors';

.component-card {
  $COMPONENT: 'card';

  margin    : 2rem auto;
  padding   : 1rem;
  min-width :  30%;
  max-width :  60%;

  border-radius : 2px;
  border        : 1px solid palette( $PALETTES, $COMPONENT, 'border' );

  text-align : center;
  color      : palette( $PALETTES, $COMPONENT, 'color' );

  background : palette( $PALETTES, $COMPONENT, 'background' );
  box-shadow : 0 .05rem .2rem palette( $PALETTES, $COMPONENT, 'box-shadow' );

  &:hover {
    $STATE: 'hover';
    border     : 1px solid palette( $PALETTES, $COMPONENT, 'border', $STATE );
    color      : palette( $PALETTES, $COMPONENT, 'color', $STATE );
    background : palette( $PALETTES, $COMPONENT, 'background', $STATE );
    box-shadow : 0 .05rem .75rem palette( $PALETTES, $COMPONENT, 'box-shadow', $STATE );
  }

  &.state-current {
    $STATE: 'current';
    border     : 1px solid palette( $PALETTES, $COMPONENT, 'border', $STATE );
    color      : palette( $PALETTES, $COMPONENT, 'color', $STATE );
    background : palette( $PALETTES, $COMPONENT, 'background', $STATE );
    box-shadow : 0 .05rem .5rem palette( $PALETTES, $COMPONENT, 'box-shadow', $STATE );
  }
}