chore: s2 grays component-level migration (#2583)

* chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200
adobe · Apr 18, 2024 · 8a2437e · 8a2437e
1 parent 105e8c4
commit 8a2437e
Showing 1 changed file with 51 additions and 30 deletions.
diff --git a/components/card/index.css b/components/card/index.css
@@ -72,14 +72,22 @@ governing permissions and limitations under the License.
 	/* Selected */
 	--spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */
 
-	--spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
-	--spectrum-card-preview-background-color: var(--spectrum-background-base-color);
+	--spectrum-card-preview-border-width-selected: var(
+		--spectrum-border-width-100
+	);
+	--spectrum-card-preview-background-color: var(
+		--spectrum-background-base-color
+	);
 	--spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
 
 	/* Horizontal */
 	--spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
 	--spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
 
+	/* Horizontal */
+	--spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300);
+	--spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200);
+
 	/* TODO: These are placeholder until recursive RGB is available */
 	.spectrum--light &,
 	.spectrum--lightest & {
@@ -108,6 +116,19 @@ governing permissions and limitations under the License.
 	);
 }
 
+.spectrum-Card--quiet,
+.spectrum-Card--gallery,
+.spectrum-Card--horizontal {
+	--mod-card-preview-background-color: var(
+		--spectrum-card-preview-background-color-quiet,
+		var(--spectrum-background-base-color)
+	);
+	--spectrum-card-preview-background-color-hover: var(
+		--spectrum-card-background-color-hover-quiet,
+		var(--spectrum-gray-200)
+	);
+}
+
 .spectrum-Card {
 	position: relative;
 	display: inline-flex;
@@ -412,30 +433,27 @@ governing permissions and limitations under the License.
 	   and will be removed in a future version. */
 	padding-block-start: var(
 		--mod-card-body-padding-block-start,
-		var(
-			--mod-card-title-padding-top,
-			var(--spectrum-card-title-padding-top)
-		)
+		var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top))
 	);
 	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))
+				var(--mod-card-border-width, var(--spectrum-card-border-width))
 		)
 	);
 	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))
+				var(--mod-card-border-width, var(--spectrum-card-border-width))
 		)
 	);
 	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))
+				var(--mod-card-border-width, var(--spectrum-card-border-width))
 		)
 	);
 }
@@ -552,34 +570,25 @@ governing permissions and limitations under the License.
 	);
 	margin-inline-start: var(
 		--mod-card-footer-margin-inline-start,
-		var(
-			--mod-card-body-spacing,
-			var(--spectrum-card-body-spacing)
-		)
+		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))
 	);
 	margin-inline-end: var(
 		--mod-card-footer-margin-inline-end,
-		var(
-			--mod-card-body-spacing,
-			var(--spectrum-card-body-spacing)
-		)
+		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))
+				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)
-		)
+		var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top))
 	);
 
 	color: var(
@@ -698,7 +707,13 @@ governing permissions and limitations under the License.
 
 		/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
 		transition: background-color
-			var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)));
+			var(
+				--mod-card-animation-duration,
+				var(
+					--mod-animation-duration-100,
+					var(--spectrum-animation-duration-100)
+				)
+			);
 		overflow: visible;
 
 		/* Use ::before to show the selected overlay */
@@ -834,9 +849,15 @@ governing permissions and limitations under the License.
 		align-items: center;
 		justify-content: center;
 
-		border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+		border-start-start-radius: calc(
+			var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
+				var(--mod-card-border-width, var(--spectrum-card-border-width))
+		);
 		border-start-end-radius: 0;
-		border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+		border-end-start-radius: calc(
+			var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
+				var(--mod-card-border-width, var(--spectrum-card-border-width))
+		);
 		border-end-end-radius: 0;
 
 		padding: var(
@@ -881,10 +902,10 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Card--gallery {
-  min-inline-size: 0;
+	min-inline-size: 0;
 
-  .spectrum-Card-preview {
-    padding: 0;
-    border-radius: 0;
-  }
+	.spectrum-Card-preview {
+		padding: 0;
+		border-radius: 0;
+	}
 }