@dta-au/civictheme-twig 1.13.6 → 1.15.0

package/assets/fonts/arimo/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2026 The Arimo Project Authors (https://github.com/googlefonts/arimo)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/assets/fonts/geist-mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/components/00-base/_variables.base.scss

@@ -209,75 +209,80 @@ $ct-font-base-line-height: $ct-font-base-size !default;
 // override the defaults. This allows CivicTheme to make typography additions
 // without breaking consumer sites.
 $ct-typography: () !default;
+
+// Line heights follow the dga-dl scale: headings 1.25, body/quote 1.5 (labels
+// stay tight as single-line UI text). Letter-spacing is reset to 0 - dga-dl
+// proposes none, and the previous negative px tracking was tuned for Lexend, not
+// the current Arimo, and did not scale with user font-size.
 $ct-typography-default: (
   'display': (
-    'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', -0.03px),
-    'm': ($ct-font-base-size * 3.5, $ct-font-base-line-height * 3.75, 'bold', 'primary', -1px)
+    'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 3.5, $ct-font-base-line-height * 4.375, 'bold', 'primary', 0)
   ),
   // Headings.
   'heading-1': (
-    'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', -0.6px),
-    'm': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.75, 'bold', 'primary', -1px)
+    'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.75, 'bold', 'primary', 0)
   ),
   'heading-2': (
-    'xxs': ($ct-font-base-size * 1.75, $ct-font-base-line-height * 2.25, 'bold', 'primary', -0.5px),
-    'm': ($ct-font-base-size * 2.5, $ct-font-base-line-height * 3, 'bold', 'primary', -0.8px)
+    'xxs': ($ct-font-base-size * 1.75, $ct-font-base-line-height * 2.1875, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 2.5, $ct-font-base-line-height * 3.125, 'bold', 'primary', 0)
   ),
   'heading-3': (
-    'xxs': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 2, 'bold', 'primary', -0.35px),
-    'm': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', -0.6px)
+    'xxs': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 1.875, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 'bold', 'primary', 0)
   ),
   'heading-4': (
-    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'bold', 'primary', -0.25px),
-    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 2, 'bold', 'primary', -0.4px)
+    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5625, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 1.875, 'bold', 'primary', 0)
   ),
   'heading-5': (
-    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.375, 'bold', 'primary', 0),
-    'm': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'bold', 'primary', -0.2px)
+    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'bold', 'primary', 0),
+    'm': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5625, 'bold', 'primary', 0)
   ),
-  'heading-6': ($ct-font-base-size, $ct-font-base-line-height * 1.625, 'bold', 'primary', 0),
+  'heading-6': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'bold', 'primary', 0),
   // Text.
   'text-extra-large': (
-    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'regular', 'primary', -0.1px),
-    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0)
+    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.875, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 2.25, 'regular', 'primary', 0)
   ),
   'text-large': (
-    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.75, 'regular', 'primary', 0),
-    'm': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 2.125, 'regular', 'primary', 0)
+    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.6875, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.875, 'regular', 'primary', 0)
   ),
   'text-regular': (
-    'xxs': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0),
-    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.75, 'regular', 'primary', 0)
+    'xxs': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.3125, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0)
   ),
   'text-small': (
-    'xxs': ($ct-font-base-size * 0.75, $ct-font-base-line-height * 1.25, 'regular', 'primary', 0),
-    'm': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.5, 'regular', 'primary', 0),
+    'xxs': ($ct-font-base-size * 0.75, $ct-font-base-line-height * 1.125, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.3125, 'regular', 'primary', 0),
   ),
   // Labels.
   'label-extra-large': (
-    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'semibold', 'primary', -0.1px),
+    'xxs': ($ct-font-base-size * 1.25, $ct-font-base-line-height * 1.5, 'semibold', 'primary', 0),
     'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 1.5, 'semibold', 'primary', 0)
   ),
   'label-large': (
-    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.5, 'semibold', 'primary', -0.1px),
+    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.5, 'semibold', 'primary', 0),
     'm': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.5, 'semibold', 'primary', 0)
   ),
   'label-regular': (
-    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'semibold', 'primary', -0.1px),
-    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'semibold', 'primary', -0.1px)
+    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'semibold', 'primary', 0),
+    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'semibold', 'primary', 0)
   ),
   'label-small': (
-    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'regular', 'primary', -0.1px),
-    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'regular', 'primary', -0.1px)
+    'xxs': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size, $ct-font-base-line-height * 1.25, 'regular', 'primary', 0)
   ),
   'label-extra-small': (
-    'xxs': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.25, 'regular', 'primary', -0.1px),
+    'xxs': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.25, 'regular', 'primary', 0),
     'm': ($ct-font-base-size * 0.875, $ct-font-base-line-height * 1.125, 'regular', 'primary', 0)
   ),
   // Special elements.
   'quote': (
-    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.815, 'regular', 'primary', -0.15px),
-    'm': ($ct-font-base-size * 1.5, $ct-font-base-size * 2.5, 'regular', 'primary', -0.35px)
+    'xxs': ($ct-font-base-size * 1.125, $ct-font-base-line-height * 1.6875, 'regular', 'primary', 0),
+    'm': ($ct-font-base-size * 1.5, $ct-font-base-line-height * 2.25, 'regular', 'primary', 0)
   ),
 );
 

package/components/00-base/data-vis/data-vis.mdx

@@ -0,0 +1,41 @@
+{/* Editorial guidance for the data-vis colour palettes. Specimens render from data-vis.stories.js. */}
+
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './data-vis.stories';
+
+<Meta of={Stories} />
+
+# Data visualisation colour
+
+The data-visualisation palette, anchored on the primary navy and shared across charts. Two palettes carry meaning: categorical for distinct, unordered groups, and sequential for ordered data. Colour encodes meaning – reach for these before adding more colours.
+
+## Categorical
+
+Distinct, unordered groups – chart series, named categories. Six fixed, colour-blind-safe colours, navy first.
+
+- **Cap at six.** Past that, adjacent colours stop being tellable apart, and colour-vision deficiency makes it worse.
+- **For more groups**, reduce the categories, colour by a meaningful dimension instead, or lean on labels and position.
+
+Use the CVD simulation to check the set holds up under the three common colour-vision deficiencies.
+
+<Canvas of={Stories.Categorical} />
+
+## Sequential
+
+Ordered data – ranks, confidence tiers, time. A single-hue navy ramp from darkest to lightest, with a pale grey reserved for no-data or suppressed values.
+
+Use sparingly: adjacent steps do not meet contrast on their own. Always pair the ramp with another cue – data labels, patterns, or position. Three values use Dark/Mid/Light; four add Darkest; five use the full ramp.
+
+<Canvas of={Stories.Sequential} />
+
+## Choosing the scheme
+
+A chart's `color_by` is the explicit control over how colour is assigned.
+
+<Canvas of={Stories.ColourScheme} />
+
+## Accessibility
+
+- The categorical set is colour-blind-safe, but colour is never the sole cue – keep labels, legends and position.
+- The sequential ramp is not contrast-safe step-to-step; pair it with data labels or patterns.
+- The CVD toggle on the specimens above simulates deuteranopia, protanopia and tritanopia.

package/components/00-base/data-vis/data-vis.stories.js

@@ -0,0 +1,80 @@
+import Component from './data-vis.stories.twig';
+
+// Specimen data. Values mirror the chart tokens --dga-data-vis-categorical-*
+// (categorical) and --bdga-chart-s* (sequential) in chart.scss. Prose lives in
+// data-vis.mdx; markup in data-vis.stories.twig.
+const CATEGORICAL = [
+  { name: 'Navy', note: 'primary anchor', hex: '#1E3C50', rgb: '30, 60, 80' },
+  { name: 'Turquoise', note: '', hex: '#28A197', rgb: '40, 161, 151' },
+  { name: 'Dark pink', note: '', hex: '#801650', rgb: '128, 22, 80' },
+  { name: 'Orange', note: '', hex: '#F46A25', rgb: '244, 106, 37' },
+  { name: 'Light purple', note: '', hex: '#A285D1', rgb: '162, 133, 209' },
+  { name: 'Dark grey', note: '', hex: '#3D3D3D', rgb: '61, 61, 61' },
+];
+
+const SEQUENTIAL = [
+  { name: 'Darkest', note: '', hex: '#001D33', rgb: '0, 29, 51' },
+  { name: 'Dark', note: '', hex: '#003C61', rgb: '0, 60, 97' },
+  { name: 'Mid', note: '', hex: '#015E8C', rgb: '1, 94, 140' },
+  { name: 'Light', note: '', hex: '#5693BD', rgb: '86, 147, 189' },
+  { name: 'Lightest', note: '', hex: '#AED0E8', rgb: '174, 208, 232' },
+  { name: 'Pale grey', note: 'no data', hex: '#F0EEEE', rgb: '240, 238, 238' },
+];
+
+const COLORBY = [
+  { key: 'single', value: 'Default. One navy; distinguish by axis position, label and filter.' },
+  { key: 'series', value: 'One categorical colour per Y-series (multi-series charts).' },
+  { key: 'category', value: 'One categorical colour per X-position (few categories only).' },
+  { key: 'field name', value: 'Colour by that field: the sequential ramp for ordinal values, categorical otherwise.' },
+];
+
+const CVD_FILTER = {
+  none: '',
+  deutan: 'url(#dv-deutan)',
+  protan: 'url(#dv-protan)',
+  tritan: 'url(#dv-tritan)',
+};
+
+// Render the twig, then wire the CVD toggle (markup stays in twig; this only
+// adds behaviour). A no-op when a specimen has no toggle (e.g. ColourScheme).
+const renderSpecimen = (args) => {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = Component(args);
+  wrap.querySelectorAll('.dv-cvd__btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      wrap.querySelectorAll('.dv-cvd__btn').forEach((b) => {
+        b.setAttribute('aria-pressed', b === btn ? 'true' : 'false');
+      });
+      const filter = CVD_FILTER[btn.dataset.cvd] || '';
+      wrap.querySelectorAll('.dv-chip, .dv-ramp').forEach((el) => {
+        el.style.filter = filter;
+      });
+    });
+  });
+  return wrap;
+};
+
+const meta = {
+  title: 'Base/Data visualisation/Colour',
+  component: Component,
+  // digital.gov.au extension - badged DGA in the sidebar (see manager.js).
+  tags: ['digitalgovau'],
+  parameters: { html: { disable: true } },
+};
+
+export default meta;
+
+export const Categorical = {
+  args: { palette: { categorical: CATEGORICAL } },
+  render: renderSpecimen,
+};
+
+export const Sequential = {
+  args: { palette: { sequential: SEQUENTIAL } },
+  render: renderSpecimen,
+};
+
+export const ColourScheme = {
+  args: { palette: { colorby: COLORBY } },
+  render: renderSpecimen,
+};

package/components/00-base/data-vis/data-vis.stories.scss

@@ -0,0 +1,99 @@
+//
+// Base / Data visualisation / Colour - specimen styles.
+//
+// The palette tables use the design-system .ct-table styling; only the swatch
+// chip, sequential ramp, CVD toggle and a couple of cell helpers (no DS
+// equivalent) are styled here. Editorial prose lives in data-vis.mdx; the
+// color_by reference reuses the summary-list component.
+//
+
+// Secondary-text grey; CivicTheme's light palette has no caption/muted token.
+$ct-dv-muted: #595959;
+
+.dv__filters {
+  position: absolute;
+}
+
+.dv-cvd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ct-spacing(0.5);
+  margin: 0 0 ct-spacing(2);
+}
+
+.dv-cvd__legend {
+  margin-inline-end: ct-spacing(1);
+  color: $ct-dv-muted;
+
+  @include ct-typography('label-regular');
+}
+
+.dv-cvd__btn {
+  padding: ct-spacing(0.5) ct-spacing(1.5);
+  border: ct-particle(0.125) solid ct-color-light('border');
+  border-radius: ct-particle(12.5);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  @include ct-typography('label-regular');
+
+  &[aria-pressed='true'] {
+    border-color: ct-color-light('heading');
+    background: ct-color-light('heading');
+    color: ct-color-light('background');
+  }
+}
+
+// The DS table component themes via runtime --ct-table-light-* tokens that the
+// bare Storybook canvas doesn't provide, so the palette tables are styled here
+// with DS scale functions (canvas-safe, system-consistent values).
+.dv-table {
+  max-width: ct-particle(80);
+  border-collapse: collapse;
+
+  // Match the ct-table typography convention: text-regular body, label-regular
+  // applied to thead (not th) so the UA th bold weight survives as ct renders it.
+  @include ct-typography('text-regular');
+
+  thead {
+    @include ct-typography('label-regular');
+  }
+
+  th,
+  td {
+    padding: ct-spacing(1) ct-spacing(2);
+    border-block-end: ct-particle(0.125) solid ct-color-light('border');
+    text-align: start;
+    vertical-align: middle;
+  }
+}
+
+.dv-note {
+  color: $ct-dv-muted;
+  font-weight: 400;
+}
+
+.dv-mono {
+  font-family: ct-font('mono');
+}
+
+.dv-chip {
+  display: block;
+  width: ct-particle(6);
+  height: ct-particle(3);
+  border: ct-particle(0.125) solid ct-color-light('border');
+  border-radius: ct-particle(0.25);
+  transition: filter 0.15s;
+}
+
+.dv-ramp {
+  height: ct-particle(4);
+  max-width: ct-particle(80);
+  margin: 0 0 ct-spacing(1);
+  border: ct-particle(0.125) solid ct-color-light('border');
+  border-radius: ct-particle(0.5);
+  background: linear-gradient(to right, #001d33, #003c61, #015e8c, #5693bd, #aed0e8, #f0eeee);
+  transition: filter 0.15s;
+}

package/components/00-base/data-vis/data-vis.stories.twig

@@ -0,0 +1,90 @@
+{#
+/**
+ * @file
+ * Story specimens for Base / Data visualisation / Colour.
+ *
+ * Renders the palette specimens only - the categorical and sequential tables
+ * (Colour / Hex / RGB / Example), the sequential ramp, and the color_by
+ * reference via the summary-list component. The palette tables are styled via
+ * .dv-table in the SCSS (the DS table component themes through runtime --ct-*
+ * tokens that the bare Storybook canvas lacks), with the swatch in the Example
+ * cell. Editorial prose lives in data-vis.mdx; the CVD toggle behaviour is
+ * wired in data-vis.stories.js. Sections render conditionally on the data
+ * passed, so this one template backs the Categorical, Sequential and
+ * ColourScheme stories.
+ *
+ * Props:
+ * - palette: [object]
+ *   - categorical: [array] { name, note, hex, rgb }
+ *   - sequential: [array] { name, note, hex, rgb }
+ *   - colorby: [array] { key, value } (passed straight to summary-list)
+ */
+#}
+<div class="dv">
+  {% if palette.categorical is not empty or palette.sequential is not empty %}
+    <svg width="0" height="0" focusable="false" aria-hidden="true" class="dv__filters">
+      <filter id="dv-deutan" color-interpolation-filters="linearRGB"><feColorMatrix type="matrix" values="0.367322 0.860646 -0.227968 0 0  0.280085 0.672501 0.047413 0 0  -0.011820 0.042940 0.968881 0 0  0 0 0 1 0"/></filter>
+      <filter id="dv-protan" color-interpolation-filters="linearRGB"><feColorMatrix type="matrix" values="0.152286 1.052599 -0.204876 0 0  0.114503 0.786281 0.099216 0 0  -0.003882 -0.048116 1.051998 0 0  0 0 0 1 0"/></filter>
+      <filter id="dv-tritan" color-interpolation-filters="linearRGB"><feColorMatrix type="matrix" values="1.255528 -0.076749 -0.178779 0 0  -0.078411 0.930809 0.147602 0 0  0.004733 0.691367 0.303900 0 0  0 0 0 1 0"/></filter>
+    </svg>
+
+    <div class="dv-cvd" role="group" aria-label="Colour vision deficiency simulation">
+      <span class="dv-cvd__legend">CVD simulation</span>
+      <button type="button" class="dv-cvd__btn" data-cvd="none" aria-pressed="true">Normal</button>
+      <button type="button" class="dv-cvd__btn" data-cvd="deutan" aria-pressed="false">Deuteranopia</button>
+      <button type="button" class="dv-cvd__btn" data-cvd="protan" aria-pressed="false">Protanopia</button>
+      <button type="button" class="dv-cvd__btn" data-cvd="tritan" aria-pressed="false">Tritanopia</button>
+    </div>
+  {% endif %}
+
+  {% if palette.categorical is not empty %}
+    <table class="dv-table">
+      <thead>
+        <tr>
+          <th scope="col">Colour</th>
+          <th scope="col">Hex</th>
+          <th scope="col">RGB</th>
+          <th scope="col">Example</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for c in palette.categorical %}
+          <tr>
+            <th scope="row">{{ c.name }}{% if c.note %} <span class="dv-note">({{ c.note }})</span>{% endif %}</th>
+            <td><code>{{ c.hex }}</code></td>
+            <td class="dv-mono">{{ c.rgb }}</td>
+            <td aria-hidden="true"><span class="dv-chip" style="background: {{ c.hex }};"></span></td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  {% endif %}
+
+  {% if palette.sequential is not empty %}
+    <div class="dv-ramp" aria-hidden="true"></div>
+    <table class="dv-table">
+      <thead>
+        <tr>
+          <th scope="col">Colour</th>
+          <th scope="col">Hex</th>
+          <th scope="col">RGB</th>
+          <th scope="col">Example</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for s in palette.sequential %}
+          <tr>
+            <th scope="row">{{ s.name }}{% if s.note %} <span class="dv-note">({{ s.note }})</span>{% endif %}</th>
+            <td><code>{{ s.hex }}</code></td>
+            <td class="dv-mono">{{ s.rgb }}</td>
+            <td aria-hidden="true"><span class="dv-chip" style="background: {{ s.hex }};"></span></td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  {% endif %}
+
+  {% if palette.colorby is not empty %}
+    {% include '@atoms/summary-list/summary-list.twig' with { items: palette.colorby } only %}
+  {% endif %}
+</div>

package/components/00-base/fonts/fonts.mdx

@@ -0,0 +1,25 @@
+{/* Editorial guidance aligned with the digital.gov.au design library (dga-dl /src/content/foundations/typography). */}
+
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './fonts.stories';
+
+<Meta of={Stories} />
+
+# Fonts
+
+The font families bundled with the theme.
+
+<Canvas of={Stories.Fonts} />
+
+## Families
+
+- **Arimo** – the primary family, used for all body, heading, and label text. A neutral sans-serif that is metric-compatible with Arial, so the system fallback occupies the same space while the web font loads and there is no layout shift.
+- **Geist Mono** – the monospace family, used for `code`, `kbd`, `samp`, and `pre`. Reserve it for code and technical identifiers, not for UI text that happens to need alignment.
+
+## Hosting
+
+Both families are self-hosted as variable `woff2` files under the theme's assets, licensed under the SIL Open Font License. Self-hosting avoids third-party font-CDN requests, which keeps page loads leaner for users on slow or metered connections.
+
+## Weights
+
+Each family is a single variable font spanning weights `400`–`700`. The type styles use Regular `400` for body text, SemiBold `600` for labels, and Bold `700` for headings. See [Typography](?path=/docs/base-typography--docs) for how weights map to each style.

package/components/00-base/storybook/storybook.container.utils.stories.scss

@@ -96,7 +96,7 @@ code {
   background-color: #f5f5f5;
   border-radius: 4px;
   border: 1px solid #e1e1e8;
-  color: #d63384;
+  color: #8a1f4d; // Was #d63384 (~4.1:1 on grey, fails AA); now ~8:1.
   display: inline-block;
   font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   font-size: 0.9em;