add global pragma styles

.github/workflows/coverage.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Install JS dependencies
         run: yarn install --immutable

.github/workflows/pr.yml

@@ -221,7 +221,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Install dependencies
         run: yarn install --immutable

package.json

@@ -20,7 +20,9 @@
     "@canonical/cookie-policy": "3.10.0",
     "@canonical/global-nav": "3.9.0",
     "@canonical/react-components": "4.9.0",
+    "@canonical/react-ds-global": "0.33.0",
     "@canonical/store-components": "0.55.0",
+    "@canonical/styles": "0.33.0",
     "@sentry/react": "8.55.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",

static/sass/styles.scss

@@ -4,13 +4,22 @@ $brand-color: #772953;
 $color-text-orange: #d54110;
 $breakpoint-navigation-threshold: 1220px; // keep it in sync with juju.is and breakpoint value in global-nav.ts
 
+// import Pragma tokens and base styles before Vanilla
+@import "@canonical/styles";
+
 // import cookie policy
 @import "@canonical/cookie-policy/build/css/cookie-policy";
 
 // Import Vanilla framework
 @import "vanilla-framework";
 @include vanilla;
 
+// Needed so fonts are still applied after importing Pragma styles
+:root {
+  --typography-font-family-default: #{$font-base-family};
+  --typography-font-family-code: #{$font-monospace};
+}
+
 // Custom styles
 @import "pattern_p-card";
 @include p-charmhub-card;