fix(item-option): add and document custom properties

references #14850
references #14808
closes #14943

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);
 }

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)};
+  background: var(--background);
-  color: #{current-color(contrast)};
+  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);

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/)*