From 375711561624bc9d14b4bb853d7be423143d96d1 Mon Sep 17 00:00:00 2001 From: Femke Reunes Date: Thu, 3 Sep 2026 10:25:01 +0200 Subject: [PATCH 1/2] ARC-3825: fix timeline padding --- .../components/blocks/BlockTimeline/BlockTimeline.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss index d082f6f8..e29dab06 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss @@ -227,15 +227,15 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2; &__node-text { padding-bottom: $node-background-padding; + + &:first-child .c-block-timeline__node-title { + margin-top: 0; + } } &__node-title { margin: (variables.$g-spacer-unit * 4) 0 0; - &:first-child { - margin-top: 0; - } - @include typography.sofia-pro-heading-lg; @media (max-width: variables.$g-bp3) { From 9b65e0c4d7e01a74960e946e6a1710ad800e94ed Mon Sep 17 00:00:00 2001 From: Femke Reunes Date: Thu, 3 Sep 2026 10:42:00 +0200 Subject: [PATCH 2/2] ARC-3825: Remove sofiapro from the typography but keep all other font styling --- .../BlockDoubleBanner/BlockDoubleBanner.scss | 2 +- .../BlockHeroCarousel/BlockHeroCarousel.scss | 9 +--- .../BlockHetArchiefQuote.scss | 4 +- .../BlockHighlightText/BlockHighligtText.scss | 2 +- .../BlockHomepageBanner.scss | 4 +- .../BlockImageCarousel.scss | 2 +- .../BlockObjectsGrid/BlockObjectsGrid.scss | 8 ++-- .../BlockOverviewThemes.scss | 8 ++-- .../BlockOverviewWithCarousel.scss | 6 +-- .../BlockThemeReelsSection.scss | 10 ++--- .../blocks/BlockTimeline/BlockTimeline.scss | 14 +++---- .../BlockTitleWithParallax.scss | 8 ++-- .../ContentPageLabelChip.scss | 2 +- .../CopyrightAttribution.scss | 4 +- .../shared/styles/mixins/_typography.scss | 41 +++++++++---------- 15 files changed, 58 insertions(+), 66 deletions(-) diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss index d5119355..c0692dcf 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss @@ -65,7 +65,7 @@ $image-min-height: variables.$g-spacer-unit * 12; } &__label { - @include typography.sofia-pro-heading-md; + @include typography.heading-md; } // Mobile keeps only the arrow at the far edge; desktop groups the selected icons and arrow at diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss index 0192d153..96bdc197 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss @@ -260,13 +260,8 @@ $hero-carousel-search-radius-desktop: 3.2rem; } &-label { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-family: typography.$font-family; - font-size: 1.8rem; - font-style: normal; - font-weight: 800; + @include typography.truncate; + @include typography.heading-md; line-height: 2rem; color: colors.$white; } diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss index 20ac0308..dfc3841e 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss @@ -62,7 +62,7 @@ $mark-line-height: variables.$g-spacer-unit * 9; white-space: pre-line; // Figma node 455:5724, style "P - XL". - @include typography.sofia-pro-body-xl; + @include typography.body-xl; @media (max-width: variables.$g-bp2) { // Figma node 455:7186: gap below the mark, plus the padding on the text group that @@ -77,7 +77,7 @@ $mark-line-height: variables.$g-spacer-unit * 9; margin-top: variables.$g-spacer-unit; // Figma node 455:5725, style "P - S". - @include typography.sofia-pro-body-xs; + @include typography.body-xs; @media (max-width: variables.$g-bp2) { margin-bottom: variables.$g-spacer-unit; diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss index b9a6cffd..e8431647 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss @@ -44,7 +44,7 @@ $pattern-mobile-overshoot: 15rem; background: var(--pattern-color, transparent); padding: variables.$g-spacer-unit * 6; - @include typography.sofia-pro-body; + @include typography.body; @media (max-width: variables.$g-bp4) { padding: calc(#{variables.$g-spacer-unit} * 3) calc(#{variables.$g-spacer-unit} * 2.5) !important; diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss index b1bed8a8..1dd67066 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss @@ -70,13 +70,13 @@ $pattern-mobile-overshoot: 10rem; width: 100%; white-space: wrap; - @include typography.sofia-pro-heading-xl(true); + @include typography.heading-xl(true); } &-text { color: colors.$neutral; - @include typography.sofia-pro-body(true); + @include typography.body(true); // The rich text paragraph margins space the paragraphs apart, but the title's // padding does the spacing above the first one. diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss index 8b850f4c..9dfa1861 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss @@ -21,7 +21,7 @@ &-title { color: colors.$color-gray-1000; - @include typography.sofia-pro-heading-lg(); + @include typography.heading-lg(); @include typography.truncate(); width: fit-content; } diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss index c632d750..80b62b09 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss @@ -49,7 +49,7 @@ $max-item-height: 37.6rem; } .c-block-objects-grid__title { - @include typography.sofia-pro-heading-lg($important: false); + @include typography.heading-lg($important: false); color: colors.$color-gray-1000; margin-bottom: 2.2rem; @@ -194,7 +194,7 @@ $max-item-height: 37.6rem; } .c-block-objects-grid__tile-title { - @include typography.sofia-pro-heading-sm($important: false); + @include typography.heading-sm($important: false); font-size: 1.6rem; @include typography.truncate-after-x-lines(2); @@ -202,7 +202,7 @@ $max-item-height: 37.6rem; } .c-block-objects-grid__tile-maintainer { - @include typography.sofia-pro-body-sm($important: false); + @include typography.body-sm($important: false); line-height: 2rem; @include typography.truncate; @@ -222,7 +222,7 @@ $max-item-height: 37.6rem; background-color: colors.$color-gray-1000; color: colors.$white; - @include typography.sofia-pro-heading; + @include typography.heading; text-decoration: none; diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss index ec15923d..dfe800d3 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss @@ -8,7 +8,7 @@ $tile-padding: 3rem; $description-animation-speed: 0.3s; .c-block-overview-themes { - @include typography.sofia-pro-heading-xl; + @include typography.heading-xl; &__group { position: relative; @@ -50,7 +50,7 @@ $description-animation-speed: 0.3s; position: relative; z-index: 1; - @include typography.sofia-pro-heading-xl(true); + @include typography.heading-xl(true); // Reset so the heading level (h1-h4, chosen for semantics only) never affects the visual style. margin: 0 0 (variables.$g-spacer-unit * 3) !important; @@ -181,7 +181,7 @@ $description-animation-speed: 0.3s; &__tile-title { color: colors.$white; - @include typography.sofia-pro-heading-md; + @include typography.heading-md; @include typography.truncate-after-x-lines(2); } @@ -204,7 +204,7 @@ $description-animation-speed: 0.3s; margin-top $description-animation-speed ease-out; color: colors.$white; - @include typography.sofia-pro-body-sm; + @include typography.body-sm; } .c-block-overview-themes__tile { diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss index 944a69cf..8ed771b8 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss @@ -25,7 +25,7 @@ $slide-width: 28rem; &-title { color: colors.$color-gray-1000; - @include typography.sofia-pro-heading-lg; + @include typography.heading-lg; @include typography.truncate; width: fit-content; @@ -140,7 +140,7 @@ $slide-width: 28rem; } .c-block-overview-with-carousel__slide-text { - @include typography.sofia-pro-heading-xl; + @include typography.heading-xl; } } @@ -174,7 +174,7 @@ $slide-width: 28rem; color: colors.$color-gray-1000; - @include typography.sofia-pro-heading-md; + @include typography.heading-md; } } } diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss index fcd7bcc9..65db1c82 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss @@ -34,7 +34,7 @@ $slide-image-height-mobile: 12rem; width: fit-content; @include typography.truncate; - @include typography.sofia-pro-heading-lg; + @include typography.heading-lg; @media (max-width: variables.$g-bp2) { line-height: 2.6rem; @@ -43,7 +43,7 @@ $slide-image-height-mobile: 12rem; &-subtitle { @include typography.truncate-after-x-lines(3); - @include typography.sofia-pro-body-sm; + @include typography.body-sm; color: colors.$neutral; width: 100%; @@ -246,7 +246,7 @@ $slide-image-height-mobile: 12rem; &-title { color: colors.$color-gray-1000; - @include typography.sofia-pro-heading-md; + @include typography.heading-md; width: 100%; @@ -264,7 +264,7 @@ $slide-image-height-mobile: 12rem; width: 100%; color: colors.$color-gray-1000; - @include typography.sofia-pro-body-sm; + @include typography.body-sm; @media (max-width: variables.$g-bp2) { @@ -289,7 +289,7 @@ $slide-image-height-mobile: 12rem; } &-label { - @include typography.sofia-pro-heading-md; + @include typography.heading-md; @include typography.truncate-after-x-lines(3); } diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss index e29dab06..0f900f58 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss @@ -129,7 +129,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2; align-self: baseline; padding-right: 1rem; - @include typography.sofia-pro-heading-xl; + @include typography.heading-xl; // Taller than the font itself, so the year lines up with the top of the node's content line-height: 5.6rem; @@ -148,7 +148,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2; display: block; padding-left: $line-content-gap; - @include typography.sofia-pro-heading-lg; + @include typography.heading-lg; line-height: 2.6rem; color: colors.$color-gray-300; @@ -236,10 +236,10 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2; &__node-title { margin: (variables.$g-spacer-unit * 4) 0 0; - @include typography.sofia-pro-heading-lg; + @include typography.heading-lg; @media (max-width: variables.$g-bp3) { - @include typography.sofia-pro-heading-md; + @include typography.heading-md; margin: (variables.$g-spacer-unit * 3) 0 0; } } @@ -247,10 +247,10 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2; &__node-description { margin-top: variables.$g-spacer-unit * 2; - @include typography.sofia-pro-body; + @include typography.body; @media (max-width: variables.$g-bp3) { - @include typography.sofia-pro-body-sm; + @include typography.body-sm; } } @@ -334,7 +334,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2; // and on backgrounds with no record. https://meemoo.atlassian.net/browse/ARC-3848 color: colors.$color-gray-300; - @include typography.sofia-pro-body-xs; + @include typography.body-xs; &-icon { width: 1rem; diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss index a7d7a92b..cabb0090 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss @@ -122,10 +122,10 @@ &__title-text { color: colors.$white; - @include typography.sofia-pro(6.4rem, 800, 6.4rem, true); + @include typography.set-font(6.4rem, 800, 6.4rem, true); @media (max-width: variables.$g-bp2) { - @include typography.sofia-pro(4rem, 800, 4.4rem, true); + @include typography.set-font(4rem, 800, 4.4rem, true); } } @@ -142,7 +142,7 @@ &__subtitle-text { color: colors.$neutral; - @include typography.sofia-pro(2.4rem, 800, 2.6rem, true); + @include typography.set-font(2.4rem, 800, 2.6rem, true); } &__subtitle-box { @@ -152,7 +152,7 @@ // "Big" keeps the desktop subtitle size on mobile - only "small" shrinks it. &--small &__subtitle-text { @media (max-width: variables.$g-bp2) { - @include typography.sofia-pro(2rem, 800, 2.4rem, true); + @include typography.set-font(2rem, 800, 2.4rem, true); } } } diff --git a/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss b/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss index 82ae84f9..7043030f 100644 --- a/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss +++ b/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss @@ -9,6 +9,6 @@ display: inline-block; padding: variables.$g-spacer-unit; - @include typography.sofia-pro(1.6rem, 700, 2rem); + @include typography.set-font(1.6rem, 700, 2rem); @include typography.truncate; } diff --git a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss index b1aabb30..ccc2ec86 100644 --- a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss +++ b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss @@ -8,11 +8,11 @@ &__annotation { color: colors.$neutral; - @include typography.sofia-pro-body-xs(true); + @include typography.body-xs(true); } &__text { color: colors.$color-gray-1000; - @include typography.sofia-pro-body-xs(true); + @include typography.body-xs(true); } } diff --git a/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss b/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss index 34d2bf24..accf3136 100644 --- a/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss +++ b/ui/src/react-admin/modules/shared/styles/mixins/_typography.scss @@ -1,11 +1,9 @@ // Shared text stylings for the "SofiaPro" typeface used across content blocks. Centralised so // the same size/weight combo (e.g. body copy) reads identically wherever it's used, instead of // each block re-declaring its own font-family/size/weight/line-height by hand. -$font-family: "SofiaPro", sans-serif; -@mixin sofia-pro($size, $weight: 500, $line-height: null, $important: false) { +@mixin set-font($size, $weight: 500, $line-height: null, $important: false) { @if $important { - font-family: $font-family !important; font-size: $size !important; font-style: normal !important; font-weight: $weight !important; @@ -13,7 +11,6 @@ $font-family: "SofiaPro", sans-serif; line-height: $line-height !important; } } @else { - font-family: $font-family; font-size: $size; font-style: normal; font-weight: $weight; @@ -26,40 +23,40 @@ $font-family: "SofiaPro", sans-serif; // Presets for the combos used across content blocks - always style through one of these. If a new // block needs a size/weight that isn't here, add a preset for it rather than calling // `sofia-pro(...)` straight from the block, so the set stays consistent and reusable. -@mixin sofia-pro-heading-xl($important: false) { - @include sofia-pro(3.2rem, 800, 4rem, $important); +@mixin heading-xl($important: false) { + @include set-font(3.2rem, 800, 4rem, $important); } -@mixin sofia-pro-heading-lg($important: false) { - @include sofia-pro(2.4rem, 800, null, $important); +@mixin heading-lg($important: false) { + @include set-font(2.4rem, 800, null, $important); } -@mixin sofia-pro-heading-md($important: false) { - @include sofia-pro(1.8rem, 800, 2.8rem, $important); +@mixin heading-md($important: false) { + @include set-font(1.8rem, 800, 2.8rem, $important); } -@mixin sofia-pro-heading($important: false) { - @include sofia-pro(1.6rem, 800, 2.4rem, $important); +@mixin heading($important: false) { + @include set-font(1.6rem, 800, 2.4rem, $important); } -@mixin sofia-pro-heading-sm($important: false) { - @include sofia-pro(1.4rem, 800, 2rem, $important); +@mixin heading-sm($important: false) { + @include set-font(1.4rem, 800, 2rem, $important); } -@mixin sofia-pro-body-xl($important: false) { - @include sofia-pro(3.2rem, 500, 4rem, $important); +@mixin body-xl($important: false) { + @include set-font(3.2rem, 500, 4rem, $important); } -@mixin sofia-pro-body($important: false) { - @include sofia-pro(1.8rem, 500, 2.8rem, $important); +@mixin body($important: false) { + @include set-font(1.8rem, 500, 2.8rem, $important); } -@mixin sofia-pro-body-sm($important: false) { - @include sofia-pro(1.6rem, 500, 2.4rem, $important); +@mixin body-sm($important: false) { + @include set-font(1.6rem, 500, 2.4rem, $important); } -@mixin sofia-pro-body-xs($important: false) { - @include sofia-pro(1.4rem, 500, 2rem, $important); +@mixin body-xs($important: false) { + @include set-font(1.4rem, 500, 2rem, $important); } // Single-line truncation with an ellipsis - shared with .u-truncate (utilities/_text.scss).