DSE-383 :: Foundation styles showcase#180
Draft
diogo-filipe-costa wants to merge 2 commits intomainfrom
Draft
Conversation
Refs: DSE-383 Add a shared Eleventy foundation styles data source backed by targeted parsing of the toolkit SCSS tokens and helper files. Introduce reusable showcase partials for matrices, scales, and colour groups so the foundation docs pages can render from a consistent structure. Add the supporting site styles for the showcase patterns and extend the colour swatch styling for generated token metadata.
Refs: DSE-383 Rebuild the foundation styles landing page plus the typography, spacing, layout, icons, and colour docs around the shared showcase patterns. Replace duplicated handwritten values with token-derived references where practical while keeping the existing editorial guidance and design examples in place. Update the typography size override example so it matches the utility classes generated by the current toolkit source.
✅ Deploy Preview for ofh-design-system-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Updates the Design System “Foundation styles” documentation pages to showcase typography, spacing, layout, icon sizing, and colour tokens using values derived directly from the toolkit SCSS sources (to keep docs aligned with the toolkit as tokens evolve).
Changes:
- Introduces a
foundationStylesEleventy global data source built from parsing toolkit SCSS tokens. - Reworks foundation style pages (typography/spacing/layout/icons/colour) to render responsive matrices/scales from token-derived data.
- Adds reusable Nunjucks partials and new SCSS to support the “foundation showcase” tables/cards UI.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/site/views/design-system/styles/typography/sizes/index.njk | Updates typography size utilities list to named responsive tokens. |
| packages/site/views/design-system/styles/typography/index.njk | Reworks typography docs to render a responsive typography matrix and token-derived values. |
| packages/site/views/design-system/styles/spacing/index.njk | Replaces hardcoded spacing table with token-derived responsive scale showcase. |
| packages/site/views/design-system/styles/layout/index.njk | Adds breakpoint/container/grid showcase tables driven by toolkit token data. |
| packages/site/views/design-system/styles/index.njk | Updates Foundation styles landing page copy and adds token-driven navigation cards. |
| packages/site/views/design-system/styles/icons/index.njk | Adds responsive icon size behaviour section with token-driven matrix. |
| packages/site/views/design-system/styles/colour/index.njk | Replaces large hardcoded colour tables with grouped, token-driven rendering. |
| packages/site/views/design-system/styles/_partials/showcase-scale.njk | New partial for rendering spacing/width scale tables. |
| packages/site/views/design-system/styles/_partials/showcase-matrix.njk | New partial for rendering responsive “matrix” tables (typography/icons). |
| packages/site/views/design-system/styles/_partials/colour-group.njk | New partial for rendering colour token groups. |
| packages/site/views/_data/foundationStyles.js | Adds Eleventy global data hook that exposes foundationStyles. |
| packages/site/styles/app/_foundation-showcase.scss | New styling for foundation showcase tables, previews, and landing cards. |
| packages/site/styles/app/_colour-swatch.scss | Extends swatch table styling for the new “source token” column. |
| packages/site/styles/app/_app.scss | Includes the new foundation showcase SCSS partial. |
| packages/site/scripts/foundation-styles-data.js | Implements SCSS-token parsing and builds the foundationStyles data model. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| <h3>Reading width</h3> | ||
| <p>Lines of text should be no longer than 70 to 80 characters.</p> | ||
| <p class="rich-text">When using the fluid-width container or wider grid columns, wrap text content with <code>.ofh-u-reading-width</code> to apply a maximum width and limit the number of characters per line.</p> | ||
| <p class="rich-text">Use <code>.ofh-u-reading-width</code> to apply a maximum width of {{ foundationStyles.layout.widths[3].value }} to longer blocks of content.</p> |
| <h3>Tablet and mobile-specific grid classes</h3> | ||
| <p>By default, grid columns sizes will go to 100% width of the container on screen sizes below the desktop breakpoint, which is 769px. These utility classes will enforce column widths on all screen sizes.</p> | ||
| <p class="rich-text">To define the column sizes, add the utility class <code>.ofh-u-</code> followed by the width to an existing grid column. For example <code>.ofh-u-one-half</code> will set your column width to be one-half on all screen sizes.</p> | ||
| <p>By default, grid columns go to 100% width of the container on screen sizes below the desktop breakpoint, which is {{ foundationStyles.layout.breakpoints[2].value }}. These utility classes will enforce column widths on all screen sizes.</p> |
|
|
||
| <h3>Tablet-specific grid classes</h3> | ||
| <p>These utility classes will enforce column widths on screen sizes larger than the mobile breakpoint, which is 320px.</p> | ||
| <p>These utility classes will enforce column widths from the tablet breakpoint upwards, which is {{ foundationStyles.layout.breakpoints[1].value }}.</p> |
| min-height: 2px; | ||
| width: 14px; | ||
| } | ||
|
|
Comment on lines
+17
to
+22
| <th class="ofh-table__header" scope="col">Reference</th> | ||
| <th class="ofh-table__header" scope="col">Visual</th> | ||
| <th class="ofh-table__header" scope="col">Value</th> | ||
| <th class="ofh-table__header" scope="col">Class or token</th> | ||
| <th class="ofh-table__header" scope="col">Notes</th> | ||
| {% endif %} |
|
|
||
| <h3>Fixed-width container</h3> | ||
| <p class="rich-text">Use <code>.ofh-width-container</code> for a container with a maximum width of 960px.</p> | ||
| <p class="rich-text">Use <code>.ofh-width-container</code> for a container with a maximum width of {{ foundationStyles.layout.widths[1].value }}.</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR delivers DSE-383 Foundation styles showcase refresh for the docs site.
It rebuilds the foundation styles landing page plus the typography, spacing, layout, icons, and colour docs around a shared data-driven showcase layer so the displayed values stay aligned with the toolkit source of truth.
Release scope in this PR:
site/docschanges only@ourfuturehealth/toolkitversion bump@ourfuturehealth/react-componentsversion bumpTicket: DSE-383
Breaking Changes
Key Changes
1) Shared foundation showcase data layer
packages/site/scripts/foundation-styles-data.jsto build a singlefoundationStylesdata model for Eleventypackages/site/views/_data/foundationStyles.jsso the foundation docs pages can all consume the same generated data2) Reusable showcase templates and styling
packages/site/views/design-system/styles/_partials/packages/site/styles/app/_foundation-showcase.scssand wired it into the site app styles3) Foundation docs page refresh
/design-system/stylesso it works as a real landing page for the foundation section/design-system/styles/typographyto render a token-derived responsive type matrix while keeping the explanatory guidance and design examples in place/design-system/styles/spacingto render the responsive spacing scale and clarify staticofh-spacing()usage vs responsive spacing helpers/design-system/styles/layoutto show generated breakpoint, width, and grid references alongside the existing guidance/design-system/styles/iconsto keep the manifest-driven gallery and add clearer fixed-size vs responsive-size guidance/design-system/styles/colourto replace hardcoded swatches with generated semantic and palette group references while keeping the semantic-vs-core explanation handwrittenValidation
npm testpnpm lintpnpm --filter=site build/design-system/styles/design-system/styles/typography/design-system/styles/spacing/design-system/styles/layout/design-system/styles/icons/design-system/styles/colourReviewer Focus