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 <[email protected]>
Co-authored-by: ionitron <[email protected]>

Author: 3 people

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.scss renamed to core/src/components/card-content/card-content.native.scss

@@ -1,9 +1,9 @@
+@use "./card-content.common.scss";
 @import "../../themes/native/native.globals";
 
 // Card Content
 // --------------------------------------------------
 
 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.scss renamed to 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