diff --git a/entry_types/scrolled/doc/creating_themes/custom_typography.md b/entry_types/scrolled/doc/creating_themes/custom_typography.md index 240decc5e..029700680 100644 --- a/entry_types/scrolled/doc/creating_themes/custom_typography.md +++ b/entry_types/scrolled/doc/creating_themes/custom_typography.md @@ -66,6 +66,16 @@ The following rule names are supported: | `body` | Applies to text blocks (paragraphs, lists, block quotes) in the entry content. | | `caption` | Applies to captions of content elements like inline images or inline videos. | | `content_link` | Applies to text links in text blocks, figures, quotes and counters. | +| `quote_text` | Applies to the main text of quote content elements. | +| `quote_text_lg` | Applies to the main text of quote content elements with size "large". | +| `quote_text_md` | Applies to the main text of quote content elements with size "medium". | +| `quote_text_sm` | Applies to the main text of quote content elements with size "small". | +| `quote_text_xs` | Applies to the main text of quote content elements with size "very small". | +| `quote_attribution` | Applies to the main text of quote content elements. | +| `quote_attribution_lg` | Applies to the attribution line of quote content elements with size "large". | +| `quote_attribution_md` | Applies to the attribution line of quote content elements with size "medium". | +| `quote_attribution_sm` | Applies to the attribution line of quote content elements with size "small". | +| `quote_attribution_xs` | Applies to the attribution line of quote content elements with size "very small". | | `default_navigation_chapter_link` | Applies to chapter links in the default navigation. | | `default_navigation_chapter_summary` | Applies to chapter summary texts in the default navigation. | | `default_navigation_active_chapter_link` | Applies to the chapter link representing the current chapter. | diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js index 03ee04e56..84b9aaaff 100644 --- a/entry_types/scrolled/package/src/contentElements/quote/Quote.js +++ b/entry_types/scrolled/package/src/contentElements/quote/Quote.js @@ -32,7 +32,7 @@ export function Quote({configuration, contentElementId, sectionProps}) { contentElementId={contentElementId} onChange={text => updateConfiguration({text})} onlyParagraphs={true} - scaleCategory={getTextScaleCategory(configuration)} /> + scaleCategory={getTextScaleCategory(configuration, 'Text')} /> {(isSelected || !utils.isBlankEditableTextValue(configuration.attribution || [])) && @@ -41,22 +41,24 @@ export function Quote({configuration, contentElementId, sectionProps}) { contentElementId={contentElementId} onChange={attribution => updateConfiguration({attribution})} onlyParagraphs={true} - scaleCategory="quoteAttribution" + scaleCategory={getTextScaleCategory(configuration, 'Attribution')} placeholder={t('pageflow_scrolled.inline_editing.type_attribution')} /> } ); } -function getTextScaleCategory(configuration) { +function getTextScaleCategory(configuration, suffix) { + const base = `quote${suffix}`; + switch (configuration.textSize) { case 'large': - return 'quoteText-lg'; + return `${base}-lg`; case 'small': - return 'quoteText-sm'; + return `${base}-sm`; case 'verySmall': - return 'quoteText-xs'; + return `${base}-xs`; default: - return 'quoteText-md'; + return `${base}-md`; } } diff --git a/entry_types/scrolled/package/src/frontend/Text.module.css b/entry_types/scrolled/package/src/frontend/Text.module.css index 74fb43c64..9a0919fed 100644 --- a/entry_types/scrolled/package/src/frontend/Text.module.css +++ b/entry_types/scrolled/package/src/frontend/Text.module.css @@ -99,24 +99,28 @@ .quoteText-lg { composes: typography-quoteText from global; + composes: typography-quoteTextLg from global; font-size: text-2l; line-height: 1.1; } .quoteText-md { composes: typography-quoteText from global; + composes: typography-quoteTextMd from global; font-size: text-l; line-height: 1.1; } .quoteText-sm { composes: typography-quoteText from global; + composes: typography-quoteTextSm from global; font-size: text-md; line-height: 1.2; } .quoteText-xs { composes: typography-quoteText from global; + composes: typography-quoteTextXs from global; font-size: 26px; line-height: 1.2; } @@ -127,6 +131,26 @@ line-height: 1.4; } +.quoteAttribution-lg { + composes: quoteAttribution; + composes: typography-quoteAttributionLg from global; +} + +.quoteAttribution-md { + composes: quoteAttribution; + composes: typography-quoteAttributionMd from global; +} + +.quoteAttribution-sm { + composes: quoteAttribution; + composes: typography-quoteAttributionSm from global; +} + +.quoteAttribution-xs { + composes: quoteAttribution; + composes: typography-quoteAttributionXs from global; +} + .counterNumber-lg { composes: typography-counterNumber from global; font-size: text-5xl;