archetype-theme 1.0.0.alpha.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ea9a0f479ee575757ee61ced88fbb7b16c52faaa
+  data.tar.gz: 7d120b14e70c45c3d77f815e8259a5041f519ee8
+SHA512:
+  metadata.gz: 1b4d32123d02a42c4bf661b669098a725e6febcfa554d54d77280e4844a255f8ad30b98b46d119e43d7b68d6a62f678804da813e9a84e392ba7bbc291ff3faff
+  data.tar.gz: bebc8346eb88c2d71b23b6a2296d7016b26cd9f638ef1bf29eeb091b60daed52f0d2392d461008c10223dfafa445bc92ceef1f5bc49896cd7b5185df8038b975

data/LICENSE

@@ -0,0 +1,16 @@
+Archetype
+Copyright (c) 2013 LinkedIn Corp.  All rights reserved.
+Apache Software License 2.0
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/lib/archetype-theme.rb

@@ -0,0 +1,9 @@
+require 'archetype'
+
+#
+# register as an Archetype extension
+#
+Archetype::Extensions.register(
+  File.basename(__FILE__, '.rb'),
+  :path => File.expand_path(File.join(File.dirname(__FILE__), ".."))
+)

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/lib/archetype-theme/version.rb

@@ -0,0 +1,3 @@
+module ArchetypeTheme
+  VERSION = File.read(File.join(File.dirname(__FILE__), "..", "..", "VERSION")).strip
+end

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

@@ -0,0 +1,2 @@
+// intialize
+@import "theme/init";

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

@@ -0,0 +1,28 @@
+// import the component identifiers
+@import "identifiers";
+
+// 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/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/_core.scss

@@ -0,0 +1,10 @@
+$a-blackhole: require-archetype-module(archetype/core);
+
+// register module
+$a-blackhole: register-archetype-module(archetype/theme);
+
+// theme components
+@import "primitives";
+@import "helpers";
+@import "components";
+@import "keyframes";

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

@@ -0,0 +1,209 @@
+// @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 {Boolean} 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 glyph 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 glyph styles for an alert icon
+// @function  _styleguideGetAlertGlyph
+// @private
+// @param     $type {List} the glyph data
+// @return    {List} the parameters needed for glyph-icon()
+@function _styleguideGetAlertGlyph($type: $CONFIG_GLYPH_ALERT_NOTIFY) {
+  @return (nth($type, 1), nth($type, 2), nth($type, 3), before, '');
+}
+
+
+// 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 not is-null($color) and not is-null($CONFIG_DIM_GENERIC_BORDER) {
+    @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: -archetype-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: map-get((
+      hovercard:   $CONFIG_DIM_HOVERCARD_TIP
+    ), $type);
+  }
+  $a: nth($dim, 1);
+  $b: nth-cyclic($dim, 2);
+  @return map-get((
+    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 null
+@function _styleguideGetLoaderPosition($size: medium, $type: static, $context: 1) {
+  $img: nth-cyclic(map-get(map-get($CONFIG_LOADERS, $size), $type), $context);
+  @return -archetype-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(map-get(map-get($CONFIG_LOADERS, $size), $type), $context);
+  $sprite-file: -archetype-sprite-file($CONFIG_SPRITE_LOADERS, $img);
+  @if $dim == width {
+    @return -archetype-image-width($sprite-file);
+  }
+  @else {
+    @return -archetype-image-height($sprite-file);
+  }
+}
+
+// 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: map-get($CONFIG_LOADERS, $size);
+  $anim: (archetype-namespace($CONFIG_KEYFRAME_LOADERS));
+  $duration:    nth-cyclic(map-get($values, duration), $context);
+  $delay:       nth-cyclic(map-get($values, delay), $context);
+  $steps:       nth-cyclic(map-get($values, steps), $context);
+  $iterations:  nth-cyclic(map-get($values, iterations), $context);
+  @if not is-null($duration)    { $anim: append($anim, $duration); }
+  @if not is-null($delay)       { $anim: append($anim, $delay); }
+  @if not is-null($steps)       { $anim: append($anim, steps($steps, end)); }
+  @if not is-null($iterations)  { $anim: append($anim, $iterations); }
+  $position-keyframe-name: #{archetype-namespace($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(map-get(map-get($CONFIG_LOADERS, $size), static), $context);
+  $bg: -archetype-sprite($CONFIG_SPRITE_LOADERS, $img) no-repeat;
+  $bg: if(is-null($bg), 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/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/_identifiers.scss

@@ -0,0 +1,25 @@
+// component identifiers
+$STYLEGUIDE_ALERTS_ID:          alert !default;
+$STYLEGUIDE_ANNOTATIONS_ID:     annotation !default;
+$STYLEGUIDE_BRISTOLS_ID:        bristol !default;
+$STYLEGUIDE_BUTTON_GROUPS_ID:   button-group !default;
+$STYLEGUIDE_BUTTON_TOOLBARS_ID: button-toolbar !default;
+$STYLEGUIDE_BUTTONS_ID:         button !default;
+$STYLEGUIDE_CANVAS_ID:          canvas !default;
+$STYLEGUIDE_CARETS_ID:          caret !default;
+$STYLEGUIDE_CLOSES_ID:          close !default;
+$STYLEGUIDE_CONTAINERS_ID:      container !default;
+$STYLEGUIDE_COPY_ID:            copy !default;
+$STYLEGUIDE_FLYOUTS_ID:         flyout !default;
+$STYLEGUIDE_HEADINGS_ID:        heading !default;
+$STYLEGUIDE_HEADLINES_ID:       headline !default;
+$STYLEGUIDE_HOVERCARDS_ID:      hovercard !default;
+$STYLEGUIDE_ICONS_ID:           icon !default;
+$STYLEGUIDE_IDENTITY_ID:        identity !default;
+$STYLEGUIDE_LINKS_ID:           link !default;
+$STYLEGUIDE_LOADERS_ID:         loader !default;
+$STYLEGUIDE_MENU_ITEMS_ID:      menu-item !default;
+$STYLEGUIDE_MODULES_ID:         module !default;
+$STYLEGUIDE_PULLQUOTES_ID:      pullquote !default;
+$STYLEGUIDE_PUNCHCUTS_ID:       punchcut !default;
+$STYLEGUIDE_TOOLTIPS_ID:        tooltip !default;

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

@@ -0,0 +1,5 @@
+@import "core";
+
+@include unless-archetype-module-initalized(archetype/theme) {
+  @include generate-loader-keyframes;
+}

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

@@ -0,0 +1,64 @@
+// generate rotational and position keyframes for loading spinners
+// @mixin     generate-loader-keyframes
+@mixin generate-loader-keyframes() {
+  @if not $CONFIG_DISABLE_STYLEGUIDE_SPRITES {
+    // generate rotating keyframes
+    @include -generate-loader-keyframes-360();
+    // generate specific keyframes
+    @each $size, $values in $CONFIG_LOADERS {
+      @if $size and $values {
+        @each $context in (1 2) {
+          $name: unquote('#{$size}-#{$context}');
+          $icon: nth-cyclic(map-get($values, default), $context);
+          $position: -archetype-sprite-position($CONFIG_SPRITE_LOADERS, $icon);
+          $sprite-file: -archetype-sprite-file($CONFIG_SPRITE_LOADERS, $icon);
+          $width: -archetype-image-width($sprite-file);
+          $height: -archetype-image-height($sprite-file);
+          @include -generate-loader-keyframes-position($name, $position, $width, $height);
+        }
+      }
+    }
+  }
+}
+
+// generate rotational keyframes for loading spinners
+// @mixin     -generate-loader-keyframes-360
+// @private
+@mixin -generate-loader-keyframes-360() {
+  @include do-once("archetype/ui/generate-keyframe/#{$CONFIG_KEYFRAME_LOADERS}") {
+    @include keyframes(archetype-namespace($CONFIG_KEYFRAME_LOADERS)) {
+      from { @include rotate(0deg); }
+      to { @include rotate(360deg); }
+    }
+  }
+}
+
+// generate position keyframes for loading spinners
+// @mixin     -generate-loader-keyframes-position
+// @private
+// @param     $name {String} the name for this keyframe
+// @param     $position {List} the background-position of the spinner image
+// @param     $width {Number} the width of the spinner image
+// @param     $height {Number} the height of the spinner image
+@mixin -generate-loader-keyframes-position($name, $position, $width, $height) {
+  $name: unquote('#{archetype-namespace($CONFIG_KEYFRAME_LOADERS)}-position-#{$name}');
+  @include do-once("archetype/ui/generate-keyframe/#{$name}") {
+    @include keyframes($name) {
+      from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
+    }
+  }
+}
+
+// a helper to generate the required CSS for the position keyframe
+// @mixin     -generate-loader-keyframes-position-css
+// @private
+// @param     $position {List} the background-position of the spinner image
+// @param     $width {Number} the width of the spinner image
+// @param     $height {Number} the height of the spinner image
+@mixin -generate-loader-keyframes-position-css($position, $width, $height) {
+  background-position: $position;
+  width: $width;
+  height: $height;
+  margin-left: $width / -2;
+  margin-top: $height / -2;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/_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/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_alerts.scss

@@ -0,0 +1,54 @@
+// ==========
+// ALERTS
+// ==========
+$STYLEGUIDE_ALERTS_ID: alert !default;
+$STYLEGUIDE_ALERTS: () !default;
+
+@if should-register-component($STYLEGUIDE_ALERTS_ID) {
+$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: (
+      $CORE_GLYPH_SELECTOR_VAR: (
+        position:         absolute,
+        top:              nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 1),
+        left:             nth(_styleguideGetAlertGlyphOffset($CONFIG_GLYPH_ALERT_NOTIFY), 2),
+        line-height:      1
+      )
+    )
+  ),
+  notice: null, // just inherits the default
+  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)
+  )
+)) !global;
+}