Skip to content

DSE-383 :: Foundation styles showcase #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
diogo-filipe-costa wants to merge 9 commits into
base: main
Choose a base branch
from
Open

DSE-383 :: Foundation styles showcase #180

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3a09873
feat(site): add foundation showcase infrastructure
diogo-filipe-costa Mar 17, 2026
a3c22fb
feat(site): refresh foundation styles docs
diogo-filipe-costa Mar 17, 2026
bd3c71e
merge(main): sync DSE-383 foundation showcase with 4.5.0 tokens
diogo-filipe-costa Mar 26, 2026
bbce6c9
docs(site): refresh focus-state guidance
diogo-filipe-costa Mar 26, 2026
0f5efb9
feat(site): polish foundation styles showcase
diogo-filipe-costa Mar 26, 2026
b860b71
fix(site): correct foundation colour token reference
diogo-filipe-costa Mar 27, 2026
c35178b
docs(site): polish focus and icon showcase guidance
diogo-filipe-costa Mar 27, 2026
1f2edcc
fix(site): tidy foundation layout references
diogo-filipe-costa Mar 27, 2026
5eac8e7
fix(site): satisfy focus example lint
diogo-filipe-costa Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
960 changes: 960 additions & 0 deletions packages/site/scripts/foundation-styles-data.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/site/styles/app/_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@import 'example-callout';
@import 'featured-list';
@import 'footer';
@import 'foundation-showcase';
@import 'health-az';
@import 'homepage';
@import 'images';
Expand Down
1 change: 1 addition & 0 deletions packages/site/styles/app/_colour-swatch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
}

.app-colour-list__column--name code,
.app-colour-list__column--source code,
.app-colour-list__column--colour code {
white-space: nowrap;
}
Expand Down
122 changes: 122 additions & 0 deletions packages/site/styles/app/_foundation-showcase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/* ==========================================================================
#FOUNDATION SHOWCASE
========================================================================== */

.app-foundation-showcase__table-wrap {
margin-bottom: ofh-spacing(6);
overflow-x: auto;
}

.app-foundation-showcase__caption {
margin-bottom: ofh-spacing(3);
}

.app-foundation-showcase__table {
min-width: 680px;

code {
white-space: nowrap;
}
}

.app-foundation-showcase__row-heading {
min-width: 140px;
}

.app-foundation-showcase__preview-cell {
min-width: 240px;
}

.app-foundation-showcase__preview {
display: block;
margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

.app-foundation-showcase__preview--html > * {
margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

.app-foundation-showcase__preview--icon {
align-items: center;
display: inline-flex;
}

.app-foundation-showcase__inline-list {
display: inline-block;
padding-left: 20px;
}

.app-foundation-showcase__spacing-bars {
align-items: flex-end;
display: flex;
gap: ofh-spacing(2);
min-height: 72px;
}

.app-foundation-showcase__spacing-bar {
border-radius: 999px;
display: inline-block;
min-height: 2px;
width: 14px;
}

.app-foundation-showcase__spacing-bar--mobile {
background-color: $ofh-color-brand-blue-royal-3-main;
}

.app-foundation-showcase__spacing-bar--tablet {
background-color: $ofh-color-brand-blue-aqua-2;
}

.app-foundation-showcase__spacing-bar--desktop {
background-color: $ofh-color-brand-green-teal-2;
}

.app-foundation-showcase__width-track {
background-color: $ofh-color-background-neutral-grey;
border-radius: $ofh-radius-24;
max-width: 320px;
min-width: 180px;
overflow: hidden;
}

.app-foundation-showcase__width-fill {
background: linear-gradient(
90deg,
$ofh-color-brand-blue-royal-2 0%,
$ofh-color-brand-blue-aqua-2 100%
);
display: block;
height: ofh-spacing(5);
}

.app-foundation-showcase__colour-group + .app-foundation-showcase__colour-group {
margin-top: ofh-spacing(7);
}

.app-foundation-showcase__cards {
display: grid;
gap: ofh-spacing(5);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
list-style: none;
margin: 0;
padding: 0;
}

.app-foundation-showcase__card {
background-color: $ofh-color-background-neutral-grey;
border: 1px solid $ofh-color-border-primary;
border-radius: $ofh-radius-16;
height: 100%;
padding: ofh-spacing(5);
}

.app-foundation-showcase__card-title {
margin-bottom: ofh-spacing(3);
}

.app-foundation-showcase__card-summary {
margin-bottom: 0;
}
7 changes: 7 additions & 0 deletions packages/site/views/_data/foundationStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const {
buildFoundationStyles,
} = require('../../scripts/foundation-styles-data');

module.exports = function foundationStylesData() {
return buildFoundationStyles();
};
28 changes: 28 additions & 0 deletions packages/site/views/design-system/styles/_partials/colour-group.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<section class="app-foundation-showcase__colour-group">
<h3 class="ofh-heading-m ofh-u-margin-bottom-3">{{ group.title }}</h3>
<table class="app-colour-list" summary="{{ group.title }} colour tokens">
<thead class="ofh-u-visually-hidden">
<tr>
<th scope="col">Token</th>
<th scope="col">Source token</th>
<th scope="col">Hex value</th>
</tr>
</thead>
<tbody>
{% for item in group.items %}
<tr class="app-colour-list__row">
<th class="app-colour-list__column app-colour-list__column--name" scope="row">
<span class="app-colour-list__swatch{% if item.useBorder %} app-colour-list__swatch--border{% endif %}" style="background-color:{{ item.hex }}"></span>
<code>{{ item.token }}</code>
</th>
<td class="app-colour-list__column app-colour-list__column--source">
<code>{{ item.sourceToken }}</code>
</td>
<td class="app-colour-list__column app-colour-list__column--colour">
<code>{{ item.hex }}</code>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</section>
77 changes: 77 additions & 0 deletions packages/site/views/design-system/styles/_partials/showcase-matrix.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{% from "icon/macro.njk" import icon %}

<div class="app-foundation-showcase__table-wrap">
<table class="ofh-table app-foundation-showcase__table">
{% if caption %}
<caption class="ofh-table__caption app-foundation-showcase__caption">{{ caption }}</caption>
{% endif %}
<thead class="ofh-table__head">
<tr class="ofh-table__row">
<th class="ofh-table__header" scope="col">Style</th>
<th class="ofh-table__header" scope="col">Preview</th>
{% if showClassName %}
<th class="ofh-table__header" scope="col">Class</th>
{% endif %}
{% if showToken %}
<th class="ofh-table__header" scope="col">Token</th>
{% endif %}
<th class="ofh-table__header" scope="col">Mobile</th>
<th class="ofh-table__header" scope="col">Tablet</th>
<th class="ofh-table__header" scope="col">Desktop</th>
{% if showLineHeight %}
<th class="ofh-table__header" scope="col">Line height</th>
{% endif %}
{% if showFixedClass %}
<th class="ofh-table__header" scope="col">Fixed class</th>
{% endif %}
{% if showResponsiveMixin %}
<th class="ofh-table__header" scope="col">Responsive mixin</th>
{% endif %}
{% if showNotes %}
<th class="ofh-table__header" scope="col">Notes</th>
{% endif %}
</tr>
</thead>
<tbody class="ofh-table__body">
{% for row in rows %}
<tr class="ofh-table__row">
<th class="ofh-table__header app-foundation-showcase__row-heading" scope="row">{{ row.label }}</th>
<td class="ofh-table__cell app-foundation-showcase__preview-cell">
{% if row.previewHtml %}
<div class="app-foundation-showcase__preview app-foundation-showcase__preview--html">{{ row.previewHtml | safe }}</div>
{% elseif row.iconName %}
<div class="app-foundation-showcase__preview app-foundation-showcase__preview--icon">
{{ icon({ "name": row.iconName, "size": row.size, "title": row.iconName }) }}
</div>
{% else %}
<span class="app-foundation-showcase__preview{% if row.className %} {{ row.className }}{% endif %}">
{{ row.previewText }}
</span>
{% endif %}
</td>
{% if showClassName %}
<td class="ofh-table__cell"><code>{{ row.className }}</code></td>
{% endif %}
{% if showToken %}
<td class="ofh-table__cell"><code>{{ row.token }}</code></td>
{% endif %}
<td class="ofh-table__cell">{{ row.mobile }}</td>
<td class="ofh-table__cell">{{ row.tablet }}</td>
<td class="ofh-table__cell">{{ row.desktop }}</td>
{% if showLineHeight %}
<td class="ofh-table__cell">{{ row.lineHeight }}</td>
{% endif %}
{% if showFixedClass %}
<td class="ofh-table__cell"><code>{{ row.fixedClass }}</code></td>
{% endif %}
{% if showResponsiveMixin %}
<td class="ofh-table__cell"><code>{{ row.responsiveMixin }}</code></td>
{% endif %}
{% if showNotes %}
<td class="ofh-table__cell">{{ row.notes }}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
57 changes: 57 additions & 0 deletions packages/site/views/design-system/styles/_partials/showcase-scale.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<div class="app-foundation-showcase__table-wrap">
<table class="ofh-table app-foundation-showcase__table">
{% if caption %}
<caption class="ofh-table__caption app-foundation-showcase__caption">{{ caption }}</caption>
{% endif %}
<thead class="ofh-table__head">
<tr class="ofh-table__row">
{% if variant == "spacing" %}
<th class="ofh-table__header" scope="col">Step</th>
<th class="ofh-table__header" scope="col">Responsive preview</th>
<th class="ofh-table__header" scope="col">Mobile</th>
<th class="ofh-table__header" scope="col">Tablet</th>
<th class="ofh-table__header" scope="col">Desktop</th>
<th class="ofh-table__header" scope="col">Static helper</th>
<th class="ofh-table__header" scope="col">Utility example</th>
{% else %}
<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 %}
</tr>
</thead>
<tbody class="ofh-table__body">
{% for item in items %}
<tr class="ofh-table__row">
{% if variant == "spacing" %}
<th class="ofh-table__header app-foundation-showcase__row-heading" scope="row">{{ item.step }}</th>
<td class="ofh-table__cell">
<div class="app-foundation-showcase__spacing-bars" aria-hidden="true">
<span class="app-foundation-showcase__spacing-bar app-foundation-showcase__spacing-bar--mobile" style="height: {{ item.mobile }};"></span>
<span class="app-foundation-showcase__spacing-bar app-foundation-showcase__spacing-bar--tablet" style="height: {{ item.tablet }};"></span>
<span class="app-foundation-showcase__spacing-bar app-foundation-showcase__spacing-bar--desktop" style="height: {{ item.desktop }};"></span>
</div>
</td>
<td class="ofh-table__cell">{{ item.mobile }}</td>
<td class="ofh-table__cell">{{ item.tablet }}</td>
<td class="ofh-table__cell">{{ item.desktop }}</td>
<td class="ofh-table__cell">{{ item.staticLegacy }}</td>
<td class="ofh-table__cell"><code>{{ item.utilityExample }}</code></td>
{% else %}
<th class="ofh-table__header app-foundation-showcase__row-heading" scope="row">{{ item.label }}</th>
<td class="ofh-table__cell">
<div class="app-foundation-showcase__width-track" aria-hidden="true">
<span class="app-foundation-showcase__width-fill" style="width: {{ item.visualPercent }}%;"></span>
</div>
</td>
<td class="ofh-table__cell">{{ item.value }}</td>
<td class="ofh-table__cell"><code>{{ item.className }}</code></td>
<td class="ofh-table__cell">{{ item.note }}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
Loading
Loading