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

data/stylesheets/archetype/styleguide/_components.scss

@@ -1,25 +0,0 @@
-// import components
-@import "components/alerts";
-@import "components/annotations";
-@import "components/bristol";
-@import "components/button_groups";
-@import "components/button_toolbars";
-@import "components/buttons";
-@import "components/canvas";
-@import "components/carets";
-@import "components/closes";
-@import "components/container";
-@import "components/copy";
-@import "components/flyouts";
-@import "components/headings";
-@import "components/headlines";
-@import "components/hovercards";
-@import "components/icons";
-@import "components/identities";
-@import "components/links";
-@import "components/loaders";
-@import "components/menu_items";
-@import "components/module";
-@import "components/pullquotes";
-@import "components/punchcut";
-@import "components/tooltips";

data/stylesheets/archetype/styleguide/_helpers.scss

@@ -1,215 +0,0 @@
-// @category  styleguide
-
-// helper function to get the height of a button
-// @function  _styleguideGetButtonHeight
-// @private
-// @param     $size {String} the size of the button to calculate
-// @return    {Number} the height of the button
-@function _styleguideGetButtonHeight($size: medium) {
-  @if type-of($size) != list {
-    $sizes: (
-      (small,   $CONFIG_FONT_BUTTON_SMALL),
-      (medium,  $CONFIG_FONT_BUTTON_MEDIUM),
-      (large,   $CONFIG_FONT_BUTTON_LARGE)
-    );
-    $size: associative($sizes, $size);
-  }
-  // font size + top/bottom padding
-  @return nth($size, 1) + (2 * nth($size, 2));
-}
-
-// helper function to get the padding of a button
-// @function  _styleguideGetButtonPadding
-// @private
-// @param     $size {String} the size of the button to calculate
-// @param     $narrow {Bool} is the button narrow or not
-// @return    {Number} the padding on the button
-@function _styleguideGetButtonPadding($size: medium, $narrow: false) {
-  @if type-of($size) != list {
-    $sizes: (
-      (small,   $CONFIG_FONT_BUTTON_SMALL),
-      (medium,  $CONFIG_FONT_BUTTON_MEDIUM),
-      (large,   $CONFIG_FONT_BUTTON_LARGE)
-    );
-    $size: nth(associative($sizes, $size), 3);
-  }
-  $size: floor(if($narrow, $size * 0.75, $size));
-  @return (0 $size);
-}
-
-// helper function to get the size of the caret
-// @function  _styleguideCaretSize
-// @private
-// @param     $size {String} the size of the caret to calculate
-// @param     $direction {String} the direction the caret is facing [up|down]
-// @return    {List} the border widths needed to generate the caret
-@function _styleguideCaretSize($size: medium, $direction: south) {
-  @if type-of($size) != number {
-    $size: associative((
-      (small      $CONFIG_FONT_CARET_SMALL),
-      (medium     $CONFIG_FONT_CARET_MEDIUM),
-      (large      $CONFIG_FONT_CARET_LARGE),
-      (tooltip    $CONFIG_DIM_TOOLTIP_TIP)
-    ), $size);
-  }
-  @return associative((
-    (default    ($size $size 0)),
-    (north      (0 $size $size)),
-    (east       ($size 0 $size $size)),
-    (west       ($size $size $size 0))
-  ), $direction);
-}
-
-// helper function to get the alert icon offset
-// @function  _styleguideGetAlertGlyphOffset
-// @private
-// @param     $type {List} the glpyh data
-// @return    {List} the top and left offsets for the glyph
-@function _styleguideGetAlertGlyphOffset($type: $CONFIG_GLYPH_ALERT_NOTIFY) {
-  $top: (nth-cyclic($CONFIG_DIM_ALERTS_SPACING, 1) + nth-cyclic($CONFIG_DIM_ALERTS_SPACING, 3) + nth-cyclic($CONFIG_FONT_NOTICE, 2) - nth($type, 4)) / 2;
-  $left: ((nth-cyclic($CONFIG_DIM_ALERTS_SPACING, 4) - nth($type, 4))/2);
-  @return ($top $left);
-}
-
-// helper function to extract the glyhp styles for an alert icon
-// @function  _styleguideGetAlertGlyph
-// @private
-// @param     $type {List} the glpyh data
-// @return    {List} the parameters needed for glyph-icon()
-@function _styleguideGetAlertGlyph($type: $CONFIG_GLYPH_ALERT_NOTIFY) {
-  $offset: _styleguideGetAlertGlyphOffset($type);
-  $top: nth($offset, 1);
-  $left: nth($offset, 2);
-  @return (nth($type, 1), nth($type, 2), nth($type, 3), before, 'position:absolute;line-height:1;top:#{$top};left:#{$left};')
-}
-
-
-// helper function to return the list of shadows for the alert
-// alerts have two shadows, one thats shared and ones that unique
-// @function  _styleguideGetAlertShadow
-// @private
-// @param     $type {String} the type of alert [success|notice|yield|error]
-// @return    {List} the shadows on the alert
-@function _styleguideGetAlertShadow($type: notice) {
-  $color: $type;
-  @if type-of($type) == string {
-    $color: associative((
-      (notice     $CONFIG_COLOR_BORDER_ALERT_NOTIFY),
-      (success    $CONFIG_COLOR_BORDER_ALERT_SUCCESS),
-      (error      $CONFIG_COLOR_BORDER_ALERT_ERROR),
-      (yield      $CONFIG_COLOR_BORDER_ALERT_YIELD)
-    ), $type);
-  }
-  @if($color != nil and $CONFIG_DIM_GENERIC_BORDER != nil) {
-    @return ((0 0 0 $CONFIG_DIM_GENERIC_BORDER $color), $CONFIG_SHADOW_ALERT);
-  }
-  @else {
-    @return $CONFIG_SHADOW_ALERT;
-  }
-}
-
-// helper function to get the color of a context
-// @function  _styleguideGetContextColor
-// @private
-// @param     $texture {List|String} a list or string for a background texture
-// @return    {Color} the color in the list
-@function _styleguideGetContextColor($texture: $CONFIG_TEXTURE_CONTAINER) {
-  $texture: -compass-list(first-value-of($texture)); // cast a string into a list
-  @return first-value-of($texture); // pull off the first value in the string/list
-}
-
-// helper function to get background position for the tooltip sprite
-// @function  _styleguideGetTooltipTipBG
-// @private
-// @param     $direction {String} the direction the tip is pointing [north|south|east|west]
-// @param     $type {String} the type of the tip [hovercard]
-// @return    {List} the background position offsets
-@function _styleguideGetTooltipTipBG($direction: south, $type: hovercard) {
-  $dim: $type;
-  @if type-of($type) == string {
-    $dim: associative((
-      hovercard   $CONFIG_DIM_HOVERCARD_TIP,
-      nil
-    ), $type);
-  }
-  $a: nth($dim, 1);
-  $b: nth-cyclic($dim, 2);
-  // TODO - RTL support
-  @return associative((
-    north         (-$b 0),
-    south         ((-$b) (-($a+$b))),
-    east          ((-($a+$b)) (-$b)),
-    west          (0 (-$b))
-  ), $direction);
-}
-
-// helper function to get the position of the loading spinner
-// @function  _styleguideGetLoaderPosition
-// @private
-// @param     $size {String} the size of the loading spinner e.g. [small|medium|large]
-// @param     $type {String} the type of the loading spinner e.g. [static|dynamic]
-// @param     $context {Number} the index for the context type
-// @return    {List} background position of the image or nil
-@function _styleguideGetLoaderPosition($size: medium, $type: static, $context: 1) {
-  $img: nth-cyclic(associative(associative($CONFIG_LOADERS, $size), $type), $context);
-  @return styleguide-sprite-position($CONFIG_SPRITE_LOADERS, $img);
-}
-
-// helper function to get the dimensions of the loading spinner
-// @function  _styleguideGetLoaderDimension
-// @private
-// @param     $size {String} the size of the loading spinner e.g. [small|medium|large]
-// @param     $type {String} the type of the loading spinner e.g. [static|dynamic]
-// @param     $dim {String} the dimension to return [width|height]
-// @param     $context {Number} the index for the context type
-// @return    {Number} the width/height of the loading spinner
-@function _styleguideGetLoaderDimension($size: medium, $type: static, $dim: width, $context: 1) {
-  $img: nth-cyclic(associative(associative($CONFIG_LOADERS, $size), $type), $context);
-  $sprite-file: styleguide-sprite-file($CONFIG_SPRITE_LOADERS, $img);
-  @if $dim == width {
-    @return styleguide-image-width($sprite-file);
-  }
-  @else {
-    @return styleguide-image-height($sprite-file);
-  }
-  @return 0;
-}
-
-// helper function to get the animation routine of the loading spinner
-// @function  _styleguideGetLoaderAnimation
-// @private
-// @param     $size {String} the size of the loading spinner e.g. [small|medium|large]
-// @param     $context {Number} the index for the context type
-// @return    {String} the animation value
-@function _styleguideGetLoaderAnimation($size: medium, $context: 1) {
-  $values: associative($CONFIG_LOADERS, $size);
-  $anim: ($CONFIG_KEYFRAME_LOADERS);
-  $duration:    nth-cyclic(associative($values, duration, $strict: true), $context);
-  $delay:       nth-cyclic(associative($values, delay, $strict: true), $context);
-  $steps:       nth-cyclic(associative($values, steps, $strict: true), $context);
-  $iterations:  nth-cyclic(associative($values, iterations, $strict: true), $context);
-  @if $duration != nil   { $anim: append($anim, $duration); }
-  @if $delay != nil      { $anim: append($anim, $delay); }
-  @if $steps != nil      { $anim: append($anim, steps($steps, end)); }
-  @if $iterations != nil { $anim: append($anim, $iterations); }
-  $position-keyframe-name: #{$CONFIG_KEYFRAME_LOADERS}-position-#{$size}-#{$context};
-  $anim: unquote("#{$anim}, #{$position-keyframe-name} 0.1ms step-end infinite");
-  @return $anim;
-}
-
-// helper function to get the CSS expression of the loading spinner (for IE6/7 support)
-// @function  _styleguideGetLoaderExpression
-// @private
-// @param     $size {String} the size of the loading spinner e.g. [small|medium|large]
-// @param     $context {Number} the index for the context type
-// @return    {String} the CSS expression styles
-@function _styleguideGetLoaderExpression($size: medium, $context: 1) {
-  $img: nth-cyclic(associative(associative($CONFIG_LOADERS, $size), static), $context);
-  $bg: styleguide-sprite($CONFIG_SPRITE_LOADERS, $img) no-repeat;
-  $bg: if($bg == nil, none, $bg);
-  $width: _styleguideGetLoaderDimension($size, static, width, $context);
-  $height: _styleguideGetLoaderDimension($size, static, height, $context);
-  $margin-top: $height / -2;
-  $margin-left: $width / -2;
-  @return ("position:absolute;top:50%;left:50%;background:#{$bg};width:#{$width};height:#{$height};margin-left:#{$margin-left};margin-top:#{$margin-top};", false, loader);
-}

data/stylesheets/archetype/styleguide/_primitives.scss

@@ -1,10 +0,0 @@
-// manifest for primitives
-@import "primitives/animations";
-@import "primitives/palettes";
-@import "primitives/textures";
-@import "primitives/typography";
-@import "primitives/dimensions";
-@import "primitives/sprites";
-@import "primitives/glyphs";
-@import "primitives/shadows";
-@import "primitives/misc";

data/stylesheets/archetype/styleguide/components/_alerts.scss

@@ -1,59 +0,0 @@
-// ==========
-// ALERTS
-// ==========
-$STYLEGUIDE_ALERTS_ID: alert !default;
-$STYLEGUIDE_ALERTS: () !default;
-
-@if not styleguide-component-exists($STYLEGUIDE_ALERTS_ID, $CONFIG_THEME) {
-$a-blackhole: styleguide-add-component($STYLEGUIDE_ALERTS_ID, $STYLEGUIDE_ALERTS, (
-  (default, (
-    // fallback background
-    background-color      $CONFIG_COLOR_BG_ALERT_NOTIFY,
-    background-repeat     no-repeat,
-    // gradient background
-    background            $CONFIG_GRADIENT_ALERT_NOTIFY,
-    box-shadow            _styleguideGetAlertShadow(notice),
-    // common
-    overflow              hidden,
-    display               block,
-    color                 nth-cyclic($CONFIG_COLOR_COPY, 2),
-    font-size             nth($CONFIG_FONT_NOTICE, 1),
-    line-height           nth-cyclic($CONFIG_FONT_NOTICE, 2),
-    position              relative,
-    padding               $CONFIG_DIM_ALERTS_SPACING,
-    glyph-icon            _styleguideGetAlertGlyph($CONFIG_GLYPH_ALERT_NOTIFY),
-    (selectors, (
-      ('&:before', (
-        position          absolute,
-        top               nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 1),
-        left              nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 2),
-        line-height       1
-      )),
-      nil
-    )),
-    nil
-  )),
-  (notice, (
-    // notice - default
-    nil
-  )),
-  (success, (
-    background-color      $CONFIG_COLOR_BG_ALERT_SUCCESS,
-    background            $CONFIG_GRADIENT_ALERT_SUCCESS,
-    glyph-icon            _styleguideGetAlertGlyph($CONFIG_GLYPH_ALERT_SUCCESS),
-    box-shadow            _styleguideGetAlertShadow(success)
-  )),
-  (error, (
-    background-color      $CONFIG_COLOR_BG_ALERT_ERROR,
-    background            $CONFIG_GRADIENT_ALERT_ERROR,
-    glyph-icon            _styleguideGetAlertGlyph($CONFIG_GLYPH_ALERT_ERROR),
-    box-shadow            _styleguideGetAlertShadow(error)
-  )),
-  (yield, (
-    background-color      $CONFIG_COLOR_BG_ALERT_YIELD,
-    background            $CONFIG_GRADIENT_ALERT_YIELD,
-    glyph-icon            _styleguideGetAlertGlyph($CONFIG_GLYPH_ALERT_YIELD),
-    box-shadow            _styleguideGetAlertShadow(yield)
-  ))
-), $CONFIG_THEME);
-}

data/stylesheets/archetype/styleguide/components/_annotations.scss

@@ -1,27 +0,0 @@
-// ==========
-// ANNOTATIONS
-// ==========
-$STYLEGUIDE_ANNOTATIONS_ID: annotation !default;
-$STYLEGUIDE_ANNOTATIONS: () !default;
-
-@if not styleguide-component-exists($STYLEGUIDE_ANNOTATIONS_ID, $CONFIG_THEME) {
-$a-blackhole: styleguide-add-component($STYLEGUIDE_ANNOTATIONS_ID, $STYLEGUIDE_ANNOTATIONS, (
-  (default, (
-    font-size           nth($CONFIG_FONT_ANNOTATION_MEDIUM, 1),
-    line-height         nth-cyclic($CONFIG_FONT_ANNOTATION_MEDIUM, 2),
-    color               nth($CONFIG_COLOR_ANNOTATION, 1)
-  )),
-  (in-dark, (
-    color               nth-cyclic($CONFIG_COLOR_ANNOTATION, 2),
-    text-shadow         (1px 1px 1px rgba(0, 0, 0, .75))
-  )),
-  (in-tooltip, (
-    inherit (in-dark),
-    nil
-  )),
-  (in-punchcut, (
-    inherit (in-dark),
-    nil
-  ))
-), $CONFIG_THEME);
-}

data/stylesheets/archetype/styleguide/components/_bristol.scss

@@ -1,15 +0,0 @@
-// ==========
-// BRISTOL
-// ==========
-$STYLEGUIDE_BRISTOLS_ID: bristol !default;
-$STYLEGUIDE_BRISTOLS: () !default;
-
-@if not styleguide-component-exists($STYLEGUIDE_BRISTOLS_ID, $CONFIG_THEME) {
-$a-blackhole: styleguide-add-component($STYLEGUIDE_BRISTOLS_ID, $STYLEGUIDE_BRISTOLS, (
-  (default, (
-    background  nth($CONFIG_TEXTURE_BRISTOL, 1),
-    nil
-  )),
-  nil
-), $CONFIG_THEME);
-}

data/stylesheets/archetype/styleguide/components/_button_groups.scss

@@ -1,47 +0,0 @@
-// ==========
-// BUTTON GROUPS
-// ==========
-$STYLEGUIDE_BUTTON_GROUPS_ID: button-group !default;
-$STYLEGUIDE_BUTTON_GROUPS: () !default;
-
-@if not styleguide-component-exists($STYLEGUIDE_BUTTON_GROUPS_ID, $CONFIG_THEME) {
-$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTON_GROUPS_ID, $STYLEGUIDE_BUTTON_GROUPS, (
-  (default, (
-    line-height         1,
-    inline-block        true, // this will use the inline-block() mixin
-    vertical-align      middle,
-    clearfix            legacy-pie-clearfix,
-    position            relative,
-    nil
-  )),
-  // BUTTON TOOLBARS
-  (in-button-toolbar, (
-    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER,
-    float                   left,
-    display                 block,
-    inline-block            nil
-  )),
-  (small in-button-toolbar, (
-    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW,
-    nil
-  )),
-  (last in-button-toolbar, (
-    margin-right            nil,
-    nil
-  )),
-  (right aligned in-button-toolbar, (
-    float                   right,
-    margin-right            nil,
-    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER
-  )),
-  (right aligned small in-button-toolbar, (
-    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW,
-    nil
-  )),
-  (right aligned last in-button-toolbar, (
-    margin-left             nil,
-    nil
-  )),
-  nil
-), $CONFIG_THEME);
-}

data/stylesheets/archetype/styleguide/components/_button_toolbars.scss

@@ -1,17 +0,0 @@
-// ==========
-// BUTTON TOOLBAR
-// ==========
-$STYLEGUIDE_BUTTON_TOOLBARS_ID: button-toolbar !default;
-$STYLEGUIDE_BUTTON_TOOLBARS: () !default;
-
-@if not styleguide-component-exists($STYLEGUIDE_BUTTON_TOOLBARS_ID, $CONFIG_THEME) {
-$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTON_TOOLBARS_ID,  $STYLEGUIDE_BUTTON_TOOLBARS, (
-  (default, (
-    line-height         1,
-    inline-block        true,
-    vertical-align      middle,
-    clearfix            legacy-pie-clearfix
-  )),
-  nil
-), $CONFIG_THEME);
-}

data/stylesheets/archetype/styleguide/components/_buttons.scss

@@ -1,339 +0,0 @@
-// ==========
-// BUTTONS
-// ==========
-$STYLEGUIDE_BUTTONS_ID: button !default;
-$STYLEGUIDE_BUTTONS: () !default;
-
-@if not styleguide-component-exists($STYLEGUIDE_BUTTONS_ID, $CONFIG_THEME) {
-$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTTONS, (
-  (default, (
-    // these are common between all buttons
-    font-weight             bold,
-    border-width            $CONFIG_DIM_GENERIC_BORDER,
-    border-style            solid,
-    cursor                  pointer,
-    margin                  0,
-    overflow                visible,
-    text-decoration         (none !important),
-    text-align              center,
-    width                   auto,
-    text-shadow             $CONFIG_SHADOW_BUTTON_TEXT,
-    // sizing
-    border-radius           $CONFIG_DIM_BUTTON_RADIUS,
-    padding                 _styleguideGetButtonPadding(medium),
-    // we set the size intentionally two pixels large and use box-sizing to adjust it
-    // this makes IE6/7 behave properly and other browsers adjust correctly
-    height                  (_styleguideGetButtonHeight(medium) + (2*$CONFIG_DIM_GENERIC_BORDER)),
-    line-height             _styleguideGetButtonHeight(medium),
-    box-sizing              border-box,
-    font-size               nth($CONFIG_FONT_BUTTON_MEDIUM, 1),
-    // palette
-    color                   $CONFIG_COLOR_BUTTON_PRIMARY,
-    background-color        $CONFIG_COLOR_BG_BUTTON_PRIMARY,
-    border-color            $CONFIG_COLOR_BORDER_BUTTON_PRIMARY,
-    filter-gradient         $CONFIG_GRADIENT_BUTTON_PRIMARY_IE,
-    background-image        $CONFIG_GRADIENT_BUTTON_PRIMARY,
-    white-space             nowrap,
-    // alignment
-    inline-block            true, // this will use the inline-block() mixin
-    vertical-align          middle,
-    // states
-    (states, (
-      (hover, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER,
-        box-shadow          $CONFIG_SHADOW_BUTTON_HOVER
-      )),
-      (active, (
-        box-shadow          $CONFIG_SHADOW_BUTTON_ACTIVE,
-        nil
-      )),
-      (disabled, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER,
-        box-shadow          none,
-        cursor              default,
-        opacity             $CONFIG_OPACITY_BUTTON_DISABLED
-      ))
-    ))
-  )),
-  // IMPORTANCE
-  (primary, (
-    // inherits from default
-    nil
-  )),
-  (secondary, (
-    text-shadow             $CONFIG_SHADOW_BUTTON_TEXT_INVERTED,
-    color                   $CONFIG_COLOR_BUTTON_SECONDARY,
-    background-color        $CONFIG_COLOR_BG_BUTTON_SECONDARY,
-    border-color            $CONFIG_COLOR_BORDER_BUTTON_SECONDARY,
-    filter-gradient         $CONFIG_GRADIENT_BUTTON_SECONDARY_IE,
-    background-image        $CONFIG_GRADIENT_BUTTON_SECONDARY,
-    (states, (
-      (hover, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER
-      )),
-      (disabled, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER
-      ))
-    ))
-  )),
-  (spotlight, (
-    text-shadow             $CONFIG_SHADOW_BUTTON_TEXT_INVERTED,
-    background-color        $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT,
-    border-color            $CONFIG_COLOR_BORDER_BUTTON_SPOTLIGHT,
-    color                   $CONFIG_COLOR_BUTTON_SPOTLIGHT,
-    filter-gradient         $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_IE,
-    background-image        $CONFIG_GRADIENT_BUTTON_SPOTLIGHT,
-    (states, (
-      (hover, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER
-      )),
-      (disabled, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER
-      ))
-    ))
-  )),
-  // CONTEXTS
-  // in a dark context
-  (in-dark, (
-    border-color            $CONFIG_COLOR_BORDER_BUTTON_DARK,
-    nil
-  )),
-  // IMPORTANCE in CONTEXTS
-  ((primary in-dark), (
-    inherit (in-dark),
-    (states, (
-      (hover, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_DARK_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_PRIMARY_DARK_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_DARK_HOVER
-      )),
-      nil
-    ))
-  )),
-  ((secondary in-dark), (
-    inherit (in-dark),
-    (states, (
-      (hover, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_DARK_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_SECONDARY_DARK_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_DARK_HOVER
-      )),
-      nil
-    ))
-  )),
-  ((spotlight in-dark), (
-    inherit (in-dark),
-    (states, (
-      (hover, (
-        background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_DARK_HOVER,
-        filter-gradient     $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_DARK_HOVER_IE,
-        background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_DARK_HOVER
-      )),
-      nil
-    ))
-  )),
-  // in the punchcut context (inherit from in-dark)
-  (primary in-punchcut, (
-    inherit (primary in-dark),
-    nil
-  )),
-  (secondary in-punchcut, (
-    inherit (secondary in-dark),
-    nil
-  )),
-  (spotlight in-punchcut, (
-    inherit (spotlight in-dark),
-    nil
-  )),
-  // in the bristol context (inherit from in-dark)
-  (primary in-bristol, (
-    inherit (primary in-dark),
-    nil
-  )),
-  (secondary in-bristol, (
-    inherit (secondary in-dark),
-    nil
-  )),
-  (spotlight in-bristol, (
-    inherit (spotlight in-dark),
-    nil
-  )),
-  // BUTTON TOOLBARS
-  (in-button-toolbar, (
-    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER,
-    float                   left,
-    display                 block,
-    inline-block            nil
-  )),
-  (small in-button-toolbar, (
-    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW,
-    nil
-  )),
-  (last in-button-toolbar, (
-    margin-right            nil,
-    nil
-  )),
-  (right aligned in-button-toolbar, (
-    float                   right,
-    margin-right            nil,
-    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER
-  )),
-  (right aligned small in-button-toolbar, (
-    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW,
-    nil
-  )),
-  (right aligned last in-button-toolbar, (
-    margin-left             nil,
-    nil
-  )),
-  // BUTTON GROUPS
-  (in-button-group, (
-    border-radius           0,
-    float                   left,
-    border-left-width       0,
-    display                 block,
-    inline-block            nil
-  )),
-  (last in-button-group, (
-    border-radius           (0 $CONFIG_DIM_BUTTON_RADIUS $CONFIG_DIM_BUTTON_RADIUS 0),
-    nil
-  )),
-  // fix the inner borders in a button group in a dark context
-  (in-button-group in-dark, (
-    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_PRIMARY,
-    nil
-  )),
-  (secondary in-button-group in-dark, (
-    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_SECONDARY,
-    nil
-  )),
-  (spotlight in-button-group in-dark, (
-    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_SPOTLIGHT,
-    nil
-  )),
-  // restore the dark border for the last one
-  (last in-button-group in-dark, (
-    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_DARK,
-    nil
-  )),
-  (in-button-group in-punchcut, (
-    inherit (in-button-group in-dark),
-    nil
-  )),
-  (secondary in-button-group in-punchcut, (
-    inherit (secondary in-button-group in-dark),
-    nil
-  )),
-  (spotlight in-button-group in-punchcut, (
-    inherit (spotlight in-button-group in-dark),
-    nil
-  )),
-  (last in-button-group in-punchcut, (
-    inherit (last in-button-group in-dark),
-    nil
-  )),
-  (in-button-group in-bristol, (
-    inherit (in-button-group in-dark),
-    nil
-  )),
-  (secondary in-button-group in-bristol, (
-    inherit (secondary in-button-group in-dark),
-    nil
-  )),
-  (spotlight in-button-group in-bristol, (
-    inherit (spotlight in-button-group in-dark),
-    nil
-  )),
-  (last in-button-group in-bristol, (
-    inherit (last in-button-group in-dark),
-    nil
-  )),
-  // need to add here for inheritance order to preserve the first button appearance
-  (first in-button-group, (
-    border-radius           ($CONFIG_DIM_BUTTON_RADIUS 0 0 $CONFIG_DIM_BUTTON_RADIUS),
-    // restore the left-border for the first button
-    border-left-width       nil
-  )),
-  // SIZES
-  (large, (
-    font-size               nth($CONFIG_FONT_BUTTON_LARGE, 1),
-    padding                 _styleguideGetButtonPadding(large),
-    height                  (_styleguideGetButtonHeight(large) + (2*$CONFIG_DIM_GENERIC_BORDER)),
-    line-height             _styleguideGetButtonHeight(large)
-  )),
-  (medium, (
-    // inherits from default
-    nil
-  )),
-  (small, (
-    font-size               nth($CONFIG_FONT_BUTTON_SMALL, 1),
-    padding                 _styleguideGetButtonPadding(small),
-    height                  (_styleguideGetButtonHeight(small) + (2*$CONFIG_DIM_GENERIC_BORDER)),
-    line-height             _styleguideGetButtonHeight(small)
-  )),
-  // narrow variants
-  (narrow, (
-    padding                 _styleguideGetButtonPadding(medium, narrow),
-    nil
-  )),
-  (narrow large, (
-    padding                 _styleguideGetButtonPadding(large, narrow),
-    nil
-  )),
-  (narrow small, (
-    padding                 _styleguideGetButtonPadding(small, narrow),
-    nil
-  )),
-  (indicator, (
-    hide-text               true,
-    border                  0,
-    color                   $CONFIG_COLOR_BUTTON_INDICATOR, // Added so IE 6/7 hide the text
-    width                   nth($CONFIG_DIM_BUTTON_INDICATOR_SMALL, 1),
-    height                  nth-cyclic($CONFIG_DIM_BUTTON_INDICATOR_SMALL, 2),
-    font-size               0,
-    line-height             0,
-    overflow                hidden,
-    padding                 0, // override browser defaults,
-    margin                  (0 horizontal-spacing(0.4, $abuse: true)),
-    text-shadow             nil,
-    border-radius           $CONFIG_DIM_BUTTON_INDICATOR_SMALL_RADIUS,
-    background-color        $CONFIG_COLOR_BUTTON_INDICATOR,
-    filter-gradient         nil,
-    background-image        nil,
-    (states, (
-      (hover, (
-        background-color    nil,
-        filter-gradient     nil,
-        background-image    nil,
-        box-shadow          nil
-      )),
-      (active, (
-        inherit (hover),
-        nil
-      )),
-      (disabled, (
-        color               nil,
-        background-color    nil,
-        filter-gradient     nil,
-        background-image    nil
-      )),
-      (selected, (
-        inherit (disabled),
-        nil
-      ))
-    ))
-  ))
-), $CONFIG_THEME);
-}