[OP-230] Update card to not use contain paint (#281)

This PR updates the card component to no longer use `contain: paint`. This should reduce the amount of overriding to allow for things like tooltips.

Author: Jeremy-Walton

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "packageManager": "[email protected]",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",

src/components/card.css

@@ -2,13 +2,13 @@
   /* Public API (customizable component options) */
   --_op-card-padding: var(--op-space-medium);
   --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
+  --_op-card-radius: var(--op-radius-medium);
 
   position: relative;
-  border-radius: var(--op-radius-medium);
+  border-radius: var(--_op-card-radius);
   background-color: var(--op-color-background);
   box-shadow: var(--_op-card-box-shadow);
   color: var(--op-color-on-background);
-  contain: paint;
   font-size: var(--op-font-medium);
   line-height: var(--op-line-height-base);
 
@@ -50,6 +50,9 @@
   }
 
   .card__header {
+    border-top-left-radius: var(--_op-card-radius);
+    border-top-right-radius: var(--_op-card-radius);
+
     h1,
     h2,
     h3,
@@ -59,4 +62,9 @@
       margin: 0;
     }
   }
+
+  .card__footer {
+    border-bottom-left-radius: var(--_op-card-radius);
+    border-bottom-right-radius: var(--_op-card-radius);
+  }
 }

src/stories/Components/Card/Card.mdx

@@ -67,6 +67,16 @@ Card can be used as a standalone component, however, it does have a few dependen
 
 <Canvas of={CardStories.Shadow} />
 
+## Card API
+
+Padding, Box Shadow (border), and Radius styles are built on css variables scoped to the card. They can ben overridden to customize the card.
+
+```css
+--_op-card-padding
+--_op-card-box-shadow
+--_op-card-radius
+```
+
 ## Customizing Card styles
 
 <div
@@ -117,7 +127,8 @@ Your application may need a variation. To add one, just follow this template. No
 
 ```css
 .card--purple {
-  border-radius: var(--op-radius-large);
+  --_op-card-radius: var(--op-radius-large);
+
   font-size: var(--op-font-2x-large);
 
   .card__header {