feat(card): add ionic theme tokens, update design (#29757)

## What is the new behavior?
- Reviewed tokens used for `ion-card` on Ionic Theme.
- Removed border on ion-card.
- Changed default shape to round.
- Added ionic theme partials for `ion-title`, `ion-subtitle`, `ion-header` and `ion-content`.

## Other information
[Sample Screen](https://ionic-framework-hyyi9k1ti-ionic1.vercel.app/src/components/card/test/theme-ionic)

---------

Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
Co-authored-by: ionitron <hi@ionicframework.com>

core/api.txt

@@ -465,10 +465,13 @@ ion-card,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,t
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
+ion-card,css-prop,--background,ionic
 ion-card,css-prop,--background,ios
 ion-card,css-prop,--background,md
+ion-card,css-prop,--border-radius,ionic
 ion-card,css-prop,--border-radius,ios
 ion-card,css-prop,--border-radius,md
+ion-card,css-prop,--color,ionic
 ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native

core/src/components/card-content/card-content.common.scss

@@ -0,0 +1,6 @@
+// Card Content
+// --------------------------------------------------
+
+ion-card-content {
+  position: relative;
+}

core/src/components/card-content/card-content.ionic.scss

@@ -0,0 +1,27 @@
+@use "./card-content.common.scss";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Content
+// --------------------------------------------------
+
+.card-content-ionic {
+  @include globals.padding(globals.$ionic-space-400);
+
+  display: flex;
+
+  flex-direction: column;
+
+  font-size: globals.$ionic-font-size-350;
+
+  line-height: globals.$ionic-line-height-600;
+
+  gap: globals.$ionic-space-200;
+
+  img {
+    @include globals.margin(globals.$ionic-space-200, 0, globals.$ionic-space-200, 0);
+  }
+}
+
+ion-card-header + .card-content-ionic {
+  padding-top: 0;
+}

core/src/components/card-content/card-content.ios.scss

@@ -1,4 +1,4 @@
-@import "./card-content";
+@import "./card-content.native";
 @import "./card-content.ios.vars";
 
 // iOS Card Header

core/src/components/card-content/card-content.md.scss

@@ -1,4 +1,4 @@
-@import "./card-content";
+@import "./card-content.native";
 @import "./card-content.md.vars";
 
 // Material Design Card Content

core/src/components/card-content/card-content.native.scss

@@ -1,3 +1,4 @@
+@use "./card-content.common.scss";
 @import "../../themes/native/native.globals";
 
 // Card Content
@@ -5,5 +6,4 @@
 
 ion-card-content {
   display: block;
-  position: relative;
 }

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

@@ -12,7 +12,7 @@ import { getIonTheme } from '../../global/ionic-global';
   styleUrls: {
     ios: 'card-content.ios.scss',
     md: 'card-content.md.scss',
-    ionic: 'card-content.md.scss',
+    ionic: 'card-content.ionic.scss',
   },
 })
 export class CardContent implements ComponentInterface {

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

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@use "../../themes/functions.color" as color;
 
 // Card Header
 // --------------------------------------------------
@@ -17,6 +17,6 @@
 }
 
 :host(.ion-color) {
-  background: current-color(base);
-  color: current-color(contrast);
+  background: color.current-color(base);
+  color: color.current-color(contrast);
 }

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

@@ -0,0 +1,10 @@
+@use "./card-header.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Header
+// --------------------------------------------------
+
+:host {
+  @include globals.padding(globals.$ionic-space-400);
+  gap: globals.$ionic-space-050;
+}

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

@@ -1,4 +1,5 @@
-@import "./card-header";
+@import "./card-header.common";
+@import "../../themes/native/native.globals";
 @import "./card-header.ios.vars";
 
 // iOS Card Header

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

@@ -1,4 +1,5 @@
-@import "./card-header";
+@import "./card-header.common";
+@import "../../themes/native/native.globals";
 @import "./card-header.md.vars";
 
 // Material Design Card Header

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

@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'card-header.ios.scss',
     md: 'card-header.md.scss',
-    ionic: 'card-header.md.scss',
+    ionic: 'card-header.ionic.scss',
   },
   shadow: true,
 })

core/src/components/card-subtitle/card-subtitle.ionic.scss

@@ -0,0 +1,11 @@
+@use "./card-subtitle.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Subtitle
+// --------------------------------------------------
+
+:host {
+  --color: #{globals.$ionic-color-neutral-800};
+
+  @include globals.typography(globals.$ionic-body-lg-regular);
+}

core/src/components/card-subtitle/card-subtitle.ios.scss

@@ -1,4 +1,4 @@
-@import "./card-subtitle";
+@import "./card-subtitle.common";
 @import "./card-subtitle.ios.vars";
 
 // iOS Card Subtitle

core/src/components/card-subtitle/card-subtitle.md.scss

@@ -1,4 +1,4 @@
-@import "./card-subtitle";
+@import "./card-subtitle.common";
 @import "./card-subtitle.md.vars";
 
 // Material Design Card Subtitle

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

@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'card-subtitle.ios.scss',
     md: 'card-subtitle.md.scss',
-    ionic: 'card-subtitle.md.scss',
+    ionic: 'card-subtitle.ionic.scss',
   },
   shadow: true,
 })

core/src/components/card-title/card-title.ionic.scss

@@ -0,0 +1,11 @@
+@use "./card-title.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Title
+// --------------------------------------------------
+
+:host {
+  --color: #{globals.$ionic-color-neutral-1200};
+
+  @include globals.typography(globals.$ionic-heading-h5-medium);
+}

core/src/components/card-title/card-title.ios.scss

@@ -1,4 +1,5 @@
-@import "./card-title";
+@import "./card-title.common";
+@import "../../themes/native/native.globals";
 @import "./card-title.ios.vars";
 
 // iOS Card Title

core/src/components/card-title/card-title.md.scss

@@ -1,4 +1,5 @@
-@import "./card-title";
+@import "./card-title.common";
+@import "../../themes/native/native.globals";
 @import "./card-title.md.vars";
 
 // Material Design Card Title

core/src/components/card/card.common.scss

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
 // Card
 // --------------------------------------------------
@@ -21,8 +21,6 @@
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
-
   contain: content;
 
   overflow: hidden;
@@ -36,43 +34,6 @@
   color: current-color(contrast);
 }
 
-// Disabled Card
-// --------------------------------------------------
-
-:host(.card-disabled) {
-  cursor: default;
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-// Native
-// --------------------------------------------------
-
-.card-native {
-  @include text-inherit();
-  @include padding(0);
-  @include margin(0);
-
-  display: block;
-
-  width: 100%;
-  min-height: var(--min-height);
-
-  transition: var(--transition);
-
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-
-  outline: none;
-
-  background: inherit;
-}
-
-.card-native::-moz-focus-inner {
-  border: 0;
-}
-
 button,
 a {
   cursor: pointer;

core/src/components/card/card.ionic.scss

@@ -1,28 +1,24 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./card.common";
 
 // Ionic Card
 // --------------------------------------------------
 
 :host {
   --background: #{globals.$ionic-color-base-white};
-  --border-radius: #{globals.$ionic-border-radius-100};
-
-  @include globals.padding(globals.$ionic-space-400);
-  @include globals.border-radius(var(--border-radius));
+  --border-radius: #{globals.$ionic-border-radius-400};
+  --color: #{globals.$ionic-color-neutral-1200};
+}
 
+::slotted(img) {
   display: block;
-
-  border: #{globals.$ionic-border-size-025} solid #{globals.$ionic-color-neutral-500};
-
-  background: var(--background);
-  color: var(--color);
 }
 
 // Card Shapes
 // ---------------------------------------------
 
-:host(.card-round) {
-  --border-radius: #{globals.$ionic-border-radius-400};
+:host(.card-soft) {
+  --border-radius: #{globals.$ionic-border-radius-200};
 }
 
 :host(.card-rectangular) {

core/src/components/card/card.ios.scss

@@ -1,4 +1,4 @@
-@import "./card";
+@import "./card.native";
 @import "./card.ios.vars";
 
 // iOS Card

core/src/components/card/card.md.scss

@@ -1,4 +1,4 @@
-@import "./card";
+@import "./card.native";
 @import "./card.md.vars";
 
 // Material Design Card

core/src/components/card/card.native.scss

@@ -0,0 +1,46 @@
+@import "../../themes/native/native.globals";
+@import "./card.common";
+
+// Card
+// --------------------------------------------------
+
+:host {
+  font-family: $font-family-base;
+}
+
+// Disabled Card
+// --------------------------------------------------
+
+:host(.card-disabled) {
+  cursor: default;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+// Native
+// --------------------------------------------------
+
+.card-native {
+  @include text-inherit();
+  @include padding(0);
+  @include margin(0);
+
+  display: block;
+
+  width: 100%;
+  min-height: var(--min-height);
+
+  transition: var(--transition);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+
+  outline: none;
+
+  background: inherit;
+}
+
+.card-native::-moz-focus-inner {
+  border: 0;
+}

core/src/components/card/test/theme-ionic/index.html

@@ -1,6 +1,6 @@
 <!-- TODO: FW-6077 This file can be removed once the additional test cases are added -->
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en" dir="ltr" theme="ionic">
   <head>
     <meta charset="UTF-8" />
     <title>Card - Theme Ionic</title>
@@ -8,13 +8,16 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
+      ion-content {
+        --background: #dde2ef;
+      }
       .ion-margin-top {
         margin-top: 32px;
       }
@@ -29,13 +32,13 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
+      <ion-content class="ionic-padding-space-400" id="content" no-bounce>
         <h4>Preview options</h4>
 
         <p>
           <ion-select id="select-shape" justify="space-between" interface="alert" label="Shape" placeholder="">
-            <ion-select-option value="">default</ion-select-option>
-            <ion-select-option value="round">Round</ion-select-option>
+            <ion-select-option value="round">default (round)</ion-select-option>
+            <ion-select-option value="soft">soft</ion-select-option>
             <ion-select-option value="rectangular">Rectangular</ion-select-option>
           </ion-select>
         </p>
@@ -52,6 +55,34 @@
               in the woods. Wash your spirit clean.
             </ion-card-content>
           </ion-card>
+
+          <ion-card class="ion-margin-top">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            <ion-card-header>
+              <ion-card-title>Card Title</ion-card-title>
+              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            </ion-card-header>
+
+            <ion-card-content>
+              Here's a small text description for the card content. Nothing more, nothing less.
+            </ion-card-content>
+          </ion-card>
+
+          <ion-card class="ion-margin-top">
+            <ion-card-header>
+              <ion-card-title>Header</ion-card-title>
+              <ion-card-subtitle>Subtitle</ion-card-subtitle>
+            </ion-card-header>
+
+            <ion-card-content>
+              Lorem ipsum dolor sit amet consectetur. Lorem sem neque mauris ullamcorper enim. Massa tempus sem ligula
+              turpis consequat nam et semper imperdiet. Leo praesent ut feugiat cursus est. Lectus morbi aliquam lacus
+              tellus tempor morbi in pharetra.
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+              <ion-button fill="outline">Secondary</ion-button>
+              <ion-button>Primary</ion-button>
+            </ion-card-content>
+          </ion-card>
         </div>
       </ion-content>
     </ion-app>