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.
npm install --save-dev feedback-colorDownload feedback-color.scss from the /src/scss/functions directory.
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');
}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' |
MIT - Read full license