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

references #18899

core/api.txt

@@ -174,7 +174,7 @@ ion-button,css-prop,--transition
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
 
-ion-card,scoped
+ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
 ion-card,prop,color,string | undefined,undefined,false,false
 ion-card,prop,disabled,boolean,false,false,false

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>
 

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

@@ -31,7 +31,8 @@ export class CardSubtitle implements ComponentInterface {
         aria-level="3"
         class={{
           ...createColorClasses(this.color),
-          [mode]: true,
+          'ion-inherit-color': true,
+          [mode]: true
         }}
       >
         <slot></slot>

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

@@ -31,6 +31,7 @@ export class CardTitle implements ComponentInterface {
         aria-level="2"
         class={{
           ...createColorClasses(this.color),
+          'ion-inherit-color': true,
           [mode]: true
         }}
       >

core/src/components/card/card.scss

@@ -24,6 +24,7 @@
   overflow: hidden;
 }
 
+
 // Card Colors
 // ---------------------------------------------
 
@@ -32,25 +33,6 @@
   color: current-color(contrast);
 }
 
-:host(.ion-color)::slotted(*) ion-card-header,
-:host(.ion-color)::slotted(*) ion-card-title,
-:host(.ion-color)::slotted(*) ion-card-subtitle {
-  color: current-color(contrast);
-}
-
-// Slotted Content
-// ---------------------------------------------
-
-::slotted(*) img {
-  display: block;
-
-  width: 100%;
-}
-
-::slotted(*) ion-list {
-  @include margin(0);
-}
-
 
 // Disabled Card
 // --------------------------------------------------

core/src/components/card/card.tsx

@@ -14,7 +14,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
     ios: 'card.ios.scss',
     md: 'card.md.scss'
   },
-  scoped: true
+  shadow: true
 })
 export class Card implements ComponentInterface, AnchorInterface, ButtonInterface {
 

core/src/components/list/list.ios.scss

@@ -79,3 +79,11 @@
   --border-width: 0;
   --inner-border-width: 0;
 }
+
+
+// iOS List Inside A Card
+// --------------------------------------------------
+
+ion-card .list-ios {
+  @include margin(0);
+}

core/src/components/list/list.md.scss

@@ -88,3 +88,11 @@
   --border-width: 0;
   --inner-border-width: 0;
 }
+
+
+// Material Design List Inside A Card
+// --------------------------------------------------
+
+ion-card .list-md {
+  @include margin(0);
+}

core/src/components/toolbar/test/basic/index.html

@@ -56,13 +56,13 @@
         </ion-card-content>
       </ion-card>
 
-      <ion-card color="primary" class="rainbow-content">
+      <ion-card class="rainbow-content">
         <ion-card-header>
-          Card Header
+          Custom CSS Card Header
         </ion-card-header>
         <ion-card-content>
           <ion-card-title>
-            Title
+            Custom CSS Title
           </ion-card-title>
           Some normal text in content.
           <h3>h3 in content</h3>
@@ -121,8 +121,12 @@
   <style>
     .rainbow-content {
       background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+      color: white;
+    }
+    .rainbow-content ion-card-header,
+    .rainbow-content ion-card-title {
+      color: white;
     }
-
   </style>
 
   <script>

core/src/css/core.scss

@@ -131,6 +131,16 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
   }
 }
 
+
+// Global Card Styles
+// --------------------------------------------------
+
+ion-card.ion-color .ion-inherit-color,
+ion-card-header.ion-color .ion-inherit-color {
+  color: inherit;
+}
+
+
 // Menu Styles
 // TODO: Find a better long term solution for this
 // --------------------------------------------------
@@ -167,4 +177,3 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
 .md .menu-content-push {
   box-shadow: $menu-md-box-shadow;
 }
-