https://github.com/pixelunion/feedback-color
Sass function that returns a feedback color (warning, error, or success) based on a color it's given.
https://github.com/pixelunion/feedback-color
color sass sass-functions
Last synced: about 2 months ago
JSON representation
Sass function that returns a feedback color (warning, error, or success) based on a color it's given.
- Host: GitHub
- URL: https://github.com/pixelunion/feedback-color
- Owner: pixelunion
- License: mit
- Created: 2017-06-27T21:54:50.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-14T18:22:46.000Z (almost 9 years ago)
- Last Synced: 2026-03-14T05:05:53.472Z (4 months ago)
- Topics: color, sass, sass-functions
- Language: CSS
- Homepage:
- Size: 92.8 KB
- Stars: 3
- Watchers: 18
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Feedback Colors
[](https://travis-ci.org/pixelunion/feedback-color)
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
```bash
npm install --save-dev feedback-color
```
##### Old-school method
Download `feedback-color.scss` from the [/src/scss/functions](https://github.com/pixelunion/feedback-color/tree/master/src/scss/functions) directory.
## Usage
Import the `feedback-color` function in your sass.
```scss
@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.
```scss
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](https://github.com/pixelunion/feedback-color/tree/master/LICENSE.md)