diff --git a/CHANGELOG.md b/CHANGELOG.md index f9b741661..849503ae3 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..a6270519a 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,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 { diff --git a/styles/variables.less b/styles/variables.less index 8b58bdce9..a43c11370 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-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; diff --git a/tests/screenshot/apps/components/Card.js b/tests/screenshot/apps/components/Card.js index a2b37fe18..fadbf0202 100644 --- a/tests/screenshot/apps/components/Card.js +++ b/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;