archetype 0.0.1.pre.3.f9dde24 → 0.0.1.pre.3.90263a7

data/test/fixtures/stylesheets/archetype/expected/styleguide/buttons.css

@@ -708,7 +708,7 @@
   font-size: 16px;
   color: white;
   background-color: #0074cc;
-  border-color: #1b5480;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF0055CC');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
@@ -784,7 +784,7 @@
   font-size: 16px;
   color: #333333;
   background-color: whitesmoke;
-  border-color: #aaaaaa;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
@@ -860,7 +860,7 @@
   font-size: 16px;
   color: white;
   background-color: #414141;
-  border-color: #111111;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF555555', endColorstr='#FF222222');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));
@@ -936,7 +936,7 @@
   font-size: 13px;
   color: white;
   background-color: #0074cc;
-  border-color: #1b5480;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF0055CC');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
@@ -1012,7 +1012,7 @@
   font-size: 13px;
   color: #333333;
   background-color: whitesmoke;
-  border-color: #aaaaaa;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
@@ -1088,7 +1088,7 @@
   font-size: 13px;
   color: white;
   background-color: #414141;
-  border-color: #111111;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF555555', endColorstr='#FF222222');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));
@@ -1164,7 +1164,7 @@
   font-size: 12px;
   color: white;
   background-color: #0074cc;
-  border-color: #1b5480;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF0055CC');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
@@ -1240,7 +1240,7 @@
   font-size: 12px;
   color: #333333;
   background-color: whitesmoke;
-  border-color: #aaaaaa;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
@@ -1316,7 +1316,7 @@
   font-size: 12px;
   color: white;
   background-color: #414141;
-  border-color: #111111;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF555555', endColorstr='#FF222222');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));
@@ -1393,7 +1393,7 @@
   font-size: 16px;
   color: white;
   background-color: #0074cc;
-  border-color: #1b5480;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF0055CC');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
@@ -1469,7 +1469,7 @@
   font-size: 16px;
   color: #333333;
   background-color: whitesmoke;
-  border-color: #aaaaaa;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
@@ -1545,7 +1545,7 @@
   font-size: 16px;
   color: white;
   background-color: #414141;
-  border-color: #111111;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF555555', endColorstr='#FF222222');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));
@@ -1621,7 +1621,7 @@
   font-size: 13px;
   color: white;
   background-color: #0074cc;
-  border-color: #1b5480;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF0055CC');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
@@ -1697,7 +1697,7 @@
   font-size: 13px;
   color: #333333;
   background-color: whitesmoke;
-  border-color: #aaaaaa;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
@@ -1773,7 +1773,7 @@
   font-size: 13px;
   color: white;
   background-color: #414141;
-  border-color: #111111;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF555555', endColorstr='#FF222222');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));
@@ -1849,7 +1849,7 @@
   font-size: 12px;
   color: white;
   background-color: #0074cc;
-  border-color: #1b5480;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0088CC', endColorstr='#FF0055CC');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
@@ -1925,7 +1925,7 @@
   font-size: 12px;
   color: #333333;
   background-color: whitesmoke;
-  border-color: #aaaaaa;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
@@ -2001,7 +2001,7 @@
   font-size: 12px;
   color: white;
   background-color: #414141;
-  border-color: #111111;
+  border-color: #434343;
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF555555', endColorstr='#FF222222');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));

data/test/fixtures/stylesheets/archetype/expected/styleguide/drop.css

@@ -0,0 +1,63 @@
+.dropping-styles-test {
+  /* should contain hover state and .test selector */
+  display: block;
+  color: red;
+  background: green;
+}
+.dropping-styles-test.hover, .dropping-styles-test:hover, .dropping-styles-test.focus, .dropping-styles-test:focus {
+  background: #eeeeee;
+  border: 2px solid red;
+}
+.dropping-styles-test.hover .test, .dropping-styles-test:hover .test, .dropping-styles-test.focus .test, .dropping-styles-test:focus .test {
+  padding: 100px;
+  margin: 20px;
+}
+.dropping-styles-test.parent {
+  /* should contain hover state and .test selector */
+  display: none;
+  color: black;
+  background: green;
+}
+.dropping-styles-test.parent.hover, .dropping-styles-test.parent:hover, .dropping-styles-test.parent.focus, .dropping-styles-test.parent:focus {
+  background: #eeeeee;
+  border: 2px solid red;
+}
+.dropping-styles-test.parent.hover .test, .dropping-styles-test.parent:hover .test, .dropping-styles-test.parent.focus .test, .dropping-styles-test.parent:focus .test {
+  padding: 100px;
+  margin: 20px;
+}
+.dropping-styles-test.heir {
+  /* should contain hover state and .test selector */
+  display: none;
+  color: black;
+  background: green;
+}
+.dropping-styles-test.heir.hover, .dropping-styles-test.heir:hover, .dropping-styles-test.heir.focus, .dropping-styles-test.heir:focus {
+  background: #eeeeee;
+  border: 2px solid red;
+}
+.dropping-styles-test.heir.hover .test, .dropping-styles-test.heir:hover .test, .dropping-styles-test.heir.focus .test, .dropping-styles-test.heir:focus .test {
+  padding: 100px;
+  margin: 20px;
+}
+.dropping-styles-test.dropped {
+  /* should only contain color:yellow */
+  color: yellow;
+}
+.dropping-styles-test.dropped2 {
+  /* should contain color:yellow, custom :hover, :active */
+  color: yellow;
+}
+.dropping-styles-test.dropped2.hover, .dropping-styles-test.dropped2:hover, .dropping-styles-test.dropped2.focus, .dropping-styles-test.dropped2:focus {
+  color: blue;
+}
+.dropping-styles-test.dropped2.active, .dropping-styles-test.dropped2:active {
+  color: green;
+  width: 100%;
+}
+.dropping-styles-test.dropped3 {
+  /* should only contain color:purple */
+  display: block;
+  color: purple;
+  background: green;
+}

data/test/fixtures/stylesheets/archetype/expected/styleguide/invalid_structures.css

@@ -0,0 +1,21 @@
+.test-missing-nil {
+  color: red;
+}
+
+.test-missing-nil-2 {
+  color: yellow;
+}
+
+.test-missing-nil-3 {
+  color: blue;
+}
+.test-missing-nil-3.hover, .test-missing-nil-3:hover, .test-missing-nil-3.focus, .test-missing-nil-3:focus {
+  color: black;
+  background: green;
+  font-weight: bold;
+}
+
+.test-missing-comma {
+  color: white;
+  background: green;
+}

data/test/fixtures/stylesheets/archetype/expected/styleguide/multi_value.css

@@ -0,0 +1,13 @@
+.multi-value-styleguide-test {
+  color: gray;
+  color: rgba(0, 0, 0, 0.7);
+  background: white;
+  background: transparent;
+  *color: blue;
+}
+.ie.ie8 .multi-value-styleguide-test {
+  color: red;
+}
+.multi-value-styleguide-test, .multi-value-styleguide-test x:-moz-any-link {
+  color: pink;
+}

data/test/fixtures/stylesheets/archetype/expected/ui/glyph_icon.css

@@ -1,8 +1,24 @@
+@font-face {
+  font-family: "FontAwesome";
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot');
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "FontAwesome-0.0.1";
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot');
+  src: url('/assets/fonts/vendor/archetype/fontawesome-webfont.eot?#iefix') format('eot'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.woff') format('woff'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.ttf') format('truetype'), url('/assets/fonts/vendor/archetype/fontawesome-webfont.svg#FontAwesome') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .simple {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:100%;color:inherit;",this.insertBefore(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:100%;color:inherit;",this.insertBefore(this.el));
 }
 .simple:before {
-  font-family: "FontAwesome";
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -13,7 +29,7 @@
 }
 
 .false {
-  font-family: "FontAwesome";
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -23,10 +39,10 @@
 }
 
 .size {
-  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:20px;color:inherit;",this.insertBefore(this.el));
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.el.style.cssText="font-family:'FontAwesome-0.0.1', 'FontAwesome';font-weight:normal;font-style:normal;text-decoration:inherit;font-size:20px;color:inherit;",this.insertBefore(this.el));
 }
 .size:before {
-  font-family: "FontAwesome";
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -40,7 +56,7 @@
   *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
 }
 .not-inline:before {
-  font-family: "FontAwesome";
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -50,7 +66,7 @@
   content: "\f0d7";
 }
 .not-inline #ie-pseudo-archetype-uid-RANDOM_UID {
-  "font-family: 'FontAwesome';
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -62,7 +78,7 @@
   *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="my-custom-id",this.el.innerHTML="",this.insertBefore(this.el));
 }
 .ie-uid:before {
-  font-family: "FontAwesome";
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -72,7 +88,7 @@
   content: "\f0d7";
 }
 .ie-uid #my-custom-id {
-  "font-family: 'FontAwesome';
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
   font-weight: normal;
   font-style: normal;
   text-decoration: inherit;
@@ -82,3 +98,30 @@
 .ie-uid:before, .ie-uid #my-custom-id {
   color: pink;
 }
+
+.content-block {
+  *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("x-archetype-glyph"),this.el.id="ie-pseudo-archetype-uid-RANDOM_UID",this.el.innerHTML="",this.insertBefore(this.el));
+}
+.content-block:before {
+  font-family: "FontAwesome-0.0.1", "FontAwesome";
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  speak: none;
+  font-size: 100%;
+  color: inherit;
+  content: "\f0d7";
+}
+.content-block #ie-pseudo-archetype-uid-RANDOM_UID {
+  font-family: 'FontAwesome-0.0.1', 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  font-size: 100%;
+  color: inherit;
+}
+.content-block:before, .content-block #ie-pseudo-archetype-uid-RANDOM_UID {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}

data/test/fixtures/stylesheets/archetype/expected/utilities/targeting/target-browser.css

@@ -98,3 +98,8 @@
 .target-opera, .target-opera x:-o-prefocus {
   width: 82%;
 }
+
+.ie.lte8 .target-with-content-block {
+  /* testing content block */
+  color: red;
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/alerts.scss

@@ -0,0 +1,21 @@
+@import "archetype";
+
+@each $type in (error success notice yield) {
+  .alert.#{$type} {
+    @include styleguide($type alert);
+    .dismiss {
+      @include styleguide(close in a $type alert);
+    }
+  }
+}
+
+$CONFIG_GENERATED_TAG_INLINE: false;
+
+@each $type in (error success notice yield) {
+  .alert.#{$type} {
+    @include styleguide($type alert);
+    .dismiss {
+      @include styleguide(close in a $type alert);
+    }
+  }
+}

data/test/fixtures/stylesheets/archetype/source/styleguide/buttons.scss

@@ -1,4 +1,4 @@
-@import "archetype"; 
+@import "archetype";
 
 @each $context in container, bristol, punchcut {
   .#{$context} {

data/test/fixtures/stylesheets/archetype/source/styleguide/drop.scss

@@ -0,0 +1,101 @@
+@import "archetype";
+
+@if not styleguide-component-exists(dropping-styles-test, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component(dropping-styles-test, (), (
+  (default, (
+    display         block,
+    color           red,
+    background      green,
+    (states, (
+      (hover, (
+        styleguide  module,
+        border      (2px solid red),
+        (selectors, (
+          ('.test', (
+            padding  100px,
+            margin   20px
+          )),
+          nil
+        ))
+      )),
+      nil
+    ))
+  )),
+  (parent, (
+    display         none,
+    color           black
+  )),
+  (heir, (
+    inherit (parent),
+    nil
+  )),
+  (dropped, (
+    drop            true,
+    color           yellow
+  )),
+  (dropped2, (
+    drop            true,
+    color           yellow,
+    (states, (
+      (hover, (
+        color       blue,
+        nil
+      )),
+      (active, (
+        color       green,
+        width       100%
+      )),
+      nil
+    ))
+  )),
+  (dropped3, (
+    color           purple,
+    (states, (
+      drop          hover,  // TODO: this is currently throwing an ambiguous warning, need to investigate
+      nil
+    )),
+    nil
+  )),
+  (dropped4, (
+    color           purple,
+    (states, (
+      (hover, (
+        drop        selectors,
+        nil
+      )),
+      nil
+    ))
+  )),
+  nil
+), $CONFIG_THEME);
+}
+
+.dropping-styles-test {
+  /* should contain hover state and .test selector */
+  @include styleguide(dropping-styles-test);
+  &.parent {
+    /* should contain hover state and .test selector */
+    @include styleguide(parent dropping-styles-test);
+  }
+  &.heir {
+    /* should contain hover state and .test selector */
+    @include styleguide(heir dropping-styles-test);
+  }
+  &.dropped {
+    /* should only contain color:yellow */
+    @include styleguide(dropped dropping-styles-test);
+  }
+  &.dropped2 {
+    /* should contain color:yellow, custom :hover, :active */
+    @include styleguide(dropped2 dropping-styles-test);
+  }
+  &.dropped3 {
+    /* should only contain color:purple */
+    @include styleguide(dropped3 dropping-styles-test);
+  }
+  // TODO fix this guy: drops nested multiple levels deep don't resolve yet :(
+  //&.dropped4 {
+  //  /* should contain color:purple, :hover, but no `.test` selector */
+  //  @include styleguide(dropped4 dropping-styles-test);
+  //}
+}