Update Typey, Chroma and KSS fork to use Twig templates.

53 files changed, 190 insertions, 110 deletions

diff --git a/fork-versions/typey-chroma-kss/_init.scss b/fork-versions/typey-chroma-kss/_init.scss
index d2e61e2..e5539da 100644
--- a/fork-versions/typey-chroma-kss/_init.scss
+++ b/fork-versions/typey-chroma-kss/_init.scss
@@ -18,7 +18,6 @@
 // The following Sass functions/mixins are required to generate some variables'
 // values, so we load them first.
 @import 'chroma/functions';
-@import 'support-for';
 
 @import 'init/colors';
 @import 'init/variables';
@@ -26,7 +25,7 @@
 
 // 3rd party libraries
 //
-// The following sass modules are shared with all .scsss files:
+// The following sass modules are shared with all .scss files:
 // - [Chroma](https://github.com/JohnAlbin/chroma)
 // - [Support-for](https://github.com/JohnAlbin/support-for)
 // - [Typey](https://github.com/jptaranto/typey)
@@ -37,6 +36,9 @@
 
 // Add Chroma to manage colors.
 @import 'chroma';
+@import 'chroma/kss';
+// Add support-for to manage normalize-scss' browser support.
+@import 'support-for';
 // Add typey to manage font sizes and margins.
 @import 'typey';
 
@@ -48,6 +50,7 @@
 // Weight: 1
 //
 // Style guide: sass.mixins
+@import 'init/rtl/rtl';
 
 // Functions
 //
@@ -56,4 +59,3 @@
 // Weight: 1
 //
 // Style guide: sass.functions
-@import 'init/rtl/rtl';
diff --git a/fork-versions/typey-chroma-kss/base/_root.scss b/fork-versions/typey-chroma-kss/base/_root.scss
index 090f090..1c0bdf5 100644
--- a/fork-versions/typey-chroma-kss/base/_root.scss
+++ b/fork-versions/typey-chroma-kss/base/_root.scss
@@ -1,3 +1,5 @@
+// sass-lint:disable no-vendor-prefixes
+
 // Use the saner border-box model for all elements.
 * {
   box-sizing: border-box;
@@ -5,10 +7,8 @@
 
 html {
   @include define-type-sizing();
-  // Show a background image that can be used to debug your alignments.
-  // @include debug-vertical-alignment();
   // Change the default font family in all browsers (opinionated).
-  font-family: $font-body;
+  @include typeface(body);
   // Prevent adjustments of font size after orientation changes in IE and iOS.
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
diff --git a/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss b/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss
index 8445b3f..1770466 100644
--- a/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss
+++ b/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss
@@ -8,7 +8,7 @@
 //
 // An `<img>` element represents an image.
 //
-// Markup: embedded-img.hbs
+// Markup: embedded-img.twig
 //
 // Style guide: base.embedded.img
 
@@ -17,6 +17,7 @@ img {
   border-style: none;
   @if support-for(ie, 7) {
     // Improve image quality when scaled in IE 7.
+    // sass-lint:disable no-vendor-prefixes
     -ms-interpolation-mode: bicubic;
   }
 }
@@ -35,7 +36,7 @@ svg {
 //
 // A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
 //
-// Markup: embedded-svg.hbs
+// Markup: embedded-svg.twig
 //
 // Style guide: base.embedded.svg
 
diff --git a/fork-versions/typey-chroma-kss/base/embedded/embedded-img.hbs b/fork-versions/typey-chroma-kss/base/embedded/embedded-img.hbs
deleted file mode 100644
index b0da948..0000000
--- a/fork-versions/typey-chroma-kss/base/embedded/embedded-img.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<p>An image <img class="{{modifier_class}}" src="public/sample-inline.png"> that is inline with other text.</p>
-
-<figure style="width: 50%; max-width: 300px;">
-  <figcaption>An image inside a figure.</figcaption>
-  <img class="{{modifier_class}}" src="public/sample.png">
-</figure>
diff --git a/fork-versions/typey-chroma-kss/base/embedded/embedded-img.twig b/fork-versions/typey-chroma-kss/base/embedded/embedded-img.twig
new file mode 100644
index 0000000..061b49a
--- /dev/null
+++ b/fork-versions/typey-chroma-kss/base/embedded/embedded-img.twig
@@ -0,0 +1,6 @@
+<p>An image <img class="{{modifier_class}}" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>An image inside a figure.</figcaption>
+  <img class="{{modifier_class}}" src="kss-assets/sample.png">
+</figure>
diff --git a/fork-versions/typey-chroma-kss/base/embedded/embedded-svg.hbs b/fork-versions/typey-chroma-kss/base/embedded/embedded-svg.twig
index 44b5862..44b5862 100644
--- a/fork-versions/typey-chroma-kss/base/embedded/embedded-svg.hbs
+++ b/fork-versions/typey-chroma-kss/base/embedded/embedded-svg.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/_forms.scss b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
index ac9714b..6dfb644 100644
--- a/fork-versions/typey-chroma-kss/base/forms/_forms.scss
+++ b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
@@ -1,3 +1,5 @@
+// sass-lint:disable no-vendor-prefixes, no-css-comments
+
 // Dependencies.
 @import 'components/button/button';
 
@@ -32,7 +34,7 @@ textarea {
   margin: 0;
   @if support-for(ie, 7) {
     // Address `font-family` inconsistency between `textarea` and other form in IE 7
-    *font-family: $font-body;
+    @include typeface(body);
     // Improve appearance and consistency with IE 6/7.
     *vertical-align: middle;
   }
@@ -53,26 +55,26 @@ select {
 //    controls in Android 4.
 // 2. Correct the inability to style clickable types in iOS and Safari.
 button,
-html [type="button"], // 1
-[type="reset"],
-[type="submit"] {
+html [type='button'], // 1
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button; // 2
 }
 
 // Remove the inner border and padding in Firefox.
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 // Restore the focus styles unset by the previous rule.
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -86,12 +88,12 @@ input {
 }
 
 // Correct the cursor style of increment and decrement buttons in Chrome.
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-[type="search"] {
+[type='search'] {
   // Correct the odd appearance in Chrome and Safari.
   -webkit-appearance: textfield;
   // Correct the outline style in Safari.
@@ -107,7 +109,7 @@ input {
 // Correct the text style of placeholders in Chrome, Edge, and Safari.
 ::-webkit-input-placeholder {
   color: inherit;
-  opacity: 0.54;
+  opacity: .54;
 }
 
 ::-webkit-file-upload-button {
@@ -129,14 +131,14 @@ input {
 // :hover        - Hover styling.
 // :active:hover - Depressed button styling.
 //
-// Markup: forms-button.hbs
+// Markup: forms-button.twig
 //
 // Style guide: forms.base.button
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   @extend %button;
 }
 
@@ -152,60 +154,60 @@ button,
 // HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
 // `time`, `number`, `range`, `color`, and `file`.
 //
-// Markup: forms-input.hbs
+// Markup: forms-input.twig
 //
 // Style guide: forms.base.input
 
-[type="text"],
-[type="search"],
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="password"],
-[type="date"],
-[type="time"],
-[type="number"] {
+[type='text'],
+[type='search'],
+[type='tel'],
+[type='url'],
+[type='email'],
+[type='password'],
+[type='date'],
+[type='time'],
+[type='number'] {
   @extend %text-form-element !optional;
 }
 
-[type="range"] {
+[type='range'] {
   // Add your styles.
 }
 
-[type="color"] {
+[type='color'] {
   // Add your styles.
 }
 
-[type="file"] {
+[type='file'] {
   // Add your styles.
 }
 
 // Checkboxes
 //
-// If an `<input>` element has the `type="checkbox"` attribute set, the form
+// If an `<input>` element has the `type='checkbox'` attribute set, the form
 // field is displayed as a checkbox.
 //
 // It's recommended that you don't attempt to style these elements. Firefox's
 // implementation doesn't respect `box-sizing`, `padding`, or `width`.
 //
-// Markup: forms-input-checkbox.hbs
+// Markup: forms-input-checkbox.twig
 //
 // Style guide: forms.base.input-checkbox
 
 // Radio buttons
 //
-// If an `<input>` element has the `type="radio"` attribute set, the form field
+// If an `<input>` element has the `type='radio'` attribute set, the form field
 // is displayed as a radio button.
 //
 // It's recommended that you don't attempt to style these elements. Firefox's
 // implementation doesn't respect `box-sizing`, `padding`, or `width`.
 //
-// Markup: forms-input-radio.hbs
+// Markup: forms-input-radio.twig
 //
 // Style guide: forms.base.input-radio
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   // Add the correct box sizing in IE <11.
   box-sizing: border-box;
   // Remove the padding in IE <11.
@@ -223,7 +225,7 @@ button,
 // The `<fieldset>` element groups a set of form fields, optionally under a
 // common name given by the `<legend>` element.
 //
-// Markup: forms-fieldset.hbs
+// Markup: forms-fieldset.twig
 //
 // Style guide: forms.base.fieldset
 
@@ -258,7 +260,7 @@ legend {
 // associated with a specific form control by using the `for` attribute or by
 // putting the form control inside the label element itself.
 //
-// Markup: forms-label.hbs
+// Markup: forms-label.twig
 //
 // Style guide: forms.base.label
 
@@ -274,7 +276,7 @@ label {
 // Known limitation: by default, Chrome and Safari on OS X allow very limited
 // styling of `<select>`, unless a `border` property is set.
 //
-// Markup: forms-select.hbs
+// Markup: forms-select.twig
 //
 // Style guide: forms.base.select
 
@@ -291,7 +293,7 @@ optgroup {
 //
 // The `<textarea>` element represents a multi-line plain text form field.
 //
-// Markup: forms-textarea.hbs
+// Markup: forms-textarea.twig
 //
 // Style guide: forms.base.textarea
 
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-button.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-button.twig
index efc1612..efc1612 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-button.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-button.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-fieldset.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-fieldset.twig
index 5b75985..5b75985 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-fieldset.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-fieldset.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-input-checkbox.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-input-checkbox.twig
index 43c6861..43c6861 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-input-checkbox.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-input-checkbox.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-input-radio.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-input-radio.twig
index deec81f..deec81f 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-input-radio.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-input-radio.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-input.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-input.twig
index 85f1a71..85f1a71 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-input.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-input.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-label.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-label.twig
index f258d67..f258d67 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-label.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-label.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-select.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-select.twig
index 99a4231..99a4231 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-select.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-select.twig
diff --git a/fork-versions/typey-chroma-kss/base/forms/forms-textarea.hbs b/fork-versions/typey-chroma-kss/base/forms/forms-textarea.twig
index fbef154..fbef154 100644
--- a/fork-versions/typey-chroma-kss/base/forms/forms-textarea.hbs
+++ b/fork-versions/typey-chroma-kss/base/forms/forms-textarea.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss b/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss
index 3d6fd05..42546e7 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss
+++ b/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss
@@ -18,7 +18,7 @@
 // Optionally, add a `<footer>` to identify the source of the quote, wrapping
 // the name of the source work in `<cite>`.
 //
-// Markup: grouping-blockquote.hbs
+// Markup: grouping-blockquote.twig
 //
 // Style guide: base.grouping.blockquote
 
@@ -39,7 +39,7 @@ blockquote {
 // The `<ul>` element is a list of items in which the order does <em>not</em>
 // explicitly matter.
 //
-// Markup: grouping-ul.hbs
+// Markup: grouping-ul.twig
 //
 // Style guide: base.grouping.lists.ul
 
@@ -48,7 +48,7 @@ blockquote {
 // The `<ol>` element is a list of items in which the order <em>does</em>
 // explicitly matter.
 //
-// Markup: grouping-ol.hbs
+// Markup: grouping-ol.twig
 //
 // Style guide: base.grouping.lists.ol
 
@@ -56,7 +56,7 @@ blockquote {
 //
 // The `<dl>` element is a list of terms with their associated descriptions.
 //
-// Markup: grouping-dl.hbs
+// Markup: grouping-dl.twig
 //
 // Weight: 1
 //
@@ -119,7 +119,7 @@ ul {
 // Optionally, a `<figcaption>` element inside the `<figure>` represents the
 // caption of the figure.
 //
-// Markup: grouping-figure.hbs
+// Markup: grouping-figure.twig
 //
 // Style guide: base.grouping.figure
 
@@ -138,7 +138,7 @@ figcaption {
 // change in a story, or a transition to another topic within a section of a
 // reference book.
 //
-// Markup: grouping-hr.hbs
+// Markup: grouping-hr.twig
 //
 // Style guide: base.grouping.hr
 
@@ -157,7 +157,7 @@ hr {
 // `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
 // a top and bottom margin.
 //
-// Markup: grouping-p.hbs
+// Markup: grouping-p.twig
 //
 // Weight: -2
 //
@@ -174,7 +174,7 @@ pre {
 // The `<pre>` element represents a block of preformatted text, such as
 // fragments of computer code, ASCII art, etc.
 //
-// Markup: grouping-pre.hbs
+// Markup: grouping-pre.twig
 //
 // Style guide: base.grouping.pre
 
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-blockquote.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-blockquote.twig
index e7d5aba..e7d5aba 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-blockquote.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-blockquote.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-dl.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-dl.twig
index 4308fef..4308fef 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-dl.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-dl.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-figure.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-figure.twig
index 4b8d7fb..4b8d7fb 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-figure.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-figure.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-hr.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-hr.twig
index 47a1c47..47a1c47 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-hr.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-hr.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-ol.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-ol.twig
index b8baabb..b8baabb 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-ol.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-ol.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-p.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-p.twig
index 72ef5fc..72ef5fc 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-p.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-p.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-pre.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-pre.twig
index acbc480..acbc480 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-pre.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-pre.twig
diff --git a/fork-versions/typey-chroma-kss/base/grouping/grouping-ul.hbs b/fork-versions/typey-chroma-kss/base/grouping/grouping-ul.twig
index bb9ecc7..bb9ecc7 100644
--- a/fork-versions/typey-chroma-kss/base/grouping/grouping-ul.hbs
+++ b/fork-versions/typey-chroma-kss/base/grouping/grouping-ul.twig
diff --git a/fork-versions/typey-chroma-kss/base/headings/_headings.scss b/fork-versions/typey-chroma-kss/base/headings/_headings.scss
index 78efd02..7993211 100644
--- a/fork-versions/typey-chroma-kss/base/headings/_headings.scss
+++ b/fork-versions/typey-chroma-kss/base/headings/_headings.scss
@@ -4,7 +4,7 @@
 // classes are also available, for when you want to match the font styling of a
 // heading but still want your text to be displayed inline.
 //
-// Markup: headings-h.hbs
+// Markup: headings-h.twig
 //
 // Style guide: base.headings
 
diff --git a/fork-versions/typey-chroma-kss/base/headings/headings-h.hbs b/fork-versions/typey-chroma-kss/base/headings/headings-h.twig
index 4806892..4806892 100644
--- a/fork-versions/typey-chroma-kss/base/headings/headings-h.hbs
+++ b/fork-versions/typey-chroma-kss/base/headings/headings-h.twig
diff --git a/fork-versions/typey-chroma-kss/base/links/_links.scss b/fork-versions/typey-chroma-kss/base/links/_links.scss
index f76e47d..b5215b7 100644
--- a/fork-versions/typey-chroma-kss/base/links/_links.scss
+++ b/fork-versions/typey-chroma-kss/base/links/_links.scss
@@ -11,7 +11,7 @@
 // :focus   - A link that has been given keyboard focus.
 // :active  - A link that is being actively clicked.
 //
-// Markup: links-a.hbs
+// Markup: links-a.twig
 //
 // Style guide: base.link
 
diff --git a/fork-versions/typey-chroma-kss/base/links/links-a.hbs b/fork-versions/typey-chroma-kss/base/links/links-a.twig
index 1cc60cd..1cc60cd 100644
--- a/fork-versions/typey-chroma-kss/base/links/links-a.hbs
+++ b/fork-versions/typey-chroma-kss/base/links/links-a.twig
diff --git a/fork-versions/typey-chroma-kss/base/tables/_tables.scss b/fork-versions/typey-chroma-kss/base/tables/_tables.scss
index de27473..560dbee 100644
--- a/fork-versions/typey-chroma-kss/base/tables/_tables.scss
+++ b/fork-versions/typey-chroma-kss/base/tables/_tables.scss
@@ -2,7 +2,7 @@
 //
 // The `<table>` element displays tabular data in rows, columns, and cells.
 //
-// Markup: tables-table.hbs
+// Markup: tables-table.twig
 //
 // Weight: 1
 //
diff --git a/fork-versions/typey-chroma-kss/base/tables/tables-table.hbs b/fork-versions/typey-chroma-kss/base/tables/tables-table.twig
index a5e8f0b..a5e8f0b 100644
--- a/fork-versions/typey-chroma-kss/base/tables/tables-table.hbs
+++ b/fork-versions/typey-chroma-kss/base/tables/tables-table.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/_text.scss b/fork-versions/typey-chroma-kss/base/text/_text.scss
index e00f567..a8b0962 100644
--- a/fork-versions/typey-chroma-kss/base/text/_text.scss
+++ b/fork-versions/typey-chroma-kss/base/text/_text.scss
@@ -11,13 +11,13 @@
 // The `<abbr>` element makes the meanings of abbreviations and acronyms visible
 // on hover.
 //
-// Markup: text-abbr.hbs
+// Markup: text-abbr.twig
 //
 // Style guide: base.text.abbr
 
 abbr[title] {
   // Remove the bottom border in Firefox <40.
-  border-bottom: none;
+  border-bottom: 0;
   // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   text-decoration: underline;
   text-decoration: underline dotted;
@@ -38,7 +38,7 @@ abbr[title] {
 // Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
 // without conveying additional importance.
 //
-// Markup: text-b.hbs
+// Markup: text-b.twig
 //
 // Weight: -1
 //
@@ -51,17 +51,19 @@ strong {
   font-weight: inherit;
 }
 
+// sass-lint:disable no-mergeable-selectors
 b,
 strong {
   // Add the correct font weight in Chrome, Edge, and Safari.
   font-weight: bolder;
 }
+// sass-lint:enable no-mergeable-selectors
 
 // Cite
 //
 // The `<cite>` element represents a reference to a creative work.
 //
-// Markup: text-cite.hbs
+// Markup: text-cite.twig
 //
 // Style guide: base.text.cite
 
@@ -76,7 +78,7 @@ cite {
 // output from a program or computing system. The `<kbd>` element represents
 // user input (typically keyboard input.)
 //
-// Markup: text-code.hbs
+// Markup: text-code.twig
 //
 // Style guide: base.text.code
 
@@ -86,8 +88,8 @@ kbd,
 samp,
 var {
   // Correct the inheritance and scaling of font size in all browsers.
-  // The value of $font-monospace ends with ", serif".
-  font-family: $font-monospace;
+  // The font-family value ends with ", serif".
+  @include typeface(monospace);
   // Correct the odd `em` font sizing in all browsers.
   font-size: 1em;
 }
@@ -96,7 +98,7 @@ var {
 //
 // The `<del>` element indicates blocks of text that have been deleted.
 //
-// Markup: text-del.hbs
+// Markup: text-del.twig
 //
 // Style guide: base.text.del
 
@@ -108,7 +110,7 @@ del {
 //
 // The `<dfn>` element represents the defining instance of a term.
 //
-// Markup: text-dfn.hbs
+// Markup: text-dfn.twig
 //
 // Style guide: base.text.dfn
 
@@ -125,7 +127,7 @@ dfn {
 // Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
 // technical terms, etc.
 //
-// Markup: text-i.hbs
+// Markup: text-i.twig
 //
 // Weight: -1
 //
@@ -140,7 +142,7 @@ em {
 //
 // The `<ins>` element indicates additions to the document.
 //
-// Markup: text-ins.hbs
+// Markup: text-ins.twig
 //
 // Style guide: base.text.ins
 
@@ -153,7 +155,7 @@ ins {
 // The `<mark>` element highlights a run of text due to its relevance in another
 // context.
 //
-// Markup: text-mark.hbs
+// Markup: text-mark.twig
 //
 // Style guide: base.text.mark
 
@@ -168,7 +170,7 @@ mark {
 // The `<q>` element represents an inline quote from another source. Longer
 // quotes should use the `<blockquote>` element.
 //
-// Markup: text-q.hbs
+// Markup: text-q.twig
 //
 // Style guide: base.text.q
 
@@ -180,7 +182,7 @@ q {
 //
 // The `<s>` element indicates blocks of text that are no longer relevant.
 //
-// Markup: text-s.hbs
+// Markup: text-s.twig
 //
 // Style guide: base.text.s
 
@@ -193,7 +195,7 @@ s {
 // For de-emphasizing inline or blocks of text, use the `<small>` element to set
 // text at 80% the size of the parent.
 //
-// Markup: text-small.hbs
+// Markup: text-small.twig
 //
 // Style guide: base.text.small
 
@@ -207,7 +209,7 @@ small {
 // The `<sup>` element represents a superscript and the `<sub>` element
 // represents a subscript.
 //
-// Markup: text-sub.hbs
+// Markup: text-sub.twig
 //
 // Style guide: base.text.sub
 
@@ -234,7 +236,7 @@ sup {
 // To underline text use the `<u>` element. Not recommended since underlines are
 // used by web browsers to style hyperlinks.
 //
-// Markup: text-u.hbs
+// Markup: text-u.twig
 //
 // Style guide: base.text.u
 
diff --git a/fork-versions/typey-chroma-kss/base/text/text-abbr.hbs b/fork-versions/typey-chroma-kss/base/text/text-abbr.twig
index 37ddf79..37ddf79 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-abbr.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-abbr.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-b.hbs b/fork-versions/typey-chroma-kss/base/text/text-b.twig
index a21fdc3..a21fdc3 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-b.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-b.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-cite.hbs b/fork-versions/typey-chroma-kss/base/text/text-cite.twig
index ac839c1..ac839c1 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-cite.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-cite.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-code.hbs b/fork-versions/typey-chroma-kss/base/text/text-code.twig
index bc367d8..bc367d8 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-code.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-code.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-del.hbs b/fork-versions/typey-chroma-kss/base/text/text-del.twig
index 51dfe7e..51dfe7e 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-del.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-del.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-dfn.hbs b/fork-versions/typey-chroma-kss/base/text/text-dfn.twig
index 0d7bae6..0d7bae6 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-dfn.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-dfn.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-i.hbs b/fork-versions/typey-chroma-kss/base/text/text-i.twig
index c01eeb1..c01eeb1 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-i.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-i.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-ins.hbs b/fork-versions/typey-chroma-kss/base/text/text-ins.twig
index 40b7df7..40b7df7 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-ins.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-ins.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-mark.hbs b/fork-versions/typey-chroma-kss/base/text/text-mark.twig
index b48ba0f..b48ba0f 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-mark.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-mark.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-q.hbs b/fork-versions/typey-chroma-kss/base/text/text-q.twig
index 2f95588..2f95588 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-q.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-q.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-s.hbs b/fork-versions/typey-chroma-kss/base/text/text-s.twig
index 8f8c530..8f8c530 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-s.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-s.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-small.hbs b/fork-versions/typey-chroma-kss/base/text/text-small.twig
index e525a59..e525a59 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-small.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-small.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-sub.hbs b/fork-versions/typey-chroma-kss/base/text/text-sub.twig
index 5ffc76c..5ffc76c 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-sub.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-sub.twig
diff --git a/fork-versions/typey-chroma-kss/base/text/text-u.hbs b/fork-versions/typey-chroma-kss/base/text/text-u.twig
index 7ff26e8..7ff26e8 100644
--- a/fork-versions/typey-chroma-kss/base/text/text-u.hbs
+++ b/fork-versions/typey-chroma-kss/base/text/text-u.twig
diff --git a/fork-versions/typey-chroma-kss/components/button/_button.scss b/fork-versions/typey-chroma-kss/components/button/_button.scss
index 6a166cc..ff762ec 100644
--- a/fork-versions/typey-chroma-kss/components/button/_button.scss
+++ b/fork-versions/typey-chroma-kss/components/button/_button.scss
@@ -8,12 +8,13 @@
 // :hover  - Hover styling.
 // :active - Depressed button styling.
 //
-// Markup: button.hbs
+// Markup: button.twig
 //
 // Style guide: forms.button
 
 .button,
 %button {
+  // sass-lint:disable no-vendor-prefixes
   -moz-appearance: button;
   -webkit-appearance: button;
   // Some styles don't apply to <a> links since they are inline elements by default.
@@ -36,6 +37,10 @@
     color: color(button);
   }
 
+  // Add button variations here.
+
+  // The disabled variation should always go last, so that it overrides any
+  // other variations.
   &[disabled] {
     // Re-set default cursor for disabled elements.
     cursor: default;
diff --git a/fork-versions/typey-chroma-kss/components/button/button.hbs b/fork-versions/typey-chroma-kss/components/button/button.twig
index 4a32e9f..4a32e9f 100644
--- a/fork-versions/typey-chroma-kss/components/button/button.hbs
+++ b/fork-versions/typey-chroma-kss/components/button/button.twig
diff --git a/fork-versions/typey-chroma-kss/components/divider/_divider.scss b/fork-versions/typey-chroma-kss/components/divider/_divider.scss
index 0e925d7..a0ca6fa 100644
--- a/fork-versions/typey-chroma-kss/components/divider/_divider.scss
+++ b/fork-versions/typey-chroma-kss/components/divider/_divider.scss
@@ -2,7 +2,7 @@
 //
 // Can be used as an `<hr>`, an empty `<div>` or as a container.
 //
-// Markup: divider.hbs
+// Markup: divider.twig
 //
 // Style guide: components.divider
 
diff --git a/fork-versions/typey-chroma-kss/components/divider/divider.hbs b/fork-versions/typey-chroma-kss/components/divider/divider.twig
index 3a2e968..3a2e968 100644
--- a/fork-versions/typey-chroma-kss/components/divider/divider.hbs
+++ b/fork-versions/typey-chroma-kss/components/divider/divider.twig
diff --git a/fork-versions/typey-chroma-kss/init/_colors.scss b/fork-versions/typey-chroma-kss/init/_colors.scss
index 7070af7..1fb1f35 100644
--- a/fork-versions/typey-chroma-kss/init/_colors.scss
+++ b/fork-versions/typey-chroma-kss/init/_colors.scss
@@ -1,9 +1,18 @@
+// sass-lint:disable indentation, no-color-keywords
+
 // Colors
 //
-// Use the `color()` function to add colors to CSS properties.
+// Use the `color()` function to add colors to CSS properties. To learn more,
+// [read the Chroma documentation](http://johnalbin.github.io/chroma/).
+//
+// Markup: chroma.twig
+//
+// Weight: -1
+//
+// Style guide: sass.colors
 
 // Define the default color scheme's color names.
-$chroma: define-default-color-scheme('branding', "The site's main colors. Can be used to define colors in other color schemes.");
+$chroma: define-default-color-scheme('branding', 'The site\'s main colors. Can be used to define colors in other color schemes.');
 
 $chroma: add-colors((
   black:                  #000,
diff --git a/fork-versions/typey-chroma-kss/init/_variables.scss b/fork-versions/typey-chroma-kss/init/_variables.scss
index fbd8d2f..3b725f5 100644
--- a/fork-versions/typey-chroma-kss/init/_variables.scss
+++ b/fork-versions/typey-chroma-kss/init/_variables.scss
@@ -5,21 +5,33 @@
 // Style guide: sass.variables
 
 
-//
 // Browser support
 //
+// For older versions of browsers, some Sass relies on the `support-for()` to
+// control whether extra CSS is needed to be output. The `support-for()`
+// function and the `$support-for` variable are documented on the [support-for
+// homepage](https://github.com/JohnAlbin/support-for).
+//
+// Style guide: sass.variables.support-for
 
 // Support the same browsers as normalize.css v3.
 // Possible keys: chrome, edge, firefox, ie, opera, safari, '*'
 $support-for: (
-  ie:  9,  // IE 9-11
-  '*': -4, // The last 4 versions of all other browsers.
+  // IE 9-11
+  ie:  9,
+  // The last 4 versions of all other browsers.
+  '*': -4,
 );
 
 
-//
 // Font faces, stacks and sizes.
 //
+// Font styling and line heights are controlled by the several variables that
+// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
+// These variable and mixins are documented on the [Typey
+// homepage](https://github.com/jptaranto/typey).
+//
+// Style guide: sass.variables.typey
 
 // The font size set on the root html element.
 $base-font-size:    16px;
@@ -27,7 +39,7 @@ $base-font-size:    16px;
 // The base line height determines the basic unit of vertical rhythm.
 $base-line-height:  24px;
 
-// The font sizes for h1-h6 expressed as tee shirt sizes.
+// The font sizes in our type hierarchy as tee shirt sizes.
 $font-size: (
   xxl:              32px,
   xl:               24px,
@@ -37,6 +49,41 @@ $font-size: (
   xs:               10px
 );
 
+// Typey allows you to alter font weights site-wide with this map.
+$font-weight: (
+  bold:             bold,
+  medium:           500,
+  normal:           normal,
+  light:            300,
+  lighter:          lighter,
+);
+
+// The following font family declarations use widely available fonts.
+// A user's web browser will look at the comma-separated list and will
+// attempt to use each font in turn until it finds one that is available
+// on the user's computer. The final "generic" font (sans-serif, serif or
+// monospace) hints at what type of font to use if the web browser doesn't
+// find any of the fonts in the list.
+
+// Sans-serif font stacks.
+$verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
+
+// Monospace font stacks.
+// For an explanation of why "sans-serif" is at the end of this list, see
+// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
+$menlo:           Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
+
+// The font faces you specify in the $typefaces map can be used in the
+// typeface() mixin.
+$typefaces: (
+  body: (
+    font-family: $verdana,
+  ),
+  monospace: (
+    font-family: $menlo,
+  ),
+);
+
 // Output a horizontal grid to help with debugging typography.
 $typey-debug: false;
 
@@ -45,22 +92,19 @@ $typey-debug: false;
 $base-unit:         'rem';
 
 // px fallbacks for rem units are needed for IE 8 and earlier.
-$rem-fallback:      if(support-for(ie, 8), true, false);
-
-// The default font family.
-$font-body:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
+$rem-fallback:      false;
 
-// For an explanation of why "sans-serif" is at the end of this list, see
-// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
-$font-monospace:    Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
 
+// Miscellaneous variables
+//
+// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
+//
+// `$include-rtl` controls whether RTL styles are output. If set to `true, a `[dir="rtl"]` ruleset adds RTL language support.
 //
-// Misc
+// weight: 10
 //
+// Style guide: sass.variables.misc
 
-// The amount lists and blockquotes are indented.
-$indent-amount:     2 * $base-font-size;
+$indent-amount: 2 * $base-font-size;
 
-// Adds a [dir='rtl'] selector for RTL language support. You can
-// turn off all RTL CSS by setting the following variable to false.
-$include-rtl:       false;
+$include-rtl: false;
diff --git a/fork-versions/typey-chroma-kss/init/rtl/_rtl.scss b/fork-versions/typey-chroma-kss/init/rtl/_rtl.scss
index cde659f..aa4b91d 100644
--- a/fork-versions/typey-chroma-kss/init/rtl/_rtl.scss
+++ b/fork-versions/typey-chroma-kss/init/rtl/_rtl.scss
@@ -2,19 +2,25 @@ $include-rtl: true !default;
 
 // rtl()
 //
-// Includes Right-To-Left language support. Can be turned off globally by
-// setting `$include-rtl: false;`.
+// Includes Right-To-Left language support by adding a parent selector of
+// `[dir="rtl"]`. Since the dir attribute is usually defined on the html element
+// of a page, using this mixin on a ruleset that matches the html element won't
+// work.
+//
+// Can be turned off globally by setting `$include-rtl: false;`.
+//
+// $selector = '[dir="rtl"]' - The RTL parent selector.
 //
 // Style guide: sass.mixins.rtl
-@mixin rtl() {
+@mixin rtl($selector: '[dir="rtl"]') {
   @if $include-rtl {
     @if & {
-      [dir="rtl"] & {
+      #{$selector} & {
         @content;
       }
     }
     @else {
-      [dir="rtl"] {
+      #{$selector} {
         @content;
       }
     }
diff --git a/fork-versions/typey-chroma-kss/styles-base.scss b/fork-versions/typey-chroma-kss/styles-base.scss
index 374769d..40f414d 100644
--- a/fork-versions/typey-chroma-kss/styles-base.scss
+++ b/fork-versions/typey-chroma-kss/styles-base.scss
@@ -24,6 +24,15 @@
 // Style guide: base
 @import 'base/normalize';
 
+// Forms
+//
+// Form components are specialized design components that are applied to forms
+// or form elements.
+//
+// Weight: 1
+//
+// Style guide: forms
+
 // Components
 //
 // Design components are reusable designs that can be applied using just the CSS