accoutrement-herman
Version:
Sass tools for documenting accoutrement with Herman.
28 lines • 4.2 kB
HTML
<html lang="en"><head><meta charset="utf-8"><title>accoutrement-herman Documentation</title><link href="assets/img/favicon.ico" rel="shortcut icon"><link rel="stylesheet" href="assets/css/main.css"><link rel="stylesheet" href="assets/css/theme.css"></head><body><header role="banner" data-sassdoc-region="banner"><h1 data-sassdoc="project-title"><a href="https://github.com/oddbird/accoutrement-herman" rel="home" data-sassdoc="project-name">accoutrement-herman</a> <span data-sassdoc="project-version">1.0.0-alpha.4</span></h1></header><nav role="navigation" data-sassdoc-region="nav"><h2 data-sassdoc="nav-title"><a href="index.html" rel="home" data-sassdoc-nav="is-not-active">Pattern Library</a></h2><a href="colors.html" data-sassdoc-nav="is-active">colors</a> <a href="headings.html" data-sassdoc-nav="is-not-active">headings</a> <a href="undefined.html" data-sassdoc-nav="is-not-active">general</a> <a href="webfonts.html" data-sassdoc-nav="is-not-active">webfonts</a></nav><main role="main" data-sassdoc-region="main" data-sassdoc-page="colors"><h2 data-sassdoc="page-title">colors</h2><section data-sassdoc-item="variable" id="variable--brand-colors"><h4 data-sassdoc="item-title"><span data-sassdoc="item-name">$brand-colors</span> <span data-sassdoc="item-type">variable</span></h4><div data-sassdoc="item-description"><p>We use bright primary colors for the main brand, everything else is based on these colors.</p></div><pre data-sassdoc="hljs"><code class="lang-scss">$brand-colors: (
'brand-orange': hsl(24, 100%, 39%),
'brand-blue': hsl(195, 85%, 35%),
'brand-pink': hsl(330, 85%, 48%),
);</code></pre><div data-sassdoc="color-palette"></div></section><section data-sassdoc-item="variable" id="variable--neutral-colors"><h4 data-sassdoc="item-title"><span data-sassdoc="item-name">$neutral-colors</span> <span data-sassdoc="item-type">variable</span></h4><div data-sassdoc="item-description"><p>Use these neutral colors to create structure and hierarchy in the document.</p></div><pre data-sassdoc="hljs"><code class="lang-scss">$neutral-colors: (
'white': #fff,
'light-gray': 'brand-blue' ('tint': 80%, 'desaturate': 80%),
'gray': 'brand-blue' ('desaturate': 80%),
'black': 'brand-blue' ('shade': 65%),
);</code></pre><div data-sassdoc="color-palette"></div></section><section data-sassdoc-item="variable" id="variable--status-colors"><h4 data-sassdoc="item-title"><span data-sassdoc="item-name">$status-colors</span> <span data-sassdoc="item-type">variable</span></h4><div data-sassdoc="item-description"><p>These status colors for UI elements give a quick sense of progress, warning, or errors.</p></div><pre data-sassdoc="hljs"><code class="lang-scss">$status-colors: (
'go': hsl(75, 65%, 30%),
'yield': 'brand-orange',
'stop': hsl(0, 85%, 50%),
);</code></pre><div data-sassdoc="color-palette"></div></section><section data-sassdoc-item="variable" id="variable--theme-colors"><h4 data-sassdoc="item-title"><span data-sassdoc="item-name">$theme-colors</span> <span data-sassdoc="item-type">variable</span></h4><div data-sassdoc="item-description"><p>Applying the brand and accent colors to a sitewide theme.</p></div><pre data-sassdoc="hljs"><code class="lang-scss">$theme-colors: (
'contrast-light': 'white',
'contrast-dark': 'black',
'background': 'white',
'text': 'black',
'text-light': 'gray',
'border': 'gray',
'callout': 'light-gray',
'overlay': 'callout' ('rgba': 0.9),
'shadow': 'gray' ('rgba': 0.5),
'action': 'brand-orange',
'focus': 'action' ('shade': 10%),
'active': 'action',
'accent': 'brand-pink',
);</code></pre><div data-sassdoc="color-palette"></div></section></main><script type="text/javascript" src="assets/js/highlight.js"></script><script type="text/javascript">hljs.initHighlightingOnLoad();</script></body></html>