add global pragma styles

[abbiesims]

Done

• Part of a solutions stack for adding solutions to charmhub - DON'T MERGE
• Adds global pragma styles to the repo
• Does not fix the icons issue that is being explored on snapcraft yet (will wait until this is merged in snapcraft and see if there are other issues that are uncovered)

How to QA

• Open the demo and make sure all components load as normal
• There should be no visual changes

Testing

• This PR has tests
• No testing required (explain why): no logic or visual change

Issue / Card

Fixes WD-38210

UX Approval

• This PR does not require UX approval
• This PR does require UX approval (add context):

---

_{Stack created with GitHub Stacks CLI • Give Feedback 💬}

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

Pull request overview

This PR introduces Pragma-related global styling by adding Canonical’s @canonical/styles into the main SCSS pipeline so its tokens/base styles load before Vanilla Framework.

Changes:

• Import @canonical/styles at the top of static/sass/styles.scss (before Vanilla).
• Add new npm dependencies: @canonical/styles and @canonical/react-ds-global.
• Update yarn.lock to reflect the new dependency graph.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.

File	Description
static/sass/styles.scss	Imports @canonical/styles before Vanilla to apply Pragma tokens/base styles globally.
package.json	Adds @canonical/styles (used by SCSS) and @canonical/react-ds-global (currently appears unused and introduces an additional React version).
yarn.lock	Locks the new dependencies and their transitive packages.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[abbiesims]

@steverydz could you take another quick look please? 🙏

[steverydz]

LGTM 👍

Just a note though that there will be some work needed to make sure the Pragma icons are available (see: https://github.com/canonical/snapcraft.io/pull/5805/changes)

[abbiesims]

LGTM 👍

Just a note though that there will be some work needed to make sure the Pragma icons are available (see: https://github.com/canonical/snapcraft.io/pull/5805/changes)

yep, that's fine. discussed with Bartek and we said we would wait until the snapcraft PR is merged and see if we discover any other teething issues. will address this in a later PR :)

[canonical-steverydz]

LGTM 👍