feat(foundations): added new pages by petrinetang · Pull Request #537 · GovTechSG/sgds

petrinetang · 2026-04-17T16:09:29Z

Description

Please include a summary of the change and where applicable, the issue you are addressing. Please also include relevant motivation and context. List any dependencies that are required for this change. If necessary, please update documentation (found under the collections folder) as well.

Fixes # (issue number)

Type of change

Please check on the checkbox for those that are relevant (put x between the brackets)

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update
Code enhancement and update (non-breaking change)
Security patch

How Has This Been Tested?

Please describe or list the test cases that you ran to verify your changes, and provide instructions so we can reproduce them.

th-94 · 2026-04-30T03:24:05Z

do we need these icons? Are they available in sgds icon or we need to add it into sgds icon instead?

th-94 · 2026-04-30T03:31:34Z

              :key="color.name"
              :class="[
-                'our-colours-brand-card sgds:flex sgds:flex-col sgds:justify-between sgds:rounded-[var(--sgds-border-radius-2-xl)] sgds:min-h-[var(--sgds-dimension-288)] sgds:max-md:min-h-[15rem] sgds:p-[var(--sgds-padding-2-xl)] sgds:overflow-hidden',
+                'sgds-col-4 sgds-col-sm-4 sgds-col-lg-4 our-colours-brand-card sgds:flex sgds:flex-col sgds:justify-between sgds:rounded-[var(--sgds-border-radius-2-xl)] sgds:min-h-[var(--sgds-dimension-288)] sgds:max-md:min-h-[15rem] sgds:p-[var(--sgds-padding-2-xl)] sgds:overflow-hidden',


we should use available css utility classes, for example sgds:p-[var(--sgds-padding-2-xl)] should use sgds:p-2-xl and sgds:rounded-[var(--sgds-border-radius-2-xl)] should use sgds:rounded-2-xl instead and so on.

…icon library Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

New foundation page mirroring the Storybook theming guide so designers and developers have a single entry point for customising SGDS tokens. CopyCommand gains multi-line support so CSS override snippets can be copied in one click. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…and playgrounds - Add mobile-responsive SegmentedControl with overflow arrows and sliding indicator, used by configuration and structure demos - Add AlertPlayground and ComponentPlayground for interactive exploration of props - Add ThemeControls and scoped theming composable for per-page theme preview - Consolidate AccordionV2 page into shared component-docs structure - Refresh component data (badge variants/outlined/dismissible/icon sections, card/combo-box/table content) and related section components - Add sgds-writing skill for docs copy guidance Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Replace `sgds-tab-group` with custom SegmentedControl across all foundation token pages (Spacing, Border, FontSize, Icon, Breakpoint, Typography token detail, Elevation, Colour palette). - Add a third "SGDS tailwind token" view alongside CSS variable / Figma token, with per-page mapping helpers that translate each token to its utility class (e.g. `--sgds-text-gap-md` → `sgds:gap-text-md`, `--sgds-bg-default` → `sgds:bg-default`, breakpoints surface as responsive prefixes, icon size shows the `size=""` attribute). - Spacing tokens: surface primitive resolution per breakpoint via per-cell tooltips (e.g. mobile 12px → `--sgds-spacer-4`); switch spacer-scale visual to neutral-surface-default for a more visible bar. - Border tokens: add a Form radius sub-table on the radius page and match the utilities-page bordered transparent preview boxes; carry Usage column with copy from the radius utilities page. - Elevation: remove the now-redundant edge/surface elevation utilities pages and ElevationUtilitiesPage component; remove the matching sidebar group. - Storybook header links: gate behind a token-only allowlist so they appear on token pages only and are hidden from principles pages. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Replace prose-only intro with two anatomy diagrams: hex→primitive name pill (red-400, green-500, blue-600) and a Colour/Scale callout pill that uses circle anchors to point at the word and number inside the token name. Coloured strokes match the segments they point to, with theme-aware overrides for night mode. - Reframe "When to use primitives" to lead with the recommendation against direct use, link out to semantic colour tokens, then list valid use cases (custom brand palette via the colour generator, Figma exploration, defining new semantic tokens). - Move the shade-scale guide under the table heading and add a new "Colour contrast ratios" subsection that explains the WCAG and APCA numbers behind the Contrast column, plus why the ratios matter. - Heading hierarchy aligned to SGDS: h3 = heading-md, h4 = subtitle-md, h5 = subtitle-md for family table titles. CodeToken stays at default size; only the pill diagrams scale up.

Flatten the Colour section of the Foundations sidebar from a nested "Colour tokens" + "Colour utilities" group into five sibling pages: Colour principles, Our colour, Product colour, Primitive colour, Semantic colour, System palette. - Add new pages: our-colour, semantic-colour, system-palette, with their corresponding renderer (SystemPalettePage.vue) and data (system-palette.ts). Includes a semantic theme-resolution image asset. - Consolidate the seven per-property semantic pages (background, border, foreground, form, surface, text + product) into a single semantic-colour.md page. - Remove the three duplicated colour utility pages (background-colour, border-colour, text-colour) and the ColourUtilitiesPage.vue renderer. - Update foundations-sidebar.ts, foundation-docs.ts (token page paths), and search-index.ts to reflect the new layout. - Drop OurColoursPage from ColourPrinciplesPage now that it lives on its own dedicated page.

…agram - Rewrite the "How semantic colour tokens work" intro in plain language that picks up where the primitive page leaves off, replacing CSS-jargon references like "CSS custom properties" and "theme layer" with concrete contrast: primitive names a hex value, semantic names the job that hex value performs. - Add a Raw hex → Primitive → Semantic mapping diagram that uses the same pill+arrow visual as the primitive page, with two themed primitive rows (day blue-600 + night blue-400) converging via curved bezier into a single arrow that lands on --sgds-link-color-default. The semantic pill spans both rows and uses a split swatch to show the dual mapping. - Wire the modifier segment colour to the same theme-aware CSS variable used by the lines and dots, then switch the modifier accent from green to blue (blue-600 day / blue-300 night) so the "default" word stays readable on both light and dark surfaces. - Add a max-width 640px media query that scales the cp-name-anatomy pill, swatch, and callout positions down for mobile, plus white-space: nowrap on the pill so the token text never wraps mid-word. - Tweak the Storybook header link on this page to open in a new tab without rendering the external-link indicator (PageHeader change), and route the page's Storybook link to the foundation-theming docs. - Update page description to match the new intro framing.

- Adds linkable "Custom colour" anchor inside the GovTech tab paragraph that switches tabs and scrolls to the heading - Adds h3 + BETA badge + anchor link header inside the Custom colour tab - Fixes colour generator: activeProductRows now resolves to the custom palette when the page renders standalone via section="brand-custom" - Removes redundant empty wrapper that added 32px to the gap above the GovTech blue colour table - Removes negative top margin so the gap below the page header matches the semantic colour page - Removes the "When to use brand colours" section Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…age when clicked

petrinetang requested a review from th-94 April 17, 2026 16:09

th-94 reviewed Apr 30, 2026

View reviewed changes

th-94 requested changes Apr 30, 2026

View reviewed changes

petrinetang and others added 26 commits May 8, 2026 16:21

feat(foundations): added new pages

f7010d3

docs(icons): update icons svg

1abed06

feat(iconography): add import section, size select and style tabs to …

fc4d804

…icon library Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs: update page demos and copy interactions

34c2681

feat(components): component design tab update

3cb8db0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

component usage format update

a4b7475

design structure format update

a40d493

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

accessibility tab format update

4c985ac

accessibility content update

e199a88

accessibility content update

02c2b20

Refine breadcrumb docs and structure tables

6db9fe7

Refine button structure token docs

5e541f8

Polish component docs interactions

e21d12a

Update component docs and mobile sidenav

bcb3e73

Update component docs structure demos

559214d

Add templates and blocks preview pages

711015f

Refine design token docs

ee1be69

Refine colour foundation pages

0410639

Refine elevation foundation pages

f394bec

petrinetang and others added 9 commits May 8, 2026 16:26

Update layer foundation pages

46cc091

Update iconography foundation pages

0680054

Refine border foundation pages

ae0d8c0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Refine layout foundation pages

335f48c

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Refine spacing, typography, and other foundation pages

51a0fda

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Update spacing token tables

c9525eb

Update typography foundation docs

019ba3e

Clean up foundation utility styling

667c62c

chore: update SGDS skills and token diagram

fad6990

th-94 force-pushed the petrine/fix-foundations branch from ce01464 to fad6990 Compare May 8, 2026 08:26

petrinetang and others added 2 commits May 12, 2026 10:18

Update foundation overview thumbnails

0d031b0

fix(docs layout): fix for foundation items not navigating to detail p…

0a61043

…age when clicked

th-94 approved these changes May 12, 2026

View reviewed changes

th-94 merged commit 18fee72 into v3 May 12, 2026
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(foundations): added new pages#537

feat(foundations): added new pages#537
th-94 merged 37 commits into
v3from
petrine/fix-foundations

petrinetang commented Apr 17, 2026

Uh oh!

th-94 Apr 30, 2026

Uh oh!

th-94 Apr 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

petrinetang commented Apr 17, 2026

Description

Type of change

How Has This Been Tested?

Uh oh!

th-94 Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

th-94 Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants