NXT-13229: Updated Card to match the latest GUI

CHANGELOG.md

@@ -7,6 +7,7 @@ The following is a curated list of changes in the Enact limestone module, newest
 ### Changed
 
 - `limestone/Button` styling to match the latest GUI
+- `limestone/Card` styling to match the latest GUI
 - `limestone/Checkbox` styling to match the latest GUI
 - `limestone/Heading` styling to match the latest GUI
 - `limestone/ImageItem` styling to match the latest GUI

Card/Card.js

@@ -388,12 +388,13 @@ const CardBase = kind({
 					selectedCaptions
 			);
 		},
-		className: ({captionOverlay, captionOverlayOnFocus, icon, pressed, roundedImage, hasContainer, orientation, styler}) => styler.append({
+		className: ({captionOverlay, captionOverlayOnFocus, icon, label, pressed, roundedImage, hasContainer, orientation, secondaryLabel, styler}) => styler.append({
 			captionOverlay: captionOverlay && orientation === 'vertical',
 			captionOverlayOnFocus: !captionOverlay && captionOverlayOnFocus && orientation === 'vertical',
 			pressed,
 			roundedImage,
 			hasContainer: (orientation === 'horizontal') || (hasContainer && !captionOverlay),
+			hasLabel: (orientation === 'vertical') && (label && secondaryLabel),
 			isCheckIcon: icon === 'check'
 		}),
 		splitCaption: ({captionOverlay, captionOverlayOnFocus, splitCaption}) => (captionOverlay || captionOverlayOnFocus) && splitCaption

Card/Card.module.less

@@ -53,8 +53,9 @@
 		border-style: solid;
 
 		.selectionIcon {
-			width: @lime-card-selection-check-icon-size;
-			height: @lime-card-selection-check-icon-size;
+			--icon-size: @lime-card-selection-check-icon-size;
+			width: @lime-card-selection-check-icon-line-height;
+			height: @lime-card-selection-check-icon-line-height;
 			border-radius: @lime-card-selection-icon-border-radius;
 			margin: @lime-card-selection-icon-margin;
 			line-height: @lime-card-selection-check-icon-line-height;
@@ -293,6 +294,43 @@
 		}
 	}
 
+	.lime-custom-text({
+		.caption {
+			font-size: @lime-card-caption-font-size-large;
+			line-height: @lime-card-caption-line-height-large;
+		}
+
+		.label {
+			font-size: @lime-card-label-font-size-large;
+			line-height: @lime-card-label-line-height-large;
+		}
+
+		&.captionOverlay {
+			&.splitCaption {
+				.label {
+					font-size: @lime-card-split-caption-label-font-size-large;
+				}
+			}
+		}
+
+		.selectionContainer .selectionIcon {
+			--icon-size: @lime-card-selection-icon-size-large;
+		}
+
+		&:is(.isCheckIcon) .selectionContainer .selectionIcon {
+			--icon-size: @lime-card-selection-check-icon-size-large;
+			width: @lime-card-selection-check-icon-container-large;
+			height: @lime-card-selection-check-icon-container-large;
+			line-height: @lime-card-selection-check-icon-line-height-large;
+		}
+
+		&.vertical {
+			&:not(.captionOverlay):not(.captionOverlayOnFocus):is(.hasLabel) .image {
+				height:~"calc(var(--card-image-height) - 36px)";
+			}
+		}
+	});
+
 	// Skin colors
 	.applySkins({
 		.selectionContainer {

styles/variables.less

@@ -129,8 +129,11 @@
 @lime-button-small-font-size-large: var(--primitive-font-size-66);
 @lime-button-small-font-size:       var(--primitive-font-size-54);
 @lime-card-caption-font-size:       var(--primitive-font-size-60);
+@lime-card-caption-font-size-large:       var(--primitive-font-size-72);
 @lime-card-label-font-size:         var(--primitive-font-size-48);
+@lime-card-label-font-size-large:         var(--primitive-font-size-58);
 @lime-card-split-caption-label-font-size:	var(--primitive-font-size-60);
+@lime-card-split-caption-label-font-size-large:	var(--primitive-font-size-72);
 @lime-header-compact-title-font-size: #guide.header[compact-title-font-size];
 @lime-header-mini-title-font-size:  #guide.header[mini-title-font-size];
 @lime-header-wizard-title-font-size: #guide.header[wizard-title-font-size];
@@ -424,20 +427,25 @@
 @lime-card-border-radius: var(--semantic-radius-container);
 @lime-card-image-border-width: 6px;
 @lime-card-resting-border-width: 3px;
-@lime-card-selection-check-icon-size: 90px;
-@lime-card-selection-icon-size: 120px;
+@lime-card-selection-check-icon-size: 48px;
+@lime-card-selection-check-icon-size-large: 58px;
+@lime-card-selection-icon-size: 144px;
+@lime-card-selection-icon-size-large: (@lime-card-selection-icon-size * 1.2);
 @lime-card-selection-icon-border-radius: 50%;
 @lime-card-selection-icon-margin: 0;
-@lime-card-selection-check-icon-line-height: 90px;
-@lime-card-selection-icon-line-height: 144px;
+@lime-card-selection-check-icon-container-large: 72px;
+@lime-card-selection-check-icon-line-height: 60px;
+@lime-card-selection-check-icon-line-height-large: 70px;
+@lime-card-selection-icon-line-height: 180px;
 @lime-card-badge-size: 108px;
 @lime-card-badge-margin: 0;
 @lime-card-badge-top: var(--primitive-spacing-24);
 @lime-card-badge-left: var(--primitive-spacing-24);
 @lime-card-badge-right: var(--primitive-spacing-24);
 @lime-card-caption-line-height: 84px;
+@lime-card-caption-line-height-large: 100px;
 @lime-card-label-line-height: 60px;
-@lime-card-split-caption-label-line-height: 84px;
+@lime-card-label-line-height-large: 70px;
 @lime-card-split-caption-label-padding: 0 var(--primitive-spacing-48);
 @lime-card-split-caption-lower-label-padding: var(--primitive-spacing-18);
 @lime-card-vertical-captions-padding: var(--primitive-spacing-36) 0;

tests/screenshot/apps/components/Card.js

@@ -73,7 +73,10 @@ const CardTests = [
 	...withConfig({focus: true, wrapper: {padded: true}}, defaultCardTests),
 
 	// FocusRing
-	...withConfig({focusRing: true, focus: true, wrapper: {padded: true}}, withProps({label: 'focusRing'}, defaultCardTests))
+	...withConfig({focusRing: true, focus: true, wrapper: {padded: true}}, withProps({label: 'focusRing'}, defaultCardTests)),
+
+	// Large text
+	...withConfig({skinVariants: ['largeText']}, defaultCardTests)
 ];
 
 export default CardTests;