fix: #3622269 Add the design's desktop display tracking and mobile display scale

Rajab Natshahrequested to merge
issue/vartheme_bs5_rightup-3622269:3622269-display-headings-miss into 1.0.x

Issue: https://www.drupal.org/i/3622269

Display headings did not match the brand stylesheet (VBN — Stylesheet, Foundation page, 04 - Display).

Changes

  • Desktop tracking: .display-1 to .display-6 get letter-spacing: -0.02em at md and up. The design's Desktop/Display/D1–D6 styles carry -2%, which Figma renders as -1.08px on the 54px D1. em keeps it at -2% of whatever size RFS resolves.
  • Mobile display scale: the design's Mobile/Display/D1–D6 steps (44 / 36 / 30 / 24 / 20 / 16 px = 2.75rem … 1rem) are added to the existing media-breakpoint-down(md) type scale. Before, they were left to Bootstrap RFS, which renders .display-1 at about 33px on a 375px phone. vartheme.base.css loads after bootstrap.base.css (framework depends on bootstrap-styles before global-styles) at the same specificity, so these rules win.
  • Compiled css/base/vartheme.base.css is rebuilt with webpack.config.build.js; there are no other compiled changes.

Depends on

This branch builds on #3620731 (!8 (merged)), because it extends that issue's mobile type-scale block. Until !8 (merged) is merged, this MR's diff includes !8 (merged)'s commits; the change specific to this MR is ce0b02d9.

Measured before and after

Same page and same theme in both halves of each image. The after half is this branch's own compiled css/base/vartheme.base.css and components/base/root/root.css, loaded after the shipping stylesheets so the cascade matches what the branch would serve. The figure at the right of each row is the computed font-size and letter-spacing read back from the browser, not a design annotation.

Desktop, 1920px. Every step gains the design's -2% tracking. On the 54px .display-1 that computes to -1.08px, which is what the design shows.

A specimen of display-1 to display-6 at a 1920 pixel viewport, before with letter-spacing normal on every step and after with -1.08px, -0.96px, -0.76px, -0.6px, -0.48px and -0.36px.

Mobile, 375px. The steps move off RFS onto the design's scale, 44 / 36 / 30 / 24 / 20 / 16px, where RFS resolved .display-1 to 32.96px. Tracking stays normal here, because the design tracks the displays only from md up.

A specimen of display-1 to display-6 at a 375 pixel viewport, before at 32.96, 30.68, 26.86, 23.81, 21.53 and 18 pixels and after at 44, 36, 30, 24, 20 and 16 pixels, with letter-spacing normal in both.

Checkpoints

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support
  • User Guide Documentation support
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release

AI-Generated: Yes

🤖 Generated with Claude Code

Edited by Rajab Natshah

Merge request reports