fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

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

@@ -4,17 +4,6 @@
 // --------------------------------------------------
 
 :host {
-  --transition: background-color, opacity 100ms linear;
-  --ripple-color: currentColor;
-  --border-radius: #{$fab-border-radius};
-  --border-width: 0;
-  --border-style: none;
-  --border-color: initial;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-
   /**
    * @prop --background: Background of the button
    * @prop --background-activated: Background of the button when activated
@@ -40,6 +29,17 @@
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
+  --transition: background-color, opacity 100ms linear;
+  --ripple-color: currentColor;
+  --border-radius: #{$fab-border-radius};
+  --border-width: 0;
+  --border-style: none;
+  --border-color: initial;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  
   @include margin(0);
   display: block;
 

core/src/components/item/item.scss

@@ -57,7 +57,7 @@
   --detail-icon-color: initial;
   --detail-icon-font-size: 20px;
   --detail-icon-opacity: 0.25;
-  --ripple-color: currentColor;
+  --ripple-color: var(--ion-item-background-activated, currentColor);
 
   @include font-smoothing();
 

core/src/themes/test/css-variables/css/dark.css

@@ -24,4 +24,7 @@
   --ion-background-color-rgb: 23,23,23;
   --ion-background-color-rgb: 0,0,0;
   --ion-text-color-rgb: 255,255,255;
+
+  --ion-item-background: #1b2025;
+  --ion-item-background-activated: #051b35;
 }

core/src/themes/test/css-variables/css/vibrant.css

@@ -77,4 +77,5 @@
   --ion-background-color: #778899;
   --ion-item-background: #fff;
   --ion-item-border-color: #5bff76;
+  --ion-item-background-activated: #5bff76;
 }

core/src/themes/test/css-variables/index.html

@@ -141,11 +141,11 @@
                   <ion-label>Super Metroid</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
-                <ion-item>
+                <ion-item href="#">
                   <ion-label>Mega Man X</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>
-                <ion-item>
+                <ion-item href="#" class="activated">
                   <ion-label>The Legend of Zelda</ion-label>
                   <ion-note slot="end">Note</ion-note>
                 </ion-item>