From 2a040e0a1177882c3bf83ffcabbb42874c3e6656 Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Thu, 20 Sep 2018 15:32:17 -0500
Subject: [PATCH] fix(item-option): add and document custom properties

references #14850
references #14808
closes #14943
---
 .../components/item-option/item-option.ios.scss |  8 ++++++++
 .../src/components/item-option/item-option.scss | 17 +++++++++++++----
 core/src/components/item-option/readme.md       |  8 ++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss
index 10122ea7bc..071f8e1c24 100644
--- a/core/src/components/item-option/item-option.ios.scss
+++ b/core/src/components/item-option/item-option.ios.scss
@@ -8,6 +8,14 @@
   font-size: $item-option-button-ios-font-size;
 }
 
+:host(.activated) {
+  background: ion-color(primary, shade);
+}
+
+:host(.ion-color.activated) {
+  background: current-color(shade);
+}
+
 :host(.in-list.item-options-end:last-child) {
   @include safe-area-padding-horizontal(null, .7em);
 }
diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss
index 701d20b5db..4a7f6e3ec0 100644
--- a/core/src/components/item-option/item-option.scss
+++ b/core/src/components/item-option/item-option.scss
@@ -4,15 +4,24 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
+  /**
+   * @prop --background: Background of the item option
+   * @prop --color: Color of the item option
+   */
+  --background: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, contrast)};
 
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
 
   font-family: $font-family-base;
 }
 
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 .item-option-native {
   @include text-inherit();
   @include padding(0, .7em);
diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md
index 9b06642608..7852f6208a 100644
--- a/core/src/components/item-option/readme.md
+++ b/core/src/components/item-option/readme.md
@@ -18,6 +18,14 @@ action for the item.
 | `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 option |
+| `--color`      | Color of the item option      |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*