fix(button): add custom properties and remove --ion-color overrides (#15463)

- adds custom properties 
- removes the overrides of `--ion-color-*` variables
- documents the properties

references #14808 references #14853 references #14850

core/src/components.d.ts

@@ -4011,7 +4011,7 @@ export namespace Components {
     * The text to display on the ok button. Default: `OK`.
     */
     'okText': string;
-    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement>;
+    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement | HTMLIonActionSheetElement | HTMLIonAlertElement>;
     /**
     * The text to display when the select is empty.
     */

core/src/components/button/button.ios.scss

@@ -31,12 +31,7 @@
   --opacity: #{$button-ios-opacity-hover};
 }
 
-:host(.button-solid.focused) {
-  --background: #{current-color(shade)};
-}
-
 :host(.button-solid.activated) {
-  --background: #{current-color(shade)};
   --opacity: #{$button-ios-opacity-activated};
 }
 
@@ -47,22 +42,16 @@
   --border-radius: #{$button-ios-outline-border-radius};
   --border-width: #{$button-ios-outline-border-width};
   --border-style: #{$button-ios-outline-border-style};
+  --background-activated: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, contrast)};
 }
 
-:host(.button-outline.activated) {
+:host(.button-outline.activated.ion-color) .button-native {
-  --background: #{current-color(base)};
+  background: current-color(base);
-
+  color: current-color(contrast);
-  color: #{current-color(contrast)};
 }
 
-:host(.button-outline.focused) {
-  --background: #{current-color(base, .1)};
-}
-
-:host(.button-outline.activated.focused) {
-  --border-color: #{current-color(shade)};
-  --background: #{current-color(shade)};
-}
 
 // iOS Clear Button
 // --------------------------------------------------
@@ -75,8 +64,11 @@
   --opacity: #{$button-ios-clear-opacity-activated};
 }
 
-:host(.button-clear.focused) {
+:host(.button-clear) {
-  --background: #{current-color(base, .1)};
+  --background-activated: transparent;
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, base)};
+  --color-focused: #{ion-color(primary, base)};
 }
 
 

core/src/components/button/button.md.scss

@@ -5,9 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
-              background-color $button-md-transition-duration $button-md-transition-timing-function,
-              color $button-md-transition-duration $button-md-transition-timing-function};
   --border-radius: #{$button-md-border-radius};
   --margin-top: #{$button-md-margin-top};
   --margin-bottom: #{$button-md-margin-bottom};
@@ -18,6 +15,9 @@
   --padding-start: #{$button-md-padding-start};
   --padding-end: #{$button-md-padding-end};
   --height: #{$button-md-height};
+  --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
+                  background-color $button-md-transition-duration $button-md-transition-timing-function,
+                  color $button-md-transition-duration $button-md-transition-timing-function};
 
   font-size: #{$button-md-font-size};
   font-weight: #{$button-md-font-weight};
@@ -36,7 +36,6 @@
 
 :host(.button-solid.activated) {
   --box-shadow: #{$button-md-box-shadow-activated};
-  --background: #{current-color(shade)};
 }
 
 // Material Design Outline Button
@@ -46,14 +45,13 @@
   --border-width: 1px;
   --border-style: solid;
   --box-shadow: none;
+  --background-activated: transparent;
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, base)};
 }
 
-:host(.button-outline.activated) {
+:host(.button-outline.activated.ion-color) .button-native {
-  --background: transparent;
+  background: transparent;
-}
-
-:host(.button-outline.focused) {
-  --background: #{current-color(base, .1)};
 }
 
 
@@ -62,6 +60,10 @@
 
 :host(.button-clear) {
   --opacity: #{$button-md-clear-opacity};
+  --background-activated: transparent;
+  --background-focused: #{ion-color(primary, base, .1)};
+  --color-activated: #{ion-color(primary, base)};
+  --color-focused: #{ion-color(primary, base)};
 }
 
 

core/src/components/button/button.scss

@@ -4,9 +4,40 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
+  /**
-  --ion-color-contrast: #{ion-color(primary, contrast)};
+   * @prop --background: Background of the button
-  --ion-color-shade: #{ion-color(primary, shade)};
+   * @prop --background-activated: Background of the button when activated
+   * @prop --background-focused: Background of the button when focused
+   *
+   * @prop --color: Text color of the button
+   * @prop --color-activated: Text color of the button when activated
+   * @prop --color-focused: Text color of the button when focused
+   *
+   * @prop --width: Width of the button
+   * @prop --height: Height of the button
+   *
+   * @prop --transition: Transition of the button
+   *
+   * @prop --border-radius: Border radius of the button
+   * @prop --border-width: Border width of the button
+   * @prop --border-style: Border style of the button
+   * @prop --border-color: Border color of the button
+   *
+   * @prop --ripple-color: Color of the button ripple effect
+   *
+   * @prop --box-shadow: Box shadow of the button
+   * @prop --opacity: Opacity of the button
+   *
+   * @prop --margin-top: Margin top of the button
+   * @prop --margin-end: Margin end of the button
+   * @prop --margin-bottom: Margin bottom of the button
+   * @prop --margin-start: Margin start of the button
+   *
+   * @prop --padding-top: Padding top of the button
+   * @prop --padding-end: Padding end of the button
+   * @prop --padding-bottom: Padding bottom of the button
+   * @prop --padding-start: Padding start of the button
+   */
   --overflow: hidden;
   --ripple-color: currentColor;
 
@@ -35,32 +66,79 @@
 // Solid Button
 // --------------------------------------------------
 
+// Default Solid Color
 :host(.button-solid) {
-  --background: #{current-color(base)};
+  --background: #{ion-color(primary, base)};
+  --background-activated: #{ion-color(primary, shade)};
+  --background-focused: #{ion-color(primary, shade)};
+  --color: #{ion-color(primary, contrast)};
+  --color-activated: #{ion-color(primary, contrast)};
+  --color-focused: #{ion-color(primary, contrast)};
+}
 
-  color: #{current-color(contrast)};
+// Solid Button with Color
+:host(.button-solid.ion-color) .button-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+// Focused/Activated Solid Button with Color
+:host(.button-solid.ion-color.focused) .button-native,
+:host(.button-solid.ion-color.activated) .button-native {
+  background: #{current-color(shade)};
 }
 
 
 // Outline Button
 // --------------------------------------------------
 
+// Default Outline Color
 :host(.button-outline) {
-  --border-color: #{current-color(base)};
+  --border-color: #{ion-color(primary, base)};
   --background: transparent;
+  --color: #{ion-color(primary, base)};
+  --color-focused: #{ion-color(primary, base)};
+}
 
-  color: #{current-color(base)};
+// Outline Button with Color
+:host(.button-outline.ion-color) .button-native {
+  border-color: current-color(base);
+
+  background: transparent;
+  color: current-color(base);
+}
+
+:host(.button-outline.focused.ion-color) .button-native {
+  background: current-color(base, .1);
+  color: current-color(base);
 }
 
 
 // Clear Button
 // --------------------------------------------------
 
+// Default Clear Color
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
+  --color: #{ion-color(primary, base)};
+}
 
-  color: #{current-color(base)};
+// Clear Button with Color
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: current-color(base);
+}
+
+// Focused Clear Button with Color
+:host(.button-clear.focused.ion-color) .button-native {
+  background: current-color(base, .1);
+  color: current-color(base);
+}
+
+// Activated Clear Button with Color
+:host(.button-clear.activated.ion-color) .button-native {
+  background: transparent;
 }
 
 
@@ -112,17 +190,17 @@
   border-left-width: 0;
 }
 
-
 .button-native {
-  @include text-inherit();
   @include border-radius(var(--border-radius));
   @include font-smoothing();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include text-inherit();
 
   display: block;
   position: relative;
 
+  width: var(--width);
   height: var(--height);
 
   transition: var(--transition);
@@ -134,6 +212,7 @@
   outline: none;
 
   background: var(--background);
+  color: var(--color);
 
   line-height: 1;
 
@@ -154,6 +233,17 @@
   pointer-events: none;
 }
 
+:host(.focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+:host(.activated) .button-native {
+  background: var(--background-activated);
+  color: var(--color-activated);
+}
+
+
 // .button > .button-container:hover {
 //   opacity: var(--opacity-hover);
 // }

core/src/components/button/button.tsx

@@ -231,6 +231,7 @@ function getColorClassMap(buttonType: string, color: string | undefined, fill: s
     [`${className}-${mode}`]: true,
   };
   if (color !== undefined) {
+    map[`ion-color`] = true;
     map[`ion-color-${color}`] = true;
   }
   return map;

core/src/components/button/readme.md

@@ -61,6 +61,36 @@ This attribute specifies the size of the button. Setting this attribute will cha
 | `ionFocus` | Emitted when the button has focus.   |
 
 
+## CSS Custom Properties
+
+| Name                     | Description                             |
+| ------------------------ | --------------------------------------- |
+| `--background`           | Background of the button                |
+| `--background-activated` | Background of the button when activated |
+| `--background-focused`   | Background of the button when focused   |
+| `--border-color`         | Border color of the button              |
+| `--border-radius`        | Border radius of the button             |
+| `--border-style`         | Border style of the button              |
+| `--border-width`         | Border width of the button              |
+| `--box-shadow`           | Box shadow of the button                |
+| `--color`                | Text color of the button                |
+| `--color-activated`      | Text color of the button when activated |
+| `--color-focused`        | Text color of the button when focused   |
+| `--height`               | Height of the button                    |
+| `--margin-bottom`        | Margin bottom of the button             |
+| `--margin-end`           | Margin end of the button                |
+| `--margin-start`         | Margin start of the button              |
+| `--margin-top`           | Margin top of the button                |
+| `--opacity`              | Opacity of the button                   |
+| `--padding-bottom`       | Padding bottom of the button            |
+| `--padding-end`          | Padding end of the button               |
+| `--padding-start`        | Padding start of the button             |
+| `--padding-top`          | Padding top of the button               |
+| `--ripple-color`         | Color of the button ripple effect       |
+| `--transition`           | Transition of the button                |
+| `--width`                | Width of the button                     |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/button/test/basic/index.html

@@ -21,51 +21,61 @@
     <ion-content id="content" padding no-bounce text-center>
       <p>
         <ion-button>Default</ion-button>
+        <ion-button class="focused">Default.focused</ion-button>
         <ion-button class="activated">Default.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="primary">Primary</ion-button>
+        <ion-button class="focused" color="primary">Primary.focused</ion-button>
         <ion-button class="activated" color="primary">Primary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="secondary">Secondary</ion-button>
+        <ion-button class="focused" color="secondary">Secondary.focused</ion-button>
         <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="tertiary">Tertiary</ion-button>
+        <ion-button class="focused" color="tertiary">Tertiary.focused</ion-button>
         <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="success">Success</ion-button>
+        <ion-button class="focused" color="success">Success.focused</ion-button>
         <ion-button class="activated" color="success">Success.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="warning">Warning</ion-button>
+        <ion-button class="focused" color="warning">Warning.focused</ion-button>
         <ion-button class="activated" color="warning">Warning.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="danger">Danger</ion-button>
+        <ion-button class="focused" color="danger">Danger.focused</ion-button>
         <ion-button class="activated" color="danger">Danger.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="light">Light</ion-button>
+        <ion-button class="focused" color="light">Light.focused</ion-button>
         <ion-button class="activated" color="light">Light.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="medium">Medium</ion-button>
+        <ion-button class="focused" color="medium">Medium.focused</ion-button>
         <ion-button class="activated" color="medium">Medium.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="dark">Dark</ion-button>
+        <ion-button class="focused" color="dark">Dark.focused</ion-button>
         <ion-button class="activated" color="dark">Dark.activated</ion-button>
       </p>
 

core/src/components/button/test/clear/e2e.js

@@ -5,12 +5,12 @@ const { register, Page, platforms } = require('../../../../../scripts/e2e');
 
 class E2ETestPage extends Page {
   constructor(driver, platform) {
-    super(driver, `http://localhost:3333/src/components/button/test/fill?ionic:mode=${platform}`);
+    super(driver, `http://localhost:3333/src/components/button/test/clear?ionic:mode=${platform}`);
   }
 }
 
 platforms.forEach(platform => {
-  describe('button/fill', () => {
+  describe('button/clear', () => {
     register('should init', driver => {
       const page = new E2ETestPage(driver, platform);
       return page.navigate('#content');

core/src/components/button/test/clear/index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Button - Clear</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Button - Clear</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content" padding no-bounce>
+      <p>
+        <ion-button fill="clear">Default</ion-button>
+        <ion-button fill="clear" class="activated">Default.activated</ion-button>
+        <ion-button fill="clear" class="focused">Default.focused</ion-button>
+        <ion-button fill="clear" class="activated focused">Default.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="primary">Primary</ion-button>
+        <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="primary">Primary.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="primary">Primary.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="secondary">Secondary</ion-button>
+        <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
+        <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="success">Success</ion-button>
+        <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="success">Success.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="success">Success.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="warning">Warning</ion-button>
+        <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="warning">Warning.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="warning">Warning.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="danger">Danger</ion-button>
+        <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="danger">Danger.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="danger">Danger.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="light">Light</ion-button>
+        <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="light">Light.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="light">Light.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="medium">Medium</ion-button>
+        <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="medium">Medium.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="medium">Medium.activated.focused</ion-button>
+      </p>
+
+      <p>
+        <ion-button fill="clear" color="dark">Dark</ion-button>
+        <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button fill="clear" class="focused" color="dark">Dark.focused</ion-button>
+        <ion-button fill="clear" class="activated focused" color="dark">Dark.activated.focused</ion-button>
+      </p>
+      <p>
+        <ion-button fill="clear" disabled>Disabled</ion-button>
+        <ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
+      </p>
+    </ion-content>
+
+  </ion-app>
+</body>
+
+</html>

core/src/components/button/test/outline/e2e.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/button/test/outline?ionic:mode=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('button/outline', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate('#content');
+    });
+  });
+});

core/src/components/button/test/outline/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Button - Fill</title>
+  <title>Button - Outline</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
@@ -14,7 +14,7 @@
 
     <ion-header>
       <ion-toolbar>
-        <ion-title>Button - Fill</ion-title>
+        <ion-title>Button - Outline</ion-title>
       </ion-toolbar>
     </ion-header>
 
@@ -22,110 +22,76 @@
       <p>
         <ion-button fill="outline">Default</ion-button>
         <ion-button fill="outline" class="activated">Default.activated</ion-button>
+        <ion-button fill="outline" class="focused">Default.focused</ion-button>
+        <ion-button fill="outline" class="activated focused">Default.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="primary">Primary</ion-button>
         <ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="primary">Primary.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="primary">Primary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="secondary">Secondary</ion-button>
         <ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="tertiary">Tertiary</ion-button>
         <ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="success">Success</ion-button>
         <ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="success">Success.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="success">Success.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="warning">Warning</ion-button>
         <ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="warning">Warning.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="warning">Warning.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="danger">Danger</ion-button>
         <ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="danger">Danger.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="danger">Danger.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="light">Light</ion-button>
         <ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="light">Light.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="light">Light.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="medium">Medium</ion-button>
         <ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="medium">Medium.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="medium">Medium.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="dark">Dark</ion-button>
         <ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button fill="outline" class="focused" color="dark">Dark.focused</ion-button>
+        <ion-button fill="outline" class="activated focused" color="dark">Dark.activated.focused</ion-button>
       </p>
       <p>
         <ion-button fill="outline" disabled>Disabled</ion-button>
         <ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
       </p>
-
-      <p>
-        <ion-button fill="clear">Default</ion-button>
-        <ion-button fill="clear" class="activated">Default.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="primary">Primary</ion-button>
-        <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="secondary">Secondary</ion-button>
-        <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
-        <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="success">Success</ion-button>
-        <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="warning">Warning</ion-button>
-        <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="danger">Danger</ion-button>
-        <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="light">Light</ion-button>
-        <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="medium">Medium</ion-button>
-        <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
-      </p>
-
-      <p>
-        <ion-button fill="clear" color="dark">Dark</ion-button>
-        <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
-      </p>
-      <p>
-        <ion-button fill="clear" disabled>Disabled</ion-button>
-        <ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
-      </p>
     </ion-content>
 
   </ion-app>

core/src/components/button/test/standalone/index.html

@@ -10,27 +10,91 @@
 </head>
 
 <body>
+  <h3>Default</h3>
+  <p>
+    <ion-button>Default</ion-button>
+    <ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+    <ion-button><ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
+    <ion-button shape="round">Round</ion-button>
+    <ion-button fill="outline">Outline</ion-button>
+    <ion-button fill="clear">Clear</ion-button>
+    <ion-button fill="outline" expand="full">Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline</ion-button>
+    <ion-button fill="clear" expand="block">Block Clear</ion-button>
+  </p>
+
+  <h3>Colors</h3>
   <p>
     <ion-button color="primary">Primary</ion-button>
     <ion-button color="secondary">Secondary</ion-button>
     <ion-button color="tertiary">Tertiary</ion-button>
-    <ion-button color="success">Success</ion-button>
+    <ion-button fill="outline" color="success">Success Outline</ion-button>
-    <ion-button color="warning">Warning</ion-button>
+    <ion-button fill="clear" color="warning">Warning Clear</ion-button>
     <ion-button color="danger">Danger</ion-button>
     <ion-button color="light">Light</ion-button>
-    <ion-button color="medium">Medium</ion-button>
+    <ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
-    <ion-button color="dark">Dark</ion-button>
+    <ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
-  </p>
-  <p>
-    <ion-badge color="primary">Primary</ion-badge>
-    <ion-badge color="secondary">Secondary</ion-badge>
-    <ion-badge color="tertiary">Tertiary</ion-badge>
-    <ion-badge color="success">Success</ion-badge>
-    <ion-badge color="warning">Warning</ion-badge>
-    <ion-badge color="danger">Danger</ion-badge>
-    <ion-badge color="light">Light</ion-badge>
-    <ion-badge color="medium">Medium</ion-badge>
-    <ion-badge color="dark">Dark</ion-badge>
   </p>
+
+  <h3>Custom</h3>
+
+  <!-- Custom Font -->
+  <ion-button class="wide">wide</ion-button>
+  <ion-button class="large">large</ion-button>
+  <ion-button class="round">rounded</ion-button>
+
+  <!-- Custom Colors -->
+  <ion-button class="custom">custom</ion-button>
+  <ion-button class="custom activated">custom.activated</ion-button>
+  <ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button>Default</ion-button>
+    </ion-buttons>
+    <ion-title>Bar</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="secondary">Secondary</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button class="custom">Custom</ion-button>
+      <ion-button class="custom activated">Custom.a</ion-button>
+    </ion-buttons>
+    <ion-title>Bar</ion-title>
+    <ion-buttons slot="end">
+      <ion-button color="secondary" class="custom">Custom Secondary</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <style>
+    .wide {
+      --width: 100px;
+    }
+
+    .large {
+      font-weight: normal;
+      font-size: 24px;
+    }
+
+    .round {
+      --width: 60px;
+      --height: 60px;
+      --border-radius: 50%;
+      --vertical-align: middle;
+
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+
+    .custom {
+      --background: lightpink;
+      --background-activated: green;
+      --color: #222;
+      --color-activated: white;
+      --opacity: 1;
+    }
+  </style>
 </body>
 </html>

core/src/components/button/test/toolbar/index.html

@@ -61,6 +61,23 @@
         <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
       </ion-toolbar>
 
+      <ion-toolbar color="dark">
+        <ion-buttons slot="secondary">
+          <ion-button class="closeButton" fill="solid">
+            Close
+          </ion-button>
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid" color="secondary">
+            <ion-icon slot="icon-only" name="more"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
+      </ion-toolbar>
+
       <ion-toolbar>
         <ion-buttons slot="secondary">
           <ion-button>

core/src/components/buttons/buttons.ios.scss

@@ -2,12 +2,12 @@
 @import "./buttons";
 
 
-// iOS Toolbar Button Default
+// iOS Toolbar Default Button
 // --------------------------------------------------
 
 ::slotted(*) .button {
   --padding-top: 0;
-  --pading-bottom: 0;
+  --padding-bottom: 0;
   --padding-start: 5px;
   --padding-end: 5px;
   --height: 32px;
@@ -20,10 +20,31 @@
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
 
+// iOS Toolbar with Color Default Button
+// --------------------------------------------------
+
 :host-context(.ion-color)::slotted(*) .button {
-  --ion-color-base: currentColor;
+  --color: currentColor;
+  --color-activated: currentColor;
 }
 
+
+// iOS Toolbar Clear Button
+// --------------------------------------------------
+
+::slotted(*) .button-clear.activated {
+  color: $toolbar-ios-button-color;
+}
+
+
+// iOS Toolbar Button Solid
+// --------------------------------------------------
+
+::slotted(*) .button-solid-ios:hover {
+  opacity: .4;
+}
+
+
 // iOS Toolbar Button Icon
 // --------------------------------------------------
 ::slotted(*) ion-icon[slot="start"] {
@@ -56,41 +77,31 @@
   pointer-events: none;
 }
 
-::slotted(*) .button.button-clear {
-  --height: 35px;
-}
 
-// iOS Toolbar Button Solid
+// iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-::slotted(*) .button.button-solid-ios:hover {
+// .button-menutoggle-ios {
-  opacity: .4;
+//   order: map-get($toolbar-order-ios, menu-toggle-start);
-}
 
-  // iOS Toolbar Menu Toggle
+//   min-width: 36px;
-  // --------------------------------------------------
 
-  // .button-menutoggle-ios {
+//   --margin-top: 0;
-  //   order: map-get($toolbar-order-ios, menu-toggle-start);
+//   --margin-bottom: 0;
+//   --margin-start: 6px;
+//   --margin-end: 6px;
 
-  //   min-width: 36px;
+//   --padding-top: 0;
+//   --padding-bottom: 0;
+//   --padding-start: 0;
+//   --padding-end: 0;
 
-  //   --margin-top: 0;
+//   ion-icon {
-  //   --margin-bottom: 0;
+//     @include padding(0, 6px);
-  //   --margin-start: 6px;
-  //   --margin-end: 6px;
 
-  //   --padding-top: 0;
+//     font-size: 28px;
-  //   --padding-bottom: 0;
+//   }
-  //   --padding-start: 0;
+// }
-  //   --padding-end: 0;
-
-  //   ion-icon {
-  //     @include padding(0, 6px);
-
-  //     font-size: 28px;
-  //   }
-  // }
 
 // iOS Toolbar Button Placement
 // --------------------------------------------------

core/src/components/buttons/buttons.md.scss

@@ -1,7 +1,7 @@
 @import "./buttons.md.vars";
 @import "./buttons";
 
-// Material Design Toolbar Button Default
+// Material Design Toolbar Default Button
 // --------------------------------------------------
 
 ::slotted(*) .button {
@@ -20,6 +20,49 @@
   --border-radius: #{$toolbar-md-button-border-radius};
 }
 
+
+// Material Design Toolbar w/ Color Default Button
+// --------------------------------------------------
+
+:host-context(.ion-color)::slotted(*) .button {
+  --color: currentColor;
+  --color-activated: currentColor;
+}
+
+
+// Material Design Toolbar Solid Button
+// --------------------------------------------------
+
+::slotted(*) .button-solid {
+  --color: #{$toolbar-md-background-color};
+  --color-activated: #{$toolbar-md-background-color};
+  --background: #{$toolbar-md-text-color};
+  --background-activated: #{$toolbar-md-text-color};
+}
+
+
+// Material Design Toolbar Outline Button
+// --------------------------------------------------
+
+::slotted(*) .button-outline {
+  --color: #{$toolbar-md-text-color};
+  --color-activated: #{$toolbar-md-text-color};
+  --background: transparent;
+  --background-activated: transparent;
+  --border-color: #{$toolbar-md-text-color};
+}
+
+
+// Material Design Toolbar Clear Button
+// --------------------------------------------------
+
+::slotted(*) .button-clear {
+  --color: #{$toolbar-md-text-color};
+  --color-activated: #{$toolbar-md-text-color};
+  --background: transparent;
+}
+
+
 // Material Design Toolbar Button Icon
 // --------------------------------------------------
 ::slotted(*) ion-icon[slot="start"] {
@@ -46,18 +89,6 @@
   pointer-events: none;
 }
 
-::slotted(*) .button.button-solid,
-::slotted(*) .button.button-outline {
-  --ion-color-base: #{$toolbar-md-text-color};
-  --ion-color-contrast: #{$toolbar-md-background-color};
-  --ion-color-shade: #{$toolbar-md-text-color};
-}
-
-::slotted(*) .button.button-clear {
-  --ion-color-base: currentColor;
-  --height: 45px;
-}
-
 
 // Material Design Toolbar Button Placement
 // --------------------------------------------------