archetype 0.0.1.pre.13 → 1.0.0.alpha.1

data/stylesheets/archetype/config/_units.scss

@@ -0,0 +1,2 @@
+// units
+$CONFIG_UNIT_FORCE_INT: true !default;  // force units to be whole integers. if set to strict, $abuse flags won't work [false|true|strict]

data/stylesheets/archetype/config/_vars.scss

@@ -0,0 +1,10 @@
+$archetype-glyph-selector: null !default;
+$archetype-pseudo-selector: null !default;
+$archetype-placeholder-registry: () !default;
+
+// TODO - not sure if these should be defaulted or not, who knows?
+$archetype-current-value: null !global;
+$archetype-origin-function: null !global;
+
+$CORE_GLYPH_SELECTOR_VAR: '$archetype-glyph-selector';
+$CORE_GLYPH_SELECTOR_VAR: '$archetype-pseudo-selector';

data/stylesheets/archetype/hacks/_core.scss

@@ -0,0 +1,4 @@
+// register module
+$a-blackhole: register-archetype-module(archetype/hacks);
+
+@import "hacks";

data/stylesheets/archetype/hacks/_hacks.scss

@@ -0,0 +1,160 @@
+// @category  hacks
+
+$a-blackhole: require-archetype-modules(archetype/config);
+
+// hack to support negative margins in legacy IE
+// @mixin     hack-negative-margin
+@mixin hack-negative-margin() {
+  @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) {
+    @include has-layout();
+    position: relative;
+  }
+}
+
+// max-height hack
+// @mixin     max-height
+// @param     $value {String} the height
+@mixin max-height($value) {
+  @include hacked-maximum(height, $value);
+}
+
+// max-width hack
+// @mixin     max-width
+// @param     $value {String} the width
+@mixin max-width($value) {
+  @include hacked-maximum(width, $value);
+}
+
+// generic max-* hack wrapper
+// @mixin     hacked-maximum
+// @param     $property {String} property [height|width]
+// @param     $value {String} the value
+@mixin hacked-maximum($property, $value) {
+  max-#{$property}: $value;
+  @include underscore-hack($property, auto, $value);
+}
+
+// helper to create a :before pseudo element
+// @mixin     before
+// @param     $content {String} the content to set on the element
+// @content
+@mixin before($content: false) {
+  @include -archetype-pseudo($placement: before, $content: $content) {
+    @content;
+  };
+}
+
+// helper to create a :after pseudo element
+// @mixin     after
+// @param     $content {String} the content to set on the element
+// @content
+@mixin after($content: false) {
+  @include -archetype-pseudo($placement: after, $content: $content) {
+    @content;
+  };
+}
+
+// creates a cross-browser pseudo before/after element
+// @mixin     after
+// @param     $content {String} the content to set on the element
+// @content
+@mixin -archetype-pseudo($placement: before, $content: false) {
+  $selector: '&:#{$placement}';
+  @include ie-pseudo($placement: $placement, $content: $content);
+  $archetype-pseudo-selector: if($archetype-pseudo-selector, '#{$selector}, #{$archetype-pseudo-selector}', $selector) !global;
+  #{$archetype-pseudo-selector} {
+    @if $content {
+      content: $content;
+    }
+    @content;
+  }
+}
+
+// proxy for ie-pseudo
+// @mixin     ie-pseudo-before
+// @param     $styles {String} the styles to apply to the pseudo-element
+// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param     $name {String} the name of the element
+// @content
+@mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
+  @include ie-pseudo($styles, $content, before, $name) {
+    @content;
+  }
+}
+
+// proxy for ie-pseudo
+// @mixin     ie-pseudo-after
+// @param     $styles {String} the styles to apply to the pseudo-element
+// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param     $name {String} the name of the element
+// @content
+@mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
+  @include ie-pseudo($styles, $content, after, $name) {
+    @content;
+  }
+}
+
+// this creates a one-time executing expression that inserts an element relative to `this` element.
+// this allows some level of support for :before/:after in IE6/7
+// inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
+// @mixin     ie-pseudo
+// @param     $styles {String} the styles to apply to the pseudo-element
+// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param     $placement {String} [before|after] simulate :before or :after behavior
+// @param     $name {String} the name of the element
+// @param     $uid {String} a custom, unique identifier for the generate element
+// @content
+@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '', $uid: false) {
+  $archetype-pseudo-selector: null !global;
+  @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) {
+    $uid: if($uid, $uid, unique('ie-pseudo-'));
+    $archetype-pseudo-selector: '& ##{$uid}' !global;
+    $this: 't';
+    $method: if($placement == before, insertBefore, appendChild);
+    @if $CONFIG_GENERATED_TAG_CSS {
+      $styles: if($styles and not is_null($styles), #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
+    }
+    $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}"),#{$this}.el.id="#{$uid}"'));
+    $method: if($placement == before, insertBefore, appendChild);
+    @if $content and not is_null($content) {
+      $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'));
+    }
+    @if $styles and not is_null($styles) and $styles != '' and $CONFIG_GENERATED_TAG_INLINE {
+      // sets the icon styles on the node if we're using inline styles...
+      $cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'));
+    }
+    // if we're using the insertBefore method, we need to specify the node reference to the first childNode
+    $reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', '');
+    $cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'));
+    $runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once
+
+    // delim with a single comma, no spaces
+    $cmd: list-join($cmd, ',');
+
+    // we execute in a setTimeout to decouple from the current UI thread
+    //  this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet
+    //  http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/
+    *zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this)));
+
+    // if we're NOT using inline styles...
+    @if not $CONFIG_GENERATED_TAG_INLINE and $styles and not is_null($styles)  {
+      // output it on the generated selector
+      #{$archetype-pseudo-selector} {
+        @include to-styles(-style-string-to-map(unquote($styles)));
+        @content;
+      }
+    }
+  }
+}
+
+// a hack that allows elements with transparent backgrounds to be focusable in IE
+// @mixin     transparent-focusable
+// @param     $url {String} an optional URL to point to an image (not required)
+// @param     $data {String} an optional data URI for a transparent image (not required)
+@mixin transparent-focusable($url: url(https://), $data: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') {
+  $bg: (transparent);
+  background: append($bg, $data);
+  @if $url {
+    @include target-browser(ie lte 7, background, append($bg, $url));
+  }
+}

data/stylesheets/archetype/hacks/_init.scss

@@ -0,0 +1,2 @@
+$a-blackhole: require-archetype-modules(archetype/hacks);
+

data/stylesheets/archetype/styleguide/_core.scss

@@ -0,0 +1,4 @@
+// register module
+$a-blackhole: register-archetype-module(archetype/styleguide);
+
+@import "styleguide";

data/stylesheets/archetype/styleguide/_init.scss

@@ -0,0 +1 @@
+$a-blackhole: require-archetype-modules(archetype/styleguide);

data/stylesheets/archetype/styleguide/_styleguide.scss

@@ -7,35 +7,58 @@
 // @param     $exclude {List} a list of styles to exclude from output
 // @param     $state {String} a specific state to output
 // @param     $theme {String} the theme name
-@mixin styleguide($is: (), $is-2: false, $is-3: false, $is-4: false, $is-5: false, $is-6: false, $is-7: false, $is-8: false, $is-9: false, $is-10: false, $exclude: (), $state: false, $theme: $CONFIG_THEME) {
+// @param     $here {Boolean} if true, will force the content to be output in the current context, and not extended
+// @content
+@mixin styleguide($is: (), $is-2: false, $is-3: false, $is-4: false, $is-5: false, $is-6: false, $is-7: false, $is-8: false, $is-9: false, $is-10: false, $exclude: (), $state: null, $theme: $CONFIG_THEME, $here: null) {
   $definition: compact($is, $is-2, $is-3, $is-4, $is-5, $is-6, $is-7, $is-8, $is-9, $is-10);
   @if length($definition) > 0 {
-    $styles: styleguide($definition, $state, $theme);
-    // output a debug message
-    @include debug-message("[archetype:styleguide:begin] --- #{$definition} ---");
-    // generate actual styles
-    @include to-styles($styles, $exclude: $exclude);
-    // more debugging
-    @include debug-message("[archetype:styleguide:end]   --- #{$definition} ---");
+    $styles: _styleguide($definition, $state, $theme);
+    // output the styles
+    $archetype-origin-function: styleguide !global;
+    @include to-styles($styles, $exclude: $exclude, $here: $here) {
+      @content;
+    };
+    $archetype-origin-function: null !global;
   }
 }
 
+// returns the styleguide object
+// @function  styleguide
+// @param     $is ... $is-10   {List} a descriptive definition of the element, must contain an ID and optionally any modifiers e.g. `large primary button`
+// @param     $exclude {List} a list of styles to exclude from output
+// @param     $state {String} a specific state to output
+// @param     $theme {String} the theme name
+@function styleguide($is: (), $is-2: false, $is-3: false, $is-4: false, $is-5: false, $is-6: false, $is-7: false, $is-8: false, $is-9: false, $is-10: false, $exclude: (), $state: null, $theme: $CONFIG_THEME) {
+  $definition: compact($is, $is-2, $is-3, $is-4, $is-5, $is-6, $is-7, $is-8, $is-9, $is-10);
+  @return _styleguide($definition, $state, $theme);
+}
+
 // output the difference between two styelguide invocations
 // @mixin     styleguide-diff
 // @param     $original {List} the original styleguide reference to compare to
 // @param     $other {List} the other styleguide reference
 // @param     $exclude {List} a list of styles to exclude from output
 // @param     $theme {String} the theme name
-@mixin styleguide-diff($original, $other, $exclude: (), $theme: $CONFIG_THEME) {
-  $original: compact($original, nil);
-  $other: compact($other, nil);
-  $diff: styleguide-diff($original, $other, $theme);
+// @content
+@mixin styleguide-diff($original, $other, $exclude: ()) {
+  $diff: styleguide-diff($original, $other);
   @if length($diff) > 0 {
-    // output a debug message
-    @include debug-message("[archetype:styleguide:diff:begin] --- `#{$original}` vs `#{$other}` ---");
-    // generate actual styles
-    @include to-styles($diff, $exclude: $exclude);
-    // more debugging
-    @include debug-message("[archetype:styleguide:diff:end]   --- `#{$original}` vs `#{$other}` ---");
+    // output the styles
+    $archetype-origin-function: styleguide-diff !global;
+    @include to-styles($diff, $exclude: $exclude, $meta: (origin: styleguide-diff)) {
+      @content;
+    };
+    $archetype-origin-function: null !global;
   }
 }
+
+// checks to see whether or not a component should be registered
+// @function  should-register-component
+// @param     $component-id {String} the component identifier
+// @param     $extension-id {String} the extension identifier
+// @return    {Boolean} whether or not the component should be registered
+@function should-register-component($component-id, $extension-id: null) {
+  $component-exists: if($extension-id, styleguide-component-exists($component-id, $CONFIG_THEME), styleguide-component-exists($component-id, $CONFIG_THEME, $extension-id));
+  $component-excluded: index($CONFIG_THEME_EXCLUDE, $component-id);
+  @return not ($component-exists or $component-excluded);
+}

data/stylesheets/archetype/ui/_accessibility.scss

@@ -0,0 +1,41 @@
+// @category   ui/accessibility
+
+// throw an error if archetype/ui has not been registered
+$a-blackhole: require-archetype-modules(archetype/ui);
+
+// hide element visibly but preserve screen-reader support
+// @mixin     hide-element
+// @credit    Jonathan Snook
+// @link      http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin hide-element() {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  @include target-browser(ie lte 7, clip, rect(1px 1px 1px 1px));
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// reverse hide-element and make the element visible again
+// @mixin     unhide-element
+// @see       hide-element
+// @param     $position {String} value for the position property
+// @param     $height {String} value for the height property
+// @param     $width {String} value for the width property
+// @param     $overflow {String} value for the overflow property
+@mixin unhide-element($position: static, $height: auto, $width: auto, $overflow: visible) {
+  position: $position !important;
+  height: $height;
+  width: $width;
+  overflow: $overflow;
+  clip: auto;
+}
+
+// a method for removing default styling from a button
+// @mixin     unstyled-button
+@mixin unstyled-button() {
+  background: none;
+  border: none;
+  padding: 0;
+  @include appearance(none);
+}

data/stylesheets/archetype/ui/_breakpoints.scss

@@ -0,0 +1,19 @@
+// @category   ui/breakpoints
+
+// wraps the content block in a breakpoint media query
+// @mixin     breakpoint
+// @param     $key {String} the breakpoint to use
+// @content
+@mixin breakpoint($key) {
+  $breakpoint: get-breakpoint($key);
+  @if $breakpoint {
+    @media #{$breakpoint} {
+      /* [archetype:breakpoint:begin] --- #{$key} --- */
+      @content;
+      /* [archetype:breakpoint:end] --- #{$key} --- */
+    }
+  }
+  @else {
+    @warn "[archetype:breakpoint] could not find a breakpoint for `#{$key}`";
+  }
+}

data/stylesheets/archetype/ui/_core.scss

@@ -0,0 +1,10 @@
+// register module
+$a-blackhole: register-archetype-module(archetype/ui);
+
+@import "accessibility";
+@import "breakpoints";
+@import "elements";
+@import "glyphs";
+@import "layout";
+@import "locale";
+@import "scopes";

data/stylesheets/archetype/ui/_elements.scss

@@ -0,0 +1,98 @@
+// @category   ui/elements
+
+// throw an error if archetype/ui has not been registered
+$a-blackhole: require-archetype-modules(archetype/ui);
+
+// computes the border position to use
+// @function  _getTriangleBorderDirection
+// @private
+// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
+// @return    {List} the computed border position (e.g. top, left, bottom)
+@function _getTriangleBorderDirection($direction) {
+  @if(length($direction) == 1) {
+    @return opposite-position($direction);
+  }
+  @return if(index($direction, top), bottom, top);
+}
+
+// computes the border width for the triangle
+// @function  _getTriangleBorderWidth
+// @private
+// @param     $width {Number} the width of the arrow
+// @param     $height {Number} the height of the arrow
+// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
+// @return    {List} the computed border widths
+@function _getTriangleBorderWidth($width, $height, $direction) {
+  @if(length($direction) == 1) {
+    // TOP
+    @if($direction == top) {
+      @return 0 ($width/2) $height;
+    }
+    // BOTTOM
+    @else if($direction == bottom) {
+      @return $height ($width/2) 0;
+    }
+    // LEFT
+    @else if($direction == left) {
+      @return ($height/2) $width ($height/2) 0;
+    }
+    // RIGHT
+    @else if($direction == right) {
+      @return ($height/2) 0 ($height/2) $width;
+    }
+  }
+  @else if(index($direction, top)) {
+    // TOP LEFT
+    @if(index($direction, left)) {
+      @return 0 $width $height 0;
+    }
+    // TOP RIGHT
+    @else {
+      @return 0 0 $height $width;
+    }
+  }
+  @else if(index($direction, bottom)) {
+    // BOTTOM LEFT
+    @if(index($direction, left)) {
+      @return $height $width 0 0;
+    }
+    // BOTTOM RIGHT
+    @else {
+      @return $height 0 0 $width;
+    }
+  }
+  @return 0;
+}
+
+// generates a cross-browser triangle using borders
+// @mixin     triangle
+// @param     $direction {String} the direction the arrow is pointing (top, left, top left, etc)
+// @param     $width {Number} the width of the arrow
+// @param     $height {Number} the height of the arrow
+// @param     $color {Color} the color of the arrow
+@mixin triangle($direction: bottom, $width: 1em, $height: false, $color: #aaa) {
+  // if no height was specified, assume it's identical to width
+  @if(not $height) {
+    $height: $width;
+  }
+  // zero out it's content
+  height: 0;
+  width : 0;
+  // IE6 needs some extra love
+  @include target-browser(ie 6, font-size, 0);
+  @include target-browser(ie 6, line-height, 0);
+  border: {
+    // for IE6, transparent borders are simulated using `dashed` styles instead of a chroma filter
+    // IE won't render a `dashed` border-style unless (width * 5) >= border-width
+    // since width is always 0, dashed borders aren't rendered
+    // @link http://hedgerwow.appspot.com/demo/arrows
+    style: dashed;
+    // transparent for all other browsers
+    color: transparent;
+    width: _getTriangleBorderWidth($width, $height, $direction);
+    #{_getTriangleBorderDirection($direction)}: {
+      color: $color;
+      style: solid;
+    }
+  }
+}

data/stylesheets/archetype/ui/_glyphs.scss

@@ -0,0 +1,244 @@
+// @category   ui/glyphs
+
+// throw an error if archetype/ui has not been registered
+$a-blackhole: require-archetype-modules(archetype/ui);
+
+// create a stroke line around text (or font icon)
+// @mixin     stroke
+// @param     $width {Number} the width of the stroke
+// @param     $color {Color} the color of the stroke
+// @param     $shadow {List} an additional drop shadow to attach
+@mixin glyph-stroke($width: 1px, $color: black, $shadow: false) {
+  @include box-shadow(compact(0 $width 0 $color, 0 -1*$width 0 $color, $width 0 0 $color, -1*$width 0 0 $color, $shadow));
+}
+
+// computes the glyph icon info
+// @function  glyph-icon
+// @param     $icon {String} the icon name
+// @param     $size {Number} the size of the icon
+// @param     $color {Color} the color of the font
+// @param     $library {String} the glyph library to use
+// @param     $grid {Number|String} the grid to use (defaults to a smart selection, use `preferred` to always use the first (preferred) grid option)
+@function glyph-icon($icon, $size: default, $color: inherit, $library: default, $grid: null) {
+  $char-mapping: null;
+  $char-code: null;
+  // check that the library is valid, if not, throw a warning and use the default
+  $library: get-glyph-library($library);
+  // if we have an icon...
+  @if $icon {
+    // if it looks like it's a character code...
+    @if looks-like-character-code($icon) {
+      // just use it
+      $char-code: $icon;
+    }
+    // otherwise, we'll look up the character code from the library mapping
+    @else {
+      $char-mapping: map-get(map-get($library, mappings), $icon);
+      @if $char-mapping {
+        @if type-of($char-mapping) == map {
+          $char-code: map-get($char-mapping, char) or $char-mapping;
+          $char-code: get-runtime-locale-value($char-code);
+        }
+        @else {
+          $char-code: $char-mapping;
+        }
+      }
+    }
+  }
+  // if we couldn't find a valid character code (and we were asked to output an icon)...
+  @if $char-code == null and $icon != false {
+    // throw a warning and be done with it
+    @warn "[archetype:glyph] could not find character mapping for `#{icon}`";
+  }
+  // otherwise continue on
+  @if $size == default {
+    $default-size: null;
+    @if $icon and type-of($char-mapping) == map {
+      $default-size: map-get($char-mapping, size);
+    }
+    $size: $default-size or 100%;
+  }
+
+  // choose which grid size to use
+  $grids: map-get($library, grids);
+  @if $grid == preferred {
+    $grid: nth(-archetype-list($grids), 1);
+  }
+  @else if not ($grid and index(-archetype-list($grids), $grid)) {
+    $grid: choose-best-glyph-grid($grids, $size);
+  }
+
+  $version: map-get($library, version);
+
+  $name: archetype-namespace(map-get($library, name));
+  @if $grid {
+    $name: "#{$name}_#{$grid}";
+  }
+
+  $font-family: unquote(if($version, "'#{$name}-#{$version}', ", "") + "'#{$name}'");
+  $font-weight: map-get($library, weight) or $CONFIG_GLYPHS_WEIGHT;
+  $font-style: map-get($library, style) or $CONFIG_GLYPHS_STYLE;
+
+  @return (
+    char-code:    $char-code,
+    font-family:  $font-family,
+    font-weight:  $font-weight,
+    font-style:   $font-style,
+    font-size:    $size,
+    color:        $color
+  );
+}
+
+// create a glyph icon
+// @mixin     glyph-icon
+// @param     $icon {String} the icon name
+// @param     $size {Number} the size of the icon
+// @param     $color {Color} the color of the font
+// @param     $placement {String} where to place the icon [before|after|inline]
+// @param     $ie-styles {String} styles to apply to IE6/7
+// @param     $ie-uid {String} a custom, unique identifier for the generate IE6/7 element
+// @param     $library {String} the glyph library to use
+// @param     $grid {Number|String} the grid to use (defaults to a smart selection, use `preferred` to always use the first (preferred) grid option)
+// @content
+@mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false, $ie-uid: false, $library: default, $grid: null, $smoothing: $CONFIG_GLYPHS_SMOOTHING) {
+  $icons: -archetype-list($icon);
+  // compute the glyph info
+  $glyph-info: null;
+  $char-codes: ();
+  // allow multiple glyph character codes, but we can only use the styles for the first (primary) glyph
+  // for each icon...
+  @each $icon in $icons {
+    // compute it's info
+    $info: glyph-icon($icon: $icon, $size: $size, $color: $color, $library: $library, $grid: $grid);
+    // if the info is good...
+    @if $info {
+      $char-codes: append($char-codes, unquote(map-get($info, char-code)), space);
+      @if not $glyph-info {
+        $glyph-info: $info;
+      }
+    }
+  }
+
+  $archetype-glyph-selector: null !global;
+
+  @if $glyph-info and (length($char-codes) > 0) {
+    $char-codes: "#{$char-codes}";
+    $selector: if(index(before after, $placement), '&:#{$placement}', '&');
+    $archetype-glyph-selector: $selector !global;
+
+    @if $selector != '&' {
+      #{$selector} {
+        content: $char-codes;
+      }
+      @include ie-pseudo($styles: $ie-styles, $content: $char-codes, $placement: $placement, $name: glyph, $uid: $ie-uid);
+      @if $archetype-pseudo-selector {
+        $archetype-glyph-selector: '#{$selector}, #{$archetype-pseudo-selector}' !global;
+      }
+    }
+
+    // apply it to all selector contexts
+    #{$archetype-glyph-selector} {
+      // things that are likely not to change...
+      @include to-styles((
+        font-family:              map-get($glyph-info, font-family),
+        font-weight:              map-get($glyph-info, font-weight),
+        font-style:               map-get($glyph-info, font-style),
+        text-decoration:          none,           // prevents a double underline in firefox
+        display:                  inline-block,   // prevents the icon from being underlined in most browsers
+        speak:                    none,
+        -moz-osx-font-smoothing:  if($smoothing, grayscale, null),
+        -webkit-font-smoothing:   if($smoothing, antialiased, null)
+      ));
+
+      // things that are likely to change more often...
+      @include to-styles((
+        font-size:  map-get($glyph-info, font-size),
+        color:      map-get($glyph-info, color)
+      )) {
+        // pass the block context here
+        @content;
+      };
+    }
+  }
+}
+
+// generates all `@font-face` definitions for all the potential glyph libraries
+// @mixin     glyph-libraries
+// @param     $only {List} if set, only use the libraries defined in this list
+@mixin glyph-libraries($only: null) {
+  $only: if($only == null, $only, -archetype-list($only));
+  // the font-face mixin will likely change in a future version, keep an eye on this
+  // https://github.com/chriseppstein/compass/issues/867
+
+  @each $key, $library in get-all-glyph-libraries() {
+    @if not $only or list($only, $key) {
+      $library: get-glyph-library($key);
+      $name_raw:  archetype-namespace(map-get($library, name));
+      $files:     map-get($library, files);
+      $weight:    map-get($library, weight) or $CONFIG_GLYPHS_WEIGHT;
+      $style:     map-get($library, style) or $CONFIG_GLYPHS_STYLE;
+      $version:   map-get($library, version);
+      $path:      map-get($library, path);
+      $svg-id:    map-get($library, svg-id) or $name_raw;
+      $grids:     -archetype-list(map-get($library, grids));
+
+      $inlined:   map-get($files, inline);
+      @if $inlined == null {
+        $inlined: $CONFIG_GLYPHS_INLINE_FONTS;
+      }
+
+      $output-fallback: $CONFIG_GLYPHS_OUTPUT_FALLBACK;
+
+      $subs: map-merge($library, (
+        path: str-substitute($path, (version: $version)),
+        svg-id: $svg-id
+      ));
+
+      // files
+      $files_eot_raw: str-substitute(map-get($files, eot), $library);
+      $files_std_raw: map-get($files, std);
+
+      @each $grid in $grids {
+        $name: $name_raw;
+        $subs: map-merge($subs, (grid: $grid));
+
+        $files_eot: if($files_eot_raw and $files_eot_raw != '', quote(str-substitute($files_eot_raw, $subs)), false);
+        $files_std: ();
+        $files: ();
+        @each $file in $files_std_raw {
+          $file: quote(str-substitute($file, $subs));
+          $files_std: append($files_std, $file);
+          // keep track of the file for later...
+          $files: append($files, $file);
+        }
+
+        // decide if we're using inline (data URI) files
+        $files_std: if($inlined, inline-font-files($files_std...), font-files($files_std...));
+
+        @if $grid {
+          $name: "#{$name}_#{$grid}";
+          // output the fallback @font-face
+          @if $output-fallback {
+            @include font-face($name_raw, $files_std, $files_eot, $weight, $style);
+            @include font-face('#{$name_raw}-#{$version}', $files_std, $files_eot, $weight, $style);
+          }
+        }
+        @if $output-fallback or not $version {
+          @include font-face($name, $files_std, $files_eot, $weight, $style);
+        }
+        @if $version {
+          // output the @font-face set with a versioned family name
+          // this will help avoid collisions when multi-app CSS is loaded on a single page
+          @include font-face('#{$name}-#{$version}', $files_std, $files_eot, $weight, $style);
+        }
+        $output-fallback: false;
+      }
+    }
+  }
+}
+
+// here for back-compat only
+@mixin base-glyph {
+  @warn "the `base-glyph` mixin will be deprecated soon. instead use the `glyph-libraries` mixin";
+  @include glyph-libraries;
+}