https://github.com/deviscoding/colors
SASS color functions and maps used in DevIsCoding components.
https://github.com/deviscoding/colors
Last synced: about 2 months ago
JSON representation
SASS color functions and maps used in DevIsCoding components.
- Host: GitHub
- URL: https://github.com/deviscoding/colors
- Owner: deviscoding
- License: mit
- Created: 2017-09-26T22:03:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-14T15:20:02.000Z (almost 3 years ago)
- Last Synced: 2025-02-04T18:14:48.083Z (3 months ago)
- Language: SCSS
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DevIsCoding Colors
SASS color functions and maps used in DevIsCoding components. Can also be used quite effectively in any SASS where one desires an easy way to manage colors.
Formerly known as StrapLess Colors.
### Available Color Maps
Inclusion of the 'color-variables' establishes three color maps: `$grays`, `$colors`, and `$theme-colors`.
These color maps can be utilized and manipulated with various included functions.
### Available Functions
`color($name)` -
Retrieves a color from the `$color` map by color name.
`theme-color($name)` -
Retrieves a color from the `$theme-colors` map by context name.
`gray($value)` -
Retrieves a shade from the `$grays` map by progression value, 50 - 900.
`theme-colors-merge($new-map)` -
Adds a provided map of `key: color` to the theme colors map. Any new theme-colors will be added to the existing map. Any key that already exists will be overwritten with your new value.
`colors-merge($new-map)` -
Adds a provided map of `key: color` to the colors map. Any new colors will be added to the existing map. Any key that already exists will be overwritten with your new value.
`grays-merge($new-map)` -
Adds a provided map of `value: color` to the grays map. Any gray values will be added to the existing map. Any key that already exists will be overwritten with your new value.
`isLight($color-value)` -
Determines if the given color value is a light color or a dark color. Useful for setting foreground colors that contrast with background colors.
### Available Mixins
`set-color($name,$color-value)` -
Adds or sets a color by the name of `$name` to the colors map with the value `$color-value`. Any existing color with the same name will be overwritten.
`set-theme-color($name,$color-value)` -
Adds or sets a color by the name of `$name` to the theme colors map with the value `$color-value`. Any existing color with the same name will be overwritten.
`set-gray($value,$color-value)` -
Adds or sets a color by the name of `$value` to the gray shades map with the value `$color-value`. Any existing color with the same name will be overwritten.
### How to Use
To use effectively, you should `@import "colors";` BEFORE any variables that set or utilize colors. This will set the base colors and allow you to do the following:
* Use colors with the `color`, `theme-color`, and `gray` functions.
* Add or replace colors to the color map without worrying about `!default` by using the `set-*` functions.
* Merge maps of new colors with the existing maps without wiping anything out.
To set a single color, use the mixins like this:
`@include set-color(white,#fff);`
To update a map of colors, use the functions like this:
`$colors: colors-merge((white: #fff, black: #000));`
To get a color value, use the functions like this:
`.selector { color: color(teal); }`