feat: #3614514 Match the Share rail to the design and add the block spacer
Three related gaps between the theme and the Horizon Aid design system.
1. The Share rail did not match the design
It shipped a 40px button with a 24px icon, 8px gaps, --bs-secondary-bg and $border-radius-sm. The design calls for circular pills on the subtle surface, 16px icons, 12px between them, and an 18px bold navy label.
Retuned in share.scss only — the markup already matched, so there is no template change (and no conflict with the recent configurable-heading-level work on this component).
| Token | Before | After |
|---|---|---|
--webshare-icon-size |
24px | 16px |
--webshare-button-size |
40px | 36px (16px icon + 10px padding) |
--webshare-gap |
8px | 12px |
--webshare-button-bg |
--bs-secondary-bg |
--bs-secondary-bg-subtle |
--webshare-button-radius |
$border-radius-sm |
$border-radius-pill |
--webshare-heading-color / --webshare-button-color |
--bs-body-color |
--bs-dark |
2. The design system's block rhythm had no Bootstrap step
Bootstrap's spacer scale jumps 24px (4) to 48px (5), so the 40px rhythm the design uses between stacked blocks had no utility. Added as a named block step in $spacers, generating mt-block, mb-block and friends.
Worth noting for review: this overrides file is loaded before Bootstrap defines $spacers and $spacer, so the whole map is declared with literal rem values. Both map-merge($spacers, …) and a map referencing $spacer fail with Undefined variable — that is why the values are literal rather than derived.
3. The section slots used 24px where the design says 40px
sdc-section__header / sdc-section__footer moved from mb-4 / mt-4 to mb-block / mt-block.
This affects every section on every Canvas page, so it is a deliberate site-wide rhythm change rather than a local fix — please review it as such.
Verified in a real browser
| Check | Result |
|---|---|
| Rail direction / gap | column, 12px |
| "Share" label | 18px, 700, rgb(13, 44, 84) |
| Pill surface | rgb(247, 249, 250) |
| Pill size / shape | 36×36, fully rounded |
| Sticky rail | yes |
| Global + component bundles | compile with 0 errors |
*-block utilities |
generated |
About the rebuilt CSS
Most of the changed files are compiled CSS. That is the propagation of the two token changes — the spacer map feeds every bundle that emits spacing utilities. The source changes are three files: share.scss, scss/_bootstrap-variables.scss, and the section template.
Known gap, out of scope here
The design shows four share icons; the site renders three. The set and order come from the Webshare module's platform configuration, not this theme, so that needs its own issue.
Unblocks
The recipe change at horizonaid!17 (merged) uses mb-block for the More Events spacing. Until this lands, that class is unknown and the gap there falls back to 0.
Issue: https://www.drupal.org/i/3614514
AI-Generated: Yes
Checkpoints:
- File an issue
- Addition/Change/Update/Fix
- Testing to ensure no regression
- Automated unit testing coverage
- Automated functional testing coverage
- UX/UI designer responsibilities
- Readability
- Accessibility
- Performance
- Security
- Documentation
- Code review by maintainers
- Full testing and approval
- Credit contributors
- Review with the product owner
- Release notes snippet
- Release