From 669478e91219cdd4e59164d8180729292f067101 Mon Sep 17 00:00:00 2001 From: alexandru-morariu-lgp <84004128+alexandrumorariu@users.noreply.github.com> Date: Wed, 13 May 2026 15:05:53 +0300 Subject: [PATCH 1/4] Updated Card to match the latest GUI --- CHANGELOG.md | 1 + Card/Card.js | 3 ++- Card/Card.module.less | 45 +++++++++++++++++++++++++++++++++++++++++-- styles/variables.less | 18 ++++++++++++----- 4 files changed, 59 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bb43a17d..f14367b35 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/Card/Card.js b/Card/Card.js index 77b8ff509..77d7a2210 100644 --- a/Card/Card.js +++ b/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 diff --git a/Card/Card.module.less b/Card/Card.module.less index fd85ade9d..ae6fa90a8 100644 --- a/Card/Card.module.less +++ b/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,46 @@ } } + .lime-custom-text({ + .caption { + font-size: @lime-card-caption-large-font-size; + line-height: @lime-card-caption-large-line-height; + } + + .label { + font-size: @lime-card-label-large-font-size; + line-height: @lime-card-label-large-line-height; + } + + &.captionOverlay { + &.splitCaption { + .label { + font-size: @lime-card-split-caption-label-large-font-size; + } + } + } + + .selectionContainer .selectionIcon { + --icon-size: @lime-card-selection-large-icon-size; + width: @lime-card-selection-icon-large-line-height; + height: @lime-card-selection-icon-large-line-height; + line-height: @lime-card-selection-icon-large-line-height; + } + + &:is(.isCheckIcon) .selectionContainer .selectionIcon { + --icon-size: @lime-card-selection-check-large-icon-size; + width: @lime-card-selection-check-icon-large-line-height; + height: @lime-card-selection-check-icon-large-line-height; + line-height: @lime-card-selection-check-icon-large-line-height; + } + + &.vertical { + &:not(.captionOverlay):not(.captionOverlayOnFocus):is(.hasLabel) .image { + height:~"calc(var(--card-image-height) - 36px)"; + } + } + }); + // Skin colors .applySkins({ .selectionContainer { diff --git a/styles/variables.less b/styles/variables.less index 431ce6551..4d359b38a 100644 --- a/styles/variables.less +++ b/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-large-font-size: var(--primitive-font-size-72); @lime-card-label-font-size: var(--primitive-font-size-48); +@lime-card-label-large-font-size: var(--primitive-font-size-58); @lime-card-split-caption-label-font-size: var(--primitive-font-size-60); +@lime-card-split-caption-label-large-font-size: 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]; @@ -421,20 +424,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-large-icon-size: 58px; +@lime-card-selection-icon-size: 144px; +@lime-card-selection-large-icon-size: (@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-line-height: 60px; +@lime-card-selection-check-icon-large-line-height: 70px; +@lime-card-selection-icon-line-height: 180px; +@lime-card-selection-icon-large-line-height: (@lime-card-selection-icon-line-height * 1.2); @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-large-line-height: 100px; @lime-card-label-line-height: 60px; -@lime-card-split-caption-label-line-height: 84px; +@lime-card-label-large-line-height: 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; From 61ff282f1418fa7b0e92122d750c8cc02a790768 Mon Sep 17 00:00:00 2001 From: alexandru-morariu-lgp <84004128+alexandrumorariu@users.noreply.github.com> Date: Wed, 13 May 2026 15:12:08 +0300 Subject: [PATCH 2/4] Added tests --- tests/screenshot/apps/components/Card.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/screenshot/apps/components/Card.js b/tests/screenshot/apps/components/Card.js index a2b37fe18..48be194c4 100644 --- a/tests/screenshot/apps/components/Card.js +++ b/tests/screenshot/apps/components/Card.js @@ -54,6 +54,9 @@ const defaultCardTests = [ const CardTests = [ ...defaultCardTests, + // Large text + ...withConfig({skinVariants: ['largeText']}, defaultCardTests), + // Disabled ...withProps({disabled: true}, defaultCardTests), From 658d0066f8632eddbf31d3bdb135c35c4cffe4d4 Mon Sep 17 00:00:00 2001 From: alexandru-morariu-lgp <84004128+alexandrumorariu@users.noreply.github.com> Date: Wed, 13 May 2026 15:12:44 +0300 Subject: [PATCH 3/4] Added tests --- tests/screenshot/apps/components/Card.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/screenshot/apps/components/Card.js b/tests/screenshot/apps/components/Card.js index 48be194c4..fadbf0202 100644 --- a/tests/screenshot/apps/components/Card.js +++ b/tests/screenshot/apps/components/Card.js @@ -54,9 +54,6 @@ const defaultCardTests = [ const CardTests = [ ...defaultCardTests, - // Large text - ...withConfig({skinVariants: ['largeText']}, defaultCardTests), - // Disabled ...withProps({disabled: true}, defaultCardTests), @@ -76,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; From f07e740654a83b82b6363ecfee3c938e7bff9e93 Mon Sep 17 00:00:00 2001 From: alexandru-morariu-lgp <84004128+alexandrumorariu@users.noreply.github.com> Date: Fri, 15 May 2026 10:05:22 +0300 Subject: [PATCH 4/4] Review fixes --- Card/Card.module.less | 23 ++++++++++------------- styles/variables.less | 18 +++++++++--------- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/Card/Card.module.less b/Card/Card.module.less index ae6fa90a8..a6270519a 100644 --- a/Card/Card.module.less +++ b/Card/Card.module.less @@ -296,35 +296,32 @@ .lime-custom-text({ .caption { - font-size: @lime-card-caption-large-font-size; - line-height: @lime-card-caption-large-line-height; + font-size: @lime-card-caption-font-size-large; + line-height: @lime-card-caption-line-height-large; } .label { - font-size: @lime-card-label-large-font-size; - line-height: @lime-card-label-large-line-height; + 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-large-font-size; + font-size: @lime-card-split-caption-label-font-size-large; } } } .selectionContainer .selectionIcon { - --icon-size: @lime-card-selection-large-icon-size; - width: @lime-card-selection-icon-large-line-height; - height: @lime-card-selection-icon-large-line-height; - line-height: @lime-card-selection-icon-large-line-height; + --icon-size: @lime-card-selection-icon-size-large; } &:is(.isCheckIcon) .selectionContainer .selectionIcon { - --icon-size: @lime-card-selection-check-large-icon-size; - width: @lime-card-selection-check-icon-large-line-height; - height: @lime-card-selection-check-icon-large-line-height; - line-height: @lime-card-selection-check-icon-large-line-height; + --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 { diff --git a/styles/variables.less b/styles/variables.less index 7d7fae023..a43c11370 100644 --- a/styles/variables.less +++ b/styles/variables.less @@ -129,11 +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-large-font-size: var(--primitive-font-size-72); +@lime-card-caption-font-size-large: var(--primitive-font-size-72); @lime-card-label-font-size: var(--primitive-font-size-48); -@lime-card-label-large-font-size: var(--primitive-font-size-58); +@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-large-font-size: var(--primitive-font-size-72); +@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]; @@ -428,24 +428,24 @@ @lime-card-image-border-width: 6px; @lime-card-resting-border-width: 3px; @lime-card-selection-check-icon-size: 48px; -@lime-card-selection-check-large-icon-size: 58px; +@lime-card-selection-check-icon-size-large: 58px; @lime-card-selection-icon-size: 144px; -@lime-card-selection-large-icon-size: (@lime-card-selection-icon-size * 1.2); +@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-container-large: 72px; @lime-card-selection-check-icon-line-height: 60px; -@lime-card-selection-check-icon-large-line-height: 70px; +@lime-card-selection-check-icon-line-height-large: 70px; @lime-card-selection-icon-line-height: 180px; -@lime-card-selection-icon-large-line-height: (@lime-card-selection-icon-line-height * 1.2); @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-large-line-height: 100px; +@lime-card-caption-line-height-large: 100px; @lime-card-label-line-height: 60px; -@lime-card-label-large-line-height: 70px; +@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;