archetype 0.0.1.pre.1 → 0.0.1.pre.3.00dfd9a

data/stylesheets/archetype/styleguide/_components.scss

@@ -0,0 +1,25 @@
+// 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

@@ -0,0 +1,215 @@
+// @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

@@ -0,0 +1,10 @@
+// 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/_styleguide.scss

@@ -0,0 +1,41 @@
+// styleguide
+// @category  styleguide
+
+// interface for the styleguide references
+// @mixin     styleguide
+// @param     $is ... $is-10   {List} a descriptive definition of the element, must contain an ID and optionally any modifiers e.g. `large primary button`
+// @param     $exclude {List} a list of styles to exclude from output
+// @param     $state {String} a specific state to output
+// @param     $theme {String} the theme name
+@mixin styleguide($is: (), $is-2: false, $is-3: false, $is-4: false, $is-5: false, $is-6: false, $is-7: false, $is-8: false, $is-9: false, $is-10: false, $exclude: (), $state: false, $theme: $CONFIG_THEME) {
+  $definition: compact($is, $is-2, $is-3, $is-4, $is-5, $is-6, $is-7, $is-8, $is-9, $is-10);
+  @if length($definition) > 0 {
+    $styles: styleguide($definition, $state, $theme);
+    // output a debug message
+    @include debug-message("[archetype:styleguide:begin] --- #{$definition} ---");
+    // generate actual styles
+    @include to-styles($styles, $exclude: $exclude);
+    // more debugging
+    @include debug-message("[archetype:styleguide:end]   --- #{$definition} ---");
+  }
+}
+
+// output the difference between two styelguide invocations
+// @mixin     styleguide-diff
+// @param     $original {List} the original styleguide reference to compare to
+// @param     $other {List} the other styleguide reference
+// @param     $exclude {List} a list of styles to exclude from output
+// @param     $theme {String} the theme name
+@mixin styleguide-diff($original, $other, $exclude: (), $theme: $CONFIG_THEME) {
+  $original: compact($original, nil);
+  $other: compact($other, nil);
+  $diff: styleguide-diff($original, $other, $theme);
+  @if length($diff) > 0 {
+    // output a debug message
+    @include debug-message("[archetype:styleguide:diff:begin] --- `#{$original}` vs `#{$other}` ---");
+    // generate actual styles
+    @include to-styles($diff, $exclude: $exclude);
+    // more debugging
+    @include debug-message("[archetype:styleguide:diff:end]   --- `#{$original}` vs `#{$other}` ---");
+  }
+}

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

@@ -0,0 +1,59 @@
+// ==========
+// 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

@@ -0,0 +1,27 @@
+// ==========
+// 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

@@ -0,0 +1,15 @@
+// ==========
+// 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

@@ -0,0 +1,47 @@
+// ==========
+// 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);
+}