refactor(card): convert card to shadow (#19395)

references #18899

core/src/components/card-header/card-header.scss

@@ -4,6 +4,9 @@
 // --------------------------------------------------
 
 :host {
+  --background: transparent;
+  --color: inherit;
+
   display: block;
   position: relative;
 
@@ -15,8 +18,3 @@
   background: current-color(base);
   color: current-color(contrast);
 }
-
-:host(.ion-color) ::slotted(ion-card-title),
-:host(.ion-color) ::slotted(ion-card-subtitle) {
-  color: currentColor;
-}

core/src/components/card-header/card-header.tsx

@@ -37,6 +37,7 @@ export class CardHeader implements ComponentInterface {
         class={{
           ...createColorClasses(this.color),
           'card-header-translucent': this.translucent,
+          'ion-inherit-color': true,
           [mode]: true
         }}
       >

core/src/components/card-header/test/basic/index.html

@@ -46,7 +46,17 @@
           <ion-card-title>Card Title</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-          This is Card Content
+          Custom background, color=secondary on ion-card-header
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card color="danger">
+        <ion-card-header>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          <ion-card-title>Card Title</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          color=danger on ion-card-header
         </ion-card-content>
       </ion-card>
 
@@ -67,6 +77,10 @@
       --color: hotpink;
     }
 
+    body {
+      --ion-item-background: #1a1b1e;
+    }
+
   </style>
 </body>