Improved contrast features with css-variables

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Accoutrement Changelog
 
+## 2.1.0 - UNRELEASED
+Improved tools for managing color contrast in CSS-variables.
+
+- [Plugin: Color][color]
+  - NEW: `var-contrast()` and `var-contrasted()`
+    provide CSS variable parallels
+    to `contrast()` and `contrasted()`
+  - NEW: User-defined contrast defaults
+    (`contrast-light` and `contrast-dark`)
+    can be defined with or without the `_` private-color prefix
+  - NEW: Contrast-related functions and mixins
+    provide a smart second light-or-dark default option
+    when only one is defined (previously an error)
+
 ## 2.0.0 - 12/05/18
 The 2.0 release is primarily focused on
 support for **CSS Custom Properties** (aka CSS Variables),

docs/CHANGELOG.html

@@ -413,6 +413,23 @@ <h3 class="nav-title">
 
   <div class="text-block">
     <h1 id="accoutrement-changelog">Accoutrement Changelog</h1>
+<h2 id="2-1-0-unreleased">2.1.0 - UNRELEASED</h2>
+<p>Improved tools for managing color contrast in<span class="widont">&nbsp;</span>CSS-variables.</p>
+<ul>
+<li><a href="http://oddbird.net/accoutrement/docs/color.html">Plugin: Color</a>
+<ul>
+<li>NEW: <code>var-contrast()</code> and <code>var-contrasted()</code>
+provide CSS variable parallels
+to <code>contrast()</code> and <code>contrasted()</code></li>
+<li>NEW: User-defined contrast defaults
+(<code>contrast-light</code> and <code>contrast-dark</code>)
+can be defined with or without the <code>_</code> private-color prefix</li>
+<li>NEW: Contrast-related functions and mixins
+provide a smart second light-or-dark default option
+when only one is defined (previously an<span class="widont">&nbsp;</span>error)</li>
+</ul>
+</li>
+</ul>
 <h2 id="2-0-0-12-05-18">2.0.0 - 12/05/18</h2>
 <p>The 2.0 release is primarily focused on
 support for <strong>CSS Custom Properties</strong> (aka CSS Variables),

docs/color-api.html

@@ -1279,7 +1279,8 @@ <h2 class="item-title">
 <li>Adjustments are a nested map of color functions and arguments,
 for adjusting colors directly in your<span class="widont">&nbsp;</span>palette.</li>
 </ul>
-<p>The color-names <code>_contrast-light</code> and <code>_contrast-dark</code> are special.
+<p>The color-names <code>contrast-light</code> and <code>contrast-dark</code> are special
+(with or without a private <code>_</code> prefix).
 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>
@@ -1537,6 +1538,40 @@ <h4 class="param-title">
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <div class="param-list">
+    <h4 class="param-title">
+      <span class="item-type">@function</span>
+
+        <span class="item-name">_a_default-contrast()</span>
+
+
+
+      <span class="item-note">[private]</span>
+    </h4>
+
+
+  </div>
+
+
+
+
+
+
+
+
 
   </div>
 

docs/color-contrast.html

@@ -541,7 +541,8 @@ <h2 class="item-title">
       <p>For any color, select the best contrast among a set of options.
 For best results, pass in a combination of light and dark colors
 to contrast against – 
-or define default <code>_contrast-light</code> and <code>_contrast-dark</code> values
+or define default <code>contrast-light</code> and <code>contrast-dark</code> values
+(with or without a private <code>_</code> prefix)
 in your global <code>$colors</code> map.</p>
 
 
@@ -627,7 +628,8 @@ <h4 class="param-title">
       <div class="param-details text-block">
         <p>Two or more colors to contrast against.
 This function will choose the best contrast of all the options provided,
-or the <code>_contrast-light</code> and <code>_contrast-dark</code> defaults
+or the <code>contrast-light</code> and <code>contrast-dark</code> defaults
+(with or without a private <code>_</code> prefix)
 if they are defined in your color palette,
 otherwise <code>white</code> and <code>black</code> are the default<span class="widont">&nbsp;</span>options.</p>
 
@@ -1130,7 +1132,8 @@ <h4 class="param-title">
       <div class="param-details text-block">
         <p>A list of colors to contrast against,
 defaulting to <code>white</code> and <code>black</code>
-or your <code>_contrast-light</code> and <code>_contrast-dark</code> settings
+or your <code>contrast-light</code> and <code>contrast-dark</code> settings
+(with or without a private <code>_</code> prefix)
 if they are provided in the global <code>$colors</code> map.</p>
 
       </div>

docs/color-utils.html

@@ -538,20 +538,20 @@ <h2 class="item-title">
 
 
     <div class="text-block">
-      <p>Mix a color with <code>_contrast-light</code>
+      <p>Mix a color with <code>contrast-light</code>
 (defaults to <code>white</code>)
 to get a lighter tint of your color.
 Make sure to override <code>$light</code> when using <code>tint</code>
-to define the value of <code>_contrast-light</code></p>
+to define the value of <code>contrast-light</code></p>
 
 
 
 
       <section class="summary-subsection">
         <h3 class="summary-subtitle">Since <code>2.0.0</code>:</h3>
         <div class="subsection-details"><ul>
-<li>BREAKING: Use <code>_contrast-light</code> for default mix, rather than <code>white</code>.</li>
-<li>NEW: Accept <code>$light</code> color to use in place of <code>_contrast-light</code> default</li>
+<li>BREAKING: Use <code>contrast-light</code> for default mix, rather than <code>white</code>.</li>
+<li>NEW: Accept <code>$light</code> color to use in place of <code>contrast-light</code> default</li>
 </ul>
 </div>
       </section>
@@ -657,7 +657,7 @@ <h4 class="param-title">
 
         <span class="item-name">$light:</span>
 
-      <span class="item-value">&#39;_contrast-light&#39;</span>
+      <span class="item-value">null</span>
       <span class="value-type">(Color |<span class="widont">&nbsp;</span>String)</span>
 
     </h4>
@@ -750,6 +750,40 @@ <h3 class="item-subtitle">
 
 
 
+
+
+  <div class="param-list">
+    <h4 class="param-title">
+      <span class="item-type">@function</span>
+
+        <span class="item-name">_a_default-contrast()</span>
+
+
+
+      <span class="item-note">[private]</span>
+    </h4>
+
+
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
   <div class="param-list">
@@ -849,20 +883,20 @@ <h2 class="item-title">
 
 
     <div class="text-block">
-      <p>Mix a color with <code>_contrast-dark</code>
+      <p>Mix a color with <code>contrast-dark</code>
 (defaults to <code>black</code>)
 to get a darker shade of your color.
 Make sure to override <code>$dark</code> when using <code>shade</code>
-to define the value of <code>_contrast-dark</code></p>
+to define the value of <code>contrast-dark</code></p>
 
 
 
 
       <section class="summary-subsection">
         <h3 class="summary-subtitle">Since <code>2.0.0</code>:</h3>
         <div class="subsection-details"><ul>
-<li>BREAKING: Use <code>_contrast-dark</code> for mix, rather than <code>black</code></li>
-<li>NEW: Accept <code>$dark</code> color to use in place of <code>_contrast-dark</code> default</li>
+<li>BREAKING: Use <code>contrast-dark</code> for mix, rather than <code>black</code></li>
+<li>NEW: Accept <code>$dark</code> color to use in place of <code>contrast-dark</code> default</li>
 </ul>
 </div>
       </section>
@@ -968,7 +1002,7 @@ <h4 class="param-title">
 
         <span class="item-name">$dark:</span>
 
-      <span class="item-value">&#39;_contrast-dark&#39;</span>
+      <span class="item-value">null</span>
       <span class="value-type">(Color |<span class="widont">&nbsp;</span>String)</span>
 
     </h4>
@@ -1061,6 +1095,40 @@ <h3 class="item-subtitle">
 
 
 
+
+
+  <div class="param-list">
+    <h4 class="param-title">
+      <span class="item-type">@function</span>
+
+        <span class="item-name">_a_default-contrast()</span>
+
+
+
+      <span class="item-note">[private]</span>
+    </h4>
+
+
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
   <div class="param-list">

docs/color-vars-contrast.html

@@ -546,6 +546,16 @@ <h2 class="item-title">
 
 
 
+
+      <section class="summary-subsection">
+        <h3 class="summary-subtitle">Since <code>2.1.0</code>:</h3>
+        <div class="subsection-details"><ul>
+<li>NEW: Provides access to contrast colors as CSS-variables, when<span class="widont">&nbsp;</span>defined</li>
+</ul>
+</div>
+      </section>
+
+
 
 
 
@@ -627,7 +637,7 @@ <h4 class="param-title">
       <div class="param-details text-block">
         <p>Two or more colors to contrast against.
 This function will choose the best contrast of all the options provided,
-or the <code>_contrast-light</code> and <code>_contrast-dark</code> defaults
+or the <code>contrast-light</code> and <code>contrast-dark</code> defaults
 if they are defined in your color palette,
 otherwise <code>white</code> and <code>black</code> are the default<span class="widont">&nbsp;</span>options.</p>
 
@@ -752,7 +762,7 @@ <h3 class="item-subtitle">
 
       <pre class="hljs-pre"><code class="lang-scss">$colors: (&#39;my-color&#39;: lightpink);
 html {
-  background: var-contrast(#333, &#39;my-color&#39;, &#39;_contrast-dark&#39;);
+  background: var-contrast(#333, &#39;my-color&#39;);
 }</code></pre>
     </div>
 
@@ -1150,6 +1160,16 @@ <h2 class="item-title">
 
 
 
+
+      <section class="summary-subsection">
+        <h3 class="summary-subtitle">Since <code>2.1.0</code>:</h3>
+        <div class="subsection-details"><ul>
+<li>NEW: Applies contrasting colors as CSS-variables, when<span class="widont">&nbsp;</span>defined</li>
+</ul>
+</div>
+      </section>
+
+
 
 
 
@@ -1231,7 +1251,7 @@ <h4 class="param-title">
       <div class="param-details text-block">
         <p>A list of colors to contrast against,
 defaulting to <code>white</code> and <code>black</code>
-or your <code>_contrast-light</code> and <code>_contrast-dark</code> settings
+or your <code>contrast-light</code> and <code>contrast-dark</code> settings
 if they are provided in the global <code>$colors</code> map.</p>
 
       </div>

docs/color.html

@@ -909,8 +909,8 @@ <h2 id="wcag-contrast">WCAG Contrast</h2>
 <p>We’ll also help you calculate WCAG-appropriate color contrasts.
 We default to <code>white</code> and <code>black</code> options,
 but you can also set
-<code>'_contrast-light'</code> and <code>'_contrast-dark'</code>
-keys in your palette,
+<code>'contrast-light'</code> and <code>'contrast-dark'</code>
+keys in your palette (with or without a private <code>_</code> prefix),
 or pass in<span class="widont">&nbsp;</span>options.</p>
 <pre><code class="lang-scss">a:hover {
   // set a background, and get well-contrasted text

sass/plugin/_color.scss

@@ -102,8 +102,8 @@
 /// We'll also help you calculate WCAG-appropriate color contrasts.
 /// We default to `white` and `black` options,
 /// but you can also set
-/// `'_contrast-light'` and `'_contrast-dark'`
-/// keys in your palette,
+/// `'contrast-light'` and `'contrast-dark'`
+/// keys in your palette (with or without a private `_` prefix),
 /// or pass in options.
 ///
 /// ```scss

sass/plugin/color/_config.scss

@@ -27,7 +27,8 @@
 /// - Adjustments are a nested map of color functions and arguments,
 ///   for adjusting colors directly in your palette.
 ///
-/// The color-names `_contrast-light` and `_contrast-dark` are special.
+/// The color-names `contrast-light` and `contrast-dark` are special
+/// (with or without a private `_` prefix).
 /// Use those names to define the default light-and-dark options
 /// for our color-contrast tools.
 /// They default to `white` and `black` respectively.