archetype-theme 1.0.0.alpha.1

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_annotations.scss

@@ -0,0 +1,25 @@
+// ==========
+// ANNOTATIONS
+// ==========
+$STYLEGUIDE_ANNOTATIONS_ID: annotation !default;
+$STYLEGUIDE_ANNOTATIONS: () !default;
+
+@if should-register-component($STYLEGUIDE_ANNOTATIONS_ID) {
+$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 a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:            in dark,
+  ),
+  in a $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:            in dark,
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_bristol.scss

@@ -0,0 +1,13 @@
+// ==========
+// BRISTOL
+// ==========
+$STYLEGUIDE_BRISTOLS_ID: bristol !default;
+$STYLEGUIDE_BRISTOLS: () !default;
+
+@if should-register-component($STYLEGUIDE_BRISTOLS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_BRISTOLS_ID, $STYLEGUIDE_BRISTOLS, (
+  default: (
+    background: nth($CONFIG_TEXTURE_BRISTOL, 1)
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_button_groups.scss

@@ -0,0 +1,40 @@
+// ==========
+// BUTTON GROUPS
+// ==========
+$STYLEGUIDE_BUTTON_GROUPS_ID: button-group !default;
+$STYLEGUIDE_BUTTON_GROUPS: () !default;
+
+@if should-register-component($STYLEGUIDE_BUTTON_GROUPS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTON_GROUPS_ID, $STYLEGUIDE_BUTTON_GROUPS, (
+  default: (
+    line-height:        1,
+    inline-block:       (middle, middle), // this will use the inline-block() mixin
+    clearfix:           legacy-pie-clearfix,
+    position:           relative
+  ),
+  // BUTTON TOOLBARS
+  in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-right:           $CONFIG_DIM_BUTTON_SPACING_OUTER,
+    float:                  left,
+    display:                block,
+    inline-block:           null
+  ),
+  small in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW
+  ),
+  last in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-right            null
+  ),
+  right aligned in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    float                   right,
+    margin-right            null,
+    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER
+  ),
+  right aligned small in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW
+  ),
+  right aligned last in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-left             null
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_button_toolbars.scss

@@ -0,0 +1,15 @@
+// ==========
+// BUTTON TOOLBAR
+// ==========
+$STYLEGUIDE_BUTTON_TOOLBARS_ID: button-toolbar !default;
+$STYLEGUIDE_BUTTON_TOOLBARS: () !default;
+
+@if should-register-component($STYLEGUIDE_BUTTON_TOOLBARS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTON_TOOLBARS_ID,  $STYLEGUIDE_BUTTON_TOOLBARS, (
+  default: (
+    line-height:        1,
+    inline-block:       (middle, middle),
+    clearfix:           legacy-pie-clearfix
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_buttons.scss

@@ -0,0 +1,299 @@
+// ==========
+// BUTTONS
+// ==========
+$STYLEGUIDE_BUTTONS_ID: button !default;
+$STYLEGUIDE_BUTTONS: () !default;
+
+@if should-register-component($STYLEGUIDE_BUTTONS_ID) {
+$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:             (middle, middle), // this will use the inline-block() mixin
+    // 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
+      ),
+      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
+  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
+  ),
+  // 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
+      )
+    )
+  ),
+  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
+      )
+    )
+  ),
+  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
+      )
+    )
+  ),
+  // in the punchcut context (inherit from in dark)
+  primary in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  primary in dark
+  ),
+  secondary in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  secondary in dark
+  ),
+  spotlight in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  spotlight in dark
+  ),
+  // in the bristol context (inherit from in dark)
+  primary in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  primary in dark
+  ),
+  secondary in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  secondary in dark
+  ),
+  spotlight in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  spotlight in dark
+  ),
+  // BUTTON TOOLBARS
+  in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-right:             $CONFIG_DIM_BUTTON_SPACING_OUTER,
+    float:                    left,
+    display:                  block,
+    inline-block:             null
+  ),
+  small in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-right:             $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW
+  ),
+  last in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-right:             null
+  ),
+  right aligned in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    float:                    right,
+    margin-right:             null,
+    margin-left:              $CONFIG_DIM_BUTTON_SPACING_OUTER
+  ),
+  right aligned small in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-left:              $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW
+  ),
+  right aligned last in $STYLEGUIDE_BUTTON_TOOLBARS_ID: (
+    margin-left:              null,
+  ),
+  // BUTTON GROUPS
+  in $STYLEGUIDE_BUTTON_GROUPS_ID: (
+    border-radius:            0,
+    float:                    left,
+    border-left-width:        0,
+    display:                  block,
+    inline-block:             null
+  ),
+  last in $STYLEGUIDE_BUTTON_GROUPS_ID: (
+    border-radius:            0 $CONFIG_DIM_BUTTON_RADIUS $CONFIG_DIM_BUTTON_RADIUS 0
+  ),
+  // fix the inner borders in a button group in a dark context
+  in $STYLEGUIDE_BUTTON_GROUPS_ID in dark: (
+    border-right-color:       $CONFIG_COLOR_BORDER_BUTTON_PRIMARY
+  ),
+  secondary in $STYLEGUIDE_BUTTON_GROUPS_ID in dark: (
+    border-right-color:       $CONFIG_COLOR_BORDER_BUTTON_SECONDARY,
+  ),
+  spotlight in $STYLEGUIDE_BUTTON_GROUPS_ID in dark: (
+    border-right-color:       $CONFIG_COLOR_BORDER_BUTTON_SPOTLIGHT
+  ),
+  // restore the dark border for the last one
+  last in $STYLEGUIDE_BUTTON_GROUPS_ID in dark: (
+    border-right-color:       $CONFIG_COLOR_BORDER_BUTTON_DARK
+  ),
+  in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  secondary in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  secondary in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  spotlight in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  spotlight in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  last in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  last in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  secondary in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  secondary in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  spotlight in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  spotlight in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  last in $STYLEGUIDE_BUTTON_GROUPS_ID in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  last in $STYLEGUIDE_BUTTON_GROUPS_ID in dark
+  ),
+  // need to add here for inheritance order to preserve the first button appearance
+  first in $STYLEGUIDE_BUTTON_GROUPS_ID: (
+    border-radius:            ($CONFIG_DIM_BUTTON_RADIUS 0 0 $CONFIG_DIM_BUTTON_RADIUS),
+    // restore the left-border for the first button
+    border-left-width:        null
+  ),
+  // 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: null, // inherits from default
+  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)
+  ),
+  narrow large: (
+    padding:                  _styleguideGetButtonPadding(large, narrow)
+  ),
+  narrow small: (
+    padding:                  _styleguideGetButtonPadding(small, narrow)
+  ),
+  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:              null,
+    border-radius:            $CONFIG_DIM_BUTTON_INDICATOR_SMALL_RADIUS,
+    background-color:         $CONFIG_COLOR_BUTTON_INDICATOR,
+    filter-gradient:          null,
+    background-image:         null,
+    states: (
+      hover: (
+        background-color:     null,
+        filter-gradient:      null,
+        background-image:     null,
+        box-shadow:           null
+      ),
+      active: (
+        inherit: hover
+      ),
+      disabled: (
+        color:                null,
+        background-color:     null,
+        filter-gradient:      null,
+        background-image:     null
+      ),
+      selected: (
+        inherit:              disabled
+      )
+    )
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_canvas.scss

@@ -0,0 +1,13 @@
+// ==========
+// CANVAS
+// ==========
+$STYLEGUIDE_CANVAS_ID: canvas !default;
+$STYLEGUIDE_CANVAS: () !default;
+
+@if should-register-component($STYLEGUIDE_CANVAS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CANVAS_ID,  $STYLEGUIDE_CANVAS, (
+  default: (
+     background: nth($CONFIG_TEXTURE_CANVAS, 1)
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_carets.scss

@@ -0,0 +1,292 @@
+// ==========
+// CARETS
+// ==========
+$STYLEGUIDE_CARETS_ID: caret !default;
+$STYLEGUIDE_CARETS: () !default;
+
+@if should-register-component($STYLEGUIDE_CARETS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CARETS_ID,  $STYLEGUIDE_CARETS, (
+  default: (
+    inline-block:         (middle, middle),
+    // triangle... @see triangle() mixin
+    height:               0,
+    width:                0,
+    font-size:            0,
+    line-height:          0,
+    border-style:         dashed,
+    border-color:         transparent,
+    border-top-style:     solid,
+    border-width:         _styleguideCaretSize(medium),
+    border-top-color:     nth($CONFIG_COLOR_COPY, 1),
+    overflow:             hidden,
+    content:              $CONTENT_PLACEHOLDER
+  ),
+  in dark: (
+    border-top-color:     nth-cyclic($CONFIG_COLOR_COPY, 2)
+  ),
+  in a $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_BUTTONS_ID: (
+    border-top-color:     $CONFIG_COLOR_BUTTON_PRIMARY
+  ),
+  in a secondary $STYLEGUIDE_BUTTONS_ID: (
+    border-top-color:     $CONFIG_COLOR_BUTTON_SECONDARY
+  ),
+  in a spotlight $STYLEGUIDE_BUTTONS_ID: (
+    border-top-color:     $CONFIG_COLOR_BUTTON_SPOTLIGHT
+  ),
+  // SIZES
+  large: (
+    border-width:         _styleguideCaretSize(large)
+  ),
+  small: (
+    border-width:         _styleguideCaretSize(small)
+  ),
+  in a large $STYLEGUIDE_BUTTONS_ID: (
+    inherit:              large
+  ),
+  in a small $STYLEGUIDE_BUTTONS_ID: (
+    inherit:              small
+  ),
+  // upward caret
+  north: (
+    border-top-color:     null,
+    border-top-style:     null,
+    border-bottom-style:  solid,
+    border-bottom-color:  nth($CONFIG_COLOR_COPY, 1),
+    border-width:         _styleguideCaretSize(medium, north)
+  ),
+  north in a $STYLEGUIDE_BUTTONS_ID: (
+    border-bottom-color:  $CONFIG_COLOR_BUTTON_PRIMARY
+  ),
+  north in a secondary $STYLEGUIDE_BUTTONS_ID: (
+    border-bottom-color:  $CONFIG_COLOR_BUTTON_SECONDARY
+  ),
+  north in a spotlight $STYLEGUIDE_BUTTONS_ID: (
+    border-bottom-color:  $CONFIG_COLOR_BUTTON_SPOTLIGHT
+  ),
+  // rightward caret
+  east: (
+    border-top-color:     null,
+    border-top-style:     null,
+    border-left-style:    solid,
+    border-left-color:    nth($CONFIG_COLOR_COPY, 1),
+    border-width:         _styleguideCaretSize(medium, east)
+  ),
+  east in a $STYLEGUIDE_BUTTONS_ID: (
+    border-left-color:    $CONFIG_COLOR_BUTTON_PRIMARY
+  ),
+  east in a secondary $STYLEGUIDE_BUTTONS_ID: (
+    border-left-color:    $CONFIG_COLOR_BUTTON_SECONDARY
+  ),
+  east in a spotlight $STYLEGUIDE_BUTTONS_ID: (
+    border-left-color:    $CONFIG_COLOR_BUTTON_SPOTLIGHT
+  ),
+  // leftward caret
+  west: (
+    border-top-color:     null,
+    border-top-style:     null,
+    border-right-style:   solid,
+    border-right-color:   nth($CONFIG_COLOR_COPY, 1),
+    border-width:         _styleguideCaretSize(medium, east)
+  ),
+  west in a $STYLEGUIDE_BUTTONS_ID: (
+    border-left-color:    $CONFIG_COLOR_BUTTON_PRIMARY
+  ),
+  west in a secondary $STYLEGUIDE_BUTTONS_ID: (
+    border-left-color:    $CONFIG_COLOR_BUTTON_SECONDARY
+  ),
+  west in a spotlight$STYLEGUIDE_BUTTONS_ID: (
+    border-left-color:    $CONFIG_COLOR_BUTTON_SPOTLIGHT
+  ),
+  // SIZES
+  north in a large $STYLEGUIDE_BUTTONS_ID: (
+    border-width:         _styleguideCaretSize(large, north)
+  ),
+  north in a small $STYLEGUIDE_BUTTONS_ID: (
+    border-width:         _styleguideCaretSize(small, north)
+  ),
+  west in a large $STYLEGUIDE_BUTTONS_ID: (
+    border-width:         _styleguideCaretSize(large, west)
+  ),
+  west in a small $STYLEGUIDE_BUTTONS_ID: (
+    border-width:         _styleguideCaretSize(small, west)
+  ),
+  east in a large $STYLEGUIDE_BUTTONS_ID: (
+    border-width:         _styleguideCaretSize(large, east)
+  ),
+  east in a small $STYLEGUIDE_BUTTONS_ID: (
+    border-width:         _styleguideCaretSize(small, east)
+  ),
+  // on hovercards
+  on a $STYLEGUIDE_HOVERCARDS_ID: (
+    // remove unneeded styles
+    drop:                 all,
+    // real styles
+    position:             absolute,
+    display:              block,
+    width:                nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    height:               nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
+    margin-left:          -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    background:           (transparent image-url($CONFIG_IMG_HOVERCARD_TIP) _styleguideGetTooltipTipBG(south) no-repeat),
+    top:                  100%,
+    left:                 50%
+  ),
+  south-west on a $STYLEGUIDE_HOVERCARDS_ID: (
+    left:                 $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left:          null
+  ),
+  south-east on a $STYLEGUIDE_HOVERCARDS_ID: (
+    left:                 null,
+    right:                $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left:          null
+  ),
+  north on a $STYLEGUIDE_HOVERCARDS_ID: (
+    background-position:  _styleguideGetTooltipTipBG(north),
+    top:                  null,
+    bottom:               100%
+  ),
+  north-west on a $STYLEGUIDE_HOVERCARDS_ID: (
+    inherit:              north on $STYLEGUIDE_HOVERCARDS_ID,
+    left:                 $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left:          null
+  ),
+  north-east on a $STYLEGUIDE_HOVERCARDS_ID: (
+    inherit:              north on $STYLEGUIDE_HOVERCARDS_ID,
+    left:                 null,
+    right:                $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left:          null
+  ),
+  east on a $STYLEGUIDE_HOVERCARDS_ID: (
+    width:                nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
+    height:               nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-top:           -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-left:          null,
+    background-position:  _styleguideGetTooltipTipBG(east),
+    top:                  50%,
+    left:                 100%
+  ),
+  east-north on a $STYLEGUIDE_HOVERCARDS_ID: (
+    inherit:              east on $STYLEGUIDE_HOVERCARDS_ID,
+    top:                  $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top:           null
+  ),
+  east-south on a $STYLEGUIDE_HOVERCARDS_ID: (
+    inherit:              east on $STYLEGUIDE_HOVERCARDS_ID,
+    top:                  null,
+    bottom:               $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top:           null
+  ),
+  west on a $STYLEGUIDE_HOVERCARDS_ID: (
+    width:                nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
+    height:               nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-top:           -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-left:          null,
+    background-position:  _styleguideGetTooltipTipBG(west),
+    top:                  50%,
+    right:                100%,
+    left:                 null
+  ),
+  west-north on a $STYLEGUIDE_HOVERCARDS_ID: (
+    inherit:              west on $STYLEGUIDE_HOVERCARDS_ID,
+    top:                  $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top:           null
+  ),
+  west-south on $STYLEGUIDE_HOVERCARDS_ID: (
+    inherit:              west on $STYLEGUIDE_HOVERCARDS_ID,
+    top:                  null,
+    bottom:               $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top:           null
+  ),
+  // on tooltips
+  on a $STYLEGUIDE_TOOLTIPS_ID: (
+    position:             absolute,
+    margin-left:          -1*$CONFIG_DIM_TOOLTIP_TIP,
+    top:                  100%,
+    left:                 50%,
+    border-width:         _styleguideCaretSize(tooltip),
+    border-top-color:     nth($CONFIG_COLOR_BORDER_TOOLTIP, 1)
+  ),
+  south-west on a $STYLEGUIDE_TOOLTIPS_ID: (
+    left:                 $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-left:          null
+  ),
+  south-east on a $STYLEGUIDE_TOOLTIPS_ID: (
+    left:                 null,
+    right:                $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-left:          null
+  ),
+  north on a $STYLEGUIDE_TOOLTIPS_ID: (
+    border-width:         _styleguideCaretSize(tooltip, north),
+    border-top-color:     null,
+    border-top-style:     null,
+    border-bottom-style:  solid,
+    border-bottom-color:  nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
+    top:                  null,
+    bottom:               100%
+  ),
+  north-west on a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              north on a $STYLEGUIDE_TOOLTIPS_ID,
+    left:                 $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-left:          null
+  ),
+  north-east on a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              north on a $STYLEGUIDE_TOOLTIPS_ID,
+    right:                $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    left:                 null,
+    margin-left:          null
+  ),
+  east on a $STYLEGUIDE_TOOLTIPS_ID: (
+    border-width:         _styleguideCaretSize(tooltip, east),
+    border-top-color:     null,
+    border-top-style:     null,
+    border-left-style:    solid,
+    border-left-color:    nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
+    margin-left:          null,
+    margin-top:           -1*$CONFIG_DIM_TOOLTIP_TIP,
+    top:                  50%,
+    left:                 100%
+  ),
+  east-north on a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              east on a $STYLEGUIDE_TOOLTIPS_ID,
+    top:                  $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top:           null
+  ),
+  east-south on a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              east on a $STYLEGUIDE_TOOLTIPS_ID,
+    top:                  null,
+    bottom:               $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top:           null
+  ),
+  west on a $STYLEGUIDE_TOOLTIPS_ID: (
+    border-width:         _styleguideCaretSize(tooltip, west),
+    border-top-color:     null,
+    border-top-style:     null,
+    border-right-style:   solid,
+    border-right-color:   nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
+    margin-left:          null,
+    margin-top:           -1*$CONFIG_DIM_TOOLTIP_TIP,
+    top:                  50%,
+    right:                100%,
+    left:                 null
+  ),
+  west-north on a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              west on a $STYLEGUIDE_TOOLTIPS_ID,
+    top:                  $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top:           null
+  ),
+  west-south on a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              west on a $STYLEGUIDE_TOOLTIPS_ID,
+    top:                  null,
+    bottom:               $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top:           null
+  )
+)) !global;
+}