stipe 0.0.2.5 → 0.0.2.6

data/readme.md

@@ -9,4 +9,11 @@ Stipe is the life blood of the Toadstool style guide framework. Consisting of a
 ##To use 
 To use the Stipe gem, using Bundler `gem 'stipe'`
 
-Stipe is a Compass Extension, so Compass is set as a depdency. You will need to include `require 'stipe'` in your config.rb file.
+Stipe is a Compass Extension, so Compass is set as a depdency. You will need to include `require 'stipe'` in your config.rb file.
+
+# Stipe Changelog
+
+## 0.0.2.6
+* Created color views in Toadstool
+* Created remaining semantic color variables silent classes
+* Updated Toadstool `_design / _ui_manifest.scss` 

data/stylesheets/stipe/color/_default_color_pallet.scss

@@ -3,13 +3,13 @@
 // Preferred uses include @extend %class; or repurpose the mixin within the class.
 //
 
-$alpha_primary:   #ec0036 !default; // red
-$bravo_primary:   #299505 !default; // green
-$charlie_primary: #ffff87 !default; // yellow
-$delta_primary:   #2c46b7 !default; // blue
-$echo_primary:    #fc6432 !default; // accent
-          
-$alpha_gray:      #000 !default;    //black
+$alpha_primary:   #5a2e2e !default;        // red
+$bravo_primary:   #3e4147 !default;        // green
+$charlie_primary: #fffedf !default;        // yellow
+$delta_primary:   #2a2c31 !default;        // blue
+$echo_primary:    #dfba69 !default;        // accent
+                  
+$alpha_gray:      #333 !default;           //black
 
 
 @import "color_math";
@@ -34,7 +34,7 @@ $primary_header_color:  $alpha_gray !default;
 $primary_text:          $bravo_gray !default;
 
 // default <a href="#"> link color
-$href_color:            $delta_color !default;
+$href_color:            $alpha_color_delta !default;
 $href_color_alt:        $delta_color_bravo !default;
 
 // used with the <ins> tag
@@ -54,3 +54,10 @@ $selection_text_color:  $primary_text !default;
 
 // default border color
 $border_color:          $charlie_gray !default;
+
+
+// Config defaults for buttons
+// -----------------------------------------------------------------------------
+$primary_button_border_color:          $bravo_color !default;
+$secondary_button_border_color:        $bravo_gray !default;
+$button_text:                          $white !default;

data/stylesheets/stipe/color/_extends.scss

@@ -219,4 +219,71 @@
 }
 %echo_color_juliet {
 	background-color: $echo_color_juliet;
-}
+}
+
+
+/////// semantic color blocks ////////
+// ----------------------------------------------
+%white {
+	background: $white;
+}
+
+%shadow_color {
+	background: $shadow_color;
+}
+
+%primary_header_color {
+	background: $primary_header_color;
+}
+
+%heading_font_weight {
+	background: $heading_font_weight;
+}
+
+%primary_text {
+	background: $primary_text;
+}
+
+%href_color {
+	background: $href_color;
+}
+
+%ins_color {
+	background: $ins_color;
+}
+
+%mark_color {
+	background: $mark_color;
+}
+
+%webkit_tap_hightlight {
+	background: $webkit_tap_hightlight;
+}
+
+%selection_color {
+	background: $selection_color;
+}
+
+%selection_text_color {
+	background: $selection_text_color;
+}
+
+%border_color {
+	background: $border_color;
+}
+
+%primary_button_border_color {
+	background: $primary_button_border_color;
+}
+
+%secondary_button_border_color {
+	background: $secondary_button_border_color;
+}
+
+%button_text {
+	background: $button_text;
+}
+
+%standard_hr_color {
+	background: $standard_hr_color;
+}

data/stylesheets/stipe/toadstool/_config.scss

@@ -46,13 +46,13 @@ $heading_font_family: #{'Lato', sans-serif};
 // Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
 // Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
 // by magic, unicorns and fairy dust!
-$alpha_primary:   #5a2e2e;        // red
-$bravo_primary:   #3e4147;        // green
-$charlie_primary: #fffedf;        // yellow
-$delta_primary:   #2a2c31;        // blue
-$echo_primary:    #dfba69;        // accent
-//                  
-$alpha_gray:      #333;           //black
+// $alpha_primary:   #5a2e2e;        // red
+// $bravo_primary:   #3e4147;        // green
+// $charlie_primary: #fffedf;        // yellow
+// $delta_primary:   #2a2c31;        // blue
+// $echo_primary:    #dfba69;        // accent
+                  
+// $alpha_gray:      #333;           //black
 
 
 
@@ -101,7 +101,7 @@ $alpha_gray:      #333;           //black
 // $primary_text:                         $bravo_gray;
 
 // default <a href="#"> link color
-// $href_color:                           $delta_color;
+// $href_color:                           $alpha_color_delta;
 // $href_color_alt:                       $delta_color_bravo;
 
 // used with the <ins> tag

data/stylesheets/stipe/toadstool/_ui_patterns.scss

@@ -1,2 +1,3 @@
 @import "ui_patterns/prettify";
-@import "ui_patterns/emBox";
+@import "ui_patterns/emBox";
+@import "ui_patterns/color_grid";

data/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss

@@ -0,0 +1,325 @@
+// Toadstool's view
+// ----------------------------------------------
+article.colorcode {
+	@include grid(6);
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+	div {
+		width: 60%; 
+		margin-bottom: 2em; 
+		min-height: em(30); 
+		float: left;
+		@include box_sizing;
+	}
+	p {
+		position: relative; 
+		left: 105%; 
+		font-weight: normal;
+		margin-bottom: 0;
+		width: 50%;
+	}
+	.border {
+		@include box_shadow (inset $alpha_gray, 0 0 1px);
+	}
+}
+
+//.color_block {
+//	@include grid(6);
+//	&:nth-child(odd) {
+//		margin-left: 0;
+//	}
+//	&:nth-child(even) {
+//		margin-right: 0;
+//	}
+//}
+
+/////// OOCSS color blocks ////////
+// ----------------------------------------------
+
+// //* Standard grayscale objects */
+// //* -------------------------- */
+.white {
+	@extend %white;
+}
+
+.alpha_gray {
+	@extend %alpha_gray;
+}
+
+.bravo_gray {
+	@extend %bravo_gray;
+}
+	
+.charlie_gray {
+	@extend %charlie_gray;
+}
+
+.delta_gray {
+	@extend %delta_gray;
+}
+	
+.echo_gray {
+	@extend %echo_gray;
+}
+	
+.fox_gray {
+	@extend %fox_gray;
+}
+
+.golf_gray {
+	@extend %golf_gray;
+}
+
+.hotel_gray {
+	@extend %hotel_gray;
+}
+
+.india_gray {
+	@extend %india_gray;
+}
+
+
+
+//* Standard color objects */
+//* ---------------------- */
+.alpha_color {
+	@extend %alpha_color;
+}
+.alpha_color_bravo {
+	@extend %alpha_color_bravo;
+}
+.alpha_color_charlie {
+	@extend %alpha_color_charlie;
+}
+.alpha_color_delta {
+	@extend %alpha_color_delta;
+}
+.alpha_color_echo {
+	@extend %alpha_color_echo;
+}
+.alpha_color_fox {
+	@extend %alpha_color_fox;
+}
+.alpha_color_golf {
+	@extend %alpha_color_golf;
+}
+.alpha_color_hotel {
+	@extend %alpha_color_hotel;
+}
+.alpha_color_india {
+	@extend %alpha_color_india;
+}
+.alpha_color_juliet {
+	@extend %alpha_color_juliet;
+}
+
+
+
+
+
+.bravo_color {
+	@extend %bravo_color;
+}
+.bravo_color_bravo {
+	@extend %bravo_color_bravo;
+}
+.bravo_color_charlie {
+	@extend %bravo_color_charlie;
+}
+.bravo_color_delta {
+	@extend %bravo_color_delta;
+}
+.bravo_color_echo {
+	@extend %bravo_color_echo;
+}
+.bravo_color_fox {
+	@extend %bravo_color_fox;
+}
+.bravo_color_golf {
+	@extend %bravo_color_golf;
+}
+.bravo_color_hotel {
+	@extend %bravo_color_hotel;
+}
+.bravo_color_india {
+	@extend %bravo_color_india;
+}
+.bravo_color_juliet {
+	@extend %bravo_color_juliet;
+}
+
+
+
+
+
+	
+.charlie_color {
+	@extend %charlie_color;
+}
+.charlie_color_bravo {
+	@extend %charlie_color_bravo;
+}
+.charlie_color_charlie {
+	@extend %charlie_color_charlie;
+}
+.charlie_color_delta {
+	@extend %charlie_color_delta;
+}
+.charlie_color_echo {
+	@extend %charlie_color_echo;
+}
+.charlie_color_fox {
+	@extend %charlie_color_fox;
+}
+.charlie_color_golf {
+	@extend %charlie_color_golf;
+}
+.charlie_color_hotel {
+	@extend %charlie_color_hotel;
+}
+.charlie_color_india {
+	@extend %charlie_color_india;
+}
+.charlie_color_juliet {
+	@extend %charlie_color_juliet;
+}
+
+
+
+
+
+	
+.delta_color {
+	@extend %delta_color;
+}
+.delta_color_bravo {
+	@extend %delta_color_bravo;
+}
+.delta_color_charlie {
+	@extend %delta_color_charlie;
+}
+.delta_color_delta {
+	@extend %delta_color_delta;
+}
+.delta_color_echo {
+	@extend %delta_color_echo;
+}
+.delta_color_fox {
+	@extend %delta_color_fox;
+}
+.delta_color_golf {
+	@extend %delta_color_golf;
+}
+.delta_color_hotel {
+	@extend %delta_color_hotel;
+}
+.delta_color_india {
+	@extend %delta_color_india;
+}
+.delta_color_juliet {
+	@extend %delta_color_juliet;
+}
+
+
+
+
+
+	
+.echo_color {
+	@extend %echo_color;
+}
+.echo_color_bravo {
+	@extend %echo_color_bravo;
+}
+.echo_color_charlie {
+	@extend %echo_color_charlie;
+}
+.echo_color_delta {
+	@extend %echo_color_delta;
+}
+.echo_color_echo {
+	@extend %echo_color_echo;
+}
+.echo_color_fox {
+	@extend %echo_color_fox;
+}
+.echo_color_golf {
+	@extend %echo_color_golf;
+}
+.echo_color_hotel {
+	@extend %echo_color_hotel;
+}
+.echo_color_india {
+	@extend %echo_color_india;
+}
+.echo_color_juliet {
+	@extend %echo_color_juliet;
+}
+
+
+/////// semantic color blocks ////////
+// ----------------------------------------------
+.white {
+	background: $white;
+}
+
+.shadow_color {
+	background: $shadow_color;
+}
+
+.primary_header_color {
+	background: $primary_header_color;
+}
+
+.heading_font_weight {
+	background: $heading_font_weight;
+}
+
+.primary_text {
+	background: $primary_text;
+}
+
+.href_color {
+	background: $href_color;
+}
+
+.ins_color {
+	background: $ins_color;
+}
+
+.mark_color {
+	background: $mark_color;
+}
+
+.webkit_tap_hightlight {
+	background: $webkit_tap_hightlight;
+}
+
+.selection_color {
+	background: $selection_color;
+}
+
+.selection_text_color {
+	background: $selection_text_color;
+}
+
+.border_color {
+	background: $border_color;
+}
+
+.primary_button_border_color {
+	background: $primary_button_border_color;
+}
+
+.secondary_button_border_color {
+	background: $secondary_button_border_color;
+}
+
+.button_text {
+	background: $button_text;
+}
+
+.standard_hr_color {
+	background: $standard_hr_color;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.2.5
+  version: 0.0.2.6
   prerelease: 
 platform: ruby
 authors:
@@ -80,6 +80,7 @@ files:
 - stylesheets/stipe/grid/lib/_the_grid.scss
 - stylesheets/stipe/grid/_extends.scss
 - stylesheets/stipe/_grid.scss
+- stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss
 - stylesheets/stipe/toadstool/ui_patterns/_prettify.scss
 - stylesheets/stipe/toadstool/ui_patterns/_emBox.scss
 - stylesheets/stipe/toadstool/modules/_footer.scss