/*! 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(1em + 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(1em + 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(1em + 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(1em + 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 6eddc192..9cd7d3c3 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 570ed2e8..741c0d15 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
}
}