https://github.com/viktor-yakubiv/every-color
A utility class library, letting you write semantically correct and concise sentences in the class attribute.
https://github.com/viktor-yakubiv/every-color
color css design library utility
Last synced: 3 months ago
JSON representation
A utility class library, letting you write semantically correct and concise sentences in the class attribute.
- Host: GitHub
- URL: https://github.com/viktor-yakubiv/every-color
- Owner: viktor-yakubiv
- License: mit
- Created: 2021-10-22T15:12:05.000Z (over 3 years ago)
- Default Branch: v2
- Last Pushed: 2023-09-29T12:57:30.000Z (over 1 year ago)
- Last Synced: 2025-03-20T22:35:57.237Z (3 months ago)
- Topics: color, css, design, library, utility
- Language: JavaScript
- Homepage:
- Size: 465 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://vshymanskyy.github.io/StandWithUkraine)
# Every Color
_Write language, not code._
A utility class library,
letting you write semantically correct and concise sentences
in the `class` attribute.
Grammar derives from the common design slang.
## API
The library supports the following list of classes
that could be used simultaneously.
Object classes are nouns and have a controlling role.
All others are adjectives and meant to be modifiers.
### Object
* `content` — applies text and icons color on the current background
* `surface` — applies block background and defines text and icons colors
that are suitable for the background
### Accent
The color accent could be applied either to _content_ or _surface_.
If applied to the content,
it updates the text color, relatively to the current surface.
If applied to the surface,
it sets the surface background and the surface controls the text color
based on the other modifiers.
If used with neither `.content` nor `.surface`,
it assumes to be applied to content, i.e. text and icons.
* `default`
* `primary`
* `info`
* `positive`
* `warning`
* `danger`
### Contrast
The contrast schema, relative to the current theme.
* `neutral` — blends into the background
* `vibrant` — contrasts with the background
### Emphasis
Emphasis applies to _content_ only
but for convenience could be used without `.content`.
* `major` — high emphasis
* `minor` — medium emphasis
## Examples
Examples below assume the following:
* `.box` applies some padding to make the element look nicer
* `.stack` applies vertical spacing between children
* `.a`, `.with`, `.&` are not and will never be defined
### Alert
```html
404 Not Found
The resource you are looking for was removed or never existed.
```
### Button
```html
OK
```
### Details list
- Update date
- yesterday
### Simple text
```html
15 KiB
```
```html
1 Mb
```
## Playground
[Try it out](https://codepen.io/yakubiv/pen/BadQgZw?editors=1000) on CodePen.
## License
[MIT](./LICENSE)