Postcard 0.4.0

Postcard promised 7:1 (AAA) contrast for all text; moving the Parks Tour blog onto it found three places that fell short.

Added

• --pc-primary, --pc-on-primary and --pc-primary-deep: the colours of primary buttons and the skip link. In Paper the
  terracotta deepens to brick (#8f3b1c) so the white label reaches 7.47:1; Dusk 8.31:1; Night 15.97:1.

Changed

• pc-button--primary and pc-skip-link use the primary tokens, so they look darker than in 0.3. --pc-accent stays as the
  colour for shapes, icons and large type.
• --pc-muted is a shade darker (#414e55) so it reaches 7:1 on --pc-sunk too.
• Solid stamps and tiles cap their colour's lightness lower, so the small "Day" caption reaches 7:1.
• npm run check holds primary buttons and muted-on-sunk to AAA, and the axe tests now include the AAA contrast rule.

Install

npm install @jonibach/postcard@~0.4.0

Postcard 0.3.1

Fixed

• The six icons added in 0.3.0 (scissors, book, link, sparkle, reset, arrow-up) had landed inside the sprite's
  comment, so they drew nothing. They're real symbols now, and a new test parses the sprite and checks every icon draws.
• The style guide lists icons by parsing the sprite, not by searching its text.

Added

• @jonibach/postcard/postcard.min.css, an import path ending in .css that TypeScript accepts. The README and porting
  guide use it.

Install

npm install @jonibach/postcard@~0.3.1

Postcard 0.3.0

What moving the Parks Tour app onto Postcard needed.

Added

• pc-pills: a wrapping group of toggle pills for settings with several short options (the chosen one in ink; hologram
  colours in night).
• pc-icon-button--glass, a frosted round button for floating over a map or scene, and a pressed state for icon buttons
  (aria-pressed="true").
• Icons: scissors, book, link, sparkle, reset and arrow-up (48 in all).

Install

npm install @jonibach/postcard@~0.3.0

CDN: https://cdn.jsdelivr.net/npm/@jonibach/postcard@0.3/dist/postcard.css

Postcard 0.2.1

Changed

• Published to npm as @jonibach/postcard, which also puts it on the jsDelivr and unpkg CDNs. Install with
  npm install @jonibach/postcard; the GitHub install still works but is no longer the recommended way.
• The package ships built: dist/ is made just before publishing, not on install, so installs don't need the test tools.
• New export @jonibach/postcard/min.css. CSS files are marked as side effects, so bundlers keep the imports.
• Releases publish from GitHub Actions with provenance, through npm trusted publishing.

Install

npm install @jonibach/postcard

Or from a CDN: https://cdn.jsdelivr.net/npm/@jonibach/postcard@0.2/dist/postcard.css. Or download postcard-0.2.1.zip below.

npm: https://www.npmjs.com/package/@jonibach/postcard · Style guide: https://jonibach.github.io/postcard-styleguide/

Postcard 0.2.0

Filling the gaps compared with Bootstrap and the GOV.UK Design System.

Added

• Icons: 42 line icons in icons/icons.svg, drawn like the mark, with pc-icon and pc-icon-disc. npm run build also writes
  each icon to dist/icons/.

• Skip link: pc-skip-link.

• Error summary: pc-error-summary, with the errorSummary() helper to focus it and move into each field.

• Tables: pc-table and pc-table-wrap.

• Show and hide: pc-details and pc-accordion on native <details>, with an accordion() helper for "Show all".

• Wayfinding: pc-breadcrumbs, pc-back-link, pc-pagination and pc-pages.

• Keyboard behaviour: tabs() (roving focus, arrow keys, panels) and menuButton() (arrow keys, Esc, click outside).

• Windows Contrast themes: css/forced-colors.css.

• Summaries: pc-summary (card and inline) and the pc-confirmation panel.

• Form inputs: pc-fieldset with legend and hint, pc-choices with per-option hints, character count (pc-count and
  charCount()), file upload (pc-file, pc-dropzone) and a three-box date (pc-date).

• Photos: pc-figure, pc-figure--snapshot, pc-gallery and a lightbox() viewer.

• Site footer: pc-footer.

• Tokens: breakpoints (--pc-bp-*) and chart colours (--pc-chart-1–6, --pc-seq-1–5, --pc-div-1–5), all checked
  for 3:1 on paper; a token() helper reads them for chart libraries.

• Print styles: css/print.css.

• Guidance and copyable code for every section of the style guide, taken from the live examples.

• A content guide: docs/content.md.

• Tests: behaviour and axe accessibility tests (WCAG 2.2 AA, Paper and Dusk, with the dialog and lightbox open), and
  screenshot tests of every section; CI runs the check, the build and the tests.

Changed

• Solid stamps and tiles darken any colour too light for their white number (relative colour, oklch(from …)), so they
  reach 4.5:1 on every day colour.
• The bottom sheet is display: none when hidden and slides up when shown.
• The style guide page numbers its sections automatically and gains Icons, Tables, Show and hide, Summaries, Photos, Charts
  and Accessibility sections.

Install

npm install github:JoniBach/postcard-styleguide#v0.2.0

Or download postcard-0.2.0.zip below: the bundled CSS, fonts, icons, helpers and tokens.json, ready to link.

Style guide: https://jonibach.github.io/postcard-styleguide/