fix(#3397): use existing design tokens in Astro docs by bdfranck · Pull Request #3515 · GovAlta/ui-components

bdfranck · 2026-03-03T22:12:43Z

Before (the change)

The Astro layouts and components for our v2 Docs used custom design tokens that overwrote some existing ones.

After (the change)

The Astro layouts and components for our v2 Docs uses existing design tokens.

Make sure that you've checked the boxes below before you submit the PR

I have read and followed the setup steps
I have created necessary unit tests
I have tested the functionality in both React and Angular.

Steps needed to test

netlify · 2026-03-03T22:13:39Z

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	`9ffaf97`
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69af46efb7b99d0008f11c9a
😎 Deploy Preview	https://deploy-preview-3515--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Updates the v2 docs’ Astro base layout to stop redefining GoA design-token CSS variables inline and instead rely on the shared design token styles already imported into the layout.

Changes:

Removed the custom :root design token overrides from BaseLayout.astro.
Switched global base styles (body/headings/links/focus) to reference existing GoA design tokens.

twjeffery

Looks good @bdfranck . A few things I noticed that we should address:

Other files still use the removed custom properties

Most of the removed :root properties were duplicates of real V2 tokens (--goa-color-text-secondary, --goa-space-*, etc.) so those will keep working fine. But a few were not real V2 tokens, and other files still reference them:

ExampleCard.astro uses --goa-color-border, --goa-color-background-light, --goa-color-brand, --goa-radius-s/m
ComponentSandbox.tsx uses --goa-color-border, --goa-color-brand, --goa-radius-m (these have inline fallbacks so they won't break visually, but still worth migrating)
GuidanceGrid.astro uses --goa-color-background-light, --goa-radius-m

We should either keep those properties in :root for now, or update those files too. We can create a separate issue for migrating them if we want to keep this PR focused.

Inline code loses its background

code background went from --goa-color-background-light (#f5f5f5, light grey) to --goa-color-greyscale-white (#fff). Since the page background is also white, inline code blocks won't have any visual distinction. Maybe something like --goa-color-greyscale-100 to keep the contrast?

Mobile header hardcoded values

font-size: 18px, margin-left: -8px, background: white. Since we're already in this file, these should move to tokens too.

bdfranck · 2026-03-05T16:26:37Z

@twjeffery I've amended my commit with changes that address you above three comments.

vanessatran-ddi

I have some comments about using a token instead of hard-code values

twjeffery

@bdfranck Looks good, thanks for migrating the other files too. All the token names check out.

Co-Authored-By: Copilot <175728472+Copilot@users.noreply.github.com>

bdfranck · 2026-03-09T22:20:42Z

@vanessatran-ddi I've replaced the instances you mentioned and did a find and replace of similar ones.

Co-authored-by: bdfranck <1479091+bdfranck@users.noreply.github.com> Co-authored-by: Vanessa Tran <vanessa.m.tran@gov.ab.ca> Co-authored-by: GitHub Copilot <copilot@github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Benji Franck <benjamin.franck@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Thomas Jeffery <thomaswjeffery@gmail.com> Co-authored-by: Eric Hoff <eric@highfructose.ca> Co-authored-by: Dustin Nielsen <nielsen.dustin@gmail.com> Co-authored-by: Thomas Jeffery <82968683+twjeffery@users.noreply.github.com> Co-authored-by: mxsoco <miguel.soco@gov.ab.ca> fix(#3399): correct V2 checkbox spacing behavior fix(#3493): show tooltip on hover for Work Side Menu Group fix(#3455,#3450): Updated top and bottom positioning for Popover fix(#3273): keep Side Menu Group open Closes #2893 fix the PushDrawer open prop so the docs site works (#3542) fix: use Node 22 for Netlify deploys (#3543) fix(#3397): use existing design tokens in Astro docs (#3515) fix(#3581): use dynamic content collection for nav instead of hardcoded list Closes #3581 fix(#3498): modified padding and border on radio group. fix(#3497): fixed how the Angular Calendar and DatePicker components pass Dates to the Svelte Calendar component fix(#3497): remove build dependency on tests using library code fix(#3607): update the interaction area to just around the checkbox or radio input and label fix(#3505): Fix icon click and focus on Link fix(#3673): docs site bug sweep - push drawer filters, side menu, multi-sort, responsive grids Fixes workaround (chevrons hidden after #3595) fix(#3540): add manual positioning to Popover when the browser does not support CSS anchor positioning fix(#3614): add padding for all IconSizes fix(#3411): audit and improve all component configuration examples fix(#3685): adjust width of "reveal" slot for checkbox and radio buttons fix(#3685): remove width calculation from Radio Item

chrisolsen · 2026-03-31T23:23:11Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:31:35Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:40:00Z

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:48:39Z

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:32:05Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:40:28Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:48:51Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

bdfranck requested review from twjeffery and vanessatran-ddi March 3, 2026 22:24

bdfranck linked an issue Mar 3, 2026 that may be closed by this pull request

V2 container body text styles not showing V2 text styling in Astro doc site #3397

Closed

bdfranck marked this pull request as ready for review March 3, 2026 22:25

bdfranck requested a review from Copilot March 3, 2026 22:25

Copilot started reviewing on behalf of bdfranck March 3, 2026 22:25 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

Comment thread docs/src/layouts/BaseLayout.astro Outdated

Comment thread docs/src/layouts/BaseLayout.astro Outdated

Comment thread docs/src/layouts/BaseLayout.astro

bdfranck marked this pull request as draft March 4, 2026 15:18

bdfranck force-pushed the bdfranck/3397 branch from 37ba2f8 to 57d064f Compare March 4, 2026 15:30

bdfranck marked this pull request as ready for review March 4, 2026 15:34

This comment was marked as off-topic.

Sign in to view

twjeffery self-requested a review March 4, 2026 15:56

twjeffery reviewed Mar 4, 2026

View reviewed changes

bdfranck marked this pull request as draft March 4, 2026 18:54

bdfranck changed the title ~~fix(#3397): use existing design tokens in Astro base layout~~ fix(#3397): use existing design tokens in Astro Mar 4, 2026

bdfranck changed the title ~~fix(#3397): use existing design tokens in Astro~~ fix(#3397): use existing design tokens in Astro docs Mar 4, 2026

bdfranck force-pushed the bdfranck/3397 branch 3 times, most recently from 1a76c0c to a3b32d1 Compare March 5, 2026 16:24

bdfranck marked this pull request as ready for review March 5, 2026 16:26

bdfranck requested a review from twjeffery March 5, 2026 16:26

vanessatran-ddi reviewed Mar 9, 2026

View reviewed changes

twjeffery approved these changes Mar 9, 2026

View reviewed changes

bdfranck force-pushed the bdfranck/3397 branch 2 times, most recently from 09641d2 to 47b2cb3 Compare March 9, 2026 21:56

fix(#3397): use existing design tokens in Astro docs

9ffaf97

Co-Authored-By: Copilot <175728472+Copilot@users.noreply.github.com>

bdfranck force-pushed the bdfranck/3397 branch from 47b2cb3 to 9ffaf97 Compare March 9, 2026 22:17

bdfranck requested a review from vanessatran-ddi March 9, 2026 22:20

vanessatran-ddi approved these changes Mar 9, 2026

View reviewed changes

chrisolsen merged commit 480661b into dev Mar 10, 2026
8 checks passed

chrisolsen deleted the bdfranck/3397 branch March 10, 2026 16:52

chrisolsen added the released on @next label Mar 31, 2026

chrisolsen added the released Released into production. label Apr 1, 2026

Conversation

bdfranck commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

Steps needed to test

Uh oh!

netlify Bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for goa-design-2 ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as off-topic.

Uh oh!

twjeffery left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bdfranck commented Mar 5, 2026

Uh oh!

vanessatran-ddi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

twjeffery left a comment

Choose a reason for hiding this comment

Uh oh!

bdfranck commented Mar 9, 2026

Uh oh!

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bdfranck commented Mar 3, 2026 •

edited

Loading

netlify Bot commented Mar 3, 2026 •

edited

Loading

twjeffery left a comment •

edited

Loading