fix(item): detail context based in text color

core/src/components/item/item.ios.scss

@@ -13,7 +13,6 @@
   --background-activated: #{$item-ios-background-color-active};
   --border-color: #{$item-ios-border-bottom-color};
   --color: #{$item-ios-text-color};
-  --detail-icon-color: #{$item-ios-border-bottom-color};
   --highlight-height: 0;
   --highlight-color-focused: #{$item-ios-input-highlight-color};
   --highlight-color-valid: #{$item-ios-input-highlight-color-valid};
@@ -125,16 +124,6 @@
   @include margin(($item-ios-padding-end / 2));
 }
 
-// iOS Item Detail Push
-// --------------------------------------------------
-
-.item-detail-icon {
-  color: var(--detail-icon-color);
-
-  font-size: 20px;
-}
-
-
 // TODO: MOVE FROM RADIO
 // iOS Radio Item Label: Checked
 // -----------------------------------------

core/src/components/item/item.md.scss

@@ -6,6 +6,10 @@
 // --------------------------------------------------
 
 :host {
+  --background: var(--ion-item-background-color, transparent);
+  --background-activated: #{$item-md-background-color-active};
+  --border-color: #{$item-md-border-bottom-color};
+  --color: #{$item-md-text-color};
   --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
   --padding-start: #{$item-md-padding-start};
   --background: var(--ion-item-background-color, transparent);
@@ -14,7 +18,6 @@
   --border-color: #{$item-md-border-bottom-color};
   --inner-padding-end: #{$item-md-padding-end / 2};
   --inner-border-width: #{0 0 $item-md-border-bottom-width 0};
-  --detail-icon-color: #{$item-md-border-bottom-color};
   --highlight-height: 2px;
   --highlight-color-focused: #{$item-md-input-highlight-color};
   --highlight-color-valid: #{$item-md-input-highlight-color-valid};
@@ -67,16 +70,6 @@
   --show-inset-highlight: 0;
 }
 
-// Material Design Item Detail Push
-// --------------------------------------------------
-
-.item-detail-icon {
-  color: var(--detail-icon-color);
-
-  font-size: 20px;
-}
-
-
 // Material Design Item Slots
 // --------------------------------------------------
 

core/src/components/item/item.scss

@@ -15,7 +15,8 @@
    * @prop --color: Color of the item
    *
    * @prop --detail-icon-color: Color of the item detail icon
-   *
+   * @prop --detail-icon-opacity: Opacity of the item detail icon
+   * @prop --detail-icon-font-size: Font size of the item detail icon
    * @prop --inner-border-width: Width of the item inner border
    * @prop --inner-box-shadow: Box shadow of the item inner
    * @prop --inner-padding-bottom: Bottom padding of the item inner
@@ -52,6 +53,9 @@
   --inner-box-shadow: none;
   --show-full-highlight: 0;
   --show-inset-highlight: 0;
+  --detail-icon-color: currentColor;
+  --detail-icon-font-size: 20px;
+  --detail-icon-opacity: 0.25;
 
   @include font-smoothing();
 
@@ -83,10 +87,6 @@
   border-color: current-color(shade);
 }
 
-:host(.ion-color) .item-detail-icon {
-  color: current-color(shade);
-}
-
 
 // Activated Item
 // --------------------------------------------------
@@ -188,6 +188,17 @@ button, a {
   box-sizing: border-box;
 }
 
+// Item Detail Icon
+// -----------------------------------------
+
+.item-detail-icon {
+  color: var(--detail-icon-color);
+
+  font-size: var(--detail-icon-font-size);
+
+  opacity: var(--detail-icon-opacity);
+}
+
 
 // Item Slots
 // -----------------------------------------

core/src/components/item/test/buttons/index.html

@@ -31,7 +31,7 @@
         <ion-label>a[ion-item] secondary</ion-label>
       </ion-item>
 
-      <ion-item button id="attachClick">
+      <ion-item button color="dark" id="attachClick">
         <ion-label>button[ion-item]</ion-label>
       </ion-item>
 

core/src/components/item/test/colors/index.html

@@ -30,7 +30,7 @@
           </ion-label>
         </ion-item>
 
-        <ion-item color="dark">
+        <ion-item button color="dark">
           <ion-label>
             <h1>Heading</h1>
             <p>Paragraph</p>
@@ -49,13 +49,13 @@
           </ion-label>
         </ion-item>
 
-        <ion-item onclick="testClick(event)" color="secondary">
+        <ion-item button onclick="testClick(event)" color="secondary">
           <ion-label>
             button[ion-item]
           </ion-label>
         </ion-item>
 
-        <ion-item onclick="testClick(event)" color="secondary" class="activated">
+        <ion-item button onclick="testClick(event)" color="secondary" class="activated">
           <ion-label>
             button[ion-item].activated secondary
           </ion-label>
@@ -70,7 +70,7 @@
           <ion-button slot="end" fill="outline">Outline</ion-button>
         </ion-item>
 
-        <ion-item onclick="testClick(event)" color="dark">
+        <ion-item button onclick="testClick(event)" color="dark">
           <ion-button slot="start">
             <ion-icon slot="start" name="home"></ion-icon>
             Left Icon
@@ -83,7 +83,7 @@
           </ion-label>
         </ion-item>
 
-        <ion-item onclick="testClick(event)" disabled color="dark">
+        <ion-item button onclick="testClick(event)" disabled color="dark">
           <ion-button slot="start">
             <ion-icon slot="start" name="home"></ion-icon>
             Left Icon