From c425c2093c1b4f947f73436595f4238f83e0cdef Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Sun, 11 Mar 2018 17:41:48 -0600 Subject: [PATCH] Add CSS variables for color-theme options --- docs/api_json-export.html | 4 +- docs/component-breadcrumb.html | 3 + docs/component-footer.html | 2 +- docs/component-nav.html | 4 +- docs/config-colors.html | 400 +++++++++++++++++++++++++----- docs/config-scale.html | 84 +++---- docs/config-utils.html | 7 + docs/style-banner.html | 95 +------ docs/style-code.html | 10 +- docs/style-typography.html | 23 +- scss/component/_breadcrumb.scss | 3 + scss/component/_footer.scss | 2 +- scss/component/_item.scss | 7 +- scss/component/_nav.scss | 4 +- scss/component/_project-meta.scss | 6 +- scss/component/_search.scss | 1 + scss/config/_abstracts.scss | 22 ++ scss/config/_banner.scss | 20 +- scss/config/_colors.scss | 58 +++-- scss/config/_scale.scss | 2 +- scss/config/_type.scss | 10 +- scss/initial/_root.scss | 17 +- scss/layout/_banner.scss | 3 + scss/patterns/_forms.scss | 3 +- scss/patterns/_type.scss | 6 +- scss/previews/_code.scss | 10 +- scss/previews/_color.scss | 7 +- scss/previews/_examples.scss | 3 +- scss/previews/_size.scss | 69 ++++-- 29 files changed, 604 insertions(+), 281 deletions(-) diff --git a/docs/api_json-export.html b/docs/api_json-export.html index 0e64ab5f..99dc7c07 100644 --- a/docs/api_json-export.html +++ b/docs/api_json-export.html @@ -1093,7 +1093,7 @@

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

     
   
@@ -1500,7 +1500,7 @@ 

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

     
   
diff --git a/docs/component-breadcrumb.html b/docs/component-breadcrumb.html
index bda208b7..15cceff3 100644
--- a/docs/component-breadcrumb.html
+++ b/docs/component-breadcrumb.html
@@ -433,6 +433,9 @@ 

       
       
.breadcrumb {
   background: color('callout');
+  background: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-callout-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
   padding: size('shim') size('flex-gutter');
 
   a,
diff --git a/docs/component-footer.html b/docs/component-footer.html
index 71e04141..2a408776 100644
--- a/docs/component-footer.html
+++ b/docs/component-footer.html
@@ -606,7 +606,7 @@ 

       
       
.footer-credit {
   @include clearfix;
-  border-top: 1px solid color('theme-light');
+  border-top: 1px solid currentColor;
   flex: 0 0 auto;
   font-size: size('footer');
   line-height: size('rhythm');
diff --git a/docs/component-nav.html b/docs/component-nav.html
index 3228d50a..90a860e0 100644
--- a/docs/component-nav.html
+++ b/docs/component-nav.html
@@ -968,7 +968,7 @@ 

       
       
[data-nav] {
   #{$link} {
-    color: color('background');
+    color: inherit;
     line-height: 1.1;
     padding-bottom: size('quarter-shim');
     position: relative;
@@ -978,7 +978,7 @@ 

     // Animated underlines
     @include before('') {
       @include position(null null 0 0);
-      background: color('theme-light');
+      background: currentColor;
       height: size('nav-underline');
       transform: scale3d(0, 1, 1);
       transform-origin: center left;
diff --git a/docs/config-colors.html b/docs/config-colors.html
index 506251dc..05911522 100644
--- a/docs/config-colors.html
+++ b/docs/config-colors.html
@@ -1015,24 +1015,11 @@ 

       
$theme-colors: (
   'theme-dark': 'brand-blue',
   'theme-light': 'brand-blue' ('tint': 80%),
-
-  'background': #fff,
-  'text': 'black',
-  'text-light': 'gray',
-
-  'action': 'brand-pink',
-  'focus': 'theme-dark',
-  'underline': 'action' ('tint': 75%),
-
-  'border': 'gray',
-  'border-light': 'light-gray',
-  'shadow': 'gray' ('rgba': 0.5),
-
-  'callout': 'theme-light',
-  'slight': 'callout' ('tint': 90%),
-
-  'code': 'theme-dark',
-  'code-shadow': 'code' (rgba: 0.2),
+  'contrast-light': #fff,
+  'contrast-low': 'gray',
+  'contrast-dark': 'black',
+  'accent-dark': 'brand-pink',
+  'accent-light': 'accent-dark' ('tint': 75%),
 );

     
   
@@ -1122,11 +1109,7 @@ 

           

             
               
-                theme-dark, 
-              
-                focus, 
-              
-                code
+                theme-dark
               
             
             
@@ -1154,9 +1137,7 @@ 

           

             
               
-                theme-light, 
-              
-                callout
+                theme-light
               
             
             
@@ -1184,7 +1165,7 @@ 

           

             
               
-                background
+                contrast-light
               
             
             
@@ -1207,25 +1188,25 @@ 

         

           

             

-            

+            

           

           

             
               
-                text
+                contrast-low
               
             
             
             
               
                 
-                  #3b4042
+                  #555b5e
                 
               
                 
               
                 
-                  hsl(197, 6%, 25%)
+                  hsl(200, 5%, 35%)
                 
               
             
@@ -1235,27 +1216,25 @@ 

         

           

             

-            

+            

           

           

             
               
-                text-light, 
-              
-                border
+                contrast-dark
               
             
             
             
               
                 
-                  #555b5e
+                  #3b4042
                 
               
                 
               
                 
-                  hsl(200, 5%, 35%)
+                  hsl(197, 6%, 25%)
                 
               
             
@@ -1270,7 +1249,7 @@ 

           

             
               
-                action
+                accent-dark
               
             
             
@@ -1298,7 +1277,7 @@ 

           

             
               
-                underline
+                accent-light
               
             
             
@@ -1315,31 +1294,226 @@ 

                 
               
             
+          

+        

+      
+    

+  
+  

+
+
+      
+
+
+
+  
+    
+    
+
+
+
+
+
+
+
+
+
+
+

+  
+    
+  
+  
+
+  
+  
+  
+  
+
+  

+    

+      
+        
+      
+
+      
+        $dynamic-colors
+      
+
+      
+
+      
+    

+
+    
+  
+
+
+    
+    
+    
+  
+
+  
+    

+      
+        

+          
+            scss
+          
+
+          
+        

+      
+
+      
+      
+      
$dynamic-colors: (
+  'background': 'contrast-light',
+  'text': 'contrast-dark',
+  'text-light': 'contrast-low',
+
+  'sidebar-background': 'theme-dark',
+  'sidebar-text': 'contrast-light',
+
+  'action': 'accent-dark',
+  'focus': 'theme-dark',
+  'underline': 'accent-light',
+
+  'border': 'callout',
+  'callout': 'theme-light',
+  'callout-text': 'text',
+);

+    

+  
+
+    
+  
+  
+  
+  
+
+  
+    

+      
These theme-colors are based on the primary theme colors,
+and change based on project-specific theme-color settings.

+
+      
+  
+
+      
+  
+
+      
+  
+
+    

+  
+
+  

+
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+
+
+  
+  
+
+
+  
+  
+  
+  
+    
+    
+  
+
+  
+
+  
+  
+
+
+  
+  
+
+  
+  
+        
+  
+  

+    
+      

+        Color Previews
+        
+      

+    
+
+    
+    

+      
+        

+          

+            

+            

+          

+          

+            
+              
+                background, 
+              
+                sidebar-text
+              
+            
+            
+            
+              
+                
+                  #ffffff
+                
+              
+                
+              
+                
+                  hsl(0, 0%, 100%)
+                
+              
+            
           

         

       
         

           

             

-            

+            

           

           

             
               
-                border-light
+                text, 
+              
+                callout-text
               
             
             
             
               
                 
-                  #dedede
+                  #3b4042
                 
               
                 
               
                 
-                  hsl(0, 0%, 87%)
+                  hsl(197, 6%, 25%)
                 
               
             
@@ -1349,12 +1523,12 @@ 

         

           

             

-            

+            

           

           

             
               
-                shadow
+                text-light
               
             
             
@@ -1367,7 +1541,7 @@ 

                 
               
                 
-                  hsla(200, 5%, 35%, 0.5)
+                  hsl(200, 5%, 35%)
                 
               
             
@@ -1377,25 +1551,27 @@ 

         

           

             

-            

+            

           

           

             
               
-                slight
+                sidebar-background, 
+              
+                focus
               
             
             
             
               
                 
-                  #fafcfd
+                  #0d7fa5
                 
               
                 
               
                 
-                  hsl(200, 43%, 99%)
+                  hsl(195, 85%, 35%)
                 
               
             
@@ -1405,25 +1581,83 @@ 

         

           

             

-            

+            

           

           

             
               
-                code-shadow
+                action
               
             
             
             
               
                 
-                  #0d7fa5
+                  #aa0e5c
                 
               
                 
               
                 
-                  hsla(195, 85%, 35%, 0.2)
+                  hsl(330, 85%, 36%)
+                
+              
+            
+          

+        

+      
+        

+          

+            

+            

+          

+          

+            
+              
+                underline
+              
+            
+            
+            
+              
+                
+                  #eac3d6
+                
+              
+                
+              
+                
+                  hsl(331, 48%, 84%)
+                
+              
+            
+          

+        

+      
+        

+          

+            

+            

+          

+          

+            
+              
+                border, 
+              
+                callout
+              
+            
+            
+            
+              
+                
+                  #cfe5ed
+                
+              
+                
+              
+                
+                  hsl(196, 45%, 87%)
                 
               
             
@@ -1452,7 +1686,7 @@ 

 
 
 
-

+

   
     
   
@@ -1470,7 +1704,7 @@ 

       
 
       
-        $system-colors
+        $static-colors
       
 
       
@@ -1501,9 +1735,10 @@ 

 
       
       
-      
$system-colors: (
-  'contrast-light': 'background',
-  'contrast-dark': 'text',
+      
$static-colors: (
+  'code': 'theme-dark',
+  'code-background': 'theme-light' ('tint': 90%),
+  'shadow': 'contrast-dark' ('rgba': 0.25),
 );

     

   
@@ -1516,8 +1751,9 @@ 

 
   
     

-      
Colors used by accoutrement-color
-to calculate contrast ratios.

+      
These theme-colors are based on the neutral tones,
+and don’t change in relation to project-specific
+theme-color settings.

 
       
   
@@ -1584,25 +1820,25 @@ 

         

           

             

-            

+            

           

           

             
               
-                contrast-light
+                code
               
             
             
             
               
                 
-                  #ffffff
+                  #0d7fa5
                 
               
                 
               
                 
-                  hsl(0, 0%, 100%)
+                  hsl(195, 85%, 35%)
                 
               
             
@@ -1612,12 +1848,40 @@ 

         

           

             

-            

+            

           

           

             
               
-                contrast-dark
+                code-background
+              
+            
+            
+            
+              
+                
+                  #fafcfd
+                
+              
+                
+              
+                
+                  hsl(200, 43%, 99%)
+                
+              
+            
+          

+        

+      
+        

+          

+            

+            

+          

+          

+            
+              
+                shadow
               
             
             
@@ -1630,7 +1894,7 @@ 

                 
               
                 
-                  hsl(197, 6%, 25%)
+                  hsla(197, 6%, 25%, 0.25)
                 
               
             
diff --git a/docs/config-scale.html b/docs/config-scale.html
index fec762e8..8526710f 100644
--- a/docs/config-scale.html
+++ b/docs/config-scale.html
@@ -469,7 +469,7 @@ 

       
       
       
$text-ratios: (
-  'line-height': 1.4
+  'line-height': 1.35
 );

     

   
@@ -542,7 +542,7 @@ 

       

         Ratio
         
-          line-height (1.4)
+          line-height (1.35)
         
       

     
@@ -574,13 +574,13 @@ 

     
     
       
-        0.36
+        0.41
       
     
     
       
         

-          
+          
              
           
         

@@ -600,13 +600,13 @@ 

     
     
       
-        0.51
+        0.55
       
     
     
       
         

-          
+          
              
           
         

@@ -626,13 +626,13 @@ 

     
     
       
-        0.71
+        0.74
       
     
     
       
         

-          
+          
              
           
         

@@ -678,13 +678,13 @@ 

     
     
       
-        1.4
+        1.35
       
     
     
       
         

-          
+          
              
           
         

@@ -704,13 +704,13 @@ 

     
     
       
-        1.96
+        1.82
       
     
     
       
         

-          
+          
              
           
         

@@ -730,13 +730,13 @@ 

     
     
       
-        2.74
+        2.46
       
     
     
       
         

-          
+          
              
           
         

@@ -1522,13 +1522,13 @@ 

     
     
       
-        1.4rem
+        1.35rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1545,13 +1545,13 @@ 

     
     
       
-        2.1rem
+        2.025rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1568,13 +1568,13 @@ 

     
     
       
-        2.8rem
+        2.7rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1591,13 +1591,13 @@ 

     
     
       
-        calc(0.7rem + 2.5vw)
+        calc(0.675rem + 2.5vw)
       
     
     
       
         

-          
+          
              
           
         

@@ -1614,13 +1614,13 @@ 

     
     
       
-        calc(4.2rem + 2.5vw)
+        calc(4.05rem + 2.5vw)
       
     
     
       
         

-          
+          
              
           
         

@@ -1637,13 +1637,13 @@ 

     
     
       
-        1.05rem
+        1.0125rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1660,13 +1660,13 @@ 

     
     
       
-        0.7rem
+        0.675rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1683,13 +1683,13 @@ 

     
     
       
-        0.35rem
+        0.3375rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1706,13 +1706,13 @@ 

     
     
       
-        0.175rem
+        0.16875rem
       
     
     
       
         

-          
+          
              
           
         

@@ -1977,13 +1977,13 @@ 

     
     
       
-        0.7rem
+        0.675rem
       
     
     
       
         

-          
+          
              
           
         

@@ -2000,13 +2000,13 @@ 

     
     
       
-        1.4rem
+        1.35rem
       
     
     
       
         

-          
+          
              
           
         

@@ -2046,13 +2046,13 @@ 

     
     
       
-        4.2rem
+        4.05rem
       
     
     
       
         

-          
+          
              
           
         

@@ -2092,13 +2092,13 @@ 

     
     
       
-        5.6rem
+        5.4rem
       
     
     
       
         

-          
+          
              
           
         

@@ -2115,13 +2115,13 @@ 

     
     
       
-        2.8rem
+        2.7rem
       
     
     
       
         

-          
+          
              
           
         

diff --git a/docs/config-utils.html b/docs/config-utils.html
index ae26bd8f..3bb26482 100644
--- a/docs/config-utils.html
+++ b/docs/config-utils.html
@@ -1635,12 +1635,19 @@ 

       
       
.invert-colors {
   background-color: #0d7fa5;
+  background-color: var(--color-sidebar-background, #0d7fa5);
   color: #fff;
+  color: var(--color-sidebar-text, #fff);
 }
 
 .invert-colors [href]:link, .invert-colors [href]:visited {
   color: inherit;
 }
+
+.invert-colors input {
+  border-color: currentColor;
+  color: currentColor;
+}
 

     

   
diff --git a/docs/style-banner.html b/docs/style-banner.html
index e5db242f..58091256 100644
--- a/docs/style-banner.html
+++ b/docs/style-banner.html
@@ -448,89 +448,6 @@ 

   
 
   
-    
-  

-    
-      

-        Parameters
-        
-      

-    
-
-    
-      
-        
-  
-  
-
-  
-  

-    

-      
-      
-        $color:
-      
-      'theme-dark'
-      (color | string)
-      
-    

-
-    
-      
-      

-        
The color of the border/arrow line

-
-      

-    
-  

-
-
-      
-        
-  
-  
-
-  
-  

-    

-      
-      
-        $background:
-      
-      'background'
-      (color | string)
-      
-    

-
-    
-      
-      

-        
The background color above the border/arrow,
-used to make it an arrow-outline rather than a solid triangle

-
-      

-    
-  

-
-
-      
-
-      
-  
-
-      
-  
-
-      
-  
-
-      
-  
-
-    
-  

-
-  
 
 
   
@@ -605,7 +522,8 @@ 

       
       
[data-region='banner'] {
   border-bottom: 8px solid #0d7fa5;
-  box-shadow: 0 2px 2px rgba(85, 91, 94, 0.5);
+  border-bottom-color: var(--color-theme-dark, #0d7fa5);
+  box-shadow: 0 2px 2px rgba(59, 64, 66, 0.25);
   display: block;
   position: relative;
   width: 100%;
@@ -613,9 +531,10 @@ 

 
 [data-region='banner']::before, [data-region='banner']::after {
   content: "";
-  border: 0.7rem solid transparent;
+  border: 0.675rem solid transparent;
   border-top-color: #0d7fa5;
-  border-width: 0.7rem 1.4rem 0;
+  border-top-color: var(--color-theme-dark, #0d7fa5);
+  border-width: 0.675rem 1.35rem 0;
   left: 50%;
   position: absolute;
   top: 100%;
@@ -631,6 +550,7 @@ 

 [data-region='banner']::after {
   content: "";
   border-top-color: #fff;
+  border-top-color: var(--color-background, #fff);
   transform: translateX(-50%) translateY(-4px);
 }
 

@@ -1566,6 +1486,7 @@ 

       
.project-version {
   @include font-family('sans');
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   font-size: size('h3');
 }

     

@@ -1791,6 +1712,7 @@ 

       
       
[data-nav-toggle] {
   color: color('action');
+  color: var(--color-action, color('action')); //sass-lint:disable-line no-duplicate-properties
   padding: size('half-shim');
 
   @include above('page-break') {
@@ -1805,6 +1727,7 @@ 

   #{$focus},
   &[aria-pressed='true'] {
     color: color('focus');
+    color: var(--color-focus, color('focus')); //sass-lint:disable-line no-duplicate-properties
     outline: 0;
   }
 }

diff --git a/docs/style-code.html b/docs/style-code.html
index 9823e07c..f1396a19 100644
--- a/docs/style-code.html
+++ b/docs/style-code.html
@@ -593,7 +593,10 @@ 

       
       
       
.code-header {
-  @include contrasted('theme-light');
+  background-color: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
   flex: 0 0 auto;
   padding: 0 size('shim');
 }

@@ -830,8 +833,9 @@ 

       
.hljs-pre,
 .text-block pre {
   // sass-lint:disable-line force-element-nesting
-  background-color: color('slight');
-  border: 1px solid color('callout');
+  background-color: color('code-background');
+  border: 1px solid color('border');
+  border-color: var(--color-border, color('border'));
   color: color('code');
   flex: 1 1 auto;
   flex-wrap: wrap;
diff --git a/docs/style-typography.html b/docs/style-typography.html
index 2e270526..da338093 100644
--- a/docs/style-typography.html
+++ b/docs/style-typography.html
@@ -473,9 +473,15 @@ 

       
       
:root {
   @include font-family('sans');
+  @include set-variables($theme-colors, 'color');
+  @include set-variables($dynamic-colors, null, 'color');
+  background-color: color('background');
+  background-color: var(--color-background, color('background')); //sass-lint:disable-line no-duplicate-properties
+  color: color('text');
+  color: var(--color-text, color('text')); //sass-lint:disable-line no-duplicate-properties
   font-size: size('root');
   font-size: size('responsive'); //sass-lint:disable-line no-duplicate-properties
-  line-height: ratio('herman');
+  line-height: ratio('line-height');
 }

     

   
@@ -607,6 +613,9 @@ 

       
       
::selection {
   background-color: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
 }

     

   
@@ -737,6 +746,9 @@ 

       
       
mark {
   background-color: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
   display: inline-block;
   padding: 0 size('quarter-shim');
 }

@@ -870,13 +882,16 @@ 

       
[href] {
   #{$link} {
     color: color('action');
+    color: var(--color-action, color('action')); //sass-lint:disable-line no-duplicate-properties
     text-decoration-color: color('underline');
+    text-decoration-color: var(--color-underline, color('underline')); //sass-lint:disable-line no-duplicate-properties
     text-decoration-skip: ink;
     transition: text-decoration-color 250ms, color 200ms;
   }
 
   #{$focus} {
     color: color('focus');
+    color: var(--color-focus, color('focus')); //sass-lint:disable-line no-duplicate-properties
     text-decoration-color: currentColor;
   }
 }

@@ -1527,7 +1542,8 @@ 

   h2,
   h3,
   h4 {
-    color: color('black');
+    color: color('text');
+    color: var(--color-text, color('text'));
 
     a {
       #{$link} {
@@ -1590,7 +1606,8 @@ 

   }
 
   blockquote {
-    border-left: size('half-shim') solid color('border-light');
+    border-left: size('half-shim') solid color('border');
+    border-left-color: var(--color-border, color('border'));
     font-size: size('quote');
     margin-left: negative('gutter');
     padding-left: size('shim') + size('half-shim');
diff --git a/scss/component/_breadcrumb.scss b/scss/component/_breadcrumb.scss
index ef5b6059..2275f097 100644
--- a/scss/component/_breadcrumb.scss
+++ b/scss/component/_breadcrumb.scss
@@ -15,6 +15,9 @@
 ///   
 .breadcrumb {
   background: color('callout');
+  background: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-callout-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
   padding: size('shim') size('flex-gutter');
 
   a,
diff --git a/scss/component/_footer.scss b/scss/component/_footer.scss
index 9525f0c5..a996a363 100644
--- a/scss/component/_footer.scss
+++ b/scss/component/_footer.scss
@@ -28,7 +28,7 @@
 /// @group component-footer
 .footer-credit {
   @include clearfix;
-  border-top: 1px solid color('theme-light');
+  border-top: 1px solid currentColor;
   flex: 0 0 auto;
   font-size: size('footer');
   line-height: size('rhythm');
diff --git a/scss/component/_item.scss b/scss/component/_item.scss
index c299aa7c..ae348b61 100644
--- a/scss/component/_item.scss
+++ b/scss/component/_item.scss
@@ -21,8 +21,10 @@
 }
 
 .item-subtitle {
-  border-bottom: 1px solid color('border-light');
+  border-bottom: 1px solid color('border');
+  border-bottom-color: var(--color-border, color('border'));
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   font-weight: normal;
   margin-bottom: size('shim');
 }
@@ -55,12 +57,14 @@
 .value-type,
 .item-note {
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   display: inline-block;
   font-weight: normal;
 }
 
 .alias {
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   font-style: italic;
 }
 
@@ -75,6 +79,7 @@
 
 .param-title {
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   font-size: size('h3');
 }
 
diff --git a/scss/component/_nav.scss b/scss/component/_nav.scss
index 15bafc57..eb36cf9c 100644
--- a/scss/component/_nav.scss
+++ b/scss/component/_nav.scss
@@ -67,7 +67,7 @@
 ///   

 [data-nav] {
   #{$link} {
-    color: color('background');
+    color: inherit;
     line-height: 1.1;
     padding-bottom: size('quarter-shim');
     position: relative;
@@ -77,7 +77,7 @@
     // Animated underlines
     @include before('') {
       @include position(null null 0 0);
-      background: color('theme-light');
+      background: currentColor;
       height: size('nav-underline');
       transform: scale3d(0, 1, 1);
       transform-origin: center left;
diff --git a/scss/component/_project-meta.scss b/scss/component/_project-meta.scss
index c511b74e..545fbcaf 100644
--- a/scss/component/_project-meta.scss
+++ b/scss/component/_project-meta.scss
@@ -25,6 +25,7 @@
 .project-link {
   #{$link} {
     border: 1px solid color('action');
+    border-color: var(--color-action, color('action'));
     border-radius: size('gutter');
     padding: size('half-shim') size('gutter');
     text-align: center;
@@ -33,6 +34,9 @@
   }
 
   #{$focus} {
-    @include contrasted('action');
+    background-color: color('action');
+    background-color: var(--color-action, color('action')); //sass-lint:disable-line no-duplicate-properties
+    color: color('background');
+    color: var(--color-background, color('background'));
   }
 }
diff --git a/scss/component/_search.scss b/scss/component/_search.scss
index f1e88145..72043a8e 100644
--- a/scss/component/_search.scss
+++ b/scss/component/_search.scss
@@ -24,4 +24,5 @@
 
 [data-result-field='contents'] {
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
 }
diff --git a/scss/config/_abstracts.scss b/scss/config/_abstracts.scss
index f1abee5d..d871f97d 100644
--- a/scss/config/_abstracts.scss
+++ b/scss/config/_abstracts.scss
@@ -57,3 +57,25 @@
     @include herman-add($type, $name, $value);
   }
 }
+
+
+// Set Variables
+// -------------
+@mixin set-variables(
+  $map,
+  $function,
+  $prefix: $function
+) {
+  @each $key, $value in $map {
+    $var: '--#{$prefix}-#{$key}';
+
+    @if $function {
+      $value: call($function, $value);
+    } @else {
+      $var-value: unquote('--#{$prefix}-#{$value}');
+      $value: var($var-value);
+    }
+
+    #{$var}: $value;
+  }
+}
diff --git a/scss/config/_banner.scss b/scss/config/_banner.scss
index 451323d6..36461624 100644
--- a/scss/config/_banner.scss
+++ b/scss/config/_banner.scss
@@ -12,12 +12,6 @@
 ///
 /// @group style-banner
 ///
-/// @parameter {color | string} $color ['theme-dark'] -
-///   The color of the border/arrow line
-/// @parameter {color | string} $background ['background'] -
-///   The background color above the border/arrow,
-///   used to make it an arrow-outline rather than a solid triangle
-///
 /// @example scss
 ///   [data-region='banner'] {
 ///     @include banner-arrow;
@@ -26,11 +20,9 @@
 ///   

 ///     Hello World
 ///   

-@mixin banner-arrow(
-  $color: 'theme-dark',
-  $background: 'background'
-) {
-  border-bottom: size('arrow-border') solid color($color);
+@mixin banner-arrow {
+  border-bottom: size('arrow-border') solid color('theme-dark');
+  border-bottom-color: var(--color-theme-dark, color('theme-dark'));
   box-shadow: 0 2px 2px color('shadow');
   display: block;
   position: relative;
@@ -38,7 +30,8 @@
 
   @include wrap-content('') {
     border: size('arrow-depth') solid transparent;
-    border-top-color: color($color);
+    border-top-color: color('theme-dark');
+    border-top-color: var(--color-theme-dark, color('theme-dark')); //sass-lint:disable-line no-duplicate-properties
     border-width: size('arrow-depth') size('arrow-side') 0;
     left: 50%;
     position: absolute;
@@ -52,7 +45,8 @@
   }
 
   @include after('') {
-    border-top-color: color($background);
+    border-top-color: color('background');
+    border-top-color: var(--color-background, color('background')); //sass-lint:disable-line no-duplicate-properties
     transform: translateX(-50%) translateY(-4px);
   }
 }
diff --git a/scss/config/_colors.scss b/scss/config/_colors.scss
index 760eeef7..8e4b0ad3 100644
--- a/scss/config/_colors.scss
+++ b/scss/config/_colors.scss
@@ -81,39 +81,55 @@ $neutral-colors: (
 $theme-colors: (
   'theme-dark': 'brand-blue',
   'theme-light': 'brand-blue' ('tint': 80%),
+  'contrast-light': #fff,
+  'contrast-low': 'gray',
+  'contrast-dark': 'black',
+  'accent-dark': 'brand-pink',
+  'accent-light': 'accent-dark' ('tint': 75%),
+);
+
+@include config('colors', 'theme-colors', $theme-colors);
 
-  'background': #fff,
-  'text': 'black',
-  'text-light': 'gray',
 
-  'action': 'brand-pink',
-  'focus': 'theme-dark',
-  'underline': 'action' ('tint': 75%),
+// Dynamic Colors
+// --------------
+/// These theme-colors are based on the primary theme colors,
+/// and change based on project-specific theme-color settings.
+///
+/// @colors
+/// @group config-colors
+$dynamic-colors: (
+  'background': 'contrast-light',
+  'text': 'contrast-dark',
+  'text-light': 'contrast-low',
 
-  'border': 'gray',
-  'border-light': 'light-gray',
-  'shadow': 'gray' ('rgba': 0.5),
+  'sidebar-background': 'theme-dark',
+  'sidebar-text': 'contrast-light',
 
-  'callout': 'theme-light',
-  'slight': 'callout' ('tint': 90%),
+  'action': 'accent-dark',
+  'focus': 'theme-dark',
+  'underline': 'accent-light',
 
-  'code': 'theme-dark',
-  'code-shadow': 'code' (rgba: 0.2),
+  'border': 'callout',
+  'callout': 'theme-light',
+  'callout-text': 'text',
 );
 
-@include config('colors', 'theme-colors', $theme-colors);
+@include config('colors', 'dynamic-colors', $dynamic-colors);
 
 
-// System Colors
+// Static Colors
 // -------------
-/// Colors used by accoutrement-color
-/// to calculate contrast ratios.
+/// These theme-colors are based on the neutral tones,
+/// and don't change in relation to project-specific
+/// theme-color settings.
 ///
 /// @colors
 /// @group config-colors
-$system-colors: (
-  'contrast-light': 'background',
-  'contrast-dark': 'text',
+$static-colors: (
+  'code': 'theme-dark',
+  'code-background': 'theme-light' ('tint': 90%),
+  'shadow': 'contrast-dark' ('rgba': 0.25),
 );
 
-@include config('colors', 'system-colors', $system-colors);
+@include config('colors', 'static-colors', $static-colors);
diff --git a/scss/config/_scale.scss b/scss/config/_scale.scss
index 307ffcff..45855722 100644
--- a/scss/config/_scale.scss
+++ b/scss/config/_scale.scss
@@ -16,7 +16,7 @@
 /// @group config-scale
 /// @ratios
 $text-ratios: (
-  'line-height': 1.4
+  'line-height': 1.35
 );
 
 @include config('ratios', 'text-ratios', $text-ratios);
diff --git a/scss/config/_type.scss b/scss/config/_type.scss
index 5488a845..c00eab9b 100644
--- a/scss/config/_type.scss
+++ b/scss/config/_type.scss
@@ -63,11 +63,19 @@ $focus: '&:hover, &:focus, &:active';
 ///     You shall sojourn at Paris, Rome, and Naples.
 ///   

 @mixin invert-colors {
-  @include contrasted('theme-dark');
+  background-color: color('sidebar-background');
+  background-color: var(--color-sidebar-background, color('sidebar-background')); //sass-lint:disable-line no-duplicate-properties
+  color: color('sidebar-text');
+  color: var(--color-sidebar-text, color('sidebar-text')); //sass-lint:disable-line no-duplicate-properties
 
   [href] {
     #{$link} {
       color: inherit;
     }
   }
+
+  input {
+    border-color: currentColor;
+    color: currentColor;
+  }
 }
diff --git a/scss/initial/_root.scss b/scss/initial/_root.scss
index 5b41d7dd..0b26a1c5 100644
--- a/scss/initial/_root.scss
+++ b/scss/initial/_root.scss
@@ -17,9 +17,15 @@
 /// @group style-typography
 :root {
   @include font-family('sans');
+  @include set-variables($theme-colors, 'color');
+  @include set-variables($dynamic-colors, null, 'color');
+  background-color: color('background');
+  background-color: var(--color-background, color('background')); //sass-lint:disable-line no-duplicate-properties
+  color: color('text');
+  color: var(--color-text, color('text')); //sass-lint:disable-line no-duplicate-properties
   font-size: size('root');
   font-size: size('responsive'); //sass-lint:disable-line no-duplicate-properties
-  line-height: ratio('herman');
+  line-height: ratio('line-height');
 }
 
 
@@ -29,6 +35,9 @@
 /// @group style-typography
 ::selection {
   background-color: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
 }
 
 
@@ -38,6 +47,9 @@
 /// @group style-typography
 mark {
   background-color: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
   display: inline-block;
   padding: 0 size('quarter-shim');
 }
@@ -53,13 +65,16 @@ mark {
 [href] {
   #{$link} {
     color: color('action');
+    color: var(--color-action, color('action')); //sass-lint:disable-line no-duplicate-properties
     text-decoration-color: color('underline');
+    text-decoration-color: var(--color-underline, color('underline')); //sass-lint:disable-line no-duplicate-properties
     text-decoration-skip: ink;
     transition: text-decoration-color 250ms, color 200ms;
   }
 
   #{$focus} {
     color: color('focus');
+    color: var(--color-focus, color('focus')); //sass-lint:disable-line no-duplicate-properties
     text-decoration-color: currentColor;
   }
 }
diff --git a/scss/layout/_banner.scss b/scss/layout/_banner.scss
index f3a8d329..cbbeef13 100644
--- a/scss/layout/_banner.scss
+++ b/scss/layout/_banner.scss
@@ -75,6 +75,7 @@
 .project-version {
   @include font-family('sans');
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   font-size: size('h3');
 }
 
@@ -91,6 +92,7 @@
 ///   
 [data-nav-toggle] {
   color: color('action');
+  color: var(--color-action, color('action')); //sass-lint:disable-line no-duplicate-properties
   padding: size('half-shim');
 
   @include above('page-break') {
@@ -105,6 +107,7 @@
   #{$focus},
   &[aria-pressed='true'] {
     color: color('focus');
+    color: var(--color-focus, color('focus')); //sass-lint:disable-line no-duplicate-properties
     outline: 0;
   }
 }
diff --git a/scss/patterns/_forms.scss b/scss/patterns/_forms.scss
index f84b003f..7cf63710 100644
--- a/scss/patterns/_forms.scss
+++ b/scss/patterns/_forms.scss
@@ -9,7 +9,8 @@
 
 
 input {
-  border: 1px solid color('border-light');
+  border: 1px solid color('border');
+  border-color: var(--color-border, color('border'));
   color: inherit;
   font-size: size('search');
   margin-bottom: size('half-shim');
diff --git a/scss/patterns/_type.scss b/scss/patterns/_type.scss
index bb7c6553..eca2bec2 100644
--- a/scss/patterns/_type.scss
+++ b/scss/patterns/_type.scss
@@ -51,7 +51,8 @@
   h2,
   h3,
   h4 {
-    color: color('black');
+    color: color('text');
+    color: var(--color-text, color('text'));
 
     a {
       #{$link} {
@@ -114,7 +115,8 @@
   }
 
   blockquote {
-    border-left: size('half-shim') solid color('border-light');
+    border-left: size('half-shim') solid color('border');
+    border-left-color: var(--color-border, color('border'));
     font-size: size('quote');
     margin-left: negative('gutter');
     padding-left: size('shim') + size('half-shim');
diff --git a/scss/previews/_code.scss b/scss/previews/_code.scss
index 2c4ff738..14e634f7 100644
--- a/scss/previews/_code.scss
+++ b/scss/previews/_code.scss
@@ -26,7 +26,10 @@
 // -----------
 /// @group style-code
 .code-header {
-  @include contrasted('theme-light');
+  background-color: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
+  color: color('callout-text');
+  color: var(--color-text, color('callout-text')); //sass-lint:disable-line no-duplicate-properties
   flex: 0 0 auto;
   padding: 0 size('shim');
 }
@@ -45,8 +48,9 @@
 /// @group style-code
 .hljs-pre,
 .text-block pre { // sass-lint:disable-line force-element-nesting
-  background-color: color('slight');
-  border: 1px solid color('callout');
+  background-color: color('code-background');
+  border: 1px solid color('border');
+  border-color: var(--color-border, color('border'));
   color: color('code');
   flex: 1 1 auto;
   flex-wrap: wrap;
diff --git a/scss/previews/_color.scss b/scss/previews/_color.scss
index 5f27a91c..85b6549d 100644
--- a/scss/previews/_color.scss
+++ b/scss/previews/_color.scss
@@ -38,6 +38,7 @@
 
 .color-swatch {
   border: 1px solid color('border');
+  border-color: var(--color-border, color('border'));
   height: size('color-swatch');
   min-width: size('color-swatch');
   position: relative;
@@ -69,10 +70,10 @@
 }
 
 .color-value {
-  background-color: color('slight');
+  background-color: color('code-background');
   border-radius: size('quarter-shim');
-  box-shadow: 0 0 size('quarter-shim') color('code-shadow') inset;
-  color: color('text-light');
+  box-shadow: 0 0 size('quarter-shim') color('shadow') inset;
+  color: color('code');
   font-weight: normal;
   margin-top: size('quarter-shim');
   white-space: nowrap;
diff --git a/scss/previews/_examples.scss b/scss/previews/_examples.scss
index 2676d203..6bb198ea 100644
--- a/scss/previews/_examples.scss
+++ b/scss/previews/_examples.scss
@@ -13,7 +13,8 @@
 }
 
 .example-render {
-  border: 1px solid color('border-light');
+  border: 1px solid color('border');
+  border-color: var(--color-border, color('border'));
   border-top: 0;
   padding: size('shim');
 }
diff --git a/scss/previews/_size.scss b/scss/previews/_size.scss
index 4928cec0..53c95669 100644
--- a/scss/previews/_size.scss
+++ b/scss/previews/_size.scss
@@ -57,7 +57,8 @@
     vertical-align: baseline;
 
     + td {
-      border-left: 1px solid color('border-light');
+      border-left: 1px solid color('border');
+      border-left-color: var(--color-border, color('border'));
     }
   }
 
@@ -77,6 +78,7 @@
 .size-name,
 .size-value {
   color: color('text-light');
+  color: var(--color-text-light, color('text-light')); //sass-lint:disable-line no-duplicate-properties
   flex: 0 1 5ch;
   font-size: size('code');
   white-space: nowrap;
@@ -100,25 +102,46 @@
 }
 
 .size-bar {
-  background-color: color('border');
-  background-image:
-  linear-gradient(
-    to left,
-    color('underline') 1px,
-    transparent 1px,
-    transparent
-  ),
-  linear-gradient(
-    to left,
-    color('border-light' ('rgba': 0.5)) 1px,
-    transparent 1px,
-    transparent
-  ),
-  linear-gradient(
-    to left,
-    color('border-light' ('rgba': 0.25)) 1px,
-    transparent 1px,
-    transparent
+  background-color: color('contrast-dark');
+  background-image: (
+    linear-gradient(
+      to left,
+      color('contrast-light') 1px,
+      transparent 1px,
+      transparent
+    ),
+    linear-gradient(
+      to left,
+      color('contrast-low') 1px,
+      transparent 1px,
+      transparent
+    ),
+    linear-gradient(
+      to left,
+      color('contrast-low') 1px,
+      transparent 1px,
+      transparent
+    )
+  );
+  background-image: ( //sass-lint:disable-line no-duplicate-properties
+    linear-gradient(
+      to left,
+      var(--color-contrast-light, color('contrast-light')) 1px,
+      transparent 1px,
+      transparent
+    ),
+    linear-gradient(
+      to left,
+      var(--color-contrast-low, color('contrast-low')) 1px,
+      transparent 1px,
+      transparent
+    ),
+    linear-gradient(
+      to left,
+      var(--color-contrast-low, color('contrast-low')) 1px,
+      transparent 1px,
+      transparent
+    )
   );
   background-position: 0 100%;
   background-repeat: repeat-x;
@@ -136,9 +159,11 @@
 // ------
 
 .ratio-base {
-  background-color: color('callout');
+  background: color('callout');
+  background-color: var(--color-callout, color('callout')); //sass-lint:disable-line no-duplicate-properties
 
   .size-bar {
-    background-color: color('action');
+    background-color: color('accent-dark');
+    background-color: var(--color-accent-dark, color('accent-dark')); //sass-lint:disable-line no-duplicate-properties
   }
 }