refactor(chip): separate chip button styles from chip

packages/core/src/components/chip-button/chip-button.ios.scss

@@ -0,0 +1,89 @@
+@import "../../themes/ionic.globals.ios";
+@import "./chip-button";
+
+// iOS Chip Button
+// --------------------------------------------------
+
+/// @prop - Background color of the chip button
+$chip-button-ios-background-color:          color($colors-ios, primary) !default;
+
+/// @prop - Fill color of the icon in the chip button
+$chip-button-ios-icon-fill-color:           color-contrast($colors-ios, $chip-button-ios-background-color) !default;
+
+/// @prop - Background color of the clear chip button
+$chip-button-ios-clear-background-color:    transparent !default;
+
+/// @prop - Text color of the clear chip button
+$chip-button-ios-clear-text-color:          color($colors-ios, primary) !default;
+
+/// @prop - Fill color of the icon in the clear chip button
+$chip-button-ios-clear-icon-fill-color:     color($colors-ios, primary) !default;
+
+
+.chip-button-ios {
+  background-color: $chip-button-ios-background-color;
+}
+
+.chip-button-ios .icon {
+  fill: $chip-button-ios-icon-fill-color;
+}
+
+
+// iOS Clear Chip Button
+// --------------------------------------------------
+
+.chip-button-clear-ios {
+  background-color: $chip-button-ios-clear-background-color;
+  color: $chip-button-ios-clear-text-color;
+}
+
+.chip-button-clear-ios .icon {
+  fill: $chip-button-ios-clear-icon-fill-color;
+}
+
+
+// Generate iOS Chip Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .chip-button-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    .icon {
+      fill: $color-contrast;
+    }
+  }
+
+  .chip-ios-#{$color-name} .chip-button-ios {
+    color: $color-base;
+    background-color: $color-contrast;
+
+    .icon {
+      fill: $color-base;
+    }
+  }
+
+  // Clear Chip Buttons
+  // --------------------------------------------------
+
+  .chip-button-clear-ios-#{$color-name} {
+    color: $color-base;
+    background-color: transparent;
+
+    .icon {
+      fill: $color-base;
+    }
+  }
+
+  .chip-ios-#{$color-name} .chip-button-clear-ios {
+    color: $color-contrast;
+    background-color: transparent;
+
+    .icon {
+      fill: $color-contrast;
+    }
+  }
+
+}

packages/core/src/components/chip-button/chip-button.md.scss

@@ -0,0 +1,67 @@
+@import "../../themes/ionic.globals.md";
+@import "./chip-button";
+
+// Material Design Chip Button
+// --------------------------------------------------
+
+/// @prop - Background color of the chip button
+$chip-button-md-background-color:          color($colors-md, primary) !default;
+
+/// @prop - Fill color of the icon in the chip button
+$chip-button-md-icon-fill-color:           color-contrast($colors-md, $chip-button-md-background-color) !default;
+
+/// @prop - Background color of the clear chip button
+$chip-button-md-clear-background-color:    transparent !default;
+
+/// @prop - Text color of the clear chip button
+$chip-button-md-clear-text-color:          color($colors-md, primary) !default;
+
+/// @prop - Fill color of the icon in the clear chip button
+$chip-button-md-clear-icon-fill-color:     color($colors-md, primary) !default;
+
+
+.chip-button-md {
+  background-color: $chip-button-md-background-color;
+}
+
+.chip-button-md .icon {
+  fill: $chip-button-md-icon-fill-color;
+}
+
+
+// Material Design Clear Chip Button
+// --------------------------------------------------
+
+.chip-button-clear-md {
+  background-color: $chip-button-md-clear-background-color;
+  color: $chip-button-md-clear-text-color;
+}
+
+.chip-button-clear-md .icon {
+  fill: $chip-button-md-clear-icon-fill-color;
+}
+
+
+// Generate Material Design Chip Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .chip-button-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-md-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+
+  .chip-button-clear-md-#{$color-name} {
+    color: $color-base;
+  }
+
+  .chip-button-clear-md-#{$color-name} .icon {
+    fill: $color-base;
+  }
+
+}

packages/core/src/components/chip-button/chip-button.scss

@@ -0,0 +1,31 @@
+@import "../../themes/ionic.globals";
+
+// Chip Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the button in the chip
+$chip-button-border-radius:     50% !default;
+
+/// @prop - Margin top of the button in the chip
+$chip-button-margin-top:        0 !default;
+
+/// @prop - Margin end of the button in the chip
+$chip-button-margin-end:        $chip-button-margin-top !default;
+
+/// @prop - Margin bottom of the button in the chip
+$chip-button-margin-bottom:     $chip-button-margin-top !default;
+
+/// @prop - Margin start of the button in the chip
+$chip-button-margin-start:      $chip-button-margin-end !default;
+
+/// @prop - Width and height of the button in the chip
+$chip-button-size:              32px !default;
+
+
+.chip-button {
+  @include border-radius($chip-button-border-radius);
+  @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
+
+  width: $chip-button-size;
+  height: $chip-button-size;
+}

packages/core/src/components/chip-button/chip-button.tsx

@@ -2,7 +2,12 @@ import { Component, CssClassObject, h, Prop } from '@stencil/core';
 
 
 @Component({
-  tag: 'ion-chip-button'
+  tag: 'ion-chip-button',
+  styleUrls: {
+    ios: 'chip-button.ios.scss',
+    md: 'chip-button.md.scss',
+    wp: 'chip-button.wp.scss'
+  },
 })
 export class ChipButton {
   $el: HTMLElement;

packages/core/src/components/chip-button/chip-button.wp.scss

@@ -0,0 +1,68 @@
+@import "../../themes/ionic.globals.wp";
+@import "./chip-button";
+
+// Windows Chip Button
+// --------------------------------------------------
+
+/// @prop - Background color of the chip button
+$chip-button-wp-background-color:          color($colors-wp, primary) !default;
+
+/// @prop - Fill color of the icon in the chip button
+$chip-button-wp-icon-fill-color:           color-contrast($colors-wp, $chip-button-wp-background-color) !default;
+
+/// @prop - Background color of the clear chip button
+$chip-button-wp-clear-background-color:    transparent !default;
+
+/// @prop - Text color of the clear chip button
+$chip-button-wp-clear-text-color:          color($colors-wp, primary) !default;
+
+/// @prop - Fill color of the icon in the clear chip button
+$chip-button-wp-clear-icon-fill-color:     color($colors-wp, primary) !default;
+
+
+.chip-button-wp {
+  background-color: $chip-button-wp-background-color;
+}
+
+.chip-button-wp .icon {
+  fill: $chip-button-wp-icon-fill-color;
+}
+
+
+// Material Design Clear Chip Button
+// --------------------------------------------------
+
+.chip-button-clear-wp {
+  background-color: $chip-button-wp-clear-background-color;
+  color: $chip-button-wp-clear-text-color;
+}
+
+.chip-button-clear-wp .icon {
+  fill: $chip-button-wp-clear-icon-fill-color;
+}
+
+
+// Generate Windows Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .chip-button-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+  .chip-button-wp-#{$color-name} .icon {
+    fill: $color-contrast;
+  }
+
+  .chip-button-clear-wp-#{$color-name} {
+    color: $color-base;
+
+    .icon {
+      fill: $color-base;
+    }
+  }
+
+
+}

packages/core/src/components/chip/chip.ios.scss

@@ -49,21 +49,6 @@ $chip-ios-icon-background-color:            color($colors-ios, primary) !default
 /// @prop - Fill color of the icon in the chip
 $chip-ios-icon-fill-color:                  color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
 
-/// @prop - Background color of the chip button
-$chip-ios-button-background-color:          color($colors-ios, primary) !default;
-
-/// @prop - Fill color of the icon in the chip button
-$chip-ios-button-icon-fill-color:           color-contrast($colors-ios, $chip-ios-button-background-color) !default;
-
-/// @prop - Background color of the clear chip button
-$chip-ios-button-clear-background-color:    transparent !default;
-
-/// @prop - Text color of the clear chip button
-$chip-ios-button-clear-text-color:          color($colors-ios, primary) !default;
-
-/// @prop - Fill color of the icon in the clear chip button
-$chip-ios-button-clear-icon-fill-color:     color($colors-ios, primary) !default;
-
 
 .chip-ios {
   @include border-radius($chip-ios-border-radius);
@@ -86,57 +71,20 @@ $chip-ios-button-clear-icon-fill-color:     color($colors-ios, primary) !default
   background-color: $chip-ios-icon-background-color;
 }
 
-// iOS Chip Button
-// --------------------------------------------------
-
-.chip-button-ios {
-  background-color: $chip-ios-button-background-color;
-}
-
-.chip-button-ios .icon {
-  fill: $chip-ios-button-icon-fill-color;
-}
-
-
-// iOS Clear Chip Button
-// --------------------------------------------------
-
-.chip-button-clear-ios {
-  background-color: $chip-ios-button-clear-background-color;
-  color: $chip-ios-button-clear-text-color;
-}
-
-.chip-button-clear-ios .icon {
-  fill: $chip-ios-button-clear-icon-fill-color;
-}
-
 
 // Generate iOS Chip Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .chip-ios-#{$color-name},
+  .chip-ios-#{$color-name} {
-  .chip-button-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
 
-  .chip-button-ios-#{$color-name} .icon {
-    fill: $color-contrast;
-  }
-
   .chip-ios .icon-ios-#{$color-name} {
     fill: $color-contrast;
     background-color: $color-base;
   }
 
-  .chip-button-clear-ios-#{$color-name} {
-    color: $color-base;
-  }
-
-  .chip-button-clear-ios-#{$color-name} .icon {
-    fill: $color-base;
-  }
-
 }

packages/core/src/components/chip/chip.md.scss

@@ -49,21 +49,6 @@ $chip-md-icon-background-color:            color($colors-md, primary) !default;
 /// @prop - Fill color of the icon in the chip
 $chip-md-icon-fill-color:                  color-contrast($colors-md, $chip-md-icon-background-color) !default;
 
-/// @prop - Background color of the chip button
-$chip-md-button-background-color:          color($colors-md, primary) !default;
-
-/// @prop - Fill color of the icon in the chip button
-$chip-md-button-icon-fill-color:           color-contrast($colors-md, $chip-md-button-background-color) !default;
-
-/// @prop - Background color of the clear chip button
-$chip-md-button-clear-background-color:    transparent !default;
-
-/// @prop - Text color of the clear chip button
-$chip-md-button-clear-text-color:          color($colors-md, primary) !default;
-
-/// @prop - Fill color of the icon in the clear chip button
-$chip-md-button-clear-icon-fill-color:     color($colors-md, primary) !default;
-
 
 .chip-md {
   @include border-radius($chip-md-border-radius);
@@ -88,57 +73,19 @@ $chip-md-button-clear-icon-fill-color:     color($colors-md, primary) !default;
 }
 
 
-// Material Design Chip Button
-// --------------------------------------------------
-
-.chip-button-md {
-  background-color: $chip-md-button-background-color;
-}
-
-.chip-button-md .icon {
-  fill: $chip-md-button-icon-fill-color;
-}
-
-
-// Material Design Clear Chip Button
-// --------------------------------------------------
-
-.chip-button-clear-md {
-  background-color: $chip-md-button-clear-background-color;
-  color: $chip-md-button-clear-text-color;
-}
-
-.chip-button-clear-md .icon {
-  fill: $chip-md-button-clear-icon-fill-color;
-}
-
-
 // Generate Material Design Chip Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .chip-md-#{$color-name},
+  .chip-md-#{$color-name} {
-  .chip-button-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
 
-  .chip-button-md-#{$color-name} .icon {
-    fill: $color-contrast;
-  }
-
   .chip-md .icon-md-#{$color-name} {
     fill: $color-contrast;
     background-color: $color-base;
   }
 
-  .chip-button-clear-md-#{$color-name} {
-    color: $color-base;
-  }
-
-  .chip-button-clear-md-#{$color-name} .icon {
-    fill: $color-base;
-  }
-
 }

packages/core/src/components/chip/chip.scss

@@ -3,24 +3,6 @@
 // Chip
 // --------------------------------------------------
 
-/// @prop - Border radius of the button in the chip
-$chip-button-border-radius:     50% !default;
-
-/// @prop - Margin top of the button in the chip
-$chip-button-margin-top:        0 !default;
-
-/// @prop - Margin end of the button in the chip
-$chip-button-margin-end:        $chip-button-margin-top !default;
-
-/// @prop - Margin bottom of the button in the chip
-$chip-button-margin-bottom:     $chip-button-margin-top !default;
-
-/// @prop - Margin start of the button in the chip
-$chip-button-margin-start:      $chip-button-margin-end !default;
-
-/// @prop - Width and height of the button in the chip
-$chip-button-size:              32px !default;
-
 /// @prop - Border radius of the icon in the chip
 $chip-icon-border-radius:       50% !default;
 
@@ -54,14 +36,6 @@ ion-chip {
   box-sizing: border-box;
 }
 
-ion-chip .chip-button {
-  @include border-radius($chip-button-border-radius);
-  @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
-
-  width: $chip-button-size;
-  height: $chip-button-size;
-}
-
 ion-chip ion-icon {
   @include text-align($chip-icon-text-align);
   @include border-radius($chip-icon-border-radius);

packages/core/src/components/chip/chip.wp.scss

@@ -49,21 +49,6 @@ $chip-wp-icon-background-color:            color($colors-wp, primary) !default;
 /// @prop - Fill color of the icon in the chip
 $chip-wp-icon-fill-color:                  color-contrast($colors-wp, $chip-wp-icon-background-color) !default;
 
-/// @prop - Background color of the chip button
-$chip-wp-button-background-color:          color($colors-wp, primary) !default;
-
-/// @prop - Fill color of the icon in the chip button
-$chip-wp-button-icon-fill-color:           color-contrast($colors-wp, $chip-wp-button-background-color) !default;
-
-/// @prop - Background color of the clear chip button
-$chip-wp-button-clear-background-color:    transparent !default;
-
-/// @prop - Text color of the clear chip button
-$chip-wp-button-clear-text-color:          color($colors-wp, primary) !default;
-
-/// @prop - Fill color of the icon in the clear chip button
-$chip-wp-button-clear-icon-fill-color:     color($colors-wp, primary) !default;
-
 
 .chip-wp {
   @include border-radius($chip-wp-border-radius);
@@ -88,56 +73,19 @@ $chip-wp-button-clear-icon-fill-color:     color($colors-wp, primary) !default;
 }
 
 
-// Material Design Chip Button
-// --------------------------------------------------
-
-.chip-button-wp {
-  background-color: $chip-wp-button-background-color;
-}
-
-.chip-button-wp .icon {
-  fill: $chip-wp-button-icon-fill-color;
-}
-
-
-// Material Design Clear Chip Button
-// --------------------------------------------------
-
-.chip-button-clear-wp {
-  background-color: $chip-wp-button-clear-background-color;
-  color: $chip-wp-button-clear-text-color;
-}
-
-.chip-button-clear-wp .icon {
-  fill: $chip-wp-button-clear-icon-fill-color;
-}
-
 // Generate Windows Chip Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .chip-wp-#{$color-name},
+  .chip-wp-#{$color-name} {
-  .chip-button-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
 
-  .chip-button-wp-#{$color-name} .icon {
-    fill: $color-contrast;
-  }
-
   .chip-wp .icon-wp-#{$color-name} {
     fill: $color-contrast;
     background-color: $color-base;
   }
 
-  .chip-button-clear-wp-#{$color-name} {
-    color: $color-base;
-  }
-
-  .chip-button-clear-wp-#{$color-name} .icon {
-    fill: $color-base;
-  }
-
 }

packages/core/src/components/chip/test/basic.html

@@ -72,7 +72,7 @@
         </ion-avatar>
       </ion-chip>
 
-      <h2>del Chips</h2>
+      <h2>Delete Chips</h2>
 
       <ion-chip id="chip1">
         <ion-label>Default</ion-label>
@@ -82,7 +82,7 @@
       </ion-chip>
 
       <ion-chip id="chip2">
-        <ion-icon name="pin" color="primary"></ion-icon>
+        <ion-icon name="pin"></ion-icon>
         <ion-label>With Icon</ion-label>
         <ion-chip-button onclick="del('chip2')">
           <ion-icon name="close"></ion-icon>
@@ -99,12 +99,20 @@
         </ion-chip-button>
       </ion-chip>
 
+      <ion-chip color="primary" id="chip4">
+        <ion-icon name="pin"></ion-icon>
+        <ion-label>Primary</ion-label>
+        <ion-chip-button clear onclick="del('chip4')">
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip-button>
+      </ion-chip>
+
       <ion-item>
         <ion-label>Chip Item</ion-label>
-        <ion-chip slot="end" id="chip4">
+        <ion-chip slot="end" id="chip5">
           <ion-icon name="pin" color="primary"></ion-icon>
           <ion-label>Default</ion-label>
-          <ion-chip-button clear color="light" onclick="del('chip4')">
+          <ion-chip-button clear color="light" onclick="del('chip5')">
             <ion-icon name="close-circle"></ion-icon>
           </ion-chip-button>
         </ion-chip>