docks_theme_api 1.0.2

data/source/structures/sidebar/sidebar.js

@@ -0,0 +1,69 @@
+const classes = {
+  base: "sidebar",
+  toggler: "sidebar__toggler"
+};
+
+const states = {
+  base: { active: `${classes.base}--is-active` }
+};
+
+var Sidebar, root, show, hide, toggle, check_for_sidebar_state_change;
+
+//*
+// Reveals the sidebar.
+
+show = () => {
+  root.classList.add(states.base.active);
+  setTimeout(() => { document.addEventListener("click", check_for_sidebar_state_change); }, 0);
+};
+
+//*
+// Hides the sidebar.
+
+hide = () => {
+  document.removeEventListener("click", check_for_sidebar_state_change);
+  root.classList.remove(states.base.active);
+};
+
+//*
+// Toggles the visibility of the sidebar.
+
+toggle = () => {
+  return Sidebar.is_active ? hide() : show();
+};
+
+//*
+// Captures all clicks when the sidebar is active and checks whether or not the
+// sidebar should change its visibility. If the sidebar is clicked on, it should
+// remain open — otherwise, it should close.
+//
+// @param {Object} event - The `click` event on the `document`.
+// @private
+
+check_for_sidebar_state_change = (event) => {
+  if(!$(event.target).closest(`.${classes.base}`).length) { hide(); }
+};
+
+//*
+// The global sidebar object. Use this method for manually updating the state of
+// the sidebar; however, note that click events on the toggler and when the
+// sidebar is open are handled automatically by the component itself.
+
+Sidebar = {
+  show,
+  hide,
+  toggle,
+
+  get is_active() {
+    return root.classList.contains(states.base.active);
+  },
+
+  init() {
+    root = document.querySelector(`.${classes.base}`);
+    if(!root) { return; }
+
+    document.querySelector(`.${classes.toggler}`).addEventListener("click", toggle);
+  }
+};
+
+export default Sidebar;

data/source/structures/sidebar/sidebar.scss

@@ -0,0 +1,79 @@
+//        ___                 _____        ___                      ___          ___
+//       /  /\      ___      /  /::\      /  /\        _____       /  /\        /  /\
+//      /  /:/_    /  /\    /  /:/\:\    /  /:/_      /  /::\     /  /::\      /  /::\
+//     /  /:/ /\  /  /:/   /  /:/  \:\  /  /:/ /\    /  /:/\:\   /  /:/\:\    /  /:/\:\
+//    /  /:/ /::\/__/::\  /__/:/ \__\:|/  /:/ /:/_  /  /:/~/::\ /  /:/~/::\  /  /:/~/:/
+//   /__/:/ /:/\:\__\/\:\_\  \:\ /  /:/__/:/ /:/ /\/__/:/ /:/\:/__/:/ /:/\:\/__/:/ /:/___
+//   \  \:\/:/~/:/  \  \:\/\  \:\  /:/\  \:\/:/ /:/\  \:\/:/~/:|  \:\/:/__\/\  \:\/:::::/
+//    \  \::/ /:/    \__\::/\  \:\/:/  \  \::/ /:/  \  \::/ /:/ \  \::/      \  \::/~~~~
+//     \__\/ /:/     /__/:/  \  \::/    \  \:\/:/    \  \:\/:/   \  \:\       \  \:\
+//       /__/:/      \__\/    \__\/      \  \::/      \  \::/     \  \:\       \  \:\
+//       \__\/                            \__\/        \__\/       \__\/        \__\/
+
+//*
+// @pattern Sidebar
+// @group Partials
+//
+// The main sidebar for the page. This sidebar is activated by a toggle
+// (`sidebar__toggler`) and slides over the main content (without moving the
+// main content).
+//
+// @since 1.0.0
+
+//*
+// The main piece of the sidebar. This provides the visual backing of the
+// sidebar and manages the reveal/ hide transition.
+
+.sidebar {
+  // position
+  position: absolute;
+  left: 0; top: 0;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+  transition: transform 0.2s ease;
+  max-width: 15rem;
+
+  // box model
+  display: flex;
+  height: 100vh;
+
+  // backdrop
+  background-color: ui-color(white);
+  @include default(box-shadow);
+
+  @include after(40rem) {
+    position: static;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+//*
+// The state that is added by the JavaScript component when the sidebar is
+// visible.
+
+.sidebar--is-active {
+  transform: translate3d(0, 0, 0);
+}
+
+
+
+//*
+// The container for the item that should activate the sidebar. The JavaScript
+// component will look for any instances of this class and will attach `click`
+// handlers that that toggle the sidebar's visibility.
+
+.sidebar__toggler {
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  // @include after(40rem) {
+  //   display: none;
+  // }
+}

data/source/utilities/builder/builder.js

@@ -0,0 +1,138 @@
+import Cache from "~utilities/dom_cache";
+
+//*
+// @pattern Builder
+// @group Helper
+//
+// A utility for building all instances of factories. This manages the finding
+// and initialization of instances of a factory, cacheing, adding cache
+// retrieval methods, and more.
+
+var Builder, add_retrieval_methods;
+
+//*
+// Adds static methods to `Factory` that allow it to retrieve cached instances
+// from nodes.
+//
+// @private
+//
+// @param {Function} Factory - The factory function to add methods to.
+//
+// @param {Object} [options = {}]
+//
+// @param {String} [options.name] - The name for this Factory. This will
+// be used as the root class name if `options.selector` is not provided.
+//
+// @param {String} [options.selector] - The selector to use to find nodes
+// to call the factory on.
+
+add_retrieval_methods = (Factory, options = {}) => {
+  if(!Factory.for) {
+    Factory.for = (node) => {
+      return Cache($(node).closest(options.selector)[0]).get(options.name);
+    };
+  }
+
+  if(!Factory.within) {
+    Factory.within = (node) => {
+      var results = [], api,
+          nodes = Array.from(node.querySelectorAll(options.selector));
+
+      for(node of nodes) {
+        api = Factory.for(node);
+        if(api) { results.push(api); }
+      }
+
+      return results;
+    };
+  }
+};
+
+//*
+// @object
+
+Builder = {
+
+  //*
+  // Creates all required instances of the passed factory.
+  //
+  // @method
+  //
+  // @param {Function} Factory - The factory function to use.
+  //
+  // @param {Object} [options = {}]
+  //
+  // @param {String} [options.name] - The name for this Factory. This will
+  // be used to set up cacheing if required, and will be used as the root
+  // class name if `options.selector` is not provided.
+  //
+  // @param {String} [options.selector] - The selector to use to find nodes
+  // to call the factory on.
+  //
+  // @param {Boolean} [options.cache = false] - Whether or not to cache the
+  // return result of the factory on the node.
+  //
+  // @param {Function} [options.filter] - A function that determines whether
+  // or not a given node should be used as a root for the `factory`. This
+  // function is passed a single argument, `node`, which is the node to test.
+
+  build(Factory, options = {}) {
+    var node, nodes, api;
+
+    nodes = options.selector ?
+      document.querySelectorAll(options.selector) :
+      document.getElementsByClassName(options.name);
+
+    options.selector = options.selector || `.${options.name}`;
+
+    if(options.cache) {
+      add_retrieval_methods(Factory, options);
+    }
+
+    for(node of Array.from(nodes)) {
+      if(options.filter && !options.filter(node)) { continue; }
+
+      api = Factory(node);
+      if(options.cache) { Cache(node).set(options.name, api); }
+    }
+  },
+
+  //*
+  // Builds the passed factory and caches the result. This is equivalent to:
+  //
+  // ```
+  // Builder.build(Factory, { cache: true });
+  // ```
+  //
+  // See [`Builder.build`](@link) for more details on `options` argument.
+  //
+  // @param {Function} Factory - The factory function to use.
+  // @param {Object} [options = {}]
+  //
+  // @method
+
+  build_and_cache(Factory, options = {}) {
+    options.cache = true;
+    return this.build(Factory, options);
+  },
+
+  //*
+  // Builds the passed factory but, before doing so, ensures that each node
+  // has not been used as an argument for this factory.
+  //
+  // See [`Builder.build`](@link) for more details on `options` argument.
+  //
+  // @param {Function} Factory - The factory function to use.
+  // @param {Object} [options = {}]
+  //
+  // @method
+
+  initialize_once(Factory, options = {}) {
+    return () => {
+      options.filter = (node) => { return !Factory.for(node); };
+      Builder.build_and_cache(Factory, options);
+    };
+  }
+};
+
+export default Builder;

data/source/utilities/builder/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "builder.js"
+}

data/source/utilities/client/client.js

@@ -0,0 +1,7 @@
+var Client;
+
+Client = {
+  name_for(property) { return property; }
+};
+
+export default Client;

data/source/utilities/client/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "client.js"
+}

data/source/utilities/colors/colors.scss

@@ -0,0 +1,112 @@
+//*
+// @pattern Colors
+// @group Helper
+//
+// This stylesheet provides a centralized location to manage colors. Colors
+// should **never** be declared in CSS directly; instead, add the color to the
+// `$COLORS` map (following the "color-modifier" naming convention) and
+// then include it as required using the `color()` function described below.
+//
+// The color component also provides some utility methods to darken (`shade()`)
+// and lighten (`tint()`) colors — use these only for one-offs that are deemed
+// absolutely necessary. For variations that are used in multiple places, add
+// a new variation to the `$COLORS` map.
+
+
+$UI_COLORS: (
+  white: ( base: rgb(255, 255, 255) ),
+  black: ( base: rgb(30, 30, 31) ),
+
+  gray: (
+    light: rgb(242, 242, 243),
+    base: rgb(227, 228, 230),
+    dark: rgb(209, 211, 215),
+    darker: rgb(156, 157, 165),
+    darkest: rgb(110, 111, 122)
+  ),
+
+  yellow: (
+    base: rgb(253, 247, 175),
+    dark: rgb(133, 126, 50)
+  ),
+
+  blue: (
+    base: rgb(183, 214, 246),
+    dark: rgb(140, 194, 251),
+    darker: rgb(98, 121, 144)
+  )
+);
+
+@function ui-color($color, $shade: base) {
+  @return map-get(map-get($UI_COLORS, $color), $shade);
+}
+
+
+$COLORS: (
+  white: rgb(255, 255, 255),
+  black: rgb(30, 30, 31),
+
+  blue-light: rgb(135, 194, 235),
+  blue: rgb(65, 150, 223),
+  blue-dark: rgb(40, 134, 214),
+  blue-darker: rgb(26, 92, 171),
+
+  yellow: rgb(252, 246, 161),
+  yellow-dark: rgb(139, 134, 72),
+
+  slate-light: rgb(55, 57, 60),
+  slate: rgb(51, 54, 58),
+
+  gray-lighter: rgb(248, 248, 248),
+  gray-light: rgb(241, 241, 241),
+  gray: rgb(207, 207, 207),
+  gray-dark: rgb(177, 177, 177),
+  gray-darker: rgb(74, 74, 74)
+);
+
+
+//*
+// Returns the color associated with the passed identifier.
+//
+// @author Chris Sauve (github: lemonmade)
+//
+// @param {String} $color - The color (or other identifier that
+//                          maps to a color) to search for in the
+//                          global `$COLORS` map.
+//
+// @example scss
+// .foo {
+//   background: color(red); // => background: rgb(245, 79, 84);
+// }
+//
+// @returns {Color}
+
+@function color($color) {
+  @return map-get($COLORS, $color);
+}
+
+
+//*
+// Slightly lighten a color.
+//
+// @param {Color} $color - The color to tint.
+// @param {Number} $percentage - Percentage of `$color` in the returned color.
+//
+// @returns {Color}
+
+@function tint($color, $percentage) {
+  @return mix($color, color(white), $percentage);
+}
+
+
+//*
+// Slightly darken a color.
+//
+// @param {Color} $color - The color to shade.
+// @param {Number} $percentage - Percentage of `$color` in the returned color.
+//
+// @returns {Color}
+
+@function shade($color, $percentage) {
+  @return mix($color, color(black), $percentage);
+}

data/source/utilities/defaults/defaults.scss

@@ -0,0 +1,38 @@
+//    ___  ___ ___ _  _   _ _  _____ ___
+//   |   \| __| __/_\| | | | ||_   _/ __|
+//   | |) | _|| _/ _ \ |_| | |__| | \__ \
+//   |___/|___|_/_/ \_\___/|____|_| |___/
+//
+// =========================================================================================
+// =========================================================================================
+//
+// This stylesheet decalres default values for common visual elements. Use this
+// map in place of declaring variables, which could be slightly harder to remember
+// the name of and present more of a risk of naming conflicts. To add a default,
+// add a descriptive key name to the map that references a map that has an `ios`
+// and an `android` key. Then, retrieve the value using `default($property, $platform)`,
+// where platform defaults to iOS. If the property you are adding is also a valid
+// CSS property (i.e., default borders or border radii), you can directly include
+// that declaration in CSS using the mixin version of `default()`.
+
+
+
+$DEFAULTS: (
+  spacing: 1rem,
+  border-radius: 4px,
+  line-height: 1.3,
+  control-size: rem(34),
+  control-size--large: rem(42),
+  control-padding: 0.75rem,
+  box-shadow: 0 0 4px rgba(color(black), 0.3)
+);
+
+
+
+@function default($property) {
+  @return map-get($DEFAULTS, $property);
+}
+
+@mixin default($property) {
+  #{$property}: default($property);
+}

data/source/utilities/dom_cache/dom_cache.js

@@ -0,0 +1,24 @@
+//        ___          ___          ___          ___          ___
+//       /  /\        /  /\        /  /\        /__/\        /  /\
+//      /  /:/       /  /::\      /  /:/        \  \:\      /  /:/_
+//     /  /:/       /  /:/\:\    /  /:/          \__\:\    /  /:/ /\
+//    /  /:/  ___  /  /:/~/::\  /  /:/  ___  ___ /  /::\  /  /:/ /:/_
+//   /__/:/  /  /\/__/:/ /:/\:\/__/:/  /  /\/__/\  /:/\:\/__/:/ /:/ /\
+//   \  \:\ /  /:/\  \:\/:/__\/\  \:\ /  /:/\  \:\/:/__\/\  \:\/:/ /:/
+//    \  \:\  /:/  \  \::/      \  \:\  /:/  \  \::/      \  \::/ /:/
+//     \  \:\/:/    \  \:\       \  \:\/:/    \  \:\       \  \:\/:/
+//      \  \::/      \  \:\       \  \::/      \  \:\       \  \::/
+//       \__\/        \__\/        \__\/        \__\/        \__\/
+
+var Cache;
+
+Cache = (node) => {
+  var $node = $(node);
+
+  return {
+    get(key) { return $node.data(key); },
+    set(key, value) { return $node.data(key, value); }
+  };
+};
+
+export default Cache;

data/source/utilities/dom_cache/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "dom_cache.js"
+}

data/source/utilities/events/events.js

@@ -0,0 +1,25 @@
+//        ___                      ___          ___                   ___
+//       /  /\         ___        /  /\        /__/\         ___     /  /\
+//      /  /:/_       /__/\      /  /:/_       \  \:\       /  /\   /  /:/_
+//     /  /:/ /\      \  \:\    /  /:/ /\       \  \:\     /  /:/  /  /:/ /\
+//    /  /:/ /:/_      \  \:\  /  /:/ /:/_  _____\__\:\   /  /:/  /  /:/ /::\
+//   /__/:/ /:/ /\ ___  \__\:\/__/:/ /:/ /\/__/::::::::\ /  /::\ /__/:/ /:/\:\
+//   \  \:\/:/ /://__/\ |  |:|\  \:\/:/ /:/\  \:\~~\~~\//__/:/\:\\  \:\/:/~/:/
+//    \  \::/ /:/ \  \:\|  |:| \  \::/ /:/  \  \:\  ~~~ \__\/  \:\\  \::/ /:/
+//     \  \:\/:/   \  \:\__|:|  \  \:\/:/    \  \:\          \  \:\\__\/ /:/
+//      \  \::/     \__\::::/    \  \::/      \  \:\          \__\/  /__/:/
+//       \__\/          ~~~~      \__\/        \__\/                 \__\/
+
+var Events = {
+  register(...events) {
+    var event;
+
+    for(event of events) {
+      this.types[event] = event;
+    }
+  },
+
+  types: {}
+};
+
+export default Events;

data/source/utilities/events/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "events.js"
+}

data/source/utilities/font_sizes/font-sizes.scss

@@ -0,0 +1,85 @@
+//        ___      ___          ___                             ___                   ___          ___
+//       /  /\    /  /\        /__/\        ___                /  /\      ___        /  /\        /  /\
+//      /  /:/_  /  /::\       \  \:\      /  /\              /  /:/_    /  /\      /  /::|      /  /:/_
+//     /  /:/ /\/  /:/\:\       \  \:\    /  /:/             /  /:/ /\  /  /:/     /  /:/:|     /  /:/ /\
+//    /  /:/ /:/  /:/  \:\  _____\__\:\  /  /:/             /  /:/ /::\/__/::\    /  /:/|:|__  /  /:/ /:/_
+//   /__/:/ /:/__/:/ \__\:\/__/::::::::\/  /::\            /__/:/ /:/\:\__\/\:\__/__/:/ |:| /\/__/:/ /:/ /\
+//   \  \:\/:/\  \:\ /  /:/\  \:\~~\~~\/__/:/\:\           \  \:\/:/~/:/  \  \:\/\__\/  |:|/:/\  \:\/:/ /:/
+//    \  \::/  \  \:\  /:/  \  \:\  ~~~\__\/  \:\           \  \::/ /:/    \__\::/   |  |:/:/  \  \::/ /:/
+//     \  \:\   \  \:\/:/    \  \:\         \  \:\           \__\/ /:/     /__/:/    |  |::/    \  \:\/:/
+//      \  \:\   \  \::/      \  \:\         \__\/             /__/:/      \__\/     |  |:/      \  \::/
+//       \__\/    \__\/        \__\/                           \__\/                 |__|/        \__\/
+//
+//*
+// @pattern Font Sizes
+// @group Helper
+//
+// The stylesheet exists as a single place to manage all font sizes. To use
+// a font size in your stylesheet, follow this procedure:
+//
+// 1. Add a well-named entry to the `$FONT-SIZES` map with the value set to
+//    the font size for that element.
+//
+// 2. If you wish to include a `font-size` declaration in your stylesheet,
+//    `@include font-size()`, passing it the name of the component to retrieve
+//    the font-size for.
+//
+// 3. Retrieving the actual font-size dimension (for example, to be used in a
+//    calculation to determine necessary padding) should be done by passing the
+//    same argument discussed above to the `font-size` *function*.
+
+
+
+$FONT_SIZES: (
+  heading-1: rem(36),
+  heading-2: rem(30),
+  heading-3: rem(24),
+  heading-4: rem(14),
+  heading-5: rem(20),
+  label: rem(16),
+  paragraph: rem(20),
+  paragraph-small: rem(18),
+  avatar: rem(20),
+  badge: 0.75em,
+  badge--standalone: rem(16),
+  code-block: rem(16),
+  code-block--condensed: rem(14),
+  list-heading: rem(20),
+  select: rem(16),
+  tablist: rem(16),
+  tablist--large: rem(24),
+  control: rem(18)
+);
+
+
+
+//*
+// Retrives the font-size for an element declared in the global
+// `$FONT_SIZES` map. This will not actually add a CSS rule — if you
+// would like the actual `font-size` rule to be printed, use the
+// `@mixin` version. Use this function when you want to retrive the font
+// size for use in other calculations.
+//
+// @param {String} $element - The element whose font-size should be retrieved.
+// @returns {Number}
+
+@function font-size($element) {
+  @return map-get($FONT-SIZES, $element);
+}
+
+
+
+//*
+// Retrives the font-size for an element declared in the global
+// `$FONT_SIZES` map **and** prints the `font-size` rule.
+//
+// @param {String} $element - The element whose font-size should be retrieved.
+//
+// @example
+// .type--heading-1 {
+//   @include font-size(heading-1); // => font-size: 2rem;
+// }
+
+@mixin font-size($element) {
+  font-size: font-size($element);
+}

data/source/utilities/foundation/a11y.scss

@@ -0,0 +1,10 @@
+.helper--visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

data/source/utilities/foundation/base.scss

@@ -0,0 +1,29 @@
+//                    ___          ___          ___
+//       _____       /  /\        /  /\        /  /\
+//      /  /::\     /  /::\      /  /:/_      /  /:/_
+//     /  /:/\:\   /  /:/\:\    /  /:/ /\    /  /:/ /\
+//    /  /:/~/::\ /  /:/~/::\  /  /:/ /::\  /  /:/ /:/_
+//   /__/:/ /:/\:/__/:/ /:/\:\/__/:/ /:/\:\/__/:/ /:/ /\
+//   \  \:\/:/~/:|  \:\/:/__\/\  \:\/:/~/:/\  \:\/:/ /:/
+//    \  \::/ /:/ \  \::/      \  \::/ /:/  \  \::/ /:/
+//     \  \:\/:/   \  \:\       \__\/ /:/    \  \:\/:/
+//      \  \::/     \  \:\        /__/:/      \  \::/
+//       \__\/       \__\/        \__\/        \__\/
+
+html { box-sizing: border-box; }
+
+*,
+*:before,
+*:after { box-sizing: inherit; }
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: color(white);
+  min-height: 100vh;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}