feat(card): set round as the default shape for all themes

[brandyscarney]

Issue number: internal

---

What is the current behavior?

The shape property defaults to undefined which evaluates to the "Soft" shape for all themes.

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
undefined	4px	8px	4px
"round"	16px	unsupported	unsupported
"rectangular"	0px	unsupported	unsupported

What is the new behavior?

Property Value	CSS Value (ionic)	CSS Value (ios)	CSS Value (md)
"soft"	4px	8px	4px
"round"	16px	14px	12px
"rectangular"	0px	0px	0px

• Adds support for the "soft" shape using the existing values for undefined
• Sets the default shape property to "round" for all themes and updates the border-radius to apply to the shape classes instead of :host
• Adds support for the "round" and "rectangular" shapes in ios and md
• Updates the ios theme to use 14px for "round" as this is taken from the card in the iOS App Store
• Updates the md theme to use 12px for "round" as this is taken from the Material Design 3 guidelines

Does this introduce a breaking change?

• [x] Yes
• [ ] No

BREAKING CHANGE:

The border-radius of the ios and md card now defaults to 14px and 12px instead of 8px and 4px, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "soft", or override the --border-radius CSS variable to specify a different value.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2024 3:59pm