Add CSS variables for color-theme options

docs/api_json-export.html

@@ -1093,7 +1093,7 @@ <h3 class="item-subtitle">
 
 
 
-      <pre class="hljs-pre"><code class="lang-css">/*! json-encode: {&quot;colors&quot;: {&quot;brand-colors&quot;: {&quot;brand-orange&quot;: &quot;#c75000&quot;, &quot;brand-blue&quot;: &quot;#0d7fa5&quot;, &quot;brand-pink&quot;: &quot;#aa0e5c&quot;}, &quot;neutral-colors&quot;: {&quot;light-gray&quot;: &quot;#dedede&quot;, &quot;gray&quot;: &quot;#555b5e&quot;, &quot;black&quot;: &quot;#3b4042&quot;}, &quot;theme-colors&quot;: {&quot;theme-dark&quot;: &quot;#0d7fa5&quot;, &quot;theme-light&quot;: &quot;#cfe5ed&quot;, &quot;background&quot;: &quot;#fff&quot;, &quot;text&quot;: &quot;#3b4042&quot;, &quot;text-light&quot;: &quot;#555b5e&quot;, &quot;action&quot;: &quot;#aa0e5c&quot;, &quot;focus&quot;: &quot;#0d7fa5&quot;, &quot;underline&quot;: &quot;#eac3d6&quot;, &quot;border&quot;: &quot;#555b5e&quot;, &quot;border-light&quot;: &quot;#dedede&quot;, &quot;shadow&quot;: &quot;rgba(85, 91, 94, 0.5)&quot;, &quot;callout&quot;: &quot;#cfe5ed&quot;, &quot;slight&quot;: &quot;#fafcfd&quot;, &quot;code&quot;: &quot;#0d7fa5&quot;, &quot;code-shadow&quot;: &quot;rgba(13, 127, 165, 0.2)&quot;}, &quot;system-colors&quot;: {&quot;contrast-light&quot;: &quot;#fff&quot;, &quot;contrast-dark&quot;: &quot;#3b4042&quot;}}, &quot;ratios&quot;: {&quot;text-ratios&quot;: {&quot;line-height&quot;: 1.4}}, &quot;sizes&quot;: {&quot;root-sizes&quot;: {&quot;root&quot;: &quot;18px&quot;, &quot;responsive&quot;: &quot;calc(1em + 0.125vw)&quot;, &quot;large&quot;: &quot;calc(1rem + 0.5vw)&quot;, &quot;small&quot;: &quot;0.9rem&quot;}, &quot;text-sizes&quot;: {&quot;reset&quot;: &quot;1rem&quot;, &quot;h1&quot;: &quot;calc(1rem + 2vw)&quot;, &quot;h2&quot;: &quot;calc(1rem + 1vw)&quot;, &quot;h3&quot;: &quot;calc(1rem + 0.5vw)&quot;, &quot;quote&quot;: &quot;calc(1rem + 0.5vw)&quot;, &quot;code&quot;: &quot;0.9rem&quot;, &quot;footer&quot;: &quot;0.9rem&quot;, &quot;search&quot;: &quot;0.9rem&quot;}, &quot;spacing-sizes&quot;: {&quot;rhythm&quot;: &quot;1.4rem&quot;, &quot;gutter&quot;: &quot;1.4rem&quot;, &quot;gutter-plus&quot;: &quot;2.1rem&quot;, &quot;double-gutter&quot;: &quot;2.8rem&quot;, &quot;flex-gutter&quot;: &quot;calc(0.7rem + 2.5vw)&quot;, &quot;spacer&quot;: &quot;calc(4.2rem + 2.5vw)&quot;, &quot;gutter-minus&quot;: &quot;1.05rem&quot;, &quot;shim&quot;: &quot;0.7rem&quot;, &quot;half-shim&quot;: &quot;0.35rem&quot;, &quot;quarter-shim&quot;: &quot;0.175rem&quot;}, &quot;pattern-sizes&quot;: {&quot;nav-underline&quot;: &quot;4px&quot;, &quot;nav-icon&quot;: &quot;28px&quot;, &quot;arrow-border&quot;: &quot;8px&quot;, &quot;arrow-depth&quot;: &quot;0.7rem&quot;, &quot;arrow-side&quot;: &quot;1.4rem&quot;, &quot;font-preview&quot;: &quot;24em&quot;, &quot;specimen-aa&quot;: &quot;4.2rem&quot;, &quot;color-preview&quot;: &quot;16em&quot;, &quot;color-swatch&quot;: &quot;5.6rem&quot;, &quot;footer-logo&quot;: &quot;2.8rem&quot;}, &quot;layout-sizes&quot;: {&quot;page&quot;: &quot;50rem&quot;, &quot;item-break&quot;: &quot;40em&quot;, &quot;page-break&quot;: &quot;50em&quot;, &quot;nav-break&quot;: &quot;65em&quot;}}, &quot;fonts&quot;: {&quot;sans&quot;: {&quot;name&quot;: &quot;Source Sans Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Sans+Pro&quot;, &quot;stack&quot;: [&quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, &quot;sans-serif&quot;]}, &quot;code&quot;: {&quot;name&quot;: &quot;Source Code Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Code+Pro&quot;, &quot;stack&quot;: [&quot;Consolas&quot;, &quot;Menlo&quot;, &quot;Monaco&quot;, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, &quot;monospace&quot;, &quot;sans-serif&quot;]}}} */
+      <pre class="hljs-pre"><code class="lang-css">/*! json-encode: {&quot;colors&quot;: {&quot;brand-colors&quot;: {&quot;brand-orange&quot;: &quot;#c75000&quot;, &quot;brand-blue&quot;: &quot;#0d7fa5&quot;, &quot;brand-pink&quot;: &quot;#aa0e5c&quot;}, &quot;neutral-colors&quot;: {&quot;light-gray&quot;: &quot;#dedede&quot;, &quot;gray&quot;: &quot;#555b5e&quot;, &quot;black&quot;: &quot;#3b4042&quot;}, &quot;theme-colors&quot;: {&quot;theme-dark&quot;: &quot;#0d7fa5&quot;, &quot;theme-light&quot;: &quot;#cfe5ed&quot;, &quot;contrast-light&quot;: &quot;#fff&quot;, &quot;contrast-low&quot;: &quot;#555b5e&quot;, &quot;contrast-dark&quot;: &quot;#3b4042&quot;, &quot;accent-dark&quot;: &quot;#aa0e5c&quot;, &quot;accent-light&quot;: &quot;#eac3d6&quot;}, &quot;dynamic-colors&quot;: {&quot;background&quot;: &quot;#fff&quot;, &quot;text&quot;: &quot;#3b4042&quot;, &quot;text-light&quot;: &quot;#555b5e&quot;, &quot;sidebar-background&quot;: &quot;#0d7fa5&quot;, &quot;sidebar-text&quot;: &quot;#fff&quot;, &quot;action&quot;: &quot;#aa0e5c&quot;, &quot;focus&quot;: &quot;#0d7fa5&quot;, &quot;underline&quot;: &quot;#eac3d6&quot;, &quot;border&quot;: &quot;#cfe5ed&quot;, &quot;callout&quot;: &quot;#cfe5ed&quot;, &quot;callout-text&quot;: &quot;#3b4042&quot;}, &quot;static-colors&quot;: {&quot;code&quot;: &quot;#0d7fa5&quot;, &quot;code-background&quot;: &quot;#fafcfd&quot;, &quot;shadow&quot;: &quot;rgba(59, 64, 66, 0.25)&quot;}}, &quot;ratios&quot;: {&quot;text-ratios&quot;: {&quot;line-height&quot;: 1.35}}, &quot;sizes&quot;: {&quot;root-sizes&quot;: {&quot;root&quot;: &quot;18px&quot;, &quot;responsive&quot;: &quot;calc(1em + 0.125vw)&quot;, &quot;large&quot;: &quot;calc(1rem + 0.5vw)&quot;, &quot;small&quot;: &quot;0.9rem&quot;}, &quot;text-sizes&quot;: {&quot;reset&quot;: &quot;1rem&quot;, &quot;h1&quot;: &quot;calc(1rem + 2vw)&quot;, &quot;h2&quot;: &quot;calc(1rem + 1vw)&quot;, &quot;h3&quot;: &quot;calc(1rem + 0.5vw)&quot;, &quot;quote&quot;: &quot;calc(1rem + 0.5vw)&quot;, &quot;code&quot;: &quot;0.9rem&quot;, &quot;footer&quot;: &quot;0.9rem&quot;, &quot;search&quot;: &quot;0.9rem&quot;}, &quot;spacing-sizes&quot;: {&quot;rhythm&quot;: &quot;1.35rem&quot;, &quot;gutter&quot;: &quot;1.35rem&quot;, &quot;gutter-plus&quot;: &quot;2.025rem&quot;, &quot;double-gutter&quot;: &quot;2.7rem&quot;, &quot;flex-gutter&quot;: &quot;calc(0.675rem + 2.5vw)&quot;, &quot;spacer&quot;: &quot;calc(4.05rem + 2.5vw)&quot;, &quot;gutter-minus&quot;: &quot;1.0125rem&quot;, &quot;shim&quot;: &quot;0.675rem&quot;, &quot;half-shim&quot;: &quot;0.3375rem&quot;, &quot;quarter-shim&quot;: &quot;0.16875rem&quot;}, &quot;pattern-sizes&quot;: {&quot;nav-underline&quot;: &quot;4px&quot;, &quot;nav-icon&quot;: &quot;28px&quot;, &quot;arrow-border&quot;: &quot;8px&quot;, &quot;arrow-depth&quot;: &quot;0.675rem&quot;, &quot;arrow-side&quot;: &quot;1.35rem&quot;, &quot;font-preview&quot;: &quot;24em&quot;, &quot;specimen-aa&quot;: &quot;4.05rem&quot;, &quot;color-preview&quot;: &quot;16em&quot;, &quot;color-swatch&quot;: &quot;5.4rem&quot;, &quot;footer-logo&quot;: &quot;2.7rem&quot;}, &quot;layout-sizes&quot;: {&quot;page&quot;: &quot;50rem&quot;, &quot;item-break&quot;: &quot;40em&quot;, &quot;page-break&quot;: &quot;50em&quot;, &quot;nav-break&quot;: &quot;65em&quot;}}, &quot;fonts&quot;: {&quot;sans&quot;: {&quot;name&quot;: &quot;Source Sans Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Sans+Pro&quot;, &quot;stack&quot;: [&quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, &quot;sans-serif&quot;]}, &quot;code&quot;: {&quot;name&quot;: &quot;Source Code Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Code+Pro&quot;, &quot;stack&quot;: [&quot;Consolas&quot;, &quot;Menlo&quot;, &quot;Monaco&quot;, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, &quot;monospace&quot;, &quot;sans-serif&quot;]}}} */
 </code></pre>
     </div>
 
@@ -1500,7 +1500,7 @@ <h3 class="item-subtitle">
 
 
 
-      <pre class="hljs-pre"><code class="lang-css">/* (&quot;colors&quot;: (&quot;brand-colors&quot;: (&quot;brand-blue&quot;: #0d7fa5, &quot;light-gray&quot;: #dedede), &quot;neutral-colors&quot;: (&quot;light-gray&quot;: #dedede, &quot;gray&quot;: #555b5e, &quot;black&quot;: #3b4042), &quot;theme-colors&quot;: (&quot;theme-dark&quot;: #0d7fa5, &quot;theme-light&quot;: #cfe5ed, &quot;background&quot;: #fff, &quot;text&quot;: #3b4042, &quot;text-light&quot;: #555b5e, &quot;action&quot;: #aa0e5c, &quot;focus&quot;: #0d7fa5, &quot;underline&quot;: #eac3d6, &quot;border&quot;: #555b5e, &quot;border-light&quot;: #dedede, &quot;shadow&quot;: rgba(85, 91, 94, 0.5), &quot;callout&quot;: #cfe5ed, &quot;slight&quot;: #fafcfd, &quot;code&quot;: #0d7fa5, &quot;code-shadow&quot;: rgba(13, 127, 165, 0.2)), &quot;system-colors&quot;: (&quot;contrast-light&quot;: #fff, &quot;contrast-dark&quot;: #3b4042)), &quot;ratios&quot;: (&quot;text-ratios&quot;: (&quot;line-height&quot;: 1.4)), &quot;sizes&quot;: (&quot;root-sizes&quot;: (&quot;root&quot;: 18px, &quot;responsive&quot;: calc(1em + 0.125vw), &quot;large&quot;: calc(1rem + 0.5vw), &quot;small&quot;: 0.9rem), &quot;text-sizes&quot;: (&quot;reset&quot;: 1rem, &quot;h1&quot;: calc(1rem + 2vw), &quot;h2&quot;: calc(1rem + 1vw), &quot;h3&quot;: calc(1rem + 0.5vw), &quot;quote&quot;: calc(1rem + 0.5vw), &quot;code&quot;: 0.9rem, &quot;footer&quot;: 0.9rem, &quot;search&quot;: 0.9rem), &quot;spacing-sizes&quot;: (&quot;rhythm&quot;: 1.4rem, &quot;gutter&quot;: 1.4rem, &quot;gutter-plus&quot;: 2.1rem, &quot;double-gutter&quot;: 2.8rem, &quot;flex-gutter&quot;: calc(0.7rem + 2.5vw), &quot;spacer&quot;: calc(4.2rem + 2.5vw), &quot;gutter-minus&quot;: 1.05rem, &quot;shim&quot;: 0.7rem, &quot;half-shim&quot;: 0.35rem, &quot;quarter-shim&quot;: 0.175rem), &quot;pattern-sizes&quot;: (&quot;nav-underline&quot;: 4px, &quot;nav-icon&quot;: 28px, &quot;arrow-border&quot;: 8px, &quot;arrow-depth&quot;: 0.7rem, &quot;arrow-side&quot;: 1.4rem, &quot;font-preview&quot;: 24em, &quot;specimen-aa&quot;: 4.2rem, &quot;color-preview&quot;: 16em, &quot;color-swatch&quot;: 5.6rem, &quot;footer-logo&quot;: 2.8rem), &quot;layout-sizes&quot;: (&quot;page&quot;: 50rem, &quot;item-break&quot;: 40em, &quot;page-break&quot;: 50em, &quot;nav-break&quot;: 65em)), &quot;fonts&quot;: (&quot;sans&quot;: (&quot;name&quot;: &quot;Source Sans Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Sans+Pro&quot;, &quot;stack&quot;: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, sans-serif), &quot;code&quot;: (&quot;name&quot;: &quot;Source Code Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Code+Pro&quot;, &quot;stack&quot;: &quot;Consolas&quot;, &quot;Menlo&quot;, &quot;Monaco&quot;, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace, sans-serif))) */
+      <pre class="hljs-pre"><code class="lang-css">/* (&quot;colors&quot;: (&quot;brand-colors&quot;: (&quot;brand-blue&quot;: #0d7fa5, &quot;light-gray&quot;: #dedede), &quot;neutral-colors&quot;: (&quot;light-gray&quot;: #dedede, &quot;gray&quot;: #555b5e, &quot;black&quot;: #3b4042), &quot;theme-colors&quot;: (&quot;theme-dark&quot;: #0d7fa5, &quot;theme-light&quot;: #cfe5ed, &quot;contrast-light&quot;: #fff, &quot;contrast-low&quot;: #555b5e, &quot;contrast-dark&quot;: #3b4042, &quot;accent-dark&quot;: #aa0e5c, &quot;accent-light&quot;: #eac3d6), &quot;dynamic-colors&quot;: (&quot;background&quot;: #fff, &quot;text&quot;: #3b4042, &quot;text-light&quot;: #555b5e, &quot;sidebar-background&quot;: #0d7fa5, &quot;sidebar-text&quot;: #fff, &quot;action&quot;: #aa0e5c, &quot;focus&quot;: #0d7fa5, &quot;underline&quot;: #eac3d6, &quot;border&quot;: #cfe5ed, &quot;callout&quot;: #cfe5ed, &quot;callout-text&quot;: #3b4042), &quot;static-colors&quot;: (&quot;code&quot;: #0d7fa5, &quot;code-background&quot;: #fafcfd, &quot;shadow&quot;: rgba(59, 64, 66, 0.25))), &quot;ratios&quot;: (&quot;text-ratios&quot;: (&quot;line-height&quot;: 1.35)), &quot;sizes&quot;: (&quot;root-sizes&quot;: (&quot;root&quot;: 18px, &quot;responsive&quot;: calc(1em + 0.125vw), &quot;large&quot;: calc(1rem + 0.5vw), &quot;small&quot;: 0.9rem), &quot;text-sizes&quot;: (&quot;reset&quot;: 1rem, &quot;h1&quot;: calc(1rem + 2vw), &quot;h2&quot;: calc(1rem + 1vw), &quot;h3&quot;: calc(1rem + 0.5vw), &quot;quote&quot;: calc(1rem + 0.5vw), &quot;code&quot;: 0.9rem, &quot;footer&quot;: 0.9rem, &quot;search&quot;: 0.9rem), &quot;spacing-sizes&quot;: (&quot;rhythm&quot;: 1.35rem, &quot;gutter&quot;: 1.35rem, &quot;gutter-plus&quot;: 2.025rem, &quot;double-gutter&quot;: 2.7rem, &quot;flex-gutter&quot;: calc(0.675rem + 2.5vw), &quot;spacer&quot;: calc(4.05rem + 2.5vw), &quot;gutter-minus&quot;: 1.0125rem, &quot;shim&quot;: 0.675rem, &quot;half-shim&quot;: 0.3375rem, &quot;quarter-shim&quot;: 0.16875rem), &quot;pattern-sizes&quot;: (&quot;nav-underline&quot;: 4px, &quot;nav-icon&quot;: 28px, &quot;arrow-border&quot;: 8px, &quot;arrow-depth&quot;: 0.675rem, &quot;arrow-side&quot;: 1.35rem, &quot;font-preview&quot;: 24em, &quot;specimen-aa&quot;: 4.05rem, &quot;color-preview&quot;: 16em, &quot;color-swatch&quot;: 5.4rem, &quot;footer-logo&quot;: 2.7rem), &quot;layout-sizes&quot;: (&quot;page&quot;: 50rem, &quot;item-break&quot;: 40em, &quot;page-break&quot;: 50em, &quot;nav-break&quot;: 65em)), &quot;fonts&quot;: (&quot;sans&quot;: (&quot;name&quot;: &quot;Source Sans Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Sans+Pro&quot;, &quot;stack&quot;: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, sans-serif), &quot;code&quot;: (&quot;name&quot;: &quot;Source Code Pro&quot;, &quot;source&quot;: &quot;https://fonts.google.com/specimen/Source+Code+Pro&quot;, &quot;stack&quot;: &quot;Consolas&quot;, &quot;Menlo&quot;, &quot;Monaco&quot;, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace, sans-serif))) */
 </code></pre>
     </div>
 

docs/component-breadcrumb.html

@@ -433,6 +433,9 @@ <h2 class="item-title">
 
       <pre class="hljs-pre"><code class="lang-scss">.breadcrumb {
   background: color(&#39;callout&#39;);
+  background: var(--color-callout, color(&#39;callout&#39;)); //sass-lint:disable-line no-duplicate-properties
+  color: color(&#39;callout-text&#39;);
+  color: var(--color-callout-text, color(&#39;callout-text&#39;)); //sass-lint:disable-line no-duplicate-properties
   padding: size(&#39;shim&#39;) size(&#39;flex-gutter&#39;);
 
   a,

docs/component-footer.html

@@ -606,7 +606,7 @@ <h2 class="item-title">
 
       <pre class="hljs-pre"><code class="lang-scss">.footer-credit {
   @include clearfix;
-  border-top: 1px solid color(&#39;theme-light&#39;);
+  border-top: 1px solid currentColor;
   flex: 0 0 auto;
   font-size: size(&#39;footer&#39;);
   line-height: size(&#39;rhythm&#39;);

docs/component-nav.html

@@ -968,7 +968,7 @@ <h2 class="item-title">
 
       <pre class="hljs-pre"><code class="lang-scss">[data-nav] {
   #{$link} {
-    color: color(&#39;background&#39;);
+    color: inherit;
     line-height: 1.1;
     padding-bottom: size(&#39;quarter-shim&#39;);
     position: relative;
@@ -978,7 +978,7 @@ <h2 class="item-title">
     // Animated underlines
     @include before(&#39;&#39;) {
       @include position(null null 0 0);
-      background: color(&#39;theme-light&#39;);
+      background: currentColor;
       height: size(&#39;nav-underline&#39;);
       transform: scale3d(0, 1, 1);
       transform-origin: center left;