chore(chromatic): fit the snapshot surface inside the free plan

.github/workflows/frontend-chromatic.yml

@@ -1,20 +1,23 @@
 name: Frontend Chromatic
 
 on:
+  # Nothing outside these paths can change how a story renders. The lockfile is
+  # included alongside package.json because `npm ci` installs from it, so a
+  # transitive bump can change rendering without package.json moving.
   push:
     branches: [main]
-    paths:
+    paths: &story_paths
       - frontend/web/components/**
       - frontend/web/styles/**
       - frontend/common/theme/**
       - frontend/documentation/**
       - frontend/.storybook/**
+      - frontend/package.json
+      - frontend/package-lock.json
       - .github/workflows/frontend-chromatic.yml
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
-    paths:
-      - frontend/**
-      - .github/workflows/frontend-chromatic.yml
+    paths: *story_paths
 
 permissions:
   contents: read

frontend/.storybook/preview.js

@@ -106,6 +106,10 @@ const preview = {
       container: DocsContainer,
     },
     chromatic: {
+      // Off by default; opt in per story with `disableSnapshot: false`. Opted
+      // in: components still styling dark mode with hand-written `.dark` blocks,
+      // plus SemanticTokens for token values no component exercises.
+      disableSnapshot: true,
       modes: {
         light: allModes.light,
         dark: allModes.dark,

frontend/documentation/ColourPalette.stories.tsx

@@ -10,7 +10,7 @@ import type { Scale } from './components/ScaleRow'
 import primitivesSource from '!!raw-loader!../web/styles/_primitives.scss'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Palette',
 }
 export default meta

frontend/documentation/ElevationTokens.stories.tsx

@@ -6,7 +6,7 @@ import DocPage from './components/DocPage'
 import { shadow } from 'common/theme/tokens'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Elevation',
 }
 export default meta

frontend/documentation/MotionTokens.stories.tsx

@@ -6,7 +6,7 @@ import DocPage from './components/DocPage'
 import { duration, easing } from 'common/theme/tokens'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Motion',
 }
 export default meta

frontend/documentation/RadiusTokens.stories.tsx

@@ -6,7 +6,7 @@ import DocPage from './components/DocPage'
 import { radius } from 'common/theme/tokens'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Border Radius',
 }
 export default meta

frontend/documentation/SemanticTokens.stories.tsx

@@ -7,7 +7,7 @@ import TokenGroup from './components/TokenGroup'
 import type { TokenGroupData } from './components/TokenGroup'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'padded' },
   title: 'Design System/Semantic Colour Tokens',
 }
 export default meta

frontend/documentation/components/Button.stories.tsx

@@ -46,7 +46,7 @@ const meta: Meta<ButtonType> = {
     theme: 'primary',
   },
   component: Button,
-  parameters: { layout: 'centered' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'centered' },
   title: 'Components/Button',
 }
 

frontend/documentation/components/Card.stories.tsx

@@ -5,6 +5,7 @@ import Card from 'components/Card'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/Chip.stories.tsx

@@ -7,6 +7,7 @@ const meta: Meta<typeof Chip> = {
   args: { children: 'Production' },
   component: Chip,
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/ErrorMessage.stories.tsx

@@ -5,6 +5,7 @@ import ErrorMessage from 'components/ErrorMessage'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/Icons.stories.tsx

@@ -7,7 +7,7 @@ import type { IconName } from 'components/icons/Icon'
 import '../docs.scss'
 
 const meta: Meta = {
-  parameters: { layout: 'padded' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'padded' },
   title: 'Components/Icons',
 }
 export default meta

frontend/documentation/components/Input.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from 'storybook'
 import Input from 'components/base/forms/Input'
 
 const meta: Meta = {
-  parameters: { layout: 'centered' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'centered' },
   title: 'Components/Forms/Input',
 }
 export default meta

frontend/documentation/components/Modal.stories.tsx

@@ -5,7 +5,7 @@ import ModalDefault from 'components/modals/base/ModalDefault'
 
 const meta: Meta = {
   parameters: {
-    chromatic: { delay: 300 },
+    chromatic: { delay: 300, disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/MultiSelect.stories.tsx

@@ -18,6 +18,7 @@ const FRUITS: MultiSelectOption[] = [
 const meta: Meta<typeof MultiSelect> = {
   component: MultiSelect,
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/Panel.stories.tsx

@@ -5,6 +5,7 @@ import Panel from 'components/base/grid/Panel'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/Switch.stories.tsx

@@ -20,7 +20,7 @@ const meta: Meta<SwitchProps> = {
     disabled: false,
   },
   component: Switch,
-  parameters: { layout: 'centered' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'centered' },
   title: 'Components/Forms/Switch',
 }
 

frontend/documentation/components/Tabs.stories.tsx

@@ -28,6 +28,7 @@ const meta: Meta<DirtyMarkerArgs> = {
   },
   decorators: [withRouter],
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:

frontend/documentation/components/Tooltip.stories.tsx

@@ -6,6 +6,7 @@ import Tooltip from 'components/Tooltip'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component: