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

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

@@ -0,0 +1,63 @@
+// ==========
+// CLOSES
+// ==========
+$STYLEGUIDE_CLOSES_ID: close !default;
+$STYLEGUIDE_CLOSES: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_CLOSES_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CLOSES_ID,  $STYLEGUIDE_CLOSES, (
+  (default, (
+    color               inherit,
+    background          (transparent none),
+    padding             (0 1px 0 0),
+    border              0,
+    margin              0,
+    cursor              pointer,
+    text-decoration     none,
+    position            absolute,
+    overflow            hidden,
+    top                 vertical-spacing(2),
+    right               horizontal-spacing(2),
+    width               nth($CONFIG_GLYPH_CLOSE, 4),
+    height              nth($CONFIG_GLYPH_CLOSE, 4),
+    text-indent         (nth($CONFIG_GLYPH_CLOSE, 4) + 1px),
+    glyph-icon          (nth($CONFIG_GLYPH_CLOSE, 1), nth($CONFIG_GLYPH_CLOSE, 2), nth($CONFIG_GLYPH_CLOSE, 3), before, 'text-decoration:none;vertical-align:top;line-height:1;position:absolute;top:0;right:0;'),
+    (selectors, (
+      ('&:before', (
+        vertical-align  top,
+        line-height     1,
+        position        absolute,
+        top             0,
+        right           0,
+        text-decoration none,
+        cursor          pointer
+      )),
+      nil
+    )),
+    (states, (
+      (hover, (
+        text-shadow     $CONFIG_SHADOW_CLOSES,
+        nil
+      )),
+      nil
+    ))
+  )),
+  (in-alert, (
+    color               nth($CONFIG_COLOR_COPY, 2),
+    nil
+  )),
+  (in-dialog, (
+    color               nth($CONFIG_COLOR_COPY, 2),
+    opacity             0.7,
+    top                 vertical-spacing(2.6, $abuse: true),
+    (states, (
+      (hover, (
+        opacity         1,
+        nil
+      )),
+      nil
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,27 @@
+// ==========
+// CONTAINER
+// ==========
+$STYLEGUIDE_CONTAINERS_ID: container !default;
+$STYLEGUIDE_CONTAINERS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_CONTAINERS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CONTAINERS_ID,  $STYLEGUIDE_CONTAINERS, (
+  (default, (
+    background        nth($CONFIG_TEXTURE_CONTAINER, 1),
+    box-shadow        $CONFIG_SHADOW_CONTAINER,
+    target-browser    $CONFIG_SHADOW_CONTAINER_ALT   // simulate the shadow in IE<9
+  )),
+  (light, (
+    nil
+  )),
+  (dark, (
+    background        nth($CONFIG_TEXTURE_CONTAINER, 2),
+    nil
+  )),
+  (without-shadow, (
+    box-shadow        nil,
+    target-browser    nil,
+    nil
+  ))
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,85 @@
+// ==========
+// COPY
+// ==========
+$STYLEGUIDE_COPY_ID: copy !default;
+$STYLEGUIDE_COPY: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_COPY_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_COPY_ID,  $STYLEGUIDE_COPY, (
+  (default, (
+    font-size           nth($CONFIG_FONT_COPY_MEDIUM, 1),
+    line-height         nth-cyclic($CONFIG_FONT_COPY_MEDIUM, 2),
+    color               nth($CONFIG_COLOR_COPY, 1),
+    font-weight         normal
+  )),
+  // sizes
+  (medium, (
+    nil
+  )),
+  (large, (
+    font-size           nth($CONFIG_FONT_COPY_LARGE, 1),
+    line-height         nth-cyclic($CONFIG_FONT_COPY_LARGE, 2)
+  )),
+  (small, (
+    font-size           nth($CONFIG_FONT_COPY_SMALL, 1),
+    line-height         nth-cyclic($CONFIG_FONT_COPY_SMALL, 2)
+  )),
+  // contexts
+  (in-dark, (
+    color               nth-cyclic($CONFIG_COLOR_COPY, 2),
+    nil
+  )),
+  (in-module, (
+    color               nth($CONFIG_COLOR_COPY, 1),
+    nil
+  )),
+  (in-bristol, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-tooltip, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-alert, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-punchcut, (
+    inherit (in-dark),
+    text-shadow         nth-cyclic($CONFIG_SHADOW_COPY, 2),
+    nil
+  )),
+  (breadcrumb, (
+    color               nth($CONFIG_COLOR_BREADCRUMB, 1),
+    font-size           nth($CONFIG_FONT_BREADCRUMB, 1),
+    font-weight         $CONFIG_FONT_WEIGHT_BREADCRUMB,
+    text-decoration     nth($CONFIG_DECORATION_LINK, 1),
+    text-shadow         $CONFIG_SHADOW_BREADCRUMB,
+    nil
+  )),
+  (active breadcrumb, (
+    color               nth($CONFIG_COLOR_BREADCRUMB_ACTIVE, 1),
+    font-size           nth($CONFIG_FONT_BREADCRUMB, 1),
+    font-weight         $CONFIG_FONT_WEIGHT_BREADCRUMB,
+    text-shadow         $CONFIG_SHADOW_BREADCRUMB,
+    border-left         ($CONFIG_DIM_GENERIC_BORDER solid $CONFIG_COLOR_BREADCRUMB),
+    margin              $CONFIG_DIM_BREADCRUMB_SPACING_OUTER,
+    padding             $CONFIG_DIM_BREADCRUMB_SPACING,
+    nil
+  )),
+  (emphasized, (
+    font-style          italic,
+    nil
+  )),
+  (strong, (
+    font-weight         bold,
+    nil
+  )),
+  // muted colors
+  (muted, (
+    color               nth($CONFIG_COLOR_COPY_MUTED, 1),
+    nil
+  ))
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,52 @@
+// ==========
+// FLYOUT MENUS
+// ==========
+$STYLEGUIDE_FLYOUTS_ID: flyout !default;
+$STYLEGUIDE_FLYOUTS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_FLYOUTS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_FLYOUTS_ID,  $STYLEGUIDE_FLYOUTS, (
+  (default, (
+    display               none,                         // hidden by default (use `visible flyout` if you want it shown by default)
+    position              absolute,                     // position!
+    top                   100%,                         // align it to the bottom of the context
+    left                  0,                            // align left
+    z-index               1,
+    border                ($CONFIG_DIM_GENERIC_BORDER solid nth($CONFIG_COLOR_BORDER_FLYOUT,1)),
+    background            nth($CONFIG_TEXTURE_CONTAINER, 1),
+    box-shadow            $CONFIG_SHADOW_FLYOUT,
+    padding               $CONFIG_DIM_FLYOUT_SPACING,
+    min-width             $CONFIG_DIM_FLYOUT_MIN_WIDTH,
+    cursor                default,
+    float                 left,
+    list-style            none                          // just incase its a list
+  )),
+  (visible, (
+    display               block,
+    nil
+  )),
+  (in-button, (
+    // restore some things used for buttons
+    font-weight           normal,
+    white-space           normal,
+    text-shadow           none,
+    // no box-shadow
+    box-shadow            nil,
+    // thick borders!
+    border-width          $CONFIG_DIM_GENERIC_BORDER_THICK,
+    border-radius         $CONFIG_DIM_FLYOUT_RADIUS
+  )),
+  (in-button-group, (
+    inherit (in-button),
+    nil
+  )),
+  (upward, (
+    top                   nil,
+    bottom                100%
+  )),
+  (right aligned, (
+    left                  nil,
+    right                 0
+  ))
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,33 @@
+// ==========
+// HEADINGS
+// ==========
+$STYLEGUIDE_HEADINGS_ID: heading !default;
+$STYLEGUIDE_HEADINGS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_HEADINGS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_HEADINGS_ID,  $STYLEGUIDE_HEADINGS, (
+  (default, (
+    nil
+  )),
+  (in-flyout in-in-button-group, (
+    margin                $CONFIG_DIM_HEADING_SPACING_OUTER,
+    padding               $CONFIG_DIM_HEADING_SPACING,
+    background-color      $CONFIG_TEXTURE_HEADING,
+    border                ($CONFIG_DIM_GENERIC_BORDER solid nth($CONFIG_COLOR_BORDER_SECTION,1)),
+    border-width          ($CONFIG_DIM_GENERIC_BORDER 0),
+    color                 nth($CONFIG_COLOR_COPY_MUTED, 1)
+  )),
+  (first in-flyout in-in-button-group, (
+    margin-top            0,
+    border-top-width      0
+  )),
+  (in-flyout in-in-button, (
+    inherit (in-flyout in-in-button-group),
+    nil
+  )),
+  (first in-flyout in-in-button, (
+    inherit (first in-flyout in-in-button-group),
+    nil
+  ))
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,63 @@
+// ==========
+// HEADLINES
+// ==========
+$STYLEGUIDE_HEADLINES_ID: headline !default;
+$STYLEGUIDE_HEADLINES: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_HEADLINES_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_HEADLINES_ID,  $STYLEGUIDE_HEADLINES, (
+  (default, (
+    font-size           nth($CONFIG_FONT_HEADLINE_LARGE, 1),
+    font-weight         bold,
+    line-height         nth-cyclic($CONFIG_FONT_HEADLINE_LARGE, 2),
+    color               nth($CONFIG_COLOR_STRONG, 1)
+  )),
+  (muted, (
+    font-weight         normal,
+    nil
+  )),
+  (xlarge, (
+    font-size           nth($CONFIG_FONT_HEADLINE_XLARGE, 1),
+    line-height         nth-cyclic($CONFIG_FONT_HEADLINE_XLARGE, 2)
+  )),
+  (xxlarge, (
+    font-size           nth($CONFIG_FONT_HEADLINE_XXLARGE, 1),
+    line-height         nth-cyclic($CONFIG_FONT_HEADLINE_XXLARGE, 2)
+  )),
+  (large, (
+    nil
+  )),
+  (medium, (
+    font-size           nth($CONFIG_FONT_HEADLINE_MEDIUM, 1),
+    line-height         nth-cyclic($CONFIG_FONT_HEADLINE_MEDIUM, 2)
+  )),
+  (small, (
+    font-size           nth($CONFIG_FONT_HEADLINE_SMALL, 1),
+    line-height         nth-cyclic($CONFIG_FONT_HEADLINE_SMALL, 2)
+  )),
+  (xsmall, (
+    font-size           nth($CONFIG_FONT_HEADLINE_XSMALL, 1),
+    line-height         nth-cyclic($CONFIG_FONT_HEADLINE_XSMALL, 2)
+  )),
+  (in-dark, (
+    color               nth-cyclic($CONFIG_COLOR_STRONG, 2),
+    nil
+  )),
+  (in-bristol, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-tooltip, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-alert, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-punchcut, (
+    inherit (in-dark),
+    text-shadow         nth-cyclic($CONFIG_SHADOW_COPY, 2)
+  ))
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,27 @@
+// ==========
+// HOVERCARDS
+// ==========
+$STYLEGUIDE_HOVERCARDS_ID: hovercard !default;
+$STYLEGUIDE_HOVERCARDS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_HOVERCARDS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_HOVERCARDS_ID,  $STYLEGUIDE_HOVERCARDS, (
+  (default, (
+    border-radius       $CONFIG_DIM_HOVERCARD_RADIUS,
+    background          nth($CONFIG_TEXTURE_CONTAINER, 1),
+    border-color        nth($CONFIG_COLOR_BORDER_HOVERCARD, 1),
+    border-style        solid,
+    border-width        $CONFIG_DIM_GENERIC_BORDER,
+    box-shadow          $CONFIG_SHADOW_HOVERCARD,
+    max-width           $CONFIG_DIM_HOVERCARD_MAX_WIDTH,
+    padding             $CONFIG_DIM_HOVERCARD_SPACING,
+    // structure
+    outline             0,  // for accessibility purposes, we don't want to outline the hovercard if it has focus
+    display             block,
+    position            absolute,
+    visibility          visible,
+    z-index             1
+  )),
+  nil
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,17 @@
+// ==========
+// ICONS
+// ==========
+$STYLEGUIDE_ICONS_ID: icon !default;
+$STYLEGUIDE_ICONS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_ICONS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_ICONS_ID,  $STYLEGUIDE_ICONS, (
+  (default, (
+    inline-block        true,
+    hide-text           true,
+    content             $CONTENT_PLACEHOLDER,
+    background          (none no-repeat scroll 0 0 transparent)
+  )),
+  nil
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,34 @@
+// ==========
+// IDENTITIES
+// ==========
+$STYLEGUIDE_IDENTITY_ID: identity !default;
+$STYLEGUIDE_IDENTITY: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_IDENTITY_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_IDENTITY_ID,  $STYLEGUIDE_IDENTITY, (
+  (default, (
+    color                   nth($CONFIG_COLOR_BRAND, 1),
+    font-weight             bold,
+    text-decoration         nth($CONFIG_DECORATION_IDENTITY, 1),
+    (states, (
+      (hover, (
+        text-decoration     nth-cyclic($CONFIG_DECORATION_IDENTITY, 2),
+        nil
+      )),
+      nil
+    ))
+  )),
+  (in-dark, (
+    color                   nth-cyclic($CONFIG_COLOR_BRAND, 2),
+    nil
+  )),
+  (in-punchcut, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-bristol, (
+    inherit (in-dark),
+    nil
+  ))
+), $CONFIG_THEME);
+}

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

@@ -0,0 +1,66 @@
+// ==========
+// LINKS
+// ==========
+$STYLEGUIDE_LINKS_ID: link !default;
+$STYLEGUIDE_LINKS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_LINKS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_LINKS_ID,  $STYLEGUIDE_LINKS, (
+  (default, (
+    color                   nth($CONFIG_COLOR_BRAND, 1),
+    text-decoration         nth($CONFIG_DECORATION_LINK, 1),
+    (states, (
+      (hover, (
+        text-decoration     nth-cyclic($CONFIG_DECORATION_LINK, 2),
+        nil
+      )),
+      nil
+    ))
+  )),
+  (without-underline, (
+    (states, (
+      (hover, (
+        text-decoration     none,
+        nil
+      )),
+      nil
+    )),
+    nil
+  )),
+  (in-dark, (
+    color                   nth-cyclic($CONFIG_COLOR_BRAND, 2),
+    nil
+  )),
+  (in-punchcut, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-bristol, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-alert, (
+    color                   nth-cyclic($CONFIG_COLOR_COPY, 2),
+    font-weight             bold,
+    (states, (
+      (hover, (
+        color               nil,
+        nil
+      )),
+      nil
+    ))
+  )),
+  (muted, (
+    // de-emphasized links have no color until you hover over them
+    color                   nil,
+    (states, (
+      (hover, (
+        color               nth($CONFIG_COLOR_BRAND, 1),
+        text-decoration     none
+      )),
+      nil
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}