Prism CSS Color Palette Management.

_colors.scss

// Prism 0.1.0
// http://prism.nukos.kitchen/
// Copyright 2015 nuko's kitchen
// MIT License

$COLOR-PRIMARY:        #fafafa !default;

$COLOR-TEXT_BASE:      #444444 !default;
$COLOR-TEXT_INVERSE:   #eeeeee !default;

$COLOR-BG_BASE:        #fafafa !default;
$COLOR-BG_INVERSE:     #242B33 !default;

$COLOR-THEME_RED:      #E84E3C !default;
$COLOR-THEME_ORANGE:   #F29933 !default;
$COLOR-THEME_YELLOW:   #F2C10F !default;
$COLOR-THEME_LIME:     #99DE37 !default;
$COLOR-THEME_GREEN:    #33D463 !default;
$COLOR-THEME_EMERALD:  #31DEA7 !default;
$COLOR-THEME_CYAN:     #36CFE0 !default;
$COLOR-THEME_AQUA:     #49AAE3 !default;
$COLOR-THEME_BLUE:     #427AE3 !default;
$COLOR-THEME_DEEPBLUE: #4353E0 !default;
$COLOR-THEME_VIOLET:   #8B41E0 !default;
$COLOR-THEME_PURPLE:   #C34FE0 !default;
$COLOR-THEME_WINERED:  #EB497F !default;

$COLOR-BRAND_FACEBOOK: #3B5998 !default;
$COLOR-BRAND_TWITTER:  #00acee !default;
$COLOR-BRAND_HATENA:   #2c6ebd !default;
$COLOR-BRAND_POCKET:   #ee4056 !default;
$COLOR-BRAND_GPLUS:    #dd4c39 !default;
$COLOR-BRAND_FEEDLY:   #2bb24c !default;

// Debug Colors
$COLOR-ERROR_BG:       #cc0000 !default;

_palettes.scss

// Prism 0.1.0
// http://prism.nukos.kitchen/
// Copyright 2015 nuko's kitchen
// MIT License

$PRISM_PALETTES: (
  'card': ( 
    'base': (
      'normal': (
        border:     transparent,
        color:      $COLOR-TEXT_BASE,
        background: $COLOR-BG_BASE,
        box-shadow: rgba( 0, 0, 0, .05 )
      ),
      'hover': (
        border:     $COLOR-THEME_DEEPBLUE,
        color:      brightness( $COLOR-TEXT_BASE, '-05x' ),
        background: brightness( $COLOR-BG_BASE, '05x' ),
        box-shadow: rgba( 0, 0, 0, .1 )
      ),
      'current': (
        border:     #333,
        color:      #fff,
        background: #444,
        box-shadow: rgba( 0, 0, 0, .05 )
      )
    )
  )
) !default;

$PRISM_PALETTE_BRIGHTNESS: (
  '8x'        : ('darken',  64%),
  '7x'        : ('darken',  56%),
  '6x'        : ('darken',  48%),
  '5x'        : ('darken',  40%),
  '4x'        : ('darken',  32%),
  '3x'        : ('darken',  24%),
  '2x'        : ('darken',  16%),
  '1x'        : ('darken',   8%),
  '05x'       : ('darken',   4%),
  'normal'    : ('none',     0%),
  '-05x'      : ('lighten',  4%),
  '-1x'       : ('lighten',  8%),
  '-2x'       : ('lighten', 16%),
  '-3x'       : ('lighten', 24%),
  '-4x'       : ('lighten', 32%),
  '-5x'       : ('lighten', 40%),
  '-6x'       : ('lighten', 48%),
  '-7x'       : ('lighten', 56%),
  '-8x'       : ('lighten', 64%)
) !default;

$PRISM_PALETTE_SATURATION: (
  '8x'        : ('saturate',   64%),
  '7x'        : ('saturate',   56%),
  '6x'        : ('saturate',   48%),
  '5x'        : ('saturate',   40%),
  '4x'        : ('saturate',   32%),
  '3x'        : ('saturate',   24%),
  '2x'        : ('saturate',   16%),
  '1x'        : ('saturate',    8%),
  '05x'       : ('saturate',    4%),
  'normal'    : ('none',        0%),
  '-05x'      : ('desaturate',  4%),
  '-1x'       : ('desaturate',  8%),
  '-2x'       : ('desaturate', 16%),
  '-3x'       : ('desaturate', 24%),
  '-4x'       : ('desaturate', 32%),
  '-5x'       : ('desaturate', 40%),
  '-6x'       : ('desaturate', 48%),
  '-7x'       : ('desaturate', 56%),
  '-8x'       : ('desaturate', 64%)
) !default;

_prism.scss

//  Prism 0.1.0
//  http://prism.nukos.kitchen/
//  Copyright 2015 Ryuichi Nonaka
//  MIT License

@import 'colors';
@import 'palettes';

//  Define Prism palette
//  
//  @param {String} $name:   palette name.
//  @param {Maps} $palettes: palette maps (Default: $PRISM_PALETTES).
//  @param {String} $state:  <Option> State Name (Default: normal).
//  @param {String} $theme:  <Option> Theme Name (Default: base). 
//
//  @example scss - Usage
//    .element {
//      $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//      ...
//    }
//

@function prism-define( $name, $palettes: null, $state: 'normal', $theme: 'base' ) {
  $output: ();

  @if type-of($palettes) == maps {
    $output: (
      'name':     $name,
      'palettes': $palettes,
      'state':    $state,
      'theme':    $theme
    );
  } @else {
    $output: (
      'name':     $name,
      'state':    $state,
      'theme':    $theme
    );
  }

  @return $output;
}



//  Add option in define palette
//
//  @param {Maps} $map:     palettes.
//  @param {String} $key:   option key.
//  @param {String} $value: option value
//
//  @example scss - Usage
//    .element {
//      $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//      ...
//
//      &:hover {
//        $PALETTE_HOVER: prism-option( $PALETTE, 'state', 'hover' );
//        ...
//      }
//    }
//

@function prism-option($map, $key, $value) {

  @if type-of($map) == maps {
    @warn "Argument 1 is not Maps";
  }

  $new_map: ($key: $value);

  @return map-merge($map, $new_map);
}



//  Function to return the color code
// 
//  @param {String} $property_name: The name of the property.
//  @param {Maps} $args: Argments.
//    - name     : Component name.
//    - palettes : Palettes Array (Default: $PRISM_PALETTES).
//    - state    : <Option> State Name (Default: normal).
//    - theme    : <Option> Theme Name (Default: base). 
// 
//  @example scss - Usage
//    .element {
//      $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//
//      background: prism( 'background', $PALETTE );
//    }
//

@function prism( $property_name, $args ){
  $error_color : $COLOR-ERROR_BG;
  $output      : '';
  $palette     : '';
  $property    : '';
  $tone        : '';
  $state       : '';

  $default     : (
    'palettes': $PRISM_PALETTES,
    'name'    : '',
    'state'   : 'normal',
    'theme'   : 'base'  
  );
  $args: map-merge( $default, $args );

  // Set Valiables
  $palettes     : map-get( $args, 'palettes' );
  $palette_name : map-get( $args, 'name' );
  $theme_name   : map-get( $args, 'theme' );
  $state_name   : map-get( $args, 'state' );

  // 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.";
  }

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

  // 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.";
  }

  // 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.";
  }

  @if $property != '' { $output: $property; } @else { $output: $error_color; }
  @return $output;
}



//  It is Function of that dark or bright colors.
//
//  @param {Color} $src_color:  Alters the color code.
//  @param {String} $tone_name: The name of the tone.
//
//  @example scss - Usage
//    .element {
//      $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//
//      $background-color: prism( 'background', $PALETTE );
//      background: tone( $background-color, '1x' );
//    }
//

@function brightness( $src_color, $tone_name: 'normal' ) {
  $output: $COLOR-ERROR_BG;
  $tones:      $PRISM_PALETTE_BRIGHTNESS;

  @if map-has-key( $tones, $tone_name ) {

    $tone:   map-get( $tones, $tone_name );
    $name:   nth( $tone, 1 );
    $amount: nth( $tone, 2 );

    @if $name == lighten {
      // return lighten
      $output: lighten( $src_color, $amount );
    } @else if $name == darken {
      // darken
      $output: darken( $src_color, $amount );
    } @else {
      // normal
      $output: $src_color;
    }
    
  } @else {
    @warn "Tone: #{$tone_name} is not defined.";
  }

  @return $output;
}




//  It is Function of that saturate or desaturate colors.
//
//  @param {Color} $src_color:  Alters the color code.
//  @param {String} $tone_name: The name of the tone.
//
//  @example scss - Usage
//    .element {
//      $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//
//      $background-color: prism( 'background', $PALETTE );
//      background: saturation( $background-color, '1x' );
//    }
//

@function saturation( $src_color, $tone_name: 'normal' ) {
  $output: $COLOR-ERROR_BG;
  $tones: $PRISM_PALETTE_SATURATION;

  @if map-has-key( $tones, $tone_name ) {

    $tone:   map-get( $tones, $tone_name );
    $name:   nth( $tone, 1 );
    $amount: nth( $tone, 2 );

    @if $name == saturate {
      // saturate
      $output: saturate( $src_color, $amount );
    } @else if $name == darken {
      // desaturate
      $output: desaturate( $src_color, $amount );
    } @else {
      // normal
      $output: $src_color;
    }
    
  } @else {
    @warn "Tone: #{$tone_name} is not defined.";
  }

  @return $output;
}

style.scss

@import 'prism/prism';

.component-card {
  $PALETTE: prism-define( 'card' );

  $border-color:     prism( 'border', $PALETTE );
  $text-color:       prism( 'color', $PALETTE );
  $background-color: prism( 'background', $PALETTE );
  $box-shadow-color: prism( 'box-shadow', $PALETTE );

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

  border-radius : 2px;
  border        : 1px solid $border-color;

  text-align : center;
  color      : $text-color;

  background : $background-color;
  box-shadow : 0 .05rem .2rem $box-shadow-color;


  &:hover {
    $PALETTE_HOVER: prism-option( $PALETTE, 'state', 'hover' );

    $border-color:     prism( 'border', $PALETTE_HOVER );
    $text-color:       prism( 'color', $PALETTE_HOVER );
    $background-color: prism( 'background', $PALETTE_HOVER );
    $box-shadow-color: prism( 'box-shadow', $PALETTE_HOVER );

    border     : 1px solid $border-color;
    color      : $text-color;
    background : $background-color;
    box-shadow : 0 .05rem .75rem $box-shadow-color;
  }


  &.state-current {
    $PALETTE_CURRENT: prism-option( $PALETTE, 'state', 'current');

    $border-color:     prism( 'border', $PALETTE_CURRENT );
    $text-color:       prism( 'color', $PALETTE_CURRENT );
    $background-color: prism( 'background', $PALETTE_CURRENT );
    $box-shadow-color: prism( 'box-shadow', $PALETTE_CURRENT );

    border     : 1px solid $border-color;
    color      : $text-color;
    background : $background-color;
    box-shadow : 0 .05rem .5rem $box-shadow-color;
  }
}