bitstyles 0.8.0 → 0.9.1

data/scss/bitstyles/base/_hr.scss

@@ -3,4 +3,4 @@
 // markup:
 // <hr>
 //
-// Styleguide 4.12
+// Styleguide 2.3

data/scss/bitstyles/base/_images.scss

@@ -3,7 +3,7 @@
 // markup:
 // <img src="assets/images/placeholder_16-9.png">
 //
-// Styleguide 4.11
+// Styleguide 2.4
 
 /* stylelint-disable selector-no-type */
 img {

data/scss/bitstyles/base/_link.scss

@@ -11,22 +11,10 @@
 // :focus         - Focus state
 // :visited       - Visited state
 //
-// Styleguide 4.3
+// Styleguide 2.5
 
 @import '../settings/link';
 
 a {
-  color: $bitstyles-color-link;
-  text-decoration: none;
-  transition: $bitstyles-link-transition;
-
-  &:visited {
-    color: $bitstyles-color-link-visited;
-  }
-
-  &:hover,
-  &:focus {
-    color: $bitstyles-color-link-hover;
-    text-decoration: underline;
-  }
+  @include link;
 }

data/scss/bitstyles/base/_media.scss

@@ -10,7 +10,7 @@
 //   <source src="http://hpr.dogphilosophy.net/test/flac.flac">
 // </audio>
 //
-// Styleguide 4.14
+// Styleguide 2.6
 
 // Video
 //
@@ -21,4 +21,4 @@
 // 	<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
 // </video>
 //
-// Styleguide 4.15
+// Styleguide 2.7

data/scss/bitstyles/base/_typography.scss

@@ -1,10 +1,9 @@
 /* stylelint-disable selector-no-type */
 html {
   font-family: $bitstyles-font-family-body;
-  font-size: px-to-em($bitstyles-font-size-base-small);
-  line-height: 1.5;
-  color: map-get($bitstyles-colors-theme, 'text');
-  background: map-get($bitstyles-colors-theme, 'background');
+  line-height: $bitstyles-line-height-base;
+  color: palette('text');
+  background: palette('background');
 
   &.fonts-loaded {
     font-family: $bitstyles-font-family-body-loaded;
@@ -23,7 +22,7 @@ html {
 // <h5>Header 5</h5>
 // <h6>Header 6</h6>
 //
-// Styleguide 4.1
+// Styleguide 2.8
 
 h1,
 h2,
@@ -34,59 +33,7 @@ h6 {
   @include generic-heading;
 }
 
-h1 {
-  @include font-size($bitstyles-font-size-h1-small);
-}
-
-h2 {
-  @include font-size($bitstyles-font-size-h2-small);
-}
-
-h3 {
-  @include font-size($bitstyles-font-size-h3-small);
-}
-
-h4 {
-  @include font-size($bitstyles-font-size-h4-small);
-}
-
-h5 {
-  @include font-size($bitstyles-font-size-h5-small);
-}
-
-h6 {
-  @include font-size($bitstyles-font-size-h6-small);
-}
-
-@include media-query($bitstyles-typography-breakpoint) {
-  html {
-    font-size: px-to-em($bitstyles-font-size-base, $bitstyles-font-size-base);
-  }
-
-  h1 {
-    @include font-size($bitstyles-font-size-h1, $bitstyles-font-size-base);
-  }
-
-  h2 {
-    @include font-size($bitstyles-font-size-h2, $bitstyles-font-size-base);
-  }
-
-  h3 {
-    @include font-size($bitstyles-font-size-h3, $bitstyles-font-size-base);
-  }
-
-  h4 {
-    @include font-size($bitstyles-font-size-h4, $bitstyles-font-size-base);
-  }
-
-  h5 {
-    @include font-size($bitstyles-font-size-h5, $bitstyles-font-size-base);
-  }
-
-  h6 {
-    @include font-size($bitstyles-font-size-h6, $bitstyles-font-size-base);
-  }
-}
+@include generate-font-sizes('', (html, h1, h2, h3, h4, h5, h6));
 
 // Paragraphs
 //
@@ -95,10 +42,10 @@ h6 {
 // markup:
 // <p>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee.</p>
 //
-// Styleguide 4.2
+// Styleguide 2.9
 
 p {
-  margin: 0 0 $bitstyles-spacing;
+  margin: 0 0 spacing('base');
 }
 
 // Address
@@ -108,7 +55,8 @@ p {
 // markup:
 // <address>Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</address
 //
-// Styleguide 4.4
+// Styleguide 2.10
+
 address {
   font-style: normal;
 }
@@ -123,7 +71,7 @@ address {
 //   <dd>Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon.</dd>
 // </dl>
 //
-// Styleguide 4.5
+// Styleguide 2.11
 
 dt {
   font-weight: $bitstyles-font-weight-bold;
@@ -140,7 +88,7 @@ dt {
 //   <li>Gummies cheesecake oat cake sugar.</li>
 // </ul>
 //
-// Styleguide 4.6
+// Styleguide 2.12
 
 // List - Ordered
 //
@@ -153,7 +101,7 @@ dt {
 //   <li>Gummies cheesecake oat cake sugar.</li>
 // </ol>
 //
-// Styleguide 4.7
+// Styleguide 2.13
 
 // Blockquote
 //
@@ -162,167 +110,167 @@ dt {
 // markup:
 // <blockquote>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly</blockquote>
 //
-// Styleguide 4.8
+// Styleguide 2.14
 
 // Typographic styles
 //
 // Inline elements that have a default typographic representation in a browser.
 //
-// Styleguide 4.9
+// Styleguide 2.15
 
 // strong
 //
 // markup:
 // <strong>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly</strong>
 //
-// Styleguide 4.9.1
+// Styleguide 2.15.1
 
 // em
 //
 // markup:
 // <em>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</em>
 //
-// Styleguide 4.9.2
+// Styleguide 2.15.2
 
 // pre
 //
 // markup:
 // <pre>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</pre>
 //
-// Styleguide 4.9.3
+// Styleguide 2.15.3
 
 // code
 //
 // markup:
 // <code>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</code>
 //
-// Styleguide 4.9.4
+// Styleguide 2.15.4
 
 // kbd
 //
 // markup:
 // <kbd>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</kbd>
 //
-// Styleguide 4.9.5
+// Styleguide 2.15.5
 
 // samp
 //
 // markup:
 // <samp>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</samp>
 //
-// Styleguide 4.9.6
+// Styleguide 2.15.6
 
 // var
 //
 // markup:
 // <var>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</var>
 //
-// Styleguide 4.9.7
+// Styleguide 2.15.7
 
 // cite
 //
 // markup:
 // <cite>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</cite>
 //
-// Styleguide 4.9.8
+// Styleguide 2.15.8
 
 // del
 //
 // markup:
 // <del>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</del>
 //
-// Styleguide 4.9.9
+// Styleguide 2.15.9
 
 // abbr
 //
 // markup:
 // <abbr>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</abbr>
 //
-// Styleguide 4.9.10
+// Styleguide 2.15.10
 
 // i
 //
 // markup:
 // <i>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</i>
 //
-// Styleguide 4.9.11
+// Styleguide 2.15.11
 
 // b
 //
 // markup:
 // <b>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</b>
 //
-// Styleguide 4.9.12
+// Styleguide 2.15.12
 
 // ins
 //
 // markup:
 // <ins>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</ins>
 //
-// Styleguide 4.9.13
+// Styleguide 2.15.13
 
 // dfn
 //
 // markup:
 // <dfn>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</dfn>
 //
-// Styleguide 4.9.14
+// Styleguide 2.15.14
 
 // small
 //
 // markup:
 // <small>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</small>
 //
-// Styleguide 4.9.15
+// Styleguide 2.15.15
 
 // sub
 //
 // markup:
 // <sub>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</sub>
 //
-// Styleguide 4.9.16
+// Styleguide 2.15.16
 
 // sup
 //
 // markup:
 // <sup>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</sup>
 //
-// Styleguide 4.9.17
+// Styleguide 2.15.17
 
 // big
 //
 // markup:
 // <big>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</big>
 //
-// Styleguide 4.9.18
+// Styleguide 2.15.18
 
 // s
 //
 // markup:
 // <s>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</s>
 //
-// Styleguide 4.9.19
+// Styleguide 2.15.19
 
 // strike
 //
 // markup:
 // <strike>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</strike>
 //
-// Styleguide 4.9.20
+// Styleguide 2.15.20
 
 // q
 //
 // markup:
 // <q>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</q>
 //
-// Styleguide 4.9.21
+// Styleguide 2.15.21
 
 // time
 //
 // markup:
 // <time>20:57</time>
 //
-// Styleguide 4.9.22
+// Styleguide 2.15.22
 
 // Table
 //
@@ -349,6 +297,6 @@ dt {
 //   </tbody>
 // </table>
 //
-// Styleguide 4.10
+// Styleguide 2.16
 
 /* stylelint-enable selector-no-type */

data/scss/bitstyles/components/_expander.scss

@@ -1,10 +1,13 @@
 // Expander
 //
-// Needs JS to function. The toggle is an interactive element of some kind (button, link),
-// the body is the content you want to be revealed — it starts at zero height,
-// expands to size of content once active.
+// **Expand or contract to show or hide a longer piece of text**
 //
-// Use the `.o-button` classes on the `.c-expander-toggle` to set size & appearance.
+// This needs JS to function. The `toggle` should be a button element with some meaningful text,
+// the `body` is the content you want to be revealed — it starts at zero height,
+// expanding to the size of its content once active.
+//
+// Use the `.o-button` classes on the `.c-expander-toggle` to ensure consistency
+// with other button elements.
 //
 // markup:
 // <p>
@@ -21,7 +24,7 @@
 //   <p>Powder sweet roll sesame snaps. Sweet roll fruitcake ice cream cheesecake croissant. Candy cupcake cake brownie muffin oat cake gummi bears bear claw. Chupa chups liquorice jelly cotton candy gummies gummies. Jujubes lemon drops candy gummi bears cake cake fruitcake tart pastry. Cake topping candy canes. Lollipop dragée icing chocolate cake sugar plum. Jujubes halvah tootsie roll chocolate gingerbread sweet roll danish. Biscuit bonbon sweet.</p>
 // </div>
 //
-// Styleguide 6.3
+// Styleguide 5.1
 
 .#{$bitstyles-namespace}c-expander-toggle__indicator {
   transform: rotate(180deg);

data/scss/bitstyles/components/_modal.scss

@@ -1,19 +1,24 @@
 /* @define modal */
 // Modal
 //
-// Needs JS to function. This is a modal overlay which animates in & out.
+// **An accessible modal overlay which animates in & out**
 //
-// Uses [A11y-dialog.js](https://github.com/edenspiekermann/a11y-dialog) so it’s really accessible —
-// it requires semantic markup, landmark roles and aria attributes in order to function, and keeps
-// those all updated with the component’s current state.
+// This needs JS to function.
 //
-// Add `data-a11y-dialog-show="dialog_ID"` to a button to make that the trigger to open a modal.
+// Set modal size using the usual layout classes e.g. `.l-content`. At smaller screensizes
+// the modal becomes fullwidth.
 //
-// Can be closed by clicking the darkened overlay, the close button in the top right (or any button
-// with the `data-a11y-dialog-hide` attribute), or hitting the escape key.
+// The example here uses [A11y-dialog.js](https://github.com/edenspiekermann/a11y-dialog)
+// so it’s really accessible — it requires semantic markup, landmark roles and aria
+// attributes in order to function, and keeps those all updated with the component’s
+// current state. The basic layout & appearance styles should still function even if you’re using
+// a different JS modal component.
 //
-// Sizing is controlled by the usual layout classes e.g. `.l-content`, except at smaller screensizes
-// where the modal becomes fullwidth.
+// If you’re using A11y-dialog:
+// - Add `data-a11y-dialog-show="dialog_ID"` to a button to make that the trigger
+// to open a modal (change the id attribute to be unique!).
+// - Closed the modal by clicking the darkened overlay, the close button in the top right (or any button
+// in the modal’s content which you give the `data-a11y-dialog-hide` attribute), or hitting the escape key.
 //
 // markup:
 //   <main aria-label="Content" id="main" class="l-content">
@@ -35,7 +40,7 @@
 //     </div>
 //   </div>
 //
-// Styleguide 6.1
+// Styleguide 5.2
 
 @import '../settings/modal';
 
@@ -51,12 +56,12 @@
   bottom: 0;
   left: 0;
   z-index: 10;
+  cursor: pointer;
   background: $bitstyles-modal-overlay-color;
   transition: all $bitstyles-modal-transition-duration $bitstyles-modal-transition-easing;
   -webkit-backface-visibility: hidden; // stylelint-disable-line property-no-vendor-prefix
   backface-visibility: hidden;
   will-change: $bitstyles-modal-will-change;
-  cursor: pointer;
 
   [aria-hidden="true"] & {
     @include modal-is-hidden;
@@ -73,8 +78,8 @@
   width: 100%;
   height: 100%;
   max-height: 100vh;
-  padding-top: $bitstyles-spacing;
-  padding-bottom: $bitstyles-spacing;
+  padding-top: $bitstyles-modal-padding;
+  padding-bottom: $bitstyles-modal-padding;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
   background-color: $bitstyles-modal-background-color;
@@ -96,7 +101,7 @@
 
 @include media-query($bitstyles-modal-breakpoint) {
   .#{$bitstyles-namespace}c-modal__content {
-    width: calc(100% - 2 * #{$bitstyles-spacing});
+    width: calc(100% - 2 * #{$bitstyles-modal-padding});
     height: auto;
     transition: all $bitstyles-modal-transition-duration $bitstyles-modal-transition-easing, visibility 0 $bitstyles-modal-transition-easing;
 
@@ -109,25 +114,35 @@
 
 .#{$bitstyles-namespace}c-modal__close {
   position: absolute;
-  top: $bitstyles-spacing;
-  right: $bitstyles-spacing;
+  top: $bitstyles-modal-padding;
+  right: $bitstyles-modal-padding;
 }
 
 // Modal dialog
 //
-// Needs JS to function. This is a modal dialog overlay which animates in & out.
+// **An accessible modal overlay which animates in & out**
+//
+// This needs JS to function.
 //
-// As with the standard modal it uses [A11y-dialog.js](https://github.com/edenspiekermann/a11y-dialog) so it’s really accessible —
-// it requires semantic markup, landmark roles and aria attributes in order to function, and keeps
-// those all updated with the component’s current state.
+// Set modal size using the usual layout classes e.g. `.l-content`. At smaller screensizes
+// the modal becomes fullwidth.
 //
-// Add `data-a11y-dialog-show="dialog_ID"` to a button to make that the trigger to open a modal.
+// As with the standard modal we’re using [A11y-dialog.js](https://github.com/edenspiekermann/a11y-dialog)
+// so it’s really accessible — it requires semantic markup, landmark roles and aria
+// attributes in order to function, and keeps those all updated with the component’s
+// current state. The basic layout & appearance styles should still function even if you’re using
+// a different JS modal component.
 //
-// Can be closed by clicking the darkened overlay, hitting the escape key, or by selecting one of the cancel/ok buttons.
-// Different animations can be defined for each of the options.
+// Using the `modal-variation` mixin we can provide different animations depending
+// on which of several buttons in the modal content the user clicks. Here we have
+// ‘cancel’ and ‘ok’ buttons, with animations to emphasise the meaning of the chosen action
+// (use JS to add the correct class to the modal element based on which button is clicked).
 //
-// Sizing is controlled by the usual layout classes e.g. `.l-content`, except at smaller screensizes
-// where the modal becomes fullwidth.
+// If you’re using A11y-dialog:
+// - Add `data-a11y-dialog-show="dialog_ID"` to a button to make that the trigger
+// to open a modal (change the id attribute to be unique!).
+// - Closed the modal by clicking the darkened overlay, the close button in the top right (or any button
+// in the modal’s content which you give the `data-a11y-dialog-hide` attribute), or hitting the escape key.
 //
 // markup:
 //   <main aria-label="Content" id="main" class="l-content">
@@ -148,7 +163,7 @@
 //     </div>
 //   </div>
 //
-// Styleguide 6.2
+// Styleguide 5.3
 
 @mixin modal-variation($state) {
   .#{$bitstyles-namespace}c-modal--animation-#{$state} {