accoutrement-color

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Accoutrement: Color Documentation</title> <link href="assets/img/favicon.ico" rel="shortcut icon"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="assets/webpack/app_styles.min.css" /> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" hidden> <symbol id="icon-logo" viewBox="0 0 16 16"> <path d="M.2 8L0 7.8v-.2C.8 6.9 1.9 5.9 2.7 5l.4.3c-.5.8-1.1 1.6-1.8 2.3 1 1.2 1 1.3 1.7 2.4l-.4.3c-.4-.4-.5-.6-1-1C1 8.6 1.1 8.7.2 8zM13 10c.6-1.1.7-1.1 1.7-2.4-.6-.6-1.3-1.5-1.7-2.3l.3-.3c.8.8 1.8 1.8 2.7 2.6v.2l-.8.7c-.3.3-1.2 1.1-1.8 1.7L13 10z"/><path d="M2.6 13.1H3c.9 0 1.1-.2 1.1-1.4V4.2c0-1.1-.2-1.4-1.1-1.4h-.4v-.6h4.5v.7h-.3c-.9 0-1.1.2-1.1 1.4v3.2h4.6V4.2c0-1.1-.2-1.4-1.1-1.4h-.3v-.6h4.5v.7H13c-.9 0-1.1.2-1.1 1.4v7.5c0 1.1.2 1.4 1.1 1.4h.4v.7H8.9v-.7h.3c.9 0 1.1-.2 1.1-1.4V8.2H5.7v3.5c0 1.1.2 1.4 1.1 1.4h.3v.7H2.6v-.7z"/> </symbol> <symbol id="icon-menu" viewBox="0 0 24 28"> <path d="M24 21v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1V5c0-.547.453-1 1-1h22c.547 0 1 .453 1 1z"/> </symbol> </svg> <div data-region="app"> <header data-region="banner"> <button data-nav-toggle data-toggle="button" aria-controls="nav" aria-pressed="false" type="button" data-toggle-synced="false"> <svg data-icon="menu" data-icon-size="nav-icon" ><title>menu</title><use xlink:href="#icon-menu" /> </svg> </button> <div class="project-title"> <a href="index.html" rel="home" class="project-name">Accoutrement: Color</a> <span class="project-version">2.3.1</span> </div> </header> <div data-region="container"> <nav data-region="nav" data-toggle="target" id="nav" data-target-id="nav" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false"> <form action="search.html"> <input type="text" name="q" placeholder="Search…" required minlength="3"> </form> <div class="nav-subsection"> <h3 class="nav-home"> <a href="index.html" data-nav="is-active">Accoutrement: Color</a> </h3> <ul> <li class="nav-item"> <a href="CHANGELOG.html" data-nav="is-not-active">Changelog</a> </li> <li class="nav-item"> <a href="CONTRIBUTING.html" data-nav="is-not-active">Contributing</a> </li> <li class="nav-item"> <a href="LICENSE.html" data-nav="is-not-active">MIT License</a> </li> </ul> </div> <div class="nav-subsection"> <ul> <li class="nav-subsection"> <h3 class="nav-title">Public API</h3> <ul> <li class="nav-item"> <a href="a-config.html" data-nav="is-not-active">Configuration</a> </li> <li class="nav-item"> <a href="colors.html" data-nav="is-not-active">Accessing Colors</a> </li> <li class="nav-item"> <a href="contrast.html" data-nav="is-not-active">Contrast Utilities</a> </li> <li class="nav-item"> <a href="util.html" data-nav="is-not-active">Tint &<span class="widont"> </span>Shade</a> </li> </ul> </li></ul> </div> <div class="nav-subsection"> <h3 class="nav-title"> External Links </h3> <ul> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-init/" data-nav="is-not-active">Accoutrement Init</a> </li> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-layout/" data-nav="is-not-active">Accoutrement Layout</a> </li> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-scale/" data-nav="is-not-active">Accoutrement Scale</a> </li> <li class="nav-item"> <a href="http://oddbird.net/accoutrement-type/" data-nav="is-not-active">Accoutrement Type</a> </li> </ul> </div> <aside class="footer-credit"> <a href="http://oddbird.net/herman/" class="footer-icon"> <svg data-icon="logo" data-icon-size="footer-logo" ><use xlink:href="#icon-logo" /> </svg> </a> <span> Documented with <a href="http://oddbird.net/herman/" class="footer-link"> Herman </a> </span> <span> by <a href="http://oddbird.net/" class="footer-link"> OddBird </a> </span> </aside> </nav> <main data-region="main"> <div data-page="index"> <ul class="project-links"> <li class="project-link-item"> <a href="http://oddbird.net/accoutrement-color/" class="project-link">View Project</a> </li> <li class="project-link-item"> <a href="https://github.com/oddbird/accoutrement-color.git" class="project-link">View Source</a> </li> </ul> <div class="text-block"> <h1 id="accoutrement-color">Accoutrement-Color</h1> <p><strong>Sass color-palette management by <a href="http://oddbird.net/">OddBird</a>…</strong></p> <ul> <li>Organize all your colors into a single map, or set of<span class="widont"> </span>maps</li> <li>Document color relationships directly in the<span class="widont"> </span>code</li> <li>Automate <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef">WCAG-appropriate</a> contrast<span class="widont"> </span>checking</li> <li>Generate color-palette documentation with <a href="http://oddbird.net/herman/">Herman</a></li> </ul> <p>OddBird’s Accoutrement toolkits are designed around the idea that code should be meaningful to both humans and machines – opening the door for automation, while improving or maintaining readability. These tools integrate with <a href="http://oddbird.net/herman/">Herman</a>, our automated living pattern-library generator built on <a href="http://sassdoc.com/">SassDoc</a>.</p> <p><strong>Other Accoutrement include…</strong></p> <ul> <li><a href="http://oddbird.net/accoutrement-init/">Init</a> provides lightweight<span class="widont"> </span>browser-normalization.</li> <li><a href="http://oddbird.net/accoutrement-scale/">Scale</a> helps manage scale patterns like font-sizes, margins, and<span class="widont"> </span>gutters.</li> <li><a href="http://oddbird.net/accoutrement-type/">Type</a> provides webfont management tools, and other typography<span class="widont"> </span>helpers.</li> <li><a href="http://oddbird.net/accoutrement-layout/">Layout</a> provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a<span class="widont"> </span>clearfix.</li> </ul> <h2 id="quick-start-colors">Quick Start: Colors</h2> <p>Install the package with npm or<span class="widont"> </span>yarn:</p> <pre><code class="lang-bash">npm install accoutrement-color yarn add accoutrement-color </code></pre> <p>Import the library:</p> <pre><code class="lang-scss">@import '<path-to>/accoutrement-color/sass/color'; </code></pre> <p>Establish your color<span class="widont"> </span>palette:</p> <pre><code class="lang-scss">$colors: ( // set explicit colors 'brand-pink': hsl(330, 85%, 62%), 'brand-light': #ddf, 'brand-dark': #224, // reference existing colors 'background': 'brand-light', 'border': 'brand-dark', // make adjustments as needed, using color functions 'link': 'brand-pink' ('shade': 25%, 'desaturate': 15%), ); </code></pre> <p>Access your colors from<span class="widont"> </span>anywhere:</p> <pre><code class="lang-scss">.example { border-color: color('border'); } </code></pre> <p>You can also define your colors in smaller maps, and then add them to the global <code>$colors</code> variable using the <code>merge-color()</code> function, or <code>add-colors()</code> mixin.</p> <pre><code class="lang-scss">$brand: ( 'brand-pink': hsl(330, 85%, 62%), 'brand-light': #ddf, 'brand-dark': #224, ); $patterns: ( 'background': 'brand-light', 'border': 'brand-dark', 'link': 'brand-pink' ('shade': 25%), ); // merge everything into the main $colors map… @include add-colors($brand, $patterns); </code></pre> <p>We’ll also help you calculate WCAG-appropriate color<span class="widont"> </span>contrasts:</p> <pre><code class="lang-scss">a:hover { // set a background, and get well-contrasted text @include contrasted('link'); // or return a contrasting color for use anywhere… border-color: contrast('background'); } </code></pre> </div> </div> </main> </div> </div> <script type="text/javascript" src="assets/webpack/runtime.min.js"></script> <script type="text/javascript" src="assets/webpack/common.min.js"></script> <script type="text/javascript" src="assets/webpack/app.min.js"></script> </body> </html>