pixelunion / feedback-color

Sass function that returns a feedback color (warning, error, or success) based on a color it's given.

Feedback Colors

When adapting colors for a user interface, a secondary palette is often required for feedback scenarios where a specific type of message must be communicated with the user. Typically, green means success, yellow means warning, and red means error. The problem is not all feedback colors are created equal—an ideal palette is clearly an extension of the interface's primary color.

Feedback Colors returns a success, warning, or error color based on a color it is given. The goal is to automate the creation of feedback colors that work harmoniously with a primary palette, while effectively communicating their intended message.

Installation

Using npm

npm install --save-dev feedback-color

Old-school method

Download feedback-color.scss from the /src/scss/functions directory.

Usage

Import the feedback-color function in your sass.

@import 'feedback-color';

// Or something like this if you installed with npm
@import '../node_modules/feedback-color/feedback-color';

The feedback-color function will return a HEX when you pass it a base color and the feedback color type.

div {
  background-color: feedback-color(#bada55, 'success');
}

Parameters

Feedback Colors will return a HEX value when passed a $base-color and $feedback-type.

Parameter	Accepts	Default
$base-color	A color value in any CSS format	null
$feedback-type	'success', 'warning', or 'error'	'warning'

License

MIT - Read full license