compass-pattern-primer 0.3.beta → 0.4.beta

data/stylesheets/compass-pattern-primer/partials/_mixins.scss

@@ -7,7 +7,6 @@
 
 @mixin border-outline($type: border, $width: 1px, $style: solid, $color: #333, $offset: false) {
   @include border-outline-check($type, $width, $style, $color, $offset);
-  
   @if $width == 'none' {
       #{$type}: $width;
   } @else if $width == false {

data/templates/adactio/manifest.rb

@@ -9,14 +9,39 @@ file '../shared/sass/global-adactio.scss', :like => :stylesheet, :to => 'global.
 
 # Partials
 file '../shared/sass/partials/_browsers.scss', :like => :stylesheet, :to => 'partials/_browsers.scss'
-file '../shared/sass/partials/_colors.scss', :like => :stylesheet, :to => 'partials/_colors.scss'
 file '../shared/sass/partials/_extendables.scss', :like => :stylesheet, :to => 'partials/_extendables.scss'
 file '../shared/sass/partials/_functions.scss', :like => :stylesheet, :to => 'partials/_functions.scss'
 file '../shared/sass/partials/_mixins.scss', :like => :stylesheet, :to => 'partials/_mixins.scss'
-file '../shared/sass/partials/_variables-adactio.scss', :like => :stylesheet, :to => 'partials/_variables.scss'
+file '../shared/sass/partials/_colors.scss', :like => :stylesheet, :to => 'partials/_colors.scss'
+file '../shared/sass/_config-adactio.scss', :like => :stylesheet, :to => '_config.scss'
 
-# Variables
-file '../shared/sass/partials/variables/theme/_overrides.scss', :like => :stylesheet, :to => 'partials/variables/_overrides.scss'
+# Chunks
+file '../shared/sass/base/buttons/_buttons.scss', :like => :stylesheet, :to => 'buttons/_buttons.scss'
+file '../shared/sass/base/buttons/_buttons_extendables.scss', :like => :stylesheet, :to => 'buttons/_buttons_extendables.scss'
+file '../shared/sass/base/buttons/_buttons_variables.scss', :like => :stylesheet, :to => 'buttons/_buttons_variables.scss'
+file '../shared/sass/base/forms/_forms.scss', :like => :stylesheet, :to => 'forms/_forms.scss'
+file '../shared/sass/base/forms/_forms_extendables.scss', :like => :stylesheet, :to => 'forms/_forms_extendables.scss'
+file '../shared/sass/base/forms/_forms_variables.scss', :like => :stylesheet, :to => 'forms/_forms_variables.scss'
+file '../shared/sass/base/links/_links.scss', :like => :stylesheet, :to => 'links/_links.scss'
+file '../shared/sass/base/links/_links_variables.scss', :like => :stylesheet, :to => 'links/_links_variables.scss'
+file '../shared/sass/base/page/_page.scss', :like => :stylesheet, :to => 'page/_page.scss'
+file '../shared/sass/base/page/_page_variables.scss', :like => :stylesheet, :to => 'page/_page_variables.scss'
+file '../shared/sass/base/search/_search.scss', :like => :stylesheet, :to => 'search/_search.scss'
+file '../shared/sass/base/search/_search_variables.scss', :like => :stylesheet, :to => 'search/_search_variables.scss'
+file '../shared/sass/base/typography/_typography.scss', :like => :stylesheet, :to => 'typography/_typography.scss'
+file '../shared/sass/base/typography/_typography_variables.scss', :like => :stylesheet, :to => 'typography/_typography_variables.scss'
+file '../shared/sass/modules/controls/_controls.scss', :like => :stylesheet, :to => 'controls/_controls.scss'
+file '../shared/sass/modules/controls/_controls_extendables.scss', :like => :stylesheet, :to => 'controls/_controls_extendables.scss'
+file '../shared/sass/modules/controls/_controls_variables.scss', :like => :stylesheet, :to => 'controls/_controls_variables.scss'
+file '../shared/sass/modules/feedback/_feedback.scss', :like => :stylesheet, :to => 'feedback/_feedback.scss'
+file '../shared/sass/modules/feedback/_feedback_extendables.scss', :like => :stylesheet, :to => 'feedback/_feedback_extendables.scss'
+file '../shared/sass/modules/feedback/_feedback_variables.scss', :like => :stylesheet, :to => 'feedback/_feedback_variables.scss'
+file '../shared/sass/modules/options/_options.scss', :like => :stylesheet, :to => 'options/_options.scss'
+file '../shared/sass/modules/options/_options_extendables.scss', :like => :stylesheet, :to => 'options/_options_extendables.scss'
+file '../shared/sass/modules/options/_options_variables.scss', :like => :stylesheet, :to => 'options/_options_variables.scss'
+file '../shared/sass/modules/pagination/_pagination.scss', :like => :stylesheet, :to => 'pagination/_pagination.scss'
+file '../shared/sass/modules/pagination/_pagination_extendables.scss', :like => :stylesheet, :to => 'pagination/_pagination_extendables.scss'
+file '../shared/sass/modules/pagination/_pagination_variables.scss', :like => :stylesheet, :to => 'pagination/_pagination_variables.scss'
   
 # Javascript Import
 # file 'scripts.js', :like => :javascript, :to => 'scripts.js'

data/templates/project/manifest.rb

@@ -11,68 +11,82 @@ file '../shared/sass/pattern-primer.scss', :like => :stylesheet, :to => 'pattern
 
 # Partials
 file '../shared/sass/partials/_browsers.scss', :like => :stylesheet, :to => 'partials/_browsers.scss'
-file '../shared/sass/partials/_colors.scss', :like => :stylesheet, :to => 'partials/_colors.scss'
 file '../shared/sass/partials/_extendables.scss', :like => :stylesheet, :to => 'partials/_extendables.scss'
 file '../shared/sass/partials/_functions.scss', :like => :stylesheet, :to => 'partials/_functions.scss'
 file '../shared/sass/partials/_mixins.scss', :like => :stylesheet, :to => 'partials/_mixins.scss'
-file '../shared/sass/partials/_variables.scss', :like => :stylesheet, :to => 'partials/_variables.scss'
+file '../shared/sass/partials/_colors.scss', :like => :stylesheet, :to => 'partials/_colors.scss'
+file '../shared/sass/_config.scss', :like => :stylesheet, :to => '_config.scss'
 
-# Variables
-file '../shared/sass/partials/variables/base/_page.scss', :like => :stylesheet, :to => 'partials/variables/base/_page.scss'
-file '../shared/sass/partials/variables/modules/_header.scss', :like => :stylesheet, :to => 'partials/variables/modules/_header.scss'
-file '../shared/sass/partials/variables/modules/_footer.scss', :like => :stylesheet, :to => 'partials/variables/modules/_footer.scss'
-file '../shared/sass/partials/variables/layout/_breakpoints.scss', :like => :stylesheet, :to => 'partials/variables/layout/_breakpoints.scss'
-file '../shared/sass/partials/variables/layout/_page.scss', :like => :stylesheet, :to => 'partials/variables/layout/_page.scss'
-file '../shared/sass/partials/variables/state/_page.scss', :like => :stylesheet, :to => 'partials/variables/state/_page.scss'
-file '../shared/sass/partials/variables/state/_header.scss', :like => :stylesheet, :to => 'partials/variables/state/_header.scss'
-file '../shared/sass/partials/variables/state/_footer.scss', :like => :stylesheet, :to => 'partials/variables/state/_footer.scss'
-file '../shared/sass/partials/variables/theme/_page.scss', :like => :stylesheet, :to => 'partials/variables/theme/_page.scss'
-file '../shared/sass/partials/variables/theme/_overrides.scss', :like => :stylesheet, :to => 'partials/variables/theme/_overrides.scss'
 
 # SMACSS
-file '../shared/sass/base/_page.scss', :like => :stylesheet, :to => 'base/_page.scss'
-file '../shared/sass/modules/_header.scss', :like => :stylesheet, :to => 'modules/_header.scss'
-file '../shared/sass/modules/_footer.scss', :like => :stylesheet, :to => 'modules/_footer.scss'
-file '../shared/sass/layout/_page.scss', :like => :stylesheet, :to => 'layout/_page.scss'
-file '../shared/sass/state/_page.scss', :like => :stylesheet, :to => 'state/_page.scss'
-file '../shared/sass/state/_header.scss', :like => :stylesheet, :to => 'state/_header.scss'
-file '../shared/sass/state/_footer.scss', :like => :stylesheet, :to => 'state/_footer.scss'
-file '../shared/sass/theme/_page.scss', :like => :stylesheet, :to => 'theme/_page.scss'  
+file '../shared/sass/base/buttons/_buttons.scss' , :like => :stylesheet, :to => 'base/buttons/_buttons.scss'
+file '../shared/sass/base/buttons/_buttons_extendables.scss' , :like => :stylesheet, :to => 'base/buttons/_buttons_extendables.scss'
+file '../shared/sass/base/buttons/_buttons_variables.scss' , :like => :stylesheet, :to => 'base/buttons/_buttons_variables.scss'
+file '../shared/sass/base/forms/_forms.scss' , :like => :stylesheet, :to => 'base/forms/_forms.scss'
+file '../shared/sass/base/forms/_forms_extendables.scss' , :like => :stylesheet, :to => 'base/forms/_forms_extendables.scss'
+file '../shared/sass/base/forms/_forms_variables.scss' , :like => :stylesheet, :to => 'base/forms/_forms_variables.scss'
+file '../shared/sass/base/links/_links.scss' , :like => :stylesheet, :to => 'base/links/_links.scss'
+file '../shared/sass/base/links/_links_variables.scss' , :like => :stylesheet, :to => 'base/links/_links_variables.scss'
+file '../shared/sass/base/page/_page.scss' , :like => :stylesheet, :to => 'base/page/_page.scss'
+file '../shared/sass/base/page/_page_variables.scss' , :like => :stylesheet, :to => 'base/page/_page_variables.scss'
+file '../shared/sass/base/search/_search.scss' , :like => :stylesheet, :to => 'base/search/_search.scss'
+file '../shared/sass/base/search/_search_variables.scss' , :like => :stylesheet, :to => 'base/search/_search_variables.scss'
+file '../shared/sass/base/typography/_typography.scss' , :like => :stylesheet, :to => 'base/typography/_typography.scss'
+file '../shared/sass/base/typography/_typography_variables.scss' , :like => :stylesheet, :to => 'base/typography/_typography_variables.scss'
+file '../shared/sass/modules/controls/_controls.scss' , :like => :stylesheet, :to => 'modules/controls/_controls.scss'
+file '../shared/sass/modules/controls/_controls_extendables.scss' , :like => :stylesheet, :to => 'modules/controls/_controls_extendables.scss'
+file '../shared/sass/modules/controls/_controls_variables.scss' , :like => :stylesheet, :to => 'modules/controls/_controls_variables.scss'
+file '../shared/sass/modules/feedback/_feedback.scss' , :like => :stylesheet, :to => 'modules/feedback/_feedback.scss'
+file '../shared/sass/modules/feedback/_feedback_extendables.scss' , :like => :stylesheet, :to => 'modules/feedback/_feedback_extendables.scss'
+file '../shared/sass/modules/feedback/_feedback_variables.scss' , :like => :stylesheet, :to => 'modules/feedback/_feedback_variables.scss'
+file '../shared/sass/modules/options/_options.scss' , :like => :stylesheet, :to => 'modules/options/_options.scss'
+file '../shared/sass/modules/options/_options_extendables.scss' , :like => :stylesheet, :to => 'modules/options/_options_extendables.scss'
+file '../shared/sass/modules/options/_options_variables.scss' , :like => :stylesheet, :to => 'modules/options/_options_variables.scss'
+file '../shared/sass/modules/pagination/_pagination.scss' , :like => :stylesheet, :to => 'modules/pagination/_pagination.scss'
+file '../shared/sass/modules/pagination/_pagination_extendables.scss' , :like => :stylesheet, :to => 'modules/pagination/_pagination_extendables.scss'
+file '../shared/sass/modules/pagination/_pagination_variables.scss' , :like => :stylesheet, :to => 'modules/pagination/_pagination_variables.scss'
+file '../shared/sass/layout/page/_page.scss', :like => :stylesheet, :to => 'layout/page/_page.scss'
+file '../shared/sass/state/header/_header.scss', :like => :stylesheet, :to => 'state/header/_header.scss'
+file '../shared/sass/theme/page/_page.scss', :like => :stylesheet, :to => 'theme/page/_page.scss'  
 
 # Javascript Import
 # file 'scripts.js', :like => :javascript, :to => 'scripts.js'
 
 # HTML Import
-file "../shared/patterns/blockquote.html" , :like => :html, :to => "patterns/blockquote.html"
-file "../shared/patterns/colorguide.html" , :like => :html, :to => "patterns/colorguide.html"
-file "../shared/patterns/feedback-error-new.html" , :like => :html, :to => "patterns/feedback-error.html"
-file "../shared/patterns/feedback-warning.html" , :like => :html, :to => "patterns/feedback-warning.html"
-file "../shared/patterns/feedback-new.html" , :like => :html, :to => "patterns/feedback.html"
-file "../shared/patterns/form-buttons-active.html" , :like => :html, :to => "patterns/form-buttons-active.html"
-file "../shared/patterns/form-buttons-all.html" , :like => :html, :to => "patterns/form-buttons-all.html"
-file "../shared/patterns/form-buttons-cancel.html" , :like => :html, :to => "patterns/form-buttons-cancel.html"
-file "../shared/patterns/form-buttons-disabled.html" , :like => :html, :to => "patterns/form-buttons-disabled.html"
-file "../shared/patterns/form-buttons-new.html" , :like => :html, :to => "patterns/form-buttons.html"
-file "../shared/patterns/form-checkbox.html" , :like => :html, :to => "patterns/form-checkbox.html"
-file "../shared/patterns/form-email.html" , :like => :html, :to => "patterns/form-email.html"
-file "../shared/patterns/form-number.html" , :like => :html, :to => "patterns/form-number.html"
-file "../shared/patterns/form-select.html" , :like => :html, :to => "patterns/form-select.html"
-file "../shared/patterns/form-text.html" , :like => :html, :to => "patterns/form-text.html"
-file "../shared/patterns/form-textarea.html" , :like => :html, :to => "patterns/form-textarea.html"
-file "../shared/patterns/form-url.html" , :like => :html, :to => "patterns/form-url.html"
-file "../shared/patterns/headers.html" , :like => :html, :to => "patterns/headers.html"
-file "../shared/patterns/heading-1-p.html" , :like => :html, :to => "patterns/heading-1-p.html"
-file "../shared/patterns/heading-2-p.html" , :like => :html, :to => "patterns/heading-2-p.html"
-file "../shared/patterns/heading-3-p.html" , :like => :html, :to => "patterns/heading-3-p.html"
-file "../shared/patterns/heading-4-p.html" , :like => :html, :to => "patterns/heading-4-p.html"
-file "../shared/patterns/heading-5-p.html" , :like => :html, :to => "patterns/heading-5-p.html"
-file "../shared/patterns/heading-6-p.html" , :like => :html, :to => "patterns/heading-6-p.html"
-file "../shared/patterns/list-ordered.html" , :like => :html, :to => "patterns/list-ordered.html"
-file "../shared/patterns/list-unordered.html" , :like => :html, :to => "patterns/list-unordered.html"
-file "../shared/patterns/pagination-first.html" , :like => :html, :to => "patterns/pagination-first.html"
-file "../shared/patterns/pagination-last.html" , :like => :html, :to => "patterns/pagination-last.html"
-file "../shared/patterns/pagination.html" , :like => :html, :to => "patterns/pagination.html"
-file "../shared/patterns/text-new.html" , :like => :html, :to => "patterns/text.html"
+file "../shared/patterns/blockquote.html" , :like => :html, :to => "patterns/01_blockquote.html"
+file "../shared/patterns/colorguide.html" , :like => :html, :to => "patterns/04_colorguide.html"
+file "../shared/patterns/feedback-error-new.html" , :like => :html, :to => "patterns/03_feedback-error.html"
+file "../shared/patterns/feedback-warning.html" , :like => :html, :to => "patterns/03_feedback-warning.html"
+file "../shared/patterns/feedback-new.html" , :like => :html, :to => "patterns/03_feedback.html"
+file "../shared/patterns/form-buttons-active.html" , :like => :html, :to => "patterns/02_form-buttons-active.html"
+file "../shared/patterns/form-buttons-all.html" , :like => :html, :to => "patterns/02_form-buttons-all.html"
+file "../shared/patterns/form-buttons-cancel.html" , :like => :html, :to => "patterns/02_form-buttons-cancel.html"
+file "../shared/patterns/form-buttons-disabled.html" , :like => :html, :to => "patterns/02_form-buttons-disabled.html"
+file "../shared/patterns/form-buttons-new.html" , :like => :html, :to => "patterns/02_form-buttons.html"
+file "../shared/patterns/form-checkbox.html" , :like => :html, :to => "patterns/02_form-checkbox.html"
+file "../shared/patterns/form-email.html" , :like => :html, :to => "patterns/02_form-email.html"
+file "../shared/patterns/form-number.html" , :like => :html, :to => "patterns/02_form-number.html"
+file "../shared/patterns/form-select.html" , :like => :html, :to => "patterns/02_form-select.html"
+file "../shared/patterns/form-text.html" , :like => :html, :to => "patterns/02_form-text.html"
+file "../shared/patterns/form-textarea.html" , :like => :html, :to => "patterns/02_form-textarea.html"
+file "../shared/patterns/form-url.html" , :like => :html, :to => "patterns/02_form-url.html"
+file "../shared/patterns/headers.html" , :like => :html, :to => "patterns/01_headers.html"
+file "../shared/patterns/heading-1-p.html" , :like => :html, :to => "patterns/01_heading-1-p.html"
+file "../shared/patterns/heading-2-p.html" , :like => :html, :to => "patterns/01_heading-2-p.html"
+file "../shared/patterns/heading-3-p.html" , :like => :html, :to => "patterns/01_heading-3-p.html"
+file "../shared/patterns/heading-4-p.html" , :like => :html, :to => "patterns/01_heading-4-p.html"
+file "../shared/patterns/heading-5-p.html" , :like => :html, :to => "patterns/01_heading-5-p.html"
+file "../shared/patterns/heading-6-p.html" , :like => :html, :to => "patterns/01_heading-6-p.html"
+file "../shared/patterns/list-ordered.html" , :like => :html, :to => "patterns/01_list-ordered.html"
+file "../shared/patterns/list-unordered.html" , :like => :html, :to => "patterns/01_list-unordered.html"
+file "../shared/patterns/pagination-first.html" , :like => :html, :to => "patterns/03_pagination-first.html"
+file "../shared/patterns/pagination-last.html" , :like => :html, :to => "patterns/03_pagination-last.html"
+file "../shared/patterns/pagination.html" , :like => :html, :to => "patterns/03_pagination.html"
+file "../shared/patterns/text-new.html" , :like => :html, :to => "patterns/01_text.html"
+file "../shared/patterns/01_a_header.html" , :like => :html, :to => "patterns/01_a_header.html"
+file "../shared/patterns/02_a_header.html" , :like => :html, :to => "patterns/02_a_header.html"
+file "../shared/patterns/03_a_header.html" , :like => :html, :to => "patterns/03_a_header.html"
+file "../shared/patterns/04_a_header.html" , :like => :html, :to => "patterns/04_a_header.html"
 
 # General File Import
 # file 'README.md', :to => "README.md"

data/templates/shared/patterns/01_a_header.html

@@ -0,0 +1 @@
+<h3>Typographic Elements</h3>

data/templates/shared/patterns/02_a_header.html

@@ -0,0 +1 @@
+<h3>From Elements</h3>

data/templates/shared/patterns/03_a_header.html

@@ -0,0 +1 @@
+<h3>Messaging and Pagers</h3>

data/templates/shared/patterns/04_a_header.html

@@ -0,0 +1 @@
+<h3>Color Guide</h3>

data/templates/shared/sass/_config-adactio.scss

@@ -0,0 +1,65 @@
+//////////////////////////////
+// VARIABLES: Theme overides for Pattern-Primer default styles
+//////////////////////////////
+
+// Some example overrides
+
+// // Fonts
+// $body-font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
+// $secondary-font: $body-font-family;
+// $header-font-family: $body-font-family;
+// $blockquote-font-family: $body-font-family;
+
+// // Colors
+// $primary-color: #369;  
+
+// // body
+// $body-background-color: nth($black , 6);
+// $body-background-rgba: rgba($body-background-color, 1);
+// $body-border-width: false;
+//
+// $body-margin: 0;
+// $body-padding: 0;
+//
+// $html-border-width: false;
+// $html-background-color: lighten($body-background-color, 10%);
+
+// // Links
+// $link-color: nth($primary, 1);
+// $link-text-decoration: none;
+// $link-border-width: false;
+//
+///// Visited
+// $link-visited-link-color: nth($primary, 2);
+// $link-visited-border-width: $link-border-width;
+///// Hover
+// $link-hover-link-color: lighten($link-color, 10%);
+// $link-text-decoration: none; 
+// $link-hover-border-width: $link-border-width;
+///// Active
+// $link-active-link-color: $link-color;
+//
+//
+// $h1-margin-pos: none;
+// $h1-border-width: false;  
+// $h2-border-width: false; 
+// $h3-border-width: false; 
+//
+// $button-padding: 0.33em .66em;
+// $button-border-color: nth($black, 3);
+// $button-border-radius: .5em;
+// $button-color: nth($black, 1);
+// $button-text-shadow: 0 -1px 0 rgba(#fff, 0.25);
+//
+// $button-gradient-stop-1: nth($black, 6);
+// $button-gradient-stop-2: nth($black, 5);
+//
+// $button-hover-color: $button-color;
+// $button-hover-gradient-stop-1: nth($black, 4);
+// $button-hover-gradient-stop-2: nth($black, 5);
+//
+// $button-active-color: $button-color;
+// $button-active-gradient-stop-1: nth($black, 3);
+// $button-active-gradient-stop-2: nth($black, 4);
+//
+// $forms-input-width: auto;

data/templates/shared/sass/{partials/variables/theme/_overrides.scss → _config.scss}

@@ -4,12 +4,16 @@
 
 // Some example overrides
 
+// // Fonts
 // $body-font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
 // $secondary-font: $body-font-family;
 // $header-font-family: $body-font-family;
 // $blockquote-font-family: $body-font-family;
-//
-///// body
+
+// // Colors
+// $primary-color: #369;  
+
+// // body
 // $body-background-color: nth($black , 6);
 // $body-background-rgba: rgba($body-background-color, 1);
 // $body-border-width: false;
@@ -19,7 +23,8 @@
 //
 // $html-border-width: false;
 // $html-background-color: lighten($body-background-color, 10%);
-//
+
+// // Links
 // $link-color: nth($primary, 1);
 // $link-text-decoration: none;
 // $link-border-width: false;
@@ -62,7 +67,7 @@
 //
 // $button-action-hover-gradient-stop-1: nth($primary, 1);
 // $button-action-hover-gradient-stop-2: nth($primary, 2);
-// $button-action-active-gradient-stop-1: nth($darker, 2);
+// $button-action-active-gradient-stop-1: darken(nth($primary, 1), 20%);
 // $button-action-active-gradient-stop-2: nth($primary, 1);
 //
 // $forms-input-width: auto;

data/{stylesheets/compass-pattern-primer/base → templates/shared/sass/base/buttons}/_buttons.scss

@@ -1,3 +1,10 @@
+//////////////////////////////
+// BASE: Base element styles 
+//////////////////////////////
+
+@import "_buttons_variables";
+@import "_buttons_extendables";
+
 button,
 input[type="button"],
 input[type="submit"] {
@@ -19,6 +26,9 @@ input[type="submit"][value="Cancel"] {
 
 button[disabled="disabled"],
 input[type="button"][disabled="disabled"],
-input[type="submit"][disabled="disabled"] {
+input[type="submit"][disabled="disabled"],
+button[disabled="disabled"].active,
+input[type="button"][disabled="disabled"].active,
+input[type="submit"][disabled="disabled"].active {
   @extend %button-disabled;
 }

data/templates/shared/sass/base/buttons/_buttons_extendables.scss

@@ -0,0 +1,75 @@
+//////////////////////////////
+// EXTENDABLES: For Base styles 
+//////////////////////////////
+
+%btn-all {
+  width: auto;
+  text-align: center;
+  font-family: $button-font-family;
+  font-size: inherit;
+  font-weight: normal;
+  font-style: normal;
+  @include border-outline(border, $button-border-width, $button-border-style, $button-border-color);
+  cursor: pointer;
+  @include margin-padding(padding, $button-padding);
+  line-height: 1;
+  @include border-radius($button-border-radius);
+}
+
+%button {
+  @extend %btn-all;
+  @include simple-background-gradient($button-color, $button-gradient-pos, $button-gradient-stop-1, $button-gradient-stop-2);
+  @include text-shadow($button-text-shadow);
+  &:hover,
+  &:focus {
+    @include text-shadow($button-hover-text-shadow);
+    @include simple-background-gradient($button-hover-color, $button-hover-gradient-pos, $button-hover-gradient-stop-1, $button-hover-gradient-stop-2);
+  }  
+  &:active {
+    @include text-shadow($button-active-text-shadow);
+    @include simple-background-gradient($button-active-color, $button-active-gradient-pos, $button-active-gradient-stop-1, $button-active-gradient-stop-2);
+  }
+}
+
+%button-active {
+  @extend %btn-all;
+  @include text-shadow($button-action-text-shadow);
+  @include simple-background-gradient($button-action-color, $button-action-gradient-pos, $button-action-gradient-stop-1, $button-action-gradient-stop-2);
+  &:hover,
+  &:focus {
+    @include text-shadow($button-action-hover-text-shadow);
+    @include simple-background-gradient($button-action-hover-color, $button-action-hover-gradient-pos, $button-action-hover-gradient-stop-1, $button-action-hover-gradient-stop-2);
+  }
+  &:active {
+    @include text-shadow($button-action-active-text-shadow);
+    @include simple-background-gradient($button-action-active-color, $button-action-active-gradient-pos, $button-action-active-gradient-stop-1, $button-action-active-gradient-stop-2);
+  }
+}
+
+%button-cancel {
+  @extend %btn-all;
+  @include text-shadow($button-cancel-text-shadow);
+  @include simple-background-gradient($button-cancel-color, $button-cancel-gradient-pos, $button-cancel-gradient-stop-1, $button-cancel-gradient-stop-2);
+  &:hover,
+  &:focus {
+    @include text-shadow($button-cancel-hover-text-shadow);
+    @include simple-background-gradient($button-cancel-hover-color, $button-cancel-hover-gradient-pos, $button-cancel-hover-gradient-stop-1, $button-cancel-hover-gradient-stop-2);
+  }
+  &:active {
+    @include text-shadow($button-cancel-active-text-shadow);
+    @include simple-background-gradient($button-cancel-active-color, $button-cancel-active-gradient-pos, $button-cancel-active-gradient-stop-1, $button-cancel-active-gradient-stop-2);
+  }
+}
+
+%button-disabled {
+  @extend %btn-all;
+  @include text-shadow($button-disabled-text-shadow);
+  opacity: $button-disabled-opacity;
+  @include simple-background-gradient($button-disabled-color, $button-disabled-gradient-pos, $button-disabled-gradient-stop-1, $button-disabled-gradient-stop-2);
+  &:hover,
+  &:focus,
+  &:active {
+    @include text-shadow($button-disabled-text-shadow);
+    @extend %button-disabled;
+  } 
+}

data/{stylesheets/compass-pattern-primer/partials/variables/base/_buttons.scss → templates/shared/sass/base/buttons/_buttons_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Base styles 
+//////////////////////////////
+
 /// Buttons
 $button-font-family: $secondary-font !default;
 $button-padding: 0.5em 1em !default;

data/{stylesheets/compass-pattern-primer/base → templates/shared/sass/base/forms}/_forms.scss

@@ -1,3 +1,10 @@
+//////////////////////////////
+// BASE: Base element styles 
+//////////////////////////////
+
+@import "_forms_variables";
+@import "_forms_extendables";
+
 label {
   cursor: pointer;
 }

data/templates/shared/sass/base/forms/_forms_extendables.scss

@@ -0,0 +1,16 @@
+//////////////////////////////
+// EXTENDABLES: For Base styles 
+//////////////////////////////
+
+%formstyle {
+  background-color: $forms-background-color;
+  width: $forms-input-width;
+  font-family: inherit;
+  font-size: inherit;
+  @include margin-padding(padding, $forms-padding);
+  @include border-outline(border, $forms-border-width, $forms-border-style, $forms-border-color);
+  @include border-radius($forms-border-radius);
+  &:focus {
+    border-color: $forms-focus-border-color;
+  }
+}

data/{stylesheets/compass-pattern-primer/partials/variables/base/_forms.scss → templates/shared/sass/base/forms/_forms_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Base styles 
+//////////////////////////////
+
 // Forms _forms.scss
 $forms-input-width: 100% !default;
 $forms-background-color: #fff !default;