feat(card): add additional mod properties

Additional --mod custom properties were needed to customize the
invididual paddings and margins for the card body. Also added for the
card footer.

Two custom properties have been renamed and marked as deprecated, with
a fallback to the old mod name for the time being.

Author: jawinn

components/card/index.css

@@ -18,7 +18,7 @@ governing permissions and limitations under the License.
 	--spectrum-card-title-padding-right: var(--spectrum-spacing-400);
 	--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
 	--spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
-	--spectrum-card-footer-margin-top: var(--spectrum-spacing-100);
+	--spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
 	--spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
 
 	--spectrum-card-border-width: var(--spectrum-border-width-100);
@@ -367,9 +367,9 @@ governing permissions and limitations under the License.
 	);
 	box-sizing: border-box;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	border-start-start-radius: calc(
 		var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
@@ -408,21 +408,35 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Card-body {
+	/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
+	   and will be removed in a future version. */
 	padding-block-start: var(
-		--mod-card-title-padding-top,
-		var(--spectrum-card-title-padding-top)
+		--mod-card-body-padding-block-start, 
+		var(
+			--mod-card-title-padding-top,
+			var(--spectrum-card-title-padding-top)
+		)
 	);
-	padding-inline-end: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-inline-end: var(
+		--mod-card-body-padding-inline-end,
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
 	);
-	padding-inline-start: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-inline-start: var(
+		--mod-card-body-padding-inline-start, 
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
 	);
-	padding-block-end: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-block-end: var(
+		--mod-card-body-padding-block-end,
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
 	);
 }
 
@@ -526,25 +540,47 @@ governing permissions and limitations under the License.
 
 .spectrum-Card-footer {
 	/* Accommodate for wanting less spacing between body and footer */
-	margin-block-start: calc(
-		-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
-					var(
-						--mod-card-content-margin-bottom,
-						var(--spectrum-card-content-margin-bottom)
-					))
+	margin-block-start: var(
+		--mod-card-footer-margin-block-start,
+		calc(
+			-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+						var(
+							--mod-card-content-margin-bottom,
+							var(--spectrum-card-content-margin-bottom)
+						))
+		)
 	);
 	margin-inline-start: var(
-		--mod-card-body-spacing,
-		var(--spectrum-card-body-spacing)
+		--mod-card-footer-margin-inline-start,
+		var(
+			--mod-card-body-spacing,
+			var(--spectrum-card-body-spacing)
+		)
 	);
 	margin-inline-end: var(
-		--mod-card-body-spacing,
-		var(--spectrum-card-body-spacing)
+		--mod-card-footer-margin-inline-end,
+		var(
+			--mod-card-body-spacing,
+			var(--spectrum-card-body-spacing)
+		)
 	);
-	padding-block-end: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-block-end: var(
+		--mod-card-footer-padding-block-end,
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
+	);
+	/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
+	   and will be removed in a future version. */
+	padding-block-start: var(
+		--mod-card-footer-padding-block-start,
+		var(
+			--mod-card-footer-margin-top,
+			var(--spectrum-card-footer-padding-top)
+		)
 	);
+
 	color: var(
 		--highcontrast-card-body-font-color,
 		var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
@@ -553,16 +589,11 @@ governing permissions and limitations under the License.
 		--mod-card-body-line-height,
 		var(--spectrum-card-body-line-height)
 	);
-
 	border-block-start: var(
 			--mod-card-border-width,
 			var(--spectrum-card-border-width)
 		)
 		solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
-	padding-block-start: var(
-		--mod-card-footer-margin-top,
-		var(--spectrum-card-footer-margin-top)
-	);
 }
 
 .spectrum-Card-header {
@@ -669,7 +700,7 @@ governing permissions and limitations under the License.
 		}
 
 		/* Use ::after to show the selection outline so that the border doesn't
-     * affect the layout of the content within the preview. */
+		   affect the layout of the content within the preview. */
 		&::after {
 			content: "";
 			block-size: 100%;

components/card/metadata/mods.md

@@ -18,6 +18,10 @@
 | `--mod-card-body-font-style`                  |
 | `--mod-card-body-font-weight`                 |
 | `--mod-card-body-line-height`                 |
+| `--mod-card-body-padding-block-end`           |
+| `--mod-card-body-padding-block-start`         |
+| `--mod-card-body-padding-inline-end`          |
+| `--mod-card-body-padding-inline-start`        |
 | `--mod-card-body-spacing`                     |
 | `--mod-card-border-color`                     |
 | `--mod-card-border-color-hover`               |
@@ -29,7 +33,12 @@
 | `--mod-card-divider-color`                    |
 | `--mod-card-focus-indicator-color`            |
 | `--mod-card-focus-indicator-width`            |
+| `--mod-card-footer-margin-block-start`        |
+| `--mod-card-footer-margin-inline-end`         |
+| `--mod-card-footer-margin-inline-start`       |
 | `--mod-card-footer-margin-top`                |
+| `--mod-card-footer-padding-block-end`         |
+| `--mod-card-footer-padding-block-start`       |
 | `--mod-card-horizontal-body-padding`          |
 | `--mod-card-horizontal-preview-padding`       |
 | `--mod-card-minimum-width`                    |