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

data/stylesheets/archetype/ui/_init.scss

@@ -0,0 +1,5 @@
+$a-blackhole: require-archetype-modules(archetype/ui);
+
+@include unless-archetype-module-initalized(archetype/ui/glyph-libraries) {
+  @include glyph-libraries;
+}

data/stylesheets/archetype/ui/_layout.scss

@@ -0,0 +1,37 @@
+// @category   ui/layout
+
+// throw an error if archetype/ui has not been registered
+$a-blackhole: require-archetype-modules(archetype/ui);
+
+// additional non-standard compass features required in this module
+@import "compass/layout/stretching";
+
+// makes your element centered vertically and horizontally in a parent element
+// @mixin   centered-box
+@mixin centered-box() {
+  @include stretch();
+  margin: auto;
+}
+
+// mixin for generating a fade box which fades from transparent to white
+// @mixin     fade-box
+// @param     $width {String} the width of the overlay
+// @param     $height {String} the height of the overlay
+// @param     $direction {String} top=vertical left=horizontal
+// @param     $from {Color} the start color
+// @param     $to {Color} the end color
+@mixin fade-box($width: 100%, $height: 100%, $direction: top, $from: rgba(255,255,255,0.4), $to: rgba(255,255,255,1)) {
+  @if support-legacy-browser('ie', '8', $threshold: $critical-usage-threshold) {
+    @if $direction == left {
+      @include ie-filter(gradient(startColorstr=ie-hex-str($from), endColorstr=ie-hex-str($to), GradientType=1));
+    }
+    @else {
+      @include ie-filter(gradient(startColorstr=ie-hex-str($from), endColorstr=ie-hex-str($to)));
+    }
+  }
+  @include background-image(linear-gradient($direction, $from, $to) );
+  @include pseudo-element($width: $width, $height: $height, $position: absolute);
+  text-align: center;
+  bottom: 0;
+  #{if($direction == left, right, left)}: 0;
+}

data/stylesheets/archetype/ui/_locale.scss

@@ -0,0 +1,12 @@
+// @category   ui/locale
+
+// temporarily switch the interface locale
+// @mixin     switch-locale
+// @param     $locale {String} the locale code to switch to
+// @content
+@mixin switch-locale($locale) {
+  // keep track of the current locale, and switch
+  $tmp: switch-locale($locale);
+  @content;
+  $tmp: switch-locale($tmp);
+}

data/stylesheets/archetype/ui/_scopes.scss

@@ -0,0 +1,42 @@
+// @category   ui/scopes
+
+// a mixin to output the current context in a BEM style selector
+// @link http://bem.info/method/
+// @mixin     BEM
+// @param     $element {String} the element name
+// @param     $modifier {String} the modifier
+// @content
+@mixin bem($element: null, $modifier: null) {
+  @at-root #{bem-selector("#{'&'}", $element, $modifier)} {
+    @content;
+  }
+}
+
+// scopes content block for high resolution (HiDPI/Retina) displays
+// @mixin     high-resolution
+// @param     $resolution {Number} the resolution to use (either a ratio, dpi, dpcm, or dppx)
+// @content
+@mixin high-resolution($resolution: $CONFIG_RESOLUTION_HIGH) {
+  @if $resolution {
+    $ratio: resolution-to-ratio($resolution);
+    $query: ();
+
+    $queries: (
+      if(support-legacy-browser('firefox', '16', $threshold: $critical-usage-threshold), '(min--moz-device-pixel-ratio: #{$ratio})', null),
+      '(-webkit-min-device-pixel-ratio: #{$ratio})',
+      '(-o-min-device-pixel-ratio: #{to-fraction($ratio)})',
+      '(min-resolution: #{resolution-to-dpi($resolution)})',
+      '(min-resolution: #{resolution-to-dppx($resolution)})'
+    );
+
+    @each $q in $queries {
+      @if $q {
+        $query: append($query, unquote('only screen and #{$q}'), comma);
+      }
+    }
+
+    @media #{$query} {
+      @content;
+    }
+  }
+}

data/stylesheets/archetype/util/_core.scss

@@ -0,0 +1,8 @@
+// register module
+$a-blackhole: register-archetype-module(archetype/util);
+
+@import "misc";
+@import "spacing";
+@import "debug";
+@import "styles";
+@import "targeting";

data/stylesheets/archetype/util/_debug.scss

@@ -1,27 +1,15 @@
 // @category  utilities/debug
 
-// check if debug is enabled
-// @function  is-debug-enabled
-// @param     $if {Boolean} optional override for $CONFIG_DEBUG
-// @return    {Boolean} whether or not debug is enabled
-@function is-debug-enabled($if: nil) {
-  // debug is only available in DEV environments, so check that first
-  // then check if the debug flag/override is truthy
-  @return (index($CONFIG_DEBUG_ENVS, archetype-env()) and if($if == nil, $CONFIG_DEBUG, $if));
-}
+// throw an error if archetype/core has not been registered
+$a-blackhole: require-archetype-modules(archetype/util);
 
 // a debug helper, print out a message
 // @mixin     debug-message
 // @param     $message {String} the message to output
-// @param     $if {Boolean} override $CONFIG_DEBUG
-@mixin debug-message($message, $if: nil) {
-  @if(is-debug-enabled($if)) {
-    @if archetype-version('sass >= 3.2') {
-      /* #{$message} */
-    }
-    @else {
-      -archetype-debug: quote($message);
-    }
+// @param     $iff {Boolean} override $CONFIG_DEBUG
+@mixin debug-message($message, $iff: null) {
+  @if(is-debug-enabled($iff)) {
+    /* #{$message} */
   }
 }
 
@@ -29,9 +17,9 @@
 // @mixin     debug-hover-box
 // @param     $color {String} the color to draw the border
 // @param     $opacity {Number}
-// @param     $if {Boolean} override $CONFIG_DEBUG
-@mixin debug-hover-box($color: rgb(0, 255, 255), $opacity: 0.9, $if: nil) {
-  @if(is-debug-enabled($if)) {
+// @param     $iff {Boolean} override $CONFIG_DEBUG
+@mixin debug-hover-box($color: rgb(0, 255, 255), $opacity: 0.9, $iff: null) {
+  @if(is-debug-enabled($iff)) {
     &:hover {
       @include opacity($opacity);
       @include box-shadow(0 0 3px 0 $color);

data/stylesheets/archetype/util/_init.scss

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

data/stylesheets/archetype/util/_misc.scss

@@ -1,5 +1,8 @@
 // @category  utilities
 
+// throw an error if archetype/util has not been registered
+$a-blackhole: require-archetype-modules(archetype/util);
+
 // simplify checking if a value is defined before outputting it to a property
 // @mixin     if-set
 // @param     $property {String} css property to define
@@ -11,98 +14,30 @@
   @if($ignore == false) {
     $ignore: (0 0px);
   }
-  @if($value != false and not index(-compass-list($ignore), $value)) {
+  @if($value != false and $value != null and not index(-archetype-list($ignore), $value)) {
     #{$property}: $value;
   }
 }
 
-$REGISTRY_DO_ONCE: () !default;
-// a function to prevent routines from executing multiple times
-// @function  do-once
-// @param     $name {String} name of the identifier
-// @return    {Boolean} true if the first time invoked, false otherwise
-@function do-once($name) {
-  @if index($REGISTRY_DO_ONCE, $name) {
-    @return false;
+// a mixin that prevents a given block from executing multiple times
+// @mixin     do-once
+// @param     $name {String} identifier to check/register
+@mixin do-once($name) {
+  @if do-once($name) {
+    @content;
   }
-  $REGISTRY_DO_ONCE: append($REGISTRY_DO_ONCE, $name);
-  @return true;
-}
-
-// helper to determine if a sprite is already set or sprites are disabled
-// @function  _shouldSetSprite
-// @private
-// @param     $sprite {SpriteMap} the sprite map to check against
-// @return    {Boolean} should the sprite be set
-@function _shouldSetSprite($sprite) {
-  @return not $CONFIG_DISABLE_STYLEGUIDE_SPRITES and not $sprite;
-}
-
-// check that a sprite isn't nil or false
-// @function  styleguide-check-sprite
-// @param     $map {SpriteMap} the sprite map to check against
-// @return    {Boolean} is the sprite set
-@function styleguide-check-sprite($map) {
-  @return not ($CONFIG_DISABLE_STYLEGUIDE_SPRITES and index(false nil, $map));
-}
-
-// wrapper for sprite()
-// @function  styleguide-sprite
-// @param     $map {SpriteMap} the sprite map
-// @param     $sprite {Sprite} the sprite name
-// @param     $offset-x {Number} the horizontal offset of the sprite position
-// @param     $offset-y {Number} the vertical offset of the sprite position
-// @return    {Sprite} the sprite object or nil
-@function styleguide-sprite($map, $sprite, $offset-x: 0, $offset-y: 0) {
-  @if not styleguide-check-sprite($map) { @return nil; }
-  @return sprite($map, $sprite, $offset-x, $offset-y);
 }
 
-// wrapper for sprite-position()
-// @function  styleguide-sprite-position
-// @param     $map {SpriteMap} the sprite map
-// @param     $sprite {Sprite} the sprite name
-// @param     $offset-x {Number} the horizontal offset of the sprite position
-// @param     $offset-y {Number} the vertical offset of the sprite position
-// @return    {List} the sprite position or nil
-@function styleguide-sprite-position($map, $sprite, $offset-x: 0, $offset-y: 0) {
-  @if not styleguide-check-sprite($map) { @return nil; }
-  @return sprite-position($map, $sprite, $offset-x, $offset-y);
-}
-
-// wrapper for sprite-url()
-// @function  styleguide-sprite-url
-// @param     $map {SpriteMap} the sprite map
-// @return    {String} the sprite URL or nil
-@function styleguide-sprite-url($map) {
-  @if not styleguide-check-sprite($map) { @return nil; }
-  @return sprite-url($map);
-}
-
-// wrapper for sprite-file()
-// @function  styleguide-sprite-file
-// @param     $map {SpriteMap} the sprite map
-// @param     $sprite {Sprite} the sprite name
-// @return    {ImageFile} the image or nil
-@function styleguide-sprite-file($map, $sprite) {
-  @if not styleguide-check-sprite($map) { @return nil; }
-  @return sprite-file($map, $sprite);
-}
-
-// wrapper for image-width()
-// @function  styleguide-image-width
-// @param     $image {ImageFile} the image
-// @return    {Number} the width of the image or nil
-@function styleguide-image-width($image) {
-  @if $image == nil { @return nil; }
-  @return image-width($image);
+// helper mixin for iterating over a meta object that contains multiple values
+// @mixin     with-each-value
+// @param     $values {*} the value or meta object of values to iterate over
+// @content
+@mixin with-each-value($values) {
+  $values: if(has-multiple-values($values), map-get($values, values), append((), $values));
+  @each $value in $values {
+    $archetype-current-value: $value !global;
+    @content;
+    $archetype-current-value: null !global;
+  }
 }
 
-// wrapper for image-height()
-// @function  styleguide-image-height
-// @param     $image {ImageFile} the image
-// @return    {Number} the height of the image or nil
-@function styleguide-image-height($image) {
-  @if $image == nil { @return nil; }
-  @return image-height($image);
-}

data/stylesheets/archetype/util/_spacing.scss

@@ -1,38 +1,7 @@
 // @category  utilities/spacing
 
-// abstract spacing calculations
-// @function  _spacing
-// @private
-// @param     $unit {Number} unit of measurement
-// @param     $direction {String} [horizontal|vertical] spacing
-// @param     $abuse {Boolean} @see _getUnit
-// @return    {String} the calculated spacing
-@function _spacing($unit: nil, $direction: horizontal, $abuse: false) {
-  @if $unit == nil {
-    @return nil;
-  }
-  $unit: _getUnit($unit, $abuse);
-  $spacing: if($direction == vertical, $CONFIG_VERTICAL_SPACING, $CONFIG_HORIZONTAL_SPACING);
-  @return ($unit * $spacing);
-}
-
-// horizonatl spacing calculations
-// @function  horizontal-spacing
-// @param     $unit {Number} unit of measurement
-// @param     $abuse {Boolean} @see _getUnit
-// @return    {String} the calculated horizontal spacing
-@function horizontal-spacing($unit, $abuse: false) {
-  @return _spacing($unit, $abuse: $abuse);
-}
-
-// vertical spacing calculations
-// @function  vertical-spacing
-// @param     $unit {Number} unit of measurement
-// @param     $abuse {Boolean} @see _getUnit
-// @return    {String} the calculated vertical spacing
-@function vertical-spacing($unit, $abuse: false) {
-  @return _spacing($unit, $direction: vertical, $abuse: $abuse);
-}
+// throw an error if archetype/util has not been registered
+$a-blackhole: require-archetype-modules(archetype/util);
 
 // generate the vertical spacing offset
 // @mixin     vertical-spacing
@@ -40,8 +9,8 @@
 // @param     $top {Number} the units to offset from the top
 // @param     $bottom {Number} the units to offset from the bottom
 // @param     $method {String} [margin|padding] offset method
-// @param     $abuse {Boolean} @see _getUnit
-@mixin vertical-spacing($list: false, $top: nil, $bottom: nil, $method: false, $abuse: false) {
+// @param     $abuse {Boolean} @see _archetype_integerize
+@mixin vertical-spacing($list: false, $top: null, $bottom: null, $method: false, $abuse: false) {
   $list: get-collection($list, ($top $bottom), $min: 2);
   @include _spacing($list, vertical, $method: $method, $abuse: $abuse);
 }
@@ -51,8 +20,8 @@
 // @param     $left {Number} the units to offset from the left
 // @param     $right {Number} the units to offset from the right
 // @param     $method {String} [margin|padding] offset method
-// @param     $abuse {Boolean} @see _getUnit
-@mixin horizontal-spacing($list: false, $left: nil, $right: nil, $method: false, $abuse: false) {
+// @param     $abuse {Boolean} @see _archetype_integerize
+@mixin horizontal-spacing($list: false, $left: null, $right: null, $method: false, $abuse: false) {
   $list: get-collection($list, ($left $right), $min: 2);
   @include _spacing($list, $method: $method, $abuse: $abuse);
 }
@@ -62,7 +31,7 @@
 // @private
 // @param     $units {List} the list of units e.g. (1) => $left:1 $right:1; (1 0) => $left:1 $right:0;
 // @param     $method {String} [margin|padding] offset method
-// @param     $abuse {Boolean} @see _getUnit
+// @param     $abuse {Boolean} @see _archetype_integerize
 @mixin _spacing($units, $direction: horizontal, $method: false, $abuse: false) {
   @if(not $method) {
     $method: $CONFIG_SPACING_METHOD;
@@ -72,7 +41,7 @@
     @include if-set(#{$method}-bottom, vertical-spacing(nth($units,2), $abuse: $abuse), $ignore: nil);
   }
   @else {
-    @include if-set(#{$method}-#{rtl(left)},   horizontal-spacing(nth($units,1), $abuse: $abuse), $ignore: nil);
-    @include if-set(#{$method}-#{rtl(right)},  horizontal-spacing(nth($units,2), $abuse: $abuse), $ignore: nil);
+    @include if-set(#{$method}-left,   horizontal-spacing(nth($units,1), $abuse: $abuse), $ignore: nil);
+    @include if-set(#{$method}-right,  horizontal-spacing(nth($units,2), $abuse: $abuse), $ignore: nil);
   }
 }

data/stylesheets/archetype/util/_styles.scss

@@ -1,19 +1,17 @@
-@import "compass/layout/stretching";
-
 // @category  utilities/styles
 
+// throw an error if archetype/util has not been registered
+$a-blackhole: require-archetype-modules(archetype/util);
+
 // this is a proxy for output-style
-// we need this to prevent Sass from throwing an error as you currently can't use recursive mixins :/
+// this contains mixins that will eventually call output-style in one form or another
 // @mixin     _outputStyle
 // @private
 // @param     $property {String} the CSS property to output
 // @param     $value {*} the CSS value to output
-@mixin _outputStyle($property, $value: nil) {
-  @if($value != nil) {
-    @if($property == round-button-ie-support) {
-      @include round-button-ie-support($value)
-    }
-    @else if($property == target-browser) {
+@mixin _outputStyle($property, $value: null) {
+  @if not is-null($value) {
+    @if($property == target-browser) {
       @include target-browser(nth($value,1), nth($value,2), nth($value,3));
     }
     @else if($property == font-family) {
@@ -22,98 +20,89 @@
     @else if($property == font-style) {
       @include font-style($value);
     }
-    @else if($property == hide-element) {
-      @include hide-element();
-    }
-    @else if($property == unstyled-button) {
-      @include unstyled-button();
-    }
     @else {
       @include output-style($property, $value);
     }
   }
 }
 
+@function check-for-custom-styler($property, $value, $method: pre) {
+  @return mixin-exists('custom-output-styler') and function-exits('has-custom-output-styler') and has-custom-output-styler($property, $value, $method);
+}
+
 // output a property or augment it to use a mixin
 // @mixin     output-style
 // @param     $property {String} the CSS property to output
 // @param     $value {*} the CSS value to output
-@mixin output-style($property, $value: nil) {
-
-  @if($property != nil and length(-compass-list($value)) > 0 and first-value-of(-compass-list($value)) != nil and not index($CONFIG_DISABLED_CSS, $property)) {
+@mixin output-style($property, $value: null) {
+  @if type-of($property) == map {
+    @include to-styles($property);
+  }
+  @elseif( not is-null($property) and length(-archetype-list($value)) > 0 and not is-null(first-value-of(-archetype-list($value))) and not index($CONFIG_DISABLED_CSS, $property)) {
     // for mixins, we need to do some custom work
     // check to see if we have a custom output styler (pre)
-    @if has-custom-output-styler($property, $value, pre) == true {
+    @if check-for-custom-styler($property, $value, pre) {
       @include custom-output-styler($property, $value, $method: pre);
     }
+    // we're going to assume that any mixins that get invoked here have been properly imported
+    //  if not, they will simply throw a compilation error
     // border-radius
-    @else if($property == border-radius)             { @include border-radius(rtl($value, border-radius)); }
+    @else if($property == border-radius)        { @include border-radius($value...); }
     // box-sizing
-    @else if($property == box-sizing)           { @include box-sizing($value); }
+    @else if($property == box-sizing)           { @include box-sizing($value...); }
     // box-shadow
-    @else if($property == box-shadow)           { @include box-shadow($value); }
+    @else if($property == box-shadow)           { @include box-shadow($value...); }
     // text-shadow
     @else if($property == text-shadow)          { @include text-shadow($value); }
     // filter-gradient
-    @else if($property == filter-gradient)      { @include filter-gradient(nth($value,1), nth($value,2), nth($value,3)); }
+    @else if($property == filter-gradient)      { @include filter-gradient($value...); }
     // background
-    @else if($property == background)           { @include background($value); }
+    @else if($property == background)           { @include background($value...); }
     // background-image
-    @else if($property == background-image or $property == gradient) { @include background-image($value); }
+    @else if($property == background-image)     { @include background-image($value...); }
     // background-clip
-    @else if($property == background-clip)      { @include background-clip($value); }
+    @else if($property == background-clip)      { @include background-clip($value...); }
     // background-size
-    @else if($property == background-size)      { @include background-size($value); }
+    @else if($property == background-size)      { @include background-size($value...); }
     // background-origin
-    @else if($property == background-origin)      { @include background-origin($value); }
+    @else if($property == background-origin)    { @include background-origin($value...); }
     // IE filters
-    @else if($property == ie-filter)            { @include ie-filter($value); }
+    @else if($property == ie-filter)            { @include ie-filter($value...); }
     // hide-text
-    @else if($property == hide-text)            { @include hide-text($direction: if($value == true, $hide-text-direction, $value)); }
+    @else if($property == hide-text)            { @include hide-text($direction: if($value == true, $hide-text-direction, $value...)); }
     // inline-block
-    @else if($property == inline-block)         { @include inline-block(); }
+    @else if($property == inline-block)         { @include inline-block($value...); }
     // opacity
-    @else if($property == opacity)              { @include opacity($value); }
+    @else if($property == opacity)              { @include opacity($value...); }
     // min-width
-    @else if($property == min-width)            { @include min-width($value); }
+    @else if($property == min-width)            { @include min-width($value...); }
     // min-height
-    @else if($property == min-height)           { @include min-height($value); }
+    @else if($property == min-height)           { @include min-height($value...); }
     // max-width
-    @else if($property == max-width)            { @include max-width($value); }
+    @else if($property == max-width)            { @include max-width($value...); }
     // max-height
-    @else if($property == max-height)           { @include max-height($value); }
+    @else if($property == max-height)           { @include max-height($value...); }
     // stretch
-    @else if($property == stretch)              { @include stretch(); }
+    @else if($property == stretch)              { @include stretch($value...); }
     // appearance
-    @else if($property == appearance)           { @include appearance($value); }
+    @else if($property == appearance)           { @include appearance($value...); }
     // unhide-element
-    @else if($property == unhide-element)       { @include unhide-element(); }
+    @else if($property == unhide-element)       { @include unhide-element($value...); }
     // ellipsis
-    @else if($property == ellipsis)             { @include ellipsis(); }
+    @else if($property == ellipsis)             { @include ellipsis($value...); }
     // scale
-    @else if($property == scale)                { @include scale($value); }
-    @else if($property == glyph-icon)           { @include glyph-icon(nth($value, 1), nth($value, 2), nth($value, 3), nth($value, 4), nth($value, 5)); }
-    @else if($property == extend)               { @extend #{$value}; }
+    @else if($property == scale)                { @include scale($value...); }
+    // z-index
+    @else if($property == z-index)              { @include z-index($value...); }
+    @else if($property == glyph-icon)           { @include glyph-icon($value...); }
+    @else if($property == extend)               {
+      @each $v in -archetype-list($value) {
+        @extend #{$v};
+      }
+    }
     // animations
     @else if($property == animation) {
-      @if archetype-version('compass >= 0.13') {
-        @include animation($value);
-      }
-      @else {
-        @if $experimental-support-for-webkit {
-          -webkit-animation: $value;
-        }
-        @if $experimental-support-for-mozilla {
-          -moz-animation: $value;
-        }
-        @if $experimental-support-for-microsoft {
-          -ms-animation: $value;
-        }
-        @if $experimental-support-for-opera {
-          -o-animation: $value;
-        }
-        animation: $value;
-      }
+      @include animation($value...);
     }
     // hasLayout
     @else if($property == has-layout) {
@@ -122,7 +111,7 @@
         @include has-layout();
       }
       @else {
-        @include has-layout($value);
+        @include has-layout($value...);
       }
     }
     // clearfix
@@ -137,15 +126,9 @@
         @include clearfix();
       }
     }
-    // z-index
-    @else if($property == z-index) {
-      $value: -compass-list($value);
-      @if(length($value) > 1) { @include z-index(nth($value, 1), nth($value, 2)); }
-      @else { @include z-index($value); }
-    }
     // :before/:after
     @else if($property == ie-pseudo-before or $property == ie-pseudo-after) {
-      $value: -compass-list($value);
+      $value: -archetype-list($value);
       $content: false;
       $tag: '';
       @if length($value) > 1 {
@@ -161,10 +144,8 @@
         @include ie-pseudo-after(nth($value, 1), $content, $tag);
       }
     }
-    //ellipsis
-    @else if($property == ellipsis)   { @include ellipsis(); }
     // check to see if we have a custom output styler (post)
-    @else if has-custom-output-styler($property, $value, post) == true {
+    @else if check-for-custom-styler($property, $value, post) {
       @include custom-output-styler($property, $value, $method: post);
     }
     // otherwise just use a key-value pair
@@ -172,67 +153,147 @@
   }
 }
 
+// outputs @content into a placeholder, and then extends it,
+// if the placeholder already exists, just extend it
+// @mixin     archetype-smart-content
+// @param     $placeholder {String} the placeholder
+// @param     $extend {Boolean} if false, will only create the placeholder, but not extend it
+// @param     $here {Boolean} if true, will force the content to be output in the current context, and not extended
+// @content
+@mixin archetype-smart-content($placeholder, $extend: true, $here: null) {
+  @if $CONFIG_USE_SMART_CONTENT and not $here {
+    // if we haven't already registered this placeholder...
+    @if not index($archetype-placeholder-registry, $placeholder) {
+      // create it...
+      @at-root #{$placeholder} {
+        @content;
+      }
+      // and register it...
+      $archetype-placeholder-registry: append($archetype-placeholder-registry, $placeholder) !global;
+    }
+    @if $extend {
+      @extend #{$placeholder} !optional;
+    }
+  }
+  @elseif $extend {
+    @content;
+  }
+}
+
 // convert a list of key-value pairs into CSS rules
 // @mixin     to-styles
-// @param     $list {List} a key-value paired list of ($property $value)
+// @param     $map {Map} a of styles
 // @param     $states {Boolean|List} if true, output all states; if false, output no states; if a list, output only the states in the list
 // @param     $exclude {List} a list of styles to exclude from output
-@mixin to-styles($list: (), $states: true, $selectors: true, $exclude: ()) {
-  $exclude: -compass-list($exclude);
-  $states-data: ();
-  $selectors-data: ();
-  @each $item in $list {
-    @if(length($item) > 1) {
-      $property: nth($item, 1);
-      $value: nth($item, 2);
-      @if(not index($exclude, $property)) {
-        // deal with the states
-        @if($property == states and $states != false and length($value) > 0) {
-          @each $state in $value {
-            $val: nth($state, 2);
-            $state: first-value-of($state);
-            @if(index(-compass-list($states), $state) or $states == true) {
-              #{_getStateSelector($state)} {
-                @include to-styles($val, true, true, $exclude);
+// @param     $here {Boolean} if true, will force the content to be output in the current context, and not extended
+// @content
+@mixin to-styles($map: (), $states: true, $selectors: true, $exclude: (), $meta: (), $here: null) {
+  @if $map {
+    $exclude: -archetype-list($exclude);
+    $placeholder: (
+      map:        $map,
+      states:     $states,
+      selectors:  $selectors,
+      exclude:    $exclude
+    );
+
+    $message: meta-message($map, map-merge($meta, (phase: begin, origin: $archetype-origin-function or styles)));
+    @if $message { /* #{$message} */ }
+
+    $placeholder: unquote("%#{tokenize($placeholder)}");
+    // register a placeholder if needed
+    @include archetype-smart-content($placeholder, $here: $here) {
+      @each $property, $value in $map {
+        @include with-each-value($value) {
+          // get the expected value given any runtime locale context
+          $value: get-runtime-locale-value($archetype-current-value);
+          @if not (index($exclude, $property) or $property == '-archetype-meta') {
+            // deal with the states
+            @if($property == states and $states != false and length($value) > 0) {
+              @each $state, $val in $value {
+                @if(index(-archetype-list($states), $state) or $states == true) {
+                  // get the state selector mappings
+                  $selector-map: _getStateSelectorMap($state);
+                  // output the state selectors if we're not using _only_ BEM style
+                  @if($CONFIG_STATE_BEM != only) {
+                    $selector: map-get($selector-map, selector);
+                    // if the selector is valid...
+                    @if($selector != null) {
+                      // output it
+                      #{$selector} {
+                        @include to-styles($val, true, true, $exclude);
+                      }
+                    }
+                  }
+                  // if BEM style states are enabled...
+                  @if($CONFIG_STATE_BEM) {
+                    // get the BEM states
+                    $bem-states: map-get($selector-map, states);
+                    // for each BEM state
+                    @each $bem-state in $bem-states {
+                      // output it (this looks scarier than it really is...)
+                      @include bem($modifier: $bem-state) {
+                        @include to-styles($val, true, true, $exclude);
+                      }
+                    }
+                  }
+                }
               }
             }
-          }
-        }
-        // deal with the nested selectors
-        @else if($property == selectors and $selectors != false and length($value) > 0) {
-          @each $selector in $value {
-            @if(index(-compass-list($selectors), $selector) or $selectors == true) {
-              #{_getSelectorSelector($selector)} {
-                @include to-styles(nth($selector, 2), true, true, $exclude);
+            // deal with the nested selectors
+            @else if($property == selectors and $selectors != false and length($value) > 0) {
+              @each $selector, $val in $value {
+                @if(index(-archetype-list($selectors), $selector) or $selectors == true) {
+                  $sel: _getSelectorSelector($selector);
+                  @if str-index($sel, '%bem ') == 1 {
+                    $sel: str-replace($sel, '%bem ', '');
+                    @include bem($element: $sel) {
+                      @include to-styles($val, true, true, $exclude);
+                    }
+                  }
+                  @else {
+                    #{$sel} {
+                      @include to-styles($val, true, true, $exclude);
+                    }
+                  }
+                }
               }
             }
+            // otherwise, just output it
+            @else if($selectors == true and $states == true ) {
+              @include _outputStyle($property, $value);
+            }
           }
         }
-        // otherwise, just output it
-        @else if($selectors == true and $states == true ) {
-          @include _outputStyle($property, $value);
-
-        }
       }
     }
+
+    $message: meta-message($map, map-merge($meta, (phase: end, origin: $archetype-origin-function or styles)));
+    @if $message { /* #{$message} */ }
+
+    // any original block content passed in...
+    @content;
   }
 }
 
 // helper function to compute the selector for various states
-// @function  _getStateSelector
+// @function  _getStateSelectorMap
 // @private
 // @param     $state {String} the state to select
 // @param     $prefix {String} the prefix to append to the state (for class names only)
-@function _getStateSelector($state, $prefix: $CONFIG_STATE_PREFIX) {
-  $selector: associative($CONFIG_STATE_MAPPINGS, $state, $strict: true);
-  @if $selector == nil or length($selector) == 0 {
-    $selector: '&.#{if(index(-compass-list($CONFIG_STATE_NO_PREFIX), $state), $prefix, "")}#{$state}';
+@function _getStateSelectorMap($state, $prefix: $CONFIG_STATE_PREFIX) {
+  $map: map-get($CONFIG_STATE_MAPPINGS, $state);
+  @if $map == null or length($map) == 0 {
+    $map: (
+      selector : '&.#{if(index(-archetype-list($CONFIG_STATE_NO_PREFIX), $state), $prefix, "")}#{$state}',
+      states   : ($state)
+    );
   }
-  @return $selector;
+  @return $map;
 }
 
 @function _getSelectorSelector($selector) {
-  $selector: first-value-of(-compass-list($selector));
+  $selector: first-value-of(-archetype-list($selector));
   @if $selector == $CORE_GLYPH_SELECTOR_VAR {
     $selector: $archetype-glyph-selector;
   }
@@ -244,13 +305,13 @@
 
 // mixin for outputting filters in legacy IE
 // @mixin     ie-filter
-// @param     $value {String|List} a set of filters to output, sans `progid:DXImageTransform.Microsoft` prefix
+// @param     $value {String|List} a set of filters to output
 @mixin ie-filter($value, $use-prefix: false) {
   $out: false;
-  $value: -compass-list($value);
+  $value: -archetype-list($value);
   $ms-filter-prefix: 'progid:DXImageTransform.Microsoft.';
   @each $item in $value {
-    @if($item != none) {
+    @if($item != none and str-index($item, $ms-filter-prefix) != 1) {
       $item: #{$ms-filter-prefix}#{$item};
     }
     $out: if($out, '#{$out},#{$item}', '#{$item}');
@@ -280,61 +341,23 @@
   @include if-set(position, $position);
 }
 
-// this is a helper for simple gradients when a direction is desired in degrees,
-// but we still want to support old webkit browsers
-// @mixin     gradient-with-deg
-// @param     $deg {Number} the direction degree
-// @param     $start {Color} the start color
-// @param     $end {Color} the end color
-@mixin gradient-with-deg($deg, $start, $end) {
-  // make sure it's a deg
-  $deg: if(unitless($deg), $deg * 1deg, $deg);
-  // we'll divide the circle into sections
-  $sector: (360deg / 8);
-  // offset it for calculations
-  $tmp: $deg - ($sector / 2);
-  $map: (
-    (right top),
-    (right),
-    (right bottom),
-    (bottom),
-    (left bottom),
-    (left),
-    (left top),
-    (top)
-  );
-  // compute the region it falls in
-  $region: nth($map, ceil(if($tmp < 0deg, 360 - $tmp, $tmp) / $sector));
-  // NOTE: we temporarily disable old webkit gradients as they don't support degrees
-  // this is a fallback for old webkit
-  @if($support-for-original-webkit-gradients) {
-    background-image: -owg(linear-gradient($region, $start, $end));
-  }
-  $tmp: $support-for-original-webkit-gradients;
-  $support-for-original-webkit-gradients: false;
-  // now the others
-  @include background-image(linear-gradient($deg, $start, $end));
-  // restore the old webkit value
-  $support-for-original-webkit-gradients: $tmp;
-}
-
 // abstract common issues and generate safe styles
-@mixin safe($property: nil, $value: nil) {
-  @if($property != nil and $value != nil) {
+@mixin safe($property: null, $value: null) {
+  @if not is-null($property) and not is-null($value) {
     // os friendly font stacks
     @if($property == font-family) {
-      $stack: associative($CONFIG_SAFE_FONTS, $value, $strict: true);
-      @if($stack != nil and length($stack) > 0) {
+      $stack: map-get($CONFIG_SAFE_FONTS, $value);
+      @if($stack and length($stack) > 0) {
         // first, step through the list of os safe fonts
         @each $collection in $stack {
           @if(length($collection) > 1) {
-            $default: nil;
+            $default: null;
             $os: nth($collection, 1);
             $fonts: nth($collection, 2);
-            $family: nil;
+            $family: null;
             // next, step through the list of lang safe fonts
             @each $item in $fonts {
-              @if($item != nil) {
+              @if not is-null($item) {
                 $lang: nth($item, 1);
                 $font: nth($item, 2);
                 // check if the language matches or it's the default
@@ -346,13 +369,13 @@
                   $default: $font;
                 }
                 // if the keyword `default` is in the font-stack, substitute it with the default font-stack
-                $family: list-replace($family, index(-compass-list($family), default), $default, comma);
+                $family: list-replace($family, index(-archetype-list($family), default), $default, comma);
               }
             }
             @include target-os($os, font-family, $family);
           }
         }
-        $value: nil;
+        $value: null;
       }
     }
     // text-transform: uppercase isn't friendly to turkish
@@ -360,18 +383,18 @@
       // TODO - more investigation, this may affect other locales as well
       // @link http://www.w3.org/International/tests/html-css/text-transform/results-text-transform
       // @link https://developer.mozilla.org/en/CSS/text-transform
-      $value: nil;
+      $value: null;
     }
     @else if($property == font-variant and $value == small-caps and lang(tr_TR)) {
       // TODO - more investigation, this may affect other locales as well
       // @link https://developer.mozilla.org/en/CSS/font-variant
-      $value: nil;
+      $value: null;
     }
     // italics aren't pretty in CJK
     @else if($property == font-style and $value == italic and lang(CJK)) {
-      $value: nil;
+      $value: null;
     }
-    // if $value was set to `nil`, this does nothing
+    // if $value was set to `null`, this does nothing
     @include output-style($property, $value);
   }
 }
@@ -379,7 +402,7 @@
 // web-safe font stacks, if no safe fonts are found, use the raw `$family` as output
 // @mixin     font-family
 // @param     $family {String} the font stack to output
-@mixin font-family($family: nil) {
+@mixin font-family($family: null) {
   @include safe(font-family, $family);
 }
 
@@ -398,7 +421,7 @@
 // safely use font-style without localization issues
 // @mixin     font-style
 // @param     $style {String} the style
-@mixin font-style($style: nil) {
+@mixin font-style($style: null) {
   @include safe(font-style, $style);
 }
 
@@ -413,15 +436,3 @@
   }
   z-index: ($value + $layer);
 }
-
-// generate a tag name with a prefix
-// @function  prefixed-tag
-// @param     $tag {String} the tag to prefix
-// @param     $prefix {String} the prefix to prepend to the tag
-// @return    {String} the prefix joined with the tag
-@function prefixed-tag($tag: '', $prefix: $CONFIG_GENERATED_TAG_PREFIX) {
-  @if $tag != '' {
-    $tag: '-#{$tag}';
-  }
-  @return '#{$prefix}#{$tag}';
-}