From 06cb1382200fe3c31ce2f80732b51709cd41ed48 Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Mon, 24 Sep 2018 13:03:38 -0500
Subject: [PATCH] fix(item-divider): add and document custom properties

references #14850
references #14808
---
 .../item-divider/item-divider.ios.scss          |  4 ++--
 .../item-divider/item-divider.md.scss           |  4 ++--
 .../components/item-divider/item-divider.scss   | 17 +++++++++++++++--
 core/src/components/item-divider/readme.md      | 12 ++++++++++++
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss
index 2d5f2f7aaf3..a9cf735df36 100644
--- a/core/src/components/item-divider/item-divider.ios.scss
+++ b/core/src/components/item-divider/item-divider.ios.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$item-ios-divider-background};
-  --ion-color-contrast: #{$item-ios-divider-color};
+  --background: #{$item-ios-divider-background};
+  --color: #{$item-ios-divider-color};
   --padding-start: #{$item-ios-divider-padding-start};
 
   @include border-radius(0);
diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss
index 715b3d27176..dae1e44394a 100644
--- a/core/src/components/item-divider/item-divider.md.scss
+++ b/core/src/components/item-divider/item-divider.md.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$item-md-divider-background};
-  --ion-color-contrast: #{$item-md-divider-color};
+  --background: #{$item-md-divider-background};
+  --color: #{$item-md-divider-color};
   --padding-start: #{$item-md-divider-padding-start};
 
   border-bottom: $item-md-divider-border-bottom;
diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
index 2fa36bf4908..a951798e61a 100644
--- a/core/src/components/item-divider/item-divider.scss
+++ b/core/src/components/item-divider/item-divider.scss
@@ -5,6 +5,14 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the item divider
+   * @prop --color: Color of the item divider
+   * @prop --padding-start: Start padding of the item divider
+   * @prop --padding-end: End padding of the item divider
+   * @prop --padding-top: Top padding of the item divider
+   * @prop --padding-bottom: Bottom padding of the item divider
+   */
   --padding-start: 0px;
   --padding-end: 0px;
   --padding-top: 0px;
@@ -27,8 +35,8 @@
   width: 100%;
   min-height: $item-divider-min-height;
 
-  background-color: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
 
   font-family: $font-family-base;
 
@@ -37,6 +45,11 @@
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 :host([sticky]) {
   position: sticky;
   top: 0;
diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
index db82e905594..c6a1f11f684 100644
--- a/core/src/components/item-divider/readme.md
+++ b/core/src/components/item-divider/readme.md
@@ -13,6 +13,18 @@ Item Dividers are block elements that can be used to separate items in a list. T
 | `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 item divider     |
+| `--color`          | Color of the item divider          |
+| `--padding-bottom` | Bottom padding of the item divider |
+| `--padding-end`    | End padding of the item divider    |
+| `--padding-start`  | Start padding of the item divider  |
+| `--padding-top`    | Top padding of the item divider    |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*