fix(type): re-emit --wcss-body-weight as backward-compat alias

[chrisfalaska]

Summary

• Re-emits --wcss-body-weight per theme as an alias for --wcss-body-default-weight so pre-v11 consumers (notably the bundled CSS inside Auro components like auro-checkbox, auro-input, etc.) render body text at the correct theme weight again.
• Pure addition — no existing v11 vars or classes are changed; the new per-size weight vars (--wcss-body-{size}-weight) are untouched.
• Applies to all five themes (alaska, alaska-classic, auro-1, auro-2, hawaiian) automatically, since the alias lives inside the shared generate-body-css-vars mixin invoked once per theme.

AB#1556732

Background

WCSS v11.0.0 (5506a19 — feat: add new body-emphasized classes) removed the theme-wide --wcss-body-weight custom property and replaced it with per-size variants (--wcss-body-default-weight, --wcss-body-lg-weight, etc.). No alias was kept for backward compatibility.

Auro components ship pre-bundled CSS baked into their JS so it can live inside their shadow roots and avoid FOUC. Those bundles were built against pre-v11 WCSS and still reference the old var name with a hard-coded fallback:

.body-default, .body-lg {
  font-weight: var(--wcss-body-weight, 450);
}

Under v11 the var is undefined, the 450 literal (Alaska body weight) wins, and every non-Alaska theme renders body text at the wrong weight. On Hawaiian the browser snaps to SlatePro-Medium instead of SlatePro-Regular, which is the user-visible bug.

This patch restores the legacy var as an alias so existing Auro component bundles render correct weights immediately — no component rebuild required. Follow-up work to migrate components to the new var names is tracked separately; the alias will be removed in the next WCSS major.

Change

Single addition to the generate-body-css-vars mixin in src/type/partials/_body.scss:

// Backward-compatibility alias for pre-v11 consumers (e.g. bundled Auro component CSS).
// Remove in next major once consumers migrate to --wcss-body-default-weight.
--#{$css-ns}-body-weight: var(--#{$css-ns}-body-default-weight);

Using var(--…-body-default-weight) (rather than re-resolving the theme map) keeps the alias automatically in sync with the per-theme default weight emitted just above.

Testing

• Built WCSS locally and ran npm pack
• Installed pack into DocSite and tested locally
• Confirmed fix with @forrest-for-real

Local verification — WCSS --wcss-body-weight alias fix

The Auro docsite loads theme CSS from cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest. Until the fix is published, the docsite has no way to see the alias on its own. These steps point the docsite at a local WCSS build so the fix can be verified end-to-end before publish.

Why pre-v11 component bundles need the alias

Bundle generation	References	Behavior under v11 theme CSS
Pre-v11 (auro-button, auro-dialog, auro-drawer, auro-flight, auro-flightline, auro-pane, auro-popover, auro-toast)	--wcss-body-weight	Var is undefined → fallback 450 wins → wrong weight on non-Alaska themes
Post-v11 (auro-formkit/* — checkbox, input, select, etc.)	--wcss-body-default-weight	Resolves against the theme's per-size var → renders correctly

The fix re-emits --wcss-body-weight: var(--wcss-body-default-weight) per theme so the pre-v11 bundles resolve to the same value the post-v11 bundles already use.

Redirect the docsite to local WCSS

The docsite theme switcher hardcodes the CDN URL in src/components/header/index.js. Apply this temporary diff:

- newWcssLink.setAttribute('href', `https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/${wcssHref}.global.min.css`);
+ // TEMP: load themes from local node_modules to verify the alias fix.
+ // `atmos` is the docsite name for what the WCSS package ships as `auro-1`.
+ const localThemeFile = wcssHref === 'atmos' ? 'auro-1' : wcssHref;
+ newWcssLink.setAttribute('href', `/node_modules/@aurodesignsystem/webcorestylesheets/dist/bundled/themes/${localThemeFile}.global.min.css`);

Verify in the browser

1. Open the docsite and switch the theme to Hawaiian (or any non-Alaska theme).
2. Visit a component page known to render slotted text via a pre-v11 bundle, e.g. /components/auro/button.
3. In DevTools:
   • Elements → Computed → font-weight on visible button label text should resolve to the theme's body weight, not 450.
   • Rendered Fonts should show SlatePro-Regular (Hawaiian), not SlatePro-Medium.
   • Inspect :root styles — --wcss-body-weight should now be defined as var(--wcss-body-default-weight).
4. Repeat for the other reported components: Dialog, Drawer, Flight, Flightline, Pane, Popover, Toast.
5. Spot-check Alaska theme — unchanged, since the alias resolves to Alaska's default body weight (same value as before).
6. Spot-check post-v11 components (checkbox, input) — unchanged.

Test Plan

• npm run build succeeds with no errors.
• Generated CSS for each theme contains --wcss-body-weight: var(--wcss-body-default-weight); — verified in dist/bundled/themes/{alaska,alaska-classic,auro-1,auro-2,hawaiian}.global.css and .global.min.css.
• Existing test suite passes (npm test).
• Manual repro from the original report:
  • Load the docsite under the Hawaiian theme: https://auro.alaskaair.com/components/auro/checkbox
  • Inspect affected component label.
  • DevTools → Computed → font-weight now resolves to the Hawaiian default body weight (not 450).
  • Rendered Fonts panel shows SlatePro-Regular instead of SlatePro-Medium.
• Spot-check that the Alaska theme is unchanged (alias resolves to the same value as before — Alaska's default body weight).

Summary by Sourcery

Add a backward-compatible body font-weight custom property alias and bump documentation to v11.1.0.

Bug Fixes:

• Restore the theme-wide --wcss-body-weight custom property as an alias of --wcss-body-default-weight so pre-v11 Auro component bundles render correct body weights across themes.

Documentation:

• Update generated SassDoc HTML to reference version v11.1.0 instead of v11.0.0.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adds a backward-compatible alias for the deprecated --wcss-body-weight custom property by re-emitting it from the shared body CSS vars mixin, and bumps generated SassDoc documentation to v11.1.0.

File-Level Changes

Change	Details	Files
Add backward-compatible alias CSS variable for body font weight across all themes.	Extend generate-body-css-vars mixin to emit --[css-ns]-body-weight as var(--[css-ns]-body-default-weight). Ensure alias is generated once per theme so all bundled theme CSS (global and minified) includes the legacy var. Document intent in comments to remove the alias in the next major release once consumers migrate.	src/type/partials/_body.scss
Update generated documentation to reflect new v11.1.0 version.	Change SassDoc HTML title and sidebar header to display version v11.1.0 instead of v11.0.0. Update footer project version string to - v11.1.0 to match the new release.	docs/index.html

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

🚀 PR Release Published! v0.0.0-pr284.0

To install:

npm install @aurodesignsystem-dev/webcorestylesheets@0.0.0-pr284.0

Install via alias:

npm install @aurodesignsystem@npm:@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr284.0

View on npmjs.com

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[rmenner]

🎉 This PR is included in version 11.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀