themes wip

ionic/components/button/button-clear.scss

@@ -0,0 +1,48 @@
+
+// Clear Button
+// --------------------------------------------------
+
+button,
+[button] {
+
+  &[clear] {
+    border-color: transparent;
+    background: transparent;
+    color: darken-or-lighten($button-color);
+
+    &.activated {
+      opacity: 0.4;
+    }
+  }
+
+}
+
+
+// Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-clear($fg-color) {
+
+  &[clear] {
+    border-color: transparent;
+    background: transparent;
+    color: $fg-color;
+  }
+
+}
+
+
+// Generate Clear Button Colors
+// --------------------------------------------------
+
+@each $color, $value in auxiliary-colors() {
+
+  button[#{$color}],
+  [button][#{$color}] {
+
+    $fg-color: darken-or-lighten($value);
+    @include button-clear($fg-color);
+
+  }
+
+}

ionic/components/button/button-outline.scss

@@ -0,0 +1,55 @@
+
+// Outline Button
+// --------------------------------------------------
+
+button,
+[button] {
+
+  &[outline] {
+    border: 1px solid $button-color;
+    background: $background-color;
+    color: $button-color;
+
+    &.activated {
+      opacity: 1;
+      color: $background-color;
+      background-color: $button-color;
+    }
+  }
+
+}
+
+
+// Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-outline($fg-color) {
+
+  &[outline] {
+    border-color: $fg-color;
+    background: $background-color;
+    color: $fg-color;
+
+    &.activated {
+      color: $background-color;
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Outline Clear Button Colors
+// --------------------------------------------------
+
+@each $color, $value in auxiliary-colors() {
+
+  button[#{$color}],
+  [button][#{$color}] {
+
+    $fg-color: darken-or-lighten($value);
+    @include button-outline($fg-color);
+
+  }
+
+}

ionic/components/button/button-size.scss

@@ -0,0 +1,31 @@
+
+// Button Sizes
+// --------------------------------------------------
+
+$button-large-font-size:          2rem !default;
+$button-large-height:             5.4rem !default;
+$button-large-padding:            1.4rem !default;
+
+$button-small-font-size:          1.3rem !default;
+$button-small-height:             2.8rem !default;
+$button-small-padding:            1.1rem !default;
+
+
+button,
+[button] {
+
+  &[large] {
+    padding: 0 $button-large-padding;
+    min-width: ($button-large-padding * 4);
+    min-height: $button-large-height;
+    font-size: $button-large-font-size;
+  }
+
+  &[small] {
+    padding: 0 $button-small-padding;
+    min-width: ($button-small-padding * 3);
+    min-height: $button-small-height;
+    font-size: $button-small-font-size;
+  }
+
+}

ionic/components/button/button.scss

@@ -1,5 +1,5 @@
 
-// Core Button Variables
+// Button Variables
 // --------------------------------------------------
 
 $button-font-size:                1.6rem !default;
@@ -9,19 +9,16 @@ $button-height:                   4.4rem !default;
 $button-border-width:             1px !default;
 $button-border-radius:            4px !default;
 
-$button-large-font-size:          2rem !default;
-$button-large-height:             5.4rem !default;
-$button-large-padding:            1.4rem !default;
-
-$button-small-font-size:          1.3rem !default;
-$button-small-height:             2.8rem !default;
-$button-small-padding:            1.1rem !default;
-
 $button-round-border-radius:      64px !default;
 $button-round-padding:            0 2.6rem !default;
 
+$button-color:                    color(primary) !default;
+$button-color-activated:          darken-or-lighten($button-color) !default;
+$button-text-color:               inverse(primary) !default;
+$button-hover-opacity:            0.88 !default;
 
-// Core Button
+
+// Default Button
 // --------------------------------------------------
 
 button,
@@ -33,7 +30,8 @@ button,
   align-items: center;
   justify-content: center;
 
-  will-change: transform;
+  will-change: background-color, opacity;
+  transition: background-color, opacity 100ms linear;
 
   margin: $button-margin;
   line-height: 1;
@@ -58,46 +56,30 @@ button,
   padding: $button-padding;
   min-height: $button-height;
 
-  background: transparent;
-
   text-align: center;
   font-size: $button-font-size;
   border: transparent;
   border-radius: $button-border-radius;
 
-  &[large] {
-    padding: 0 $button-large-padding;
-    min-width: ($button-large-padding * 4);
-    min-height: $button-large-height;
-    font-size: $button-large-font-size;
+  background: $button-color;
+  color: $button-text-color;
+
+  &:hover,
+  &.hover {
+    opacity: $button-hover-opacity;
+    color: $button-text-color;
+    text-decoration: none;
   }
 
-  &[small] {
-    padding: 0 $button-small-padding;
-    min-width: ($button-small-padding * 3);
-    min-height: $button-small-height;
-    font-size: $button-small-font-size;
+  &.activated {
+    opacity: 1;
+    background-color: $button-color-activated;
   }
 
 
-  // Core Button Types
+  // Button Types
   // --------------------------------------------------
 
-  &[clear] {
-    border-color: transparent;
-    background: none;
-  }
-
-  &[outline] {
-    background: none;
-
-    &[full] {
-      border-radius: 0;
-      border-right-width: 0;
-      border-left-width: 0;
-    }
-  }
-
   &[block] {
     display: flex;
     clear: both;
@@ -117,13 +99,12 @@ button,
     border-radius: 0;
     border-right-width: 0;
     border-left-width: 0;
-  }
 
-  &.disabled,
-  &[disabled] {
-    opacity: .4;
-    cursor: default !important;
-    pointer-events: none;
+    &[outline] {
+      border-radius: 0;
+      border-right-width: 0;
+      border-left-width: 0;
+    }
   }
 
   &[round] {
@@ -131,6 +112,13 @@ button,
     padding: $button-round-padding;
   }
 
+  &.disabled,
+  &[disabled] {
+    opacity: 0.4;
+    cursor: default !important;
+    pointer-events: none;
+  }
+
 }
 
 
@@ -139,88 +127,38 @@ button,
   margin-top: 0;
 }
 
-
-// Button Misc
-// --------------------------------------------------
-
 a[button] {
   color: inherit;
   text-decoration: none;
 }
 
 
-// Core Button Mixins
+// Default Button Color Mixin
 // --------------------------------------------------
 
-@mixin button-default($bg-color, $fg-color) {
+@mixin button-default($bg-color, $bg-color-activated, $text-color) {
   background-color: $bg-color;
-  color: $fg-color;
-  transition: background-color,opacity 100ms linear;
-
-  &[full][outline] {
-    border-radius: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-  }
-
-  &:hover,
-  &.hover {
-    opacity: 0.88;
-    color: $fg-color;
-    text-decoration: none;
-  }
+  color: $text-color;
 
   &.activated {
-    opacity: 1;
-    background-color: darken($bg-color, 12%);
-  }
-}
-
-@mixin button-clear($fg-color) {
-  &[clear] {
-    color: $fg-color;
-    background: none;
-
-    &.activated {
-      opacity: 0.4;
-    }
-  }
-}
-
-@mixin button-outline($fg-color) {
-  &[outline] {
-    border: 1px solid $fg-color;
-    background: transparent;
-    color: $fg-color;
-
-    &.activated {
-      color: white;
-      background-color: rgb(red($fg-color), green($fg-color), blue($fg-color));
-    }
+    background-color: $bg-color-activated;
   }
 }
 
 
-// Core Button Color Generation
+// Generate Default Button Colors
 // --------------------------------------------------
 
-@each $color, $value in $colors {
+@each $color, $value in auxiliary-colors() {
 
   button[#{$color}],
   [button][#{$color}] {
 
-    @if lightness(get-color($color, base)) > 90 {
-      $fg-color: get-color($color, inverse);
-    } @else {
-      $fg-color: get-color($color, base);
-    }
+    $bg-color: $value;
+    $bg-color-activated: darken-or-lighten($bg-color);
+    $text-color: inverse($color);
+    @include button-default($bg-color, $bg-color-activated, $text-color);
 
-    @include button-default(get-color($color, base),
-                            get-color($color, inverse));
-
-    @include button-clear($fg-color);
-
-    @include button-outline(get-color($color, light));
   }
 
 }

ionic/components/button/test/basic/main.html

@@ -1,5 +1,9 @@
 
-<div class="padding" style="text-align:center">
+<ion-toolbar>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <button>D</button>
@@ -7,12 +11,6 @@
     <button class="activated">D.activated</button>
   </p>
 
-  <p>
-    <button primary>P</button>
-    <button primary class="hover">P.hover</button>
-    <button primary class="activated">P.activated</button>
-  </p>
-
   <p>
     <button secondary>S</button>
     <button secondary class="hover">S.hover</button>
@@ -31,16 +29,10 @@
     <button light class="activated">L.activated</button>
   </p>
 
-  <p>
-    <button stable>S</button>
-    <button stable class="hover">S.hover</button>
-    <button stable class="activated">S.activated</button>
-  </p>
-
   <p>
     <button dark>D</button>
     <button dark class="hover">D.hover</button>
     <button dark class="activated">D.activated</button>
   </p>
 
-</div>
+</ion-content>

ionic/components/button/test/block/main.html

@@ -1,5 +1,9 @@
 
-<div class="padding">
+<ion-toolbar>
+  <ion-title>Block Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <a button block href="#">a[button][block]</a>
@@ -21,4 +25,4 @@
     <button block clear stable>button[block]</button>
   </p>
 
-</div>
+</ion-content>

ionic/components/button/test/clear/main.html

@@ -1,5 +1,9 @@
 
-<div class="padding" style="text-align:center">
+<ion-toolbar>
+  <ion-title>Clear Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <button clear>D</button>
@@ -7,12 +11,6 @@
     <button clear class="activated">D.activated</button>
   </p>
 
-  <p>
-    <button clear primary>P</button>
-    <button clear primary class="hover">P.hover</button>
-    <button clear primary class="activated">P.activated</button>
-  </p>
-
   <p>
     <button clear secondary>S</button>
     <button clear secondary class="hover">S.hover</button>
@@ -31,16 +29,10 @@
     <button clear light class="activated">L.activated</button>
   </p>
 
-  <p>
-    <button clear stable>S</button>
-    <button clear stable class="hover">S.hover</button>
-    <button clear stable class="activated">S.activated</button>
-  </p>
-
   <p>
     <button clear dark>D</button>
     <button clear dark class="hover">D.hover</button>
     <button clear dark class="activated">D.activated</button>
   </p>
 
-</div>
+</ion-content>

ionic/components/button/test/fab/main.html

@@ -1,10 +1,16 @@
 
-<div>
-  <button fab fab-left fab-top primary><i class="icon ion-plus"></i></button>
+<ion-toolbar>
+  <ion-title>FAB Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content>
+
+  <button fab fab-left fab-top><i class="icon ion-plus"></i></button>
   <button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button>
   <button fab fab-right fab-top danger><i class="icon ion-plus"></i></button>
 
   <button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button>
-  <button fab fab-center fab-bottom stable><i class="icon ion-plus"></i></button>
+  <button fab fab-center fab-bottom><i class="icon ion-plus"></i></button>
   <button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button>
-</div>
+
+</ion-content>

ionic/components/button/test/full/main.html

@@ -1,20 +1,28 @@
 
-<div>
-  <a button full href="#">a[button][full]</a>
-  <button full>button[full]</button>
-</div>
+<ion-toolbar>
+  <ion-title>Full Buttons</ion-title>
+</ion-toolbar>
 
-<div>
-  <a button full primary href="#">a[button][full][primary]</a>
-  <button full primary>button[full][primary]</button>
-</div>
+<ion-content>
 
-<div>
-  <a button full outline primary href="#">a[button][full][outline][primary]</a>
-  <button full outline primary>button[full][outline][primary]</button>
-</div>
+  <div>
+    <a button full href="#">a[button][full]</a>
+    <button full>button[full]</button>
+  </div>
 
-<div>
-  <a button full clear primary href="#">a[button][full][clear][primary]</a>
-  <button full clear primary>button[full][clear][primary]</button>
-</div>
+  <div>
+    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
+    <button full outline secondary>button[full][outline][secondary]</button>
+  </div>
+
+  <div>
+    <a button full clear light href="#">a[button][full][clear][light]</a>
+    <button full clear light>button[full][clear][light]</button>
+  </div>
+
+  <div>
+    <a button full clear dark href="#">a[button][full][clear][dark]</a>
+    <button full clear dark>button[full][clear][dark]</button>
+  </div>
+
+</ion-content>

ionic/components/button/test/icons/main.html

@@ -1,97 +1,101 @@
 
-<div class="padding">
+<ion-toolbar>
+  <ion-title>Buttons Icons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding">
 
   <div>
-    <button primary>
+    <button>
       <icon name="ion-home"></icon>
       Left Icon
     </button>
-    <a button primary>
+    <a button>
       <icon name="ion-home"></icon>
       Left Icon
     </a>
   </div>
 
   <div>
-    <button primary>
+    <button>
       Right Icon
       <icon name="ion-star"></icon>
     </button>
-    <a button primary>
+    <a button>
       Right Icon
       <icon name="ion-star"></icon>
     </a>
   </div>
 
   <div>
-    <button primary>
+    <button>
       <icon name="ion-flag"></icon>
     </button>
-    <a button primary>
+    <a button>
       <icon name="ion-flag"></icon>
     </a>
   </div>
 
   <div>
-    <button large primary>
+    <button large>
       <icon name="ion-help-circled"></icon>
       Left, Large
     </button>
-    <a button large primary>
+    <a button large>
       <icon name="ion-help-circled"></icon>
       Left, Large
     </a>
   </div>
 
   <div>
-    <button large primary>
+    <button large>
       Right, Large
       <icon name="ion-settings"></icon>
     </button>
-    <a button large primary>
+    <a button large>
       Right, Large
       <icon name="ion-settings"></icon>
     </a>
   </div>
 
   <div>
-    <button large primary>
+    <button large>
       <icon name="ion-heart"></icon>
     </button>
-    <a button large primary>
+    <a button large>
       <icon name="ion-heart"></icon>
     </a>
   </div>
 
   <div>
-    <button small primary>
+    <button small>
       <icon name="ion-checkmark"></icon>
       Left, Small
     </button>
-    <a button small primary>
+    <a button small>
       <icon name="ion-checkmark"></icon>
       Left, Small
     </a>
   </div>
 
   <div>
-    <button small primary>
+    <button small>
       Right, Small
       <icon name="ion-forward"></icon>
     </button>
-    <a button small primary>
+    <a button small>
       Right, Small
       <icon name="ion-forward"></icon>
     </a>
   </div>
 
   <div>
-    <button small primary>
+    <button small>
       <icon name="ion-search"></icon>
     </button>
-    <a button small primary>
+    <a button small>
       <icon name="ion-search"></icon>
     </a>
   </div>
 
-</div>
+</ion-content>

ionic/components/button/test/outline/main.html

@@ -1,5 +1,9 @@
 
-<div class="padding" style="text-align:center">
+<ion-toolbar>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <button outline>D</button>
@@ -7,12 +11,6 @@
     <button outline class="activated">D.activated</button>
   </p>
 
-  <p>
-    <button outline primary>P</button>
-    <button outline primary class="hover">P.hover</button>
-    <button outline primary class="activated">P.activated</button>
-  </p>
-
   <p>
     <button outline secondary>S</button>
     <button outline secondary class="hover">S.hover</button>
@@ -31,12 +29,6 @@
     <button outline light class="activated">L.activated</button>
   </p>
 
-  <p>
-    <button outline stable>S</button>
-    <button outline stable class="hover">S.hover</button>
-    <button outline stable class="activated">S.activated</button>
-  </p>
-
   <p>
     <button outline dark>D</button>
     <button outline dark class="hover">D.hover</button>
@@ -44,15 +36,27 @@
   </p>
 
   <p>
-    <button outline primary block>button[outline][block][primary]</button>
+    <button outline block>button[outline][block]</button>
   </p>
 
   <p>
-    <button outline primary block class="hover">[outline][block][primary].hover</button>
+    <button outline block class="hover">[outline][block].hover</button>
   </p>
 
   <p>
-    <button outline primary block class="activated">[outline][block][primary].activated</button>
+    <button outline block class="activated">[outline][block].activated</button>
   </p>
 
-</div>
+  <p>
+    <button outline block secondary>button[outline][block][secondary]</button>
+  </p>
+
+  <p>
+    <button outline block secondary class="hover">[outline][block][secondary].hover</button>
+  </p>
+
+  <p>
+    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+  </p>
+
+</ion-content>

ionic/components/button/test/round/main.html

@@ -1,18 +1,23 @@
 
-<div>
+<ion-toolbar>
+  <ion-title>Round Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding">
+  <button round>button</button>
   <button round light>button light</button>
-  <button round stable>button stable</button>
-  <button round primary>button primary</button>
   <button round secondary>button secondary</button>
   <button round danger>button danger</button>
   <button round dark>button dark</button>
+
+  <button round outline>button</button>
   <button round light outline>button light</button>
-  <button round stable outline>button stable</button>
-  <button round primary outline>button primary</button>
   <button round secondary outline>button secondary</button>
   <button round danger outline>button danger</button>
   <button round dark outline>button dark</button>
-</div>
+
+</ion-content>
+
 <style>
   button {
     display: block !important;

ionic/components/button/test/sizes/main.html

@@ -1,29 +1,33 @@
 
-<div class="padding">
+<ion-toolbar>
+  <ion-title>Button Sizes</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding">
 
   <p>
-    <a button primary href="#">a[button]</a>
-    <button primary>button</button>
+    <a button href="#">a[button]</a>
+    <button>button</button>
   </p>
 
   <p>
-    <a button small primary href="#">a[button][small]</a>
-    <button small primary>button[small]</button>
+    <a button small href="#">a[button][small]</a>
+    <button small>button[small]</button>
   </p>
 
   <p>
-    <a button outline small primary href="#">a[button][outline][small]</a>
-    <button outline small primary>button[outline][small]</button>
+    <a button outline small href="#">a[button][outline][small]</a>
+    <button outline small>button[outline][small]</button>
   </p>
 
   <p>
-    <a button clear small primary href="#">a[button][clear][small]</a>
-    <button clear small primary>button[clear][small]</button>
+    <a button clear small href="#">a[button][clear][small]</a>
+    <button clear small>button[clear][small]</button>
   </p>
 
   <p>
-    <button large primary>[large]</button>
-    <a button large primary href="#">
+    <button large>[large]</button>
+    <a button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
@@ -32,13 +36,13 @@
   </p>
 
   <p>
-    <a button outline large primary href="#">a[button][outline][large]</a>
-    <button outline large primary>button[outline][large]</button>
+    <a button outline large href="#">a[button][outline][large]</a>
+    <button outline large>button[outline][large]</button>
   </p>
 
   <p>
-    <a button clear large primary href="#">a[clear][large]</a>
-    <button clear large primary>button[clear][large]</button>
+    <a button clear large href="#">a[clear][large]</a>
+    <button clear large>button[clear][large]</button>
   </p>
 
-</div>
+</ion-content>