docks_theme_api 1.0.2

data/source/utilities/foundation/icon.scss

@@ -0,0 +1,114 @@
+@mixin icon--recolor($color, $variant: base) {
+  fill: ui-color($color, $variant);
+  stroke: ui-color($color, $variant);
+}
+
+
+.icon {
+  display: inline-block;
+  stroke-width: 2;
+}
+
+$icon--size-medium: rem(24);
+$icon--size-large: rem(28);
+
+.icon--medium {
+  height: $icon--size-medium;
+  width: $icon--size-medium;
+}
+
+.icon--large {
+  height: $icon--size-large;
+  width: $icon--size-large;
+}
+
+
+$icon-action--size: 1.65rem;
+
+.icon--action {
+  height: $icon-action--size;
+  width: $icon-action--size;
+}
+
+$icon-hamburger--width: 2rem;
+$icon-hamburger--slice-height: 4px;
+
+.icon--hamburger {
+  height: $icon-action--size;
+  width: $icon-hamburger--width;
+  position: relative;
+  cursor: pointer;
+  opacity: 0.6;
+  top: 0.2em;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: $icon-hamburger--slice-height;
+    width: 100%;
+    border-radius: ($icon-hamburger--slice-height / 2);
+    background: ui-color(gray, darkest);
+  }
+
+  &:before { top: 0; }
+  &:after { bottom: 0; }
+}
+
+.icon--hamburger__slice {
+  height: $icon-hamburger--slice-height;
+  width: 100%;
+  border-radius: ($icon-hamburger--slice-height / 2);
+  background: ui-color(gray, darkest);
+  position: absolute;
+  top: 50%; left: 0;
+  margin-top: (-0.5 * $icon-hamburger--slice-height);
+}
+
+.icon--gray-darker {
+  @include icon--recolor(gray, darker);
+}
+
+.icon--close {
+  position: relative;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: $icon-hamburger--slice-height;
+    width: 140%;
+    border-radius: ($icon-hamburger--slice-height / 2);
+    background: ui-color(gray, darkest);
+    top: 50%;
+    left: 50%;
+    margin-left: -70%;
+    margin-top: ($icon-hamburger--slice-height / -2);
+  }
+
+  &:before { transform: rotate(45deg); }
+  &:after { transform: rotate(-45deg); }
+}
+
+.icon--disclosure {
+  height: half(default(spacing));
+  width: half(default(spacing));
+  transform: rotate(45deg) translateY(-50%);
+  border-right: 2px solid ui-color(gray, darkest);
+  border-bottom: 2px solid ui-color(gray, darkest);
+  margin-left: quarter(default(spacing));
+}

data/source/utilities/foundation/layout.scss

@@ -0,0 +1,67 @@
+//                    ___                 ___          ___
+//                   /  /\        ___    /  /\        /__/\        ___
+//                  /  /::\      /__/|  /  /::\       \  \:\      /  /\
+//    ___     ___  /  /:/\:\    |  |:| /  /:/\:\       \  \:\    /  /:/
+//   /__/\   /  /\/  /:/~/::\   |  |:|/  /:/  \:\  ___  \  \:\  /  /:/
+//   \  \:\ /  /:/__/:/ /:/\:\__|__|:/__/:/ \__\:\/__/\  \__\:\/  /::\
+//    \  \:\  /:/\  \:\/:/__\/__/::::\  \:\ /  /:/\  \:\ /  /:/__/:/\:\
+//     \  \:\/:/  \  \::/       ~\~~\:\  \:\  /:/  \  \:\  /:/\__\/  \:\
+//      \  \::/    \  \:\         \  \:\  \:\/:/    \  \:\/:/      \  \:\
+//       \__\/      \  \:\         \__\/\  \::/      \  \::/        \__\/
+//                   \__\/               \__\/        \__\/
+
+.grid {
+  display: flex;
+}
+
+.grid--vertically-centered {
+  align-items: center;
+}
+
+.grid--align-right {
+  justify-content: flex-end;
+}
+
+.grid--outside-spacing {
+  margin: default(spacing) 0;
+  padding: 0 default(spacing);
+}
+
+.grid--space-between {
+  justify-content: space-between;
+
+  > .grid__item {
+    flex: 0 1 auto;
+  }
+}
+
+.grid__item {
+  padding: 0 (default(spacing) / 2);
+  flex: 1 1 0%;
+  display: flex;
+  align-items: center;
+
+  &:first-child { padding-left: 0; }
+  &:last-child { padding-right: 0; }
+}
+
+.grid__item--no-flex {
+  flex: 0 0 auto;
+}
+
+.grid__item--half {
+  flex: 0 0 50%;
+}
+
+
+
+
+
+.content {
+  padding: 0 default(spacing);
+  margin: default(spacing) 0;
+}
+
+.content--extra-vertical-spacing {
+  margin: multiply(default(spacing), 3) 0;
+}

data/source/utilities/foundation/page.scss

@@ -0,0 +1,39 @@
+$context: z-index-stacking-context(global,
+  (
+    content: 10,
+    sidebar: 20
+  )
+);
+
+body {
+  background-color: ui-color(gray);
+}
+
+.page {
+  height: 100vh;
+  max-height: 100vh;
+  display: flex;
+}
+
+.page__content,
+.page__sidebar {
+  position: relative;
+}
+
+.page__content {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex: 1 1 0px;
+  @include z-index(content, global);
+  background: color(white);
+
+  > * {
+    flex: 0 0 100%;
+  }
+}
+
+.page__sidebar {
+  @include z-index(sidebar, global);
+  flex: 0 0 auto;
+}

data/source/utilities/foundation/type.scss

@@ -0,0 +1,208 @@
+//        ___      ___          ___                 ___
+//       /  /\    /  /\        /__/\        ___    /  /\
+//      /  /:/_  /  /::\       \  \:\      /  /\  /  /:/_
+//     /  /:/ /\/  /:/\:\       \  \:\    /  /:/ /  /:/ /\
+//    /  /:/ /:/  /:/  \:\  _____\__\:\  /  /:/ /  /:/ /::\
+//   /__/:/ /:/__/:/ \__\:\/__/::::::::\/  /::\/__/:/ /:/\:\
+//   \  \:\/:/\  \:\ /  /:/\  \:\~~\~~\/__/:/\:\  \:\/:/~/:/
+//    \  \::/  \  \:\  /:/  \  \:\  ~~~\__\/  \:\  \::/ /:/
+//     \  \:\   \  \:\/:/    \  \:\         \  \:\__\/ /:/
+//      \  \:\   \  \::/      \  \:\         \__\/ /__/:/
+//       \__\/    \__\/        \__\/               \__\/
+
+@mixin type--default-font-family {
+  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+@mixin type--monospace-font-family {
+  font-family: Consolas, monospace;
+}
+
+body {
+  text-size-adjust: 100%;
+  color: color(slate);
+  @include type--default-font-family;
+}
+
+button,
+input {
+  @include type--default-font-family;
+}
+
+
+
+
+h1, h2, h3, h4, h5, h6, p, .type {
+  margin: 0;
+  font-size: inherit;
+}
+
+@mixin type--heading-1 {
+  font-weight: 400;
+  line-height: 1;
+  color: ui-color(gray, darkest);
+  @include font-size(heading-1);
+}
+
+@mixin type--heading-2 {
+  font-weight: 400;
+  color: ui-color(gray, darkest);
+  @include font-size(heading-2);
+}
+
+@mixin type--heading-3 {
+  font-weight: 400;
+  line-height: 1;
+  color: ui-color(gray, darkest);
+  @include font-size(heading-3);
+}
+
+@mixin type--heading-4 {
+  margin: default(spacing) auto half(default(spacing));
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ui-color(gray, dark);
+  @include font-size(heading-4);
+}
+
+@mixin type--heading-5 {
+  margin: default(spacing) auto half(default(spacing));
+  font-weight: 400;
+  color: ui-color(gray, darkest);
+  @include font-size(heading-5);
+}
+
+@mixin type--paragraph {
+  @include font-size(paragraph);
+  @include default(line-height);
+  font-weight: 300;
+  color: ui-color(black);
+
+  + p {
+    margin-top: (0.75 * default(spacing));
+  }
+
+  > a {
+    display: inline-block;
+    text-decoration: none;
+    color: ui-color(blue, darker);
+    font-weight: normal;
+
+    > span {
+      border-bottom: 2px solid ui-color(blue, dark);
+    }
+
+    > code {
+      color: ui-color(blue, darker);
+      background-color: mix(ui-color(gray, light), ui-color(blue), 80%);
+      border-color: rgba(ui-color(blue, darker), 0.15);
+    }
+  }
+
+  code {
+    @include type--monospace-font-family;
+    display: inline-block;
+    padding: 0.05em 0.25em;
+    font-size: 0.8em;
+    background-color: ui-color(gray, light);
+    color: ui-color(gray, darkest);
+    border: 1px solid ui-color(gray);
+    @include default(border-radius);
+  }
+}
+
+@mixin type--paragraph-small {
+  @include font-size(paragraph-small);
+}
+
+@mixin type--after-paragraph {
+  .type--paragraph + &,
+  .user-type + & {
+    @content;
+  }
+}
+
+
+
+.type--heading-1 { @include type--heading-1; }
+.type--heading-2 { @include type--heading-2; }
+.type--heading-3 { @include type--heading-3; }
+.type--heading-4 {
+  @include type--heading-4;
+}
+
+.type--heading-5 {
+  @include type--heading-5;
+
+  .type--heading-4 + & {
+    margin-top: half(default(spacing));
+  }
+
+  @include type--after-paragraph {
+    margin-top: (1.5 * default(spacing));
+  }
+}
+
+.type--heading-bordered {
+  padding-bottom: default(spacing);
+  margin-bottom: multiply(default(spacing), 1.3);
+  border-bottom: 2px solid ui-color(gray);
+
+  + .section {
+    margin-top: negative(default(spacing));
+  }
+}
+
+.type--paragraph { @include type--paragraph; }
+.type--paragraph-small { @include type--paragraph-small; }
+
+.type-container {
+  h1 { @include type--heading-1; }
+  h2 { @include type--heading-2; }
+  h3 { @include type--heading-3; }
+  h4 { @include type--heading-4; }
+  h5 { @include type--heading-5; }
+
+  p { @include type--paragraph; }
+}
+
+.type-container--small {
+  p { @include type--paragraph-small; }
+}
+
+
+
+.type--display {
+  font-size: 1.3rem;
+  margin-top: 0;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.type--margin-bottom {
+  margin-bottom: default(spacing);
+}
+
+.type--subdued {
+  color: ui-color(gray, dark);
+}
+
+
+
+
+
+
+
+
+
+
+
+.type--code {
+  @include type--monospace-font-family;
+  font-size: 0.95em;
+  word-wrap: break-word;
+}
+
+::selection {
+  background: ui-color(blue);
+}

data/source/utilities/functions/functions.scss

@@ -0,0 +1,127 @@
+//        ___      ___          ___          ___          ___
+//       /  /\    /__/\        /__/\        /  /\        /  /\
+//      /  /:/_   \  \:\       \  \:\      /  /:/       /  /:/_
+//     /  /:/ /\   \  \:\       \  \:\    /  /:/       /  /:/ /\
+//    /  /:/ /:/__  \  \:\  _____\__\:\  /  /:/  ___  /  /:/ /::\
+//   /__/:/ /:/__/\  \__\:\/__/::::::::\/__/:/  /  /\/__/:/ /:/\:\
+//   \  \:\/:/\  \:\ /  /:/\  \:\~~\~~\/\  \:\ /  /:/\  \:\/:/~/:/
+//    \  \::/  \  \:\  /:/  \  \:\  ~~~  \  \:\  /:/  \  \::/ /:/
+//     \  \:\   \  \:\/:/    \  \:\       \  \:\/:/    \__\/ /:/
+//      \  \:\   \  \::/      \  \:\       \  \::/       /__/:/
+//       \__\/    \__\/        \__\/        \__\/        \__\/
+//
+//*
+// @pattern Functions
+// @group Helper
+// @author Chris Sauve (github: lemonmade)
+//
+// Functions simply return a value: they don't actually add a any styles to
+// the compiled stylesheet. Use these to provide solutions to common calculations
+// or Sass operations.
+
+
+
+//*
+// Removes the units from a number.
+//
+// @deprecated 2.1.0
+// @private
+//
+// @param {Number} $value - The number (usually a measurement) that you would
+//                          like to remove units from.
+// @returns {Number}
+//
+// @example
+// $foo: strip-units(4rem); // => 4
+// $bar: strip-units(30%); // => 30
+
+@function strip-units($value) {
+  @return ($value / ($value*0 + 1));
+}
+
+//*
+// Converts the passed value (assumed to be in pixels) to the corresponding `rem`
+// value. This conversion assumes a base font size of `16px`.
+//
+// @param {Number} $value - The pixel value to convert.
+// @returns {Number}
+
+@function rem($value) {
+  @return (strip-units($value) / 16 * 1rem);
+}
+
+//*
+// Halves a given measurement.
+//
+// @param {Number} $measurement - The measurement to halve.
+// @returns {Number}
+// @alias half
+//
+// @example
+// $foo: halve(4rem); // => 2rem
+// $bar: half(36); // => 18
+
+@function halve($measurement) {
+  @return ($measurement / 2);
+}
+
+@function half($measurement) {
+  @return halve($measurement);
+}
+
+//*
+// Quarters a given measurement.
+//
+// @param {Number} $measurement - The measurement to quarter.
+// @returns {Number}
+//
+// @example
+// $foo: quarter(4rem); // => 1rem
+
+@function quarter($measurement) {
+  @return ($measurement / 4);
+}
+
+//*
+// Doubles a given measurement.
+//
+// @param {Number} $measurement - The measurement to double.
+// @returns {Number}
+//
+// @example
+// $foo: double(4rem); // => 8rem
+
+@function double($measurement) {
+  @return ($measurement * 2);
+}
+
+//*
+// Negates a given measurement.
+//
+// @param {Number} $measurement - The measurement to negate.
+// @returns {Number}
+//
+// @example
+// $foo: negative(4rem); // => -4rem
+// $bar: negative(-4rem); // => 4rem
+
+@function negative($measurement) {
+  @return ($measurement * -1);
+}
+
+//*
+// Multiples a given measurement by the provided factor. Use this in those
+// (rare) instances where you need a factor that is not `2`, `0.5`, `0.25`, or
+// `-1` (in which case, use the relevant multiplication function directly).
+//
+// @param {Number} $measurement - The measurement to multiple.
+// @param {Number} $factor      - The multiplication factor.
+// @returns {Number}
+//
+// @example
+// $foo: multiply(4rem, 3); // => 12rem
+// $bar: multiply(4rem, 2); // => 8rem BUT don't do this — use double(4rem) instead
+
+@function multiply($measurement, $factor) {
+  @return ($measurement * $factor);
+}

data/source/utilities/keycodes/keycodes.js

@@ -0,0 +1,23 @@
+const Keycodes = {
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+  ENTER: 13,
+  SPACE: 32,
+
+  get ARROWS() {
+    return [this.LEFT, this.RIGHT, this.UP, this.DOWN];
+  },
+  get NEXT() {
+    return [this.RIGHT, this.DOWN];
+  },
+  get PREVIOUS() {
+    return [this.LEFT, this.UP];
+  },
+  get ACTIVATE() {
+    return [this.SPACE, this.ENTER];
+  }
+};
+
+export default Keycodes;

data/source/utilities/keycodes/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "package.json"
+}

data/source/utilities/markup/markup.js

@@ -0,0 +1,90 @@
+//        ___          ___          ___          ___          ___          ___
+//       /__/\        /  /\        /  /\        /__/|        /__/\        /  /\
+//      |  |::\      /  /::\      /  /::\      |  |:|        \  \:\      /  /::\
+//      |  |:|:\    /  /:/\:\    /  /:/\:\     |  |:|         \  \:\    /  /:/\:\
+//    __|__|:|\:\  /  /:/~/::\  /  /:/~/:/   __|  |:|     ___  \  \:\  /  /:/~/:/
+//   /__/::::| \:\/__/:/ /:/\:\/__/:/ /:/___/__/\_|:|____/__/\  \__\:\/__/:/ /:/
+//   \  \:\~~\__\/\  \:\/:/__\/\  \:\/:::::/\  \:\/:::::/\  \:\ /  /:/\  \:\/:/
+//    \  \:\       \  \::/      \  \::/~~~~  \  \::/~~~~  \  \:\  /:/  \  \::/
+//     \  \:\       \  \:\       \  \:\       \  \:\       \  \:\/:/    \  \:\
+//      \  \:\       \  \:\       \  \:\       \  \:\       \  \::/      \  \:\
+//       \__\/        \__\/        \__\/        \__\/        \__\/        \__\/
+
+import hljs from "../../vendor/highlight";
+
+const [start_tag_test, end_tag_test, contains_end_tag] = [/^<[^\/]/, /^<\//, /<\//];
+
+//*
+// The size of manually re-indented code.
+//
+// @private
+// @type Number
+// @value 2
+
+const INDENTATION_SIZE = 2;
+
+var decode_html_entities, indent, clean, highlight;
+
+decode_html_entities = (string) => {
+  var element = document.createElement("div");
+  element.innerHTML = string.trim();
+
+  return element.childNodes.length === 0 ? "" : (element.childNodes[0].nodeValue || element.innerHTML);
+};
+
+//*
+// Indents HTML markup by finding opening and closing HTML tags.
+//
+// @param {String} code - The randomly-escaped HTML string.
+// @returns {String} The indented string.
+
+indent = (markup) => {
+  var indent_count = -INDENTATION_SIZE,
+      indented_markup = [],
+      markup_lines = markup.split("\n"),
+      markup_line,
+      start_tag,
+      end_tag;
+
+  for(markup_line of markup_lines) {
+    markup_line = markup_line.trim();
+    [start_tag, end_tag] = [start_tag_test.test(markup_line), end_tag_test.test(markup_line)];
+
+    if(start_tag) { indent_count += INDENTATION_SIZE; }
+    indent_count = Math.max(indent_count, 0);
+
+    if(indent_count > 0) {
+      markup_line = `${Array(indent_count + 1).join(" ")}${markup_line}`;
+    }
+
+    indented_markup.push(markup_line);
+    if(end_tag) { indent_count -= INDENTATION_SIZE; }
+    if(!end_tag && contains_end_tag.test(markup_line)) { indent_count -= INDENTATION_SIZE; }
+  }
+
+  return indented_markup.join("\n");
+};
+
+clean = (code, options = {}) => {
+  var leading_spaces;
+
+  if(!code) { return ""; }
+
+  code = decode_html_entities(code);
+  code = code.trim();
+  if(options.collapse_newlines) { code = code.replace(/\n^\s*\n/mg, "\n"); }
+
+  // Kills any leading spaces from each line
+  leading_spaces = code.match(/^\s*/);
+  if(leading_spaces) {
+    code = code.replace(new RegExp(`^\\s{${leading_spaces[0].length}}`, "gm"), "");
+  }
+
+  return code;
+};
+
+highlight = (code, options = {}) => {
+  return hljs.highlight(options.language_code || "html", code).value;
+};
+
+export { decode_html_entities, indent, clean, highlight };

data/source/utilities/markup/package.json

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