Merge branch 'main' into feat-deprecating-old-token-packages

Author: castastrophe

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`                    |