fix(chip): add and document custom properties

references #14850
references #14853
references #14808

core/src/components.d.ts

@@ -466,7 +466,7 @@ declare global {
        */
       'disabled': boolean;
       /**
-       * Set to `"clear"` for a transparent button style.
+       * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`.
        */
       'fill': 'clear' | 'solid';
       /**
@@ -484,6 +484,10 @@ declare global {
        * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
        */
       'color': Color;
+      /**
+       * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`.
+       */
+      'fill': 'clear' | 'solid';
       /**
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
@@ -3977,7 +3981,7 @@ declare global {
        */
       'disabled'?: boolean;
       /**
-       * Set to `"clear"` for a transparent button style.
+       * Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`.
        */
       'fill'?: 'clear' | 'solid';
       /**
@@ -3995,6 +3999,10 @@ declare global {
        * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
        */
       'color'?: Color;
+      /**
+       * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`.
+       */
+      'fill'?: 'clear' | 'solid';
       /**
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */

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

@@ -4,38 +4,67 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
-  --size: #{$chip-button-size};
-}
+  /**
+   * @prop --background: Background of the Chip Button
+   * @prop --color: Color of the Chip Button
+   * @prop --border-radius: Border radius of the Chip Button
+   * @prop --margin-top: Margin top of the Chip Button
+   * @prop --margin-end: Margin end of the Chip Button
+   * @prop --margin-bottom: Margin bottom of the Chip Button
+   * @prop --margin-start: Margin start of the Chip Button
+   * @prop --width: Width of the Chip Button
+   * @prop --height: Height of the Chip Button
+   */
+  --border-radius: #{$chip-button-border-radius};
+  --margin-top: #{$chip-button-margin-top};
+  --margin-end: #{$chip-button-margin-end};
+  --margin-bottom: #{$chip-button-margin-bottom};
+  --margin-start: #{$chip-button-margin-start};
+  --width: #{$chip-button-width};
+  --height: #{$chip-button-height};
 
-:host(.chip-button-clear) {
-  --background: #{current-color(base)};
+  width: var(--width);
+  height: var(--height);
 
-  color: #{current-color(contrast)}
+  font-size: #{$chip-button-font-size};
 }
 
 :host(.chip-button-clear) {
   --background: transparent;
+  --color: #{$chip-button-clear-color};
+}
 
-  color: #{current-color(base)};
+:host(.chip-button-solid) {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+}
+
+:host(.chip-button-solid.ion-color) .chip-button-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+:host(.chip-button-clear.ion-color) .chip-button-native {
+  background: transparent;
+  color: current-color(base);
 }
 
 .chip-button-native {
   @include text-inherit();
-  @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);
+  @include border-radius(var(--border-radius));
+  @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
 
   position: relative;
 
-  width: var(--size);
-  height: var(--size);
+  width: var(--width);
+  height: var(--height);
 
   border: 0;
 
   outline: none;
 
   background: var(--background);
+  color: var(--color);
   appearance: none;
 }
 

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

@@ -30,9 +30,10 @@ export class ChipButton {
   @Prop() disabled = false;
 
   /**
-   * Set to `"clear"` for a transparent button style.
+   * Set to `"clear"` for a transparent button or to `"solid"` for a filled background.
+   * Defaults to `"clear"`.
    */
-  @Prop() fill: 'clear' | 'solid' = 'solid';
+  @Prop() fill: 'clear' | 'solid' = 'clear';
 
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.

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

@@ -3,20 +3,29 @@
 // Chip Button
 // --------------------------------------------------
 
-/// @prop - Border radius of the button in the chip
+/// @prop - Border radius of the chip button
 $chip-button-border-radius:     50% !default;
 
-/// @prop - Margin top of the button in the chip
+/// @prop - Margin top of the chip button
 $chip-button-margin-top:        0 !default;
 
-/// @prop - Margin end of the button in the chip
+/// @prop - Margin end of the chip button
 $chip-button-margin-end:        $chip-button-margin-top !default;
 
-/// @prop - Margin bottom of the button in the chip
+/// @prop - Margin bottom of the chip button
 $chip-button-margin-bottom:     $chip-button-margin-top !default;
 
-/// @prop - Margin start of the button in the chip
+/// @prop - Margin start of the chip button
 $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 - Font size of the chip button
+$chip-button-font-size:         32px !default;
+
+/// @prop - Width of the chip button
+$chip-button-width:             32px !default;
+
+/// @prop - Width of the chip button
+$chip-button-height:            100% !default;
+
+/// @prop - Color of the text in the clear chip button
+$chip-button-clear-color:       $text-color-step-400 !default;

core/src/components/chip-button/readme.md

@@ -11,11 +11,26 @@ A ChipButton is an inset button that is placed inside of a Chip. For more inform
 | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
 | `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`             |
 | `disabled` | `disabled` | If true, the user cannot interact with the chip button. Defaults to `false`.                                                                                                                                                                                           | `boolean`           |
-| `fill`     | `fill`     | Set to `"clear"` for a transparent button style.                                                                                                                                                                                                                       | `'clear' | 'solid'` |
+| `fill`     | `fill`     | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. Defaults to `"clear"`.                                                                                                                                                              | `'clear' | 'solid'` |
 | `href`     | `href`     | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string`            |
 | `mode`     | `mode`     | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`              |
 
 
+## CSS Custom Properties
+
+| Name              | Description                      |
+| ----------------- | -------------------------------- |
+| `--background`    | Background of the Chip Button    |
+| `--border-radius` | Border radius of the Chip Button |
+| `--color`         | Color of the Chip Button         |
+| `--height`        | Height of the Chip Button        |
+| `--margin-bottom` | Margin bottom of the Chip Button |
+| `--margin-end`    | Margin end of the Chip Button    |
+| `--margin-start`  | Margin start of the Chip Button  |
+| `--margin-top`    | Margin top of the Chip Button    |
+| `--width`         | Width of the Chip Button         |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/chip-button/usage/angular.md

@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-label>Button Chip</ion-label>
-  <ion-chip-button fill="clear" color="light">
+  <ion-chip-button fill="solid" color="light">
     <ion-icon name="close-circle"></ion-icon>
   </ion-chip-button>
 </ion-chip>
@@ -19,7 +19,7 @@
     <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
-  <ion-chip-button fill="clear" color="dark">
+  <ion-chip-button color="dark">
     <ion-icon name="close-circle"></ion-icon>
   </ion-chip-button>
 </ion-chip>

core/src/components/chip-button/usage/javascript.md

@@ -1,7 +1,7 @@
 ```html
 <ion-chip>
   <ion-label>Button Chip</ion-label>
-  <ion-chip-button fill="clear" color="light">
+  <ion-chip-button fill="solid" color="light">
     <ion-icon name="close-circle"></ion-icon>
   </ion-chip-button>
 </ion-chip>
@@ -19,7 +19,7 @@
     <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
   </ion-avatar>
   <ion-label>Avatar Chip</ion-label>
-  <ion-chip-button fill="clear" color="dark">
+  <ion-chip-button color="dark">
     <ion-icon name="close-circle"></ion-icon>
   </ion-chip-button>
 </ion-chip>

core/src/components/chip-icon/chip-icon.scss

@@ -1,6 +1,10 @@
-@import "../../themes/ionic.globals";
+@import "./chip-icon.vars";
 
 :host {
+  /**
+   * @prop --background: Background of the Chip Icon
+   * @prop --color: Color of the Chip Icon
+   */
   @include border-radius(50%);
 
   display: inline-flex;
@@ -8,17 +12,31 @@
   align-items: center;
   justify-content: center;
 
-  width: var(--size, 32px);
-  height: var(--size, 32px);
+  width: var(--width, 32px);
+  height: var(--height, 32px);
 
-
-  background: #{ion-color(primary, base)};
-  color: #{ion-color(primary, contrast)};
+  background: var(--background);
+  color: var(--color);
 
   font-size: 18px;
 }
 
-:host(.ion-color) {
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+:host(.chip-icon-clear) {
+  --background: transparent;
+  --color: #{$chip-icon-clear-color};
 }
+
+:host(.chip-icon-solid) {
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
+}
+
+:host(.chip-icon-solid.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+:host(.chip-icon-clear.ion-color) {
+  background: transparent;
+  color: current-color(base);
+}

core/src/components/chip-icon/chip-icon.tsx

@@ -22,6 +22,12 @@ export class ChipIcon {
    */
   @Prop() mode!: Mode;
 
+  /**
+   * Set to `"clear"` for a transparent icon or to `"solid"` for a filled background.
+   * Defaults to `"clear"`.
+   */
+  @Prop() fill: 'clear' | 'solid' = 'clear';
+
   /**
    * The icon to use.
    * Possible values are the same as `"ion-icon"`.
@@ -37,12 +43,13 @@ export class ChipIcon {
   hostData() {
     return {
       class: {
-        ...createColorClasses(this.color)
+        ...createColorClasses(this.color),
+        [`chip-icon-${this.fill}`]: true
       }
     };
   }
 
   render() {
-    return <ion-icon name={this.name} src={this.src} mode={this.mode}/>;
+    return <ion-icon name={this.name} src={this.src} mode={this.mode}></ion-icon>;
   }
 }

core/src/components/chip-icon/chip-icon.vars.scss

@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals";
+
+// Chip Button
+// --------------------------------------------------
+
+/// @prop - Color of the text in the clear chip icon
+$chip-icon-clear-color:       $text-color-step-400 !default;

core/src/components/chip-icon/readme.md

@@ -7,12 +7,21 @@
 
 ## Properties
 
-| Property | Attribute | Description                                                                                                                                                                                                                                                            | Type     |
-| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| `color`  | `color`   | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`  |
-| `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`   |
-| `name`   | `name`    | The icon to use. Possible values are the same as `"ion-icon"`.                                                                                                                                                                                                         | `string` |
-| `src`    | `src`     | The icon src to use. Possible values are the same as `"ion-icon"`.                                                                                                                                                                                                     | `string` |
+| Property | Attribute | Description                                                                                                                                                                                                                                                            | Type                |
+| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `color`  | `color`   | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`             |
+| `fill`   | `fill`    | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. Defaults to `"clear"`.                                                                                                                                                                | `'clear' | 'solid'` |
+| `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`              |
+| `name`   | `name`    | The icon to use. Possible values are the same as `"ion-icon"`.                                                                                                                                                                                                         | `string`            |
+| `src`    | `src`     | The icon src to use. Possible values are the same as `"ion-icon"`.                                                                                                                                                                                                     | `string`            |
+
+
+## CSS Custom Properties
+
+| Name           | Description                 |
+| -------------- | --------------------------- |
+| `--background` | Background of the Chip Icon |
+| `--color`      | Color of the Chip Icon      |
 
 
 ----------------------------------------------

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

@@ -5,8 +5,22 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$chip-ios-background-color};
-  --ion-color-contrast: #{$chip-ios-text-color};
+  --background: #{$chip-ios-background-color};
+  --color: #{$chip-ios-text-color};
+
+  // Chip label
+  --label-margin-top: #{$chip-ios-label-margin-top};
+  --label-margin-end: #{$chip-ios-label-margin-end};
+  --label-margin-bottom: #{$chip-ios-label-margin-bottom};
+  --label-margin-start: #{$chip-ios-label-margin-start};
+
+  // Chip avatar
+  --avatar-width: #{$chip-ios-avatar-width};
+  --avatar-height: #{$chip-ios-avatar-height};
+  --avatar-margin-top: #{$chip-ios-avatar-margin-top};
+  --avatar-margin-end: #{$chip-ios-avatar-margin-end};
+  --avatar-margin-bottom: #{$chip-ios-avatar-margin-bottom};
+  --avatar-margin-start: #{$chip-ios-avatar-margin-start};
 
   @include border-radius($chip-ios-border-radius);
   @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start);
@@ -16,17 +30,3 @@
   font-family: $chip-ios-font-family;
   font-size: $chip-ios-font-size;
 }
-
-::slotted(*) ion-label {
-  @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start);
-}
-
-::slotted(ion-icon) {
-  background-color: $chip-ios-icon-background-color;
-  color: $chip-ios-icon-fill-color;
-}
-
-::slotted(*) ion-avatar {
-  width: $chip-ios-avatar-width;
-  height: $chip-ios-avatar-height;
-}

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

@@ -48,14 +48,20 @@ $chip-ios-label-margin-bottom:              $chip-ios-label-margin-top !default;
 /// @prop - Margin start of the label in the chip
 $chip-ios-label-margin-start:               $chip-ios-label-margin-end !default;
 
-/// @prop - Background color of the icon in the chip
-$chip-ios-icon-background-color:            ion-color(primary, base) !default;
-
-/// @prop - Fill color of the icon in the chip
-$chip-ios-icon-fill-color:                  ion-color(primary, contrast) !default;
-
 /// @prop - Width of the avatar in the chip
-$chip-ios-avatar-width:                     32px !default;
+$chip-ios-avatar-width:                     24px !default;
 
 /// @prop - Height of the avatar in the chip
 $chip-ios-avatar-height:                    $chip-ios-avatar-width !default;
+
+/// @prop - Margin top of the avatar in the chip
+$chip-ios-avatar-margin-top:                0 !default;
+
+/// @prop - Margin end of the avatar in the chip
+$chip-ios-avatar-margin-end:                4px !default;
+
+/// @prop - Margin bottom of the avatar in the chip
+$chip-ios-avatar-margin-bottom:             $chip-ios-avatar-margin-top !default;
+
+/// @prop - Margin start of the avatar in the chip
+$chip-ios-avatar-margin-start:              $chip-ios-avatar-margin-end !default;

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

@@ -5,8 +5,22 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$chip-md-background-color};
-  --ion-color-contrast: #{$chip-md-text-color};
+  --background: #{$chip-md-background-color};
+  --color: #{$chip-md-text-color};
+
+  // Chip label
+  --label-margin-top: #{$chip-md-label-margin-top};
+  --label-margin-end: #{$chip-md-label-margin-end};
+  --label-margin-bottom: #{$chip-md-label-margin-bottom};
+  --label-margin-start: #{$chip-md-label-margin-start};
+
+  // Chip avatar
+  --avatar-width: #{$chip-md-avatar-width};
+  --avatar-height: #{$chip-md-avatar-height};
+  --avatar-margin-top: #{$chip-md-avatar-margin-top};
+  --avatar-margin-end: #{$chip-md-avatar-margin-end};
+  --avatar-margin-bottom: #{$chip-md-avatar-margin-bottom};
+  --avatar-margin-start: #{$chip-md-avatar-margin-start};
 
   @include border-radius($chip-md-border-radius);
   @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
@@ -16,17 +30,3 @@
   font-family: $chip-md-font-family;
   font-size: $chip-md-font-size;
 }
-
-::slotted(*) ion-label {
-  @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start);
-}
-
-::slotted(ion-icon) {
-  background-color: $chip-md-icon-background-color;
-  color: $chip-md-icon-fill-color;
-}
-
-::slotted(*) ion-avatar {
-  width: $chip-md-avatar-width;
-  height: $chip-md-avatar-height;
-}

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

@@ -48,14 +48,20 @@ $chip-md-label-margin-bottom:              $chip-md-label-margin-top !default;
 /// @prop - Margin start of the label in the chip
 $chip-md-label-margin-start:               $chip-md-label-margin-end !default;
 
-/// @prop - Background color of the icon in the chip
-$chip-md-icon-background-color:            ion-color(primary, base) !default;
-
-/// @prop - Fill color of the icon in the chip
-$chip-md-icon-fill-color:                  ion-color(primary, contrast) !default;
-
 /// @prop - Width of the avatar in the chip
-$chip-md-avatar-width:                     32px !default;
+$chip-md-avatar-width:                     24px !default;
 
 /// @prop - Height of the avatar in the chip
 $chip-md-avatar-height:                    $chip-md-avatar-width !default;
+
+/// @prop - Margin top of the avatar in the chip
+$chip-md-avatar-margin-top:                0 !default;
+
+/// @prop - Margin end of the avatar in the chip
+$chip-md-avatar-margin-end:                4px !default;
+
+/// @prop - Margin bottom of the avatar in the chip
+$chip-md-avatar-margin-bottom:             $chip-md-avatar-margin-top !default;
+
+/// @prop - Margin start of the avatar in the chip
+$chip-md-avatar-margin-start:              $chip-md-avatar-margin-end !default;

core/src/components/chip/chip.scss

@@ -4,8 +4,22 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
+  /**
+   * @prop --background: Background of the chip
+   * @prop --color: Color of the chip
+   *
+   * @prop --label-margin-top: Margin top of the chip label
+   * @prop --label-margin-end: Margin end of the chip label
+   * @prop --label-margin-bottom: Margin bottom of the chip label
+   * @prop --label-margin-start: Margin start of the chip label
+   *
+   * @prop --avatar-width: Width of the chip avatar
+   * @prop --avatar-height: Height of the chip avatar
+   * @prop --avatar-margin-top: Margin top of the chip avatar
+   * @prop --avatar-margin-end: Margin end of the chip avatar
+   * @prop --avatar-margin-bottom: Margin bottom of the chip avatar
+   * @prop --avatar-margin-start: Margin start of the chip avatar
+   */
 
   @include font-smoothing();
 
@@ -14,11 +28,32 @@
   align-items: center;
   align-self: center;
 
-  background-color: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+  background: var(--background);
+  color: var(--color);
 
   font-weight: normal;
 
   vertical-align: middle;
   box-sizing: border-box;
 }
+
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+:host(.ion-color)::slotted(*) ion-chip-icon,
+:host(.ion-color)::slotted(*) ion-chip-button {
+  --color: currentColor;
+}
+
+::slotted(*) ion-label {
+  @include margin(var(--label-margin-top), var(--label-margin-end), var(--label-margin-bottom), var(--label-margin-start));
+}
+
+::slotted(*) ion-avatar {
+  @include margin(var(--avatar-margin-top), var(--avatar-margin-end), var(--avatar-margin-bottom), var(--avatar-margin-start));
+
+  width: var(--avatar-width);
+  height: var(--avatar-height);
+}

core/src/components/chip/chip.vars.scss

@@ -2,12 +2,3 @@
 
 // Chip
 // --------------------------------------------------
-
-/// @prop - Border radius of the icon in the chip
-$chip-icon-border-radius:       50% !default;
-
-/// @prop - Size of the icon in the chip
-$chip-icon-size:                18px !default;
-
-/// @prop - Padding of the icon in the chip
-$chip-icon-padding:             7px !default;

core/src/components/chip/readme.md

@@ -13,6 +13,24 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 | `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`  |
 
 
+## CSS Custom Properties
+
+| Name                     | Description                      |
+| ------------------------ | -------------------------------- |
+| `--avatar-height`        | Height of the chip avatar        |
+| `--avatar-margin-bottom` | Margin bottom of the chip avatar |
+| `--avatar-margin-end`    | Margin end of the chip avatar    |
+| `--avatar-margin-start`  | Margin start of the chip avatar  |
+| `--avatar-margin-top`    | Margin top of the chip avatar    |
+| `--avatar-width`         | Width of the chip avatar         |
+| `--background`           | Background of the chip           |
+| `--color`                | Color of the chip                |
+| `--label-margin-bottom`  | Margin bottom of the chip label  |
+| `--label-margin-end`     | Margin end of the chip label     |
+| `--label-margin-start`   | Margin start of the chip label   |
+| `--label-margin-top`     | Margin top of the chip label     |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -36,7 +36,7 @@
       <h2>Color Chips</h2>
 
       <ion-chip color="primary">
-        <ion-chip-icon name="heart" color="dark"></ion-chip-icon>
+        <ion-chip-icon name="heart"></ion-chip-icon>
         <ion-label>Primary</ion-label>
       </ion-chip>
 
@@ -60,11 +60,21 @@
         <ion-chip-icon name="pin" color="secondary"></ion-chip-icon>
       </ion-chip>
 
+      <ion-chip>
+        <ion-chip-icon fill="solid" name="pin"></ion-chip-icon>
+        <ion-label>Solid Default</ion-label>
+      </ion-chip>
+
+      <ion-chip>
+        <ion-label>Solid Danger</ion-label>
+        <ion-chip-icon fill="solid" name="pin" color="danger"></ion-chip-icon>
+      </ion-chip>
+
       <h2>Avatar Chips</h2>
 
       <ion-chip>
         <ion-avatar>
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?f=y&d=identicon">
         </ion-avatar>
         <ion-label>Default</ion-label>
       </ion-chip>
@@ -72,7 +82,7 @@
       <ion-chip>
         <ion-label>Right Avatar</ion-label>
         <ion-avatar>
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?f=y&d=identicon">
         </ion-avatar>
       </ion-chip>
 
@@ -95,7 +105,7 @@
 
       <ion-chip id="chip3">
         <ion-avatar>
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?f=y&d=identicon">
         </ion-avatar>
         <ion-label>With Avatar</ion-label>
         <ion-chip-button fill="clear" color="dark" onclick="del('chip3')">

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

@@ -30,6 +30,7 @@
   </ion-chip>
 
   <ion-chip color="secondary">
+    <ion-chip-icon name="heart"></ion-chip-icon>
     <ion-label color="dark">Secondary w/ Dark label</ion-label>
   </ion-chip>
 
@@ -37,6 +38,36 @@
     <ion-label>Danger</ion-label>
   </ion-chip>
 
+  <h2>Custom Chips</h2>
+
+  <ion-chip class="custom-color">
+    <ion-chip-icon name="heart"></ion-chip-icon>
+    <ion-label>Custom Color</ion-label>
+  </ion-chip>
+
+  <ion-chip class="custom-avatar">
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>Custom Avatar</ion-label>
+  </ion-chip>
+
+  <ion-chip class="custom-height custom-avatar">
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>Custom Height</ion-label>
+    <ion-chip-icon name="pin" class="custom-icon"></ion-chip-icon>
+  </ion-chip>
+
+  <ion-chip class="custom-height custom-avatar custom-color">
+    <ion-chip-icon class="custom-icon" name="pin"></ion-chip-icon>
+    <ion-label>Custom Everything</ion-label>
+    <ion-chip-button fill="solid" class="custom-button">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-chip-button>
+  </ion-chip>
+
   <h2>Icon Chips</h2>
 
   <ion-chip>
@@ -117,6 +148,32 @@
       padding: 16px;
       text-align: center;
     }
+
+    .custom-color {
+      --background: yellow;
+      --color: orange;
+    }
+
+    .custom-avatar {
+      --avatar-width: 41px;
+      --avatar-height: 41px;
+    }
+
+    .custom-height {
+      margin-top: 10px;
+      height: 50px;
+      border-radius: 25px;
+    }
+
+    .custom-height ion-chip-button {
+      --width: 50px;
+    }
+
+    .custom-icon {
+      width: 50px;
+      height: 50px;
+      font-size: 30px;
+    }
   </style>
 
   <script>

core/src/components/segment-button/readme.md

@@ -33,7 +33,7 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
 | `--border-radius`  | Radius of the button border  |
 | `--border-style`   | Style of the button border   |
 | `--border-width`   | Width of the button border   |
-| `--color`          | Color of the buton text      |
+| `--color`          | Color of the button text     |
 | `--icon-size`      | Size of the button icon      |
 | `--margin-bottom`  | Bottom margin of the button  |
 | `--margin-end`     | End margin of the button     |