accoutrement-color

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Configuration | 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-not-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-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"> <nav class="breadcrumb"> <a href="index.html" >Accoutrement: Color</a> » <strong>Configuration</strong> </nav> <div data-page="a-config"> <section class="item" > <div data-item-section="prose" class="text-block"> <h1 id="color-configuration">Color Configuration</h1> </div> </section> <section class="item" id="variable--_LOCAL-COLOR-FUNCTIONS"> <div data-item-section="header"> <h2 class="item-title"> <span class="item-type"></span> <a href="#variable--_LOCAL-COLOR-FUNCTIONS" class="item-name">$_LOCAL-COLOR-FUNCTIONS</a> <span class="value-type">(map)</span> </h2> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> </div> <pre class="hljs-pre"><code class="lang-scss">$_LOCAL-COLOR-FUNCTIONS: ( // sass-lint:disable-line variable-name-format 'tint', 'shade', 'contrast', );</code></pre> </div> <div class="text-block"> <p>These functions are defined internally, and can be called by name without first being captured using the Sass <code>get-function()</code> approach.</p> <p>Don’t make changes to this map directly. You can add your own named functions in the <code>$functions</code> map.</p> </div> </div> <div data-item-section="related"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Related</span> </h3> <div class="param-list"> <h4 class="param-title"> <a href=" a-config.html#variable--functions" class="item-name">$functions</a> </h4> </div> </div> <div data-item-section="used-by"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Used By</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <span class="item-name">_ac-color-get-function()</span> <span class="item-note">[private]</span> </h4> </div> </div> </section> <section class="item" id="variable--functions"> <div data-item-section="header"> <h2 class="item-title"> <span class="item-type"></span> <a href="#variable--functions" class="item-name">$functions</a> <span class="value-type">(map)</span> </h2> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> </div> <pre class="hljs-pre"><code class="lang-scss">$functions: () !default;</code></pre> </div> <div class="text-block"> <p>Define any additional color functions required to generate relataionships in the <code>$colors</code> map. This is only necessary for newer versions of Sass, where functions are first-class, and can be captured using <code>get-function($name)</code>.</p> <pre><code class="lang-scss">$functions: ( 'darken': get-function('darken'), 'lighten': get-function('lighten'), ); </code></pre> </div> </div> <div data-item-section="related"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Related</span> </h3> <div class="param-list"> <h4 class="param-title"> <a href=" a-config.html#variable--_LOCAL-COLOR-FUNCTIONS" class="item-name">$_LOCAL-COLOR-FUNCTIONS</a> </h4> </div> </div> <div data-item-section="used-by"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Used By</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <span class="item-name">_ac-color-get-function()</span> <span class="item-note">[private]</span> </h4> </div> </div> </section> <section class="item" id="variable--colors"> <div data-item-section="header"> <h2 class="item-title"> <span class="item-type"></span> <a href="#variable--colors" class="item-name">$colors</a> </h2> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> </div> <pre class="hljs-pre"><code class="lang-scss">$colors: () !default;</code></pre> </div> <div class="text-block"> <p>A variable storing the map of all colors globally-avialble on your project. Any colors added to the <code>$colors</code> map will be accesible to the <code>color()</code> function by<span class="widont"> </span>default.</p> <p>Define each color with a <code>name</code>, <code>base-value</code>, and optional <code>adjustments</code>…</p> <pre><code>$colors: ( 'color-name': <base-value>, 'color-two': <base-value> ('<color-function>': '<arguments>'), // will return: function-name($base-value, $arguments...) ); </code></pre> <ul> <li>Name your colors anything – from abstractions like <code>brand-pink</code>, to concrete patterns like <code>button</code> or <code>widget-background</code>.</li> <li>Base-values can be CSS-ready colors (hex, rgb, hsla), or references other colors in the<span class="widont"> </span>map.</li> <li>Adjustments are a nested map of color functions and arguments, for adjusting colors directly in your<span class="widont"> </span>palette.</li> </ul> <p>The color-names <code>contrast-light</code> and <code>contrast-dark</code> are special. Use those names to define the default light-and-dark options for our color-contrast tools. They default to <code>white</code> and <code>black</code> respectively.</p> </div> </div> <div data-item-section="examples"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Examples</span> </h3> <div class="example"> <div class="example-code"> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> <span class='code-description'> simple color definitions </span> </div> <pre class="hljs-pre"><code class="lang-scss">$colors: ( 'brand-pink': hsl(330, 85%, 62%), 'brand-light': #fff, 'brand-dark': #222, );</code></pre> </div> </div> </div> <div class="example"> <div class="example-code"> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> <span class='code-description'> reference other colors </span> </div> <pre class="hljs-pre"><code class="lang-scss">$colors: ( 'background': 'brand-light', 'text': 'brand-dark', 'link': 'brand-pink', );</code></pre> </div> </div> </div> <div class="example"> <div class="example-code"> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> <span class='code-description'> adjust referenced colors with any color function </span> </div> <pre class="hljs-pre"><code class="lang-scss">$colors: ( 'focus': 'link' ('darken': 15%, 'desaturate': 15%), );</code></pre> </div> </div> </div> </div> <div data-item-section="related"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Related</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" colors.html#function--color" class="item-name">color()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" contrast.html#function--contrast" class="item-name">contrast()</a> </h4> </div> </div> <div data-item-section="used-by"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Used By</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@mixin</span> <a href=" a-config.html#mixin--add-colors" class="item-name">add-colors()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" contrast.html#function--contrast" class="item-name">contrast()</a> </h4> </div> </div> </section> <section class="item" id="mixin--add-colors"> <div data-item-section="header"> <h2 class="item-title"> <span class="item-type">@mixin</span> <a href="#mixin--add-colors" class="item-name">add-colors()</a> </h2> <div class="text-block"> <p>Merge individual color maps into the global <code>$colors</code> variable, in case you want to define colors in smaller groups such as <code>brand-colors</code>, <code>link-colors</code>, etc before merging them into a single global color-palette. This can be useful for internal organization, documentation with <a href="http://sassdoc.com/">SassDoc</a>, or integration with our pattern-library generator: <a href="http://oddbird.net/herman/">Herman</a>.</p> </div> </div> <div data-item-section="parameter"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Parameters &<span class="widont"> </span>Output</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-name">$maps:</span> <span class="value-type">(map...)</span> </h4> <div class="param-details text-block"> <p>Pass any number of maps to be<span class="widont"> </span>merged.</p> </div> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-name">{CSS output}</span> <span class="value-type">(code<span class="widont"> </span>block)</span> </h4> <div class="param-details text-block"> <ul> <li>An updated global <code>$colors</code> variable, with new maps merged<span class="widont"> </span>in.</li> </ul> </div> </div> </div> <div data-item-section="examples"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Example</span> </h3> <div class="example"> <div class="example-code"> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> </div> <pre class="hljs-pre"><code class="lang-scss">$brand-colors: ( 'brand-dark': #222, 'brand-pink': hsl(330, 85%, 62%), ); $text-colors: ( 'text': 'brand-dark', 'link': 'brand-pink', ); @include add-colors($brand-colors, $text-colors);</code></pre> </div> </div> </div> </div> <div data-item-section="requires"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Requires</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@function</span> <a href=" a-config.html#function--merge-colors" class="item-name">merge-colors()</a> </h4> </div> <div class="param-list"> <h4 class="param-title"> <a href=" a-config.html#variable--colors" class="item-name">$colors</a> </h4> </div> </div> </section> <section class="item" id="function--merge-colors"> <div data-item-section="header"> <h2 class="item-title"> <span class="item-type">@function</span> <a href="#function--merge-colors" class="item-name">merge-colors()</a> </h2> <div class="text-block"> <p>Merge multiple color maps into a single map, in case you want to define colors in smaller groups – such as <code>brand-colors</code>, <code>link-colors</code>, etc. – before merging them into a single<span class="widont"> </span>map.</p> <p>This is like <code>add-colors</code>, but returns the combined map without assigning it to the <code>$colors</code> variable.</p> </div> </div> <div data-item-section="parameter"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Parameters &<span class="widont"> </span>Return</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-name">$maps:</span> <span class="value-type">(maps...)</span> </h4> <div class="param-details text-block"> <p>Pass any number of maps to be<span class="widont"> </span>merged.</p> </div> </div> <div class="param-list"> <h4 class="param-title"> <span class="item-name">@return</span> <span class="value-type">(map)</span> </h4> <div class="param-details text-block"> <p>The merged map of<span class="widont"> </span>colors.</p> </div> </div> </div> <div data-item-section="examples"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Example</span> </h3> <div class="example"> <div class="example-code"> <div class="code-block"> <div class="code-header"> <span class="code-language"> scss </span> </div> <pre class="hljs-pre"><code class="lang-scss">$brand-colors: ( 'brand-dark': #222, 'brand-pink': hsl(330, 85%, 62%), ); $text-colors: ( 'text': 'brand-dark', 'link': 'brand-pink', ); $colors: merge-colors($brand-colors, $text-colors);</code></pre> </div> </div> </div> </div> <div data-item-section="used-by"> <h3 class="item-subtitle"> <span class="item-subtitle-main">Used By</span> </h3> <div class="param-list"> <h4 class="param-title"> <span class="item-type">@mixin</span> <a href=" a-config.html#mixin--add-colors" class="item-name">add-colors()</a> </h4> </div> </div> </section> </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>