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

<div class="a box & stack with a danger neutral surface">
  <h3>404 Not Found</h3>
  <p>The resource you are looking for was removed or never existed.</p>
</div>

Button

<button class="a box with a primary surface">OK</button>

Details list

Update date

yesterday

Simple text

<p>15&nbsp;<span class="minor content">KiB</span></p>

<p>1&nbsp;<span class="minor">Mb</span></p>

Playground

Try it out on CodePen.

License

MIT