civictheme 1.14.0

The focus of this release is aligning CivicTheme with the CivicTheme Figma design system, delivered through UI Kit 1.14.0: 30 components were updated to match Figma, colours are now blended the same way as Figma, and elevation (shadow) styles were rebuilt. The release also fixes a duplicate main landmark accessibility issue, breadcrumb, footer menu and Storybook rendering bugs, and alert REST export limitations, and updates dependencies for Drupal 11.4.5 compatibility and npm security.

CivicTheme Drupal theme changes

Bug fixes

• #3467058 by alan.cole: Fixed duplicate main element — the main landmark is now rendered once by the page template, improving accessibility.
• #3593631 by alan.cole: Fixed encoded ampersands showing in breadcrumbs.
• #3606009 by joshua1234511: Fixed duplicate trailing breadcrumb item on listing and view pages where the breadcrumb already ends with the current page.
• #3614823 by alan.cole: Fixed footer menu blocks with a title showing a double title.
• #3589650 by r.imassi: Fixed Navigation component not being passed the theme setting.
• #3589150: Added post-update hook to create the Fast Fact card form display.
• #3621274: Added checks for unpublished reference slides in the Slider component.
• #3620794 by ivrh: Improved the alert REST export — removed the result limit and exported raw alert visibility paths.
• #3609441: Updated CKEditor styles to override new CKEditor variables.
• #3623436 by alan.cole: Fixed external link icons in HTML content not wrapping with the last word (fixed together with UI Kit).
• UI Kit #1010: Fixed figure styles for CKEditor image alignment options.
• UI Kit #1000 by sonictruth: Updated sidebar navigation title style to match the design.
• PR #1517: Fixed theme suggestion name for the Webform container.

Storybook fixes

• #3601881 by alan.cole: Fixed theme Storybook pages not rendering.
• #3612955 by alan.cole: Fixed custom fonts served from the assets path not showing in Storybook.
• #3592958 by alan.cole: Updated minimum Node version to 22.12.0, required for Storybook to build.

Maintenance and dependency updates

• Updated the UI Kit dependency to the published @civictheme/sdc 1.14.0 package.
• Upgraded Storybook from 10.2.13 to 10.6.0 and sass-embedded from 1.77.5 to 1.105.0.
• Switched Storybook to the published @civictheme/drupal-attribute and drupal-twig-extensions packages.
• Replaced the glob package with Node's built-in file globbing.
• Applied coding standards and lint fixes across the theme.

Upgrading existing sites to sass-embedded 1.105.0

Sub-themes compile their styles with their own copy of build.js and package.json, so the Sass compiler upgrade is not automatic. Any sub-theme compiling CivicTheme SCSS now requires sass-embedded 1.95.0 or later, as the UI Kit SCSS uses syntax introduced in that version. After updating CivicTheme:

1. In your sub-theme's package.json, change sass-embedded from 1.77.5 to 1.105.0 and run npm install.
2. Copy the updated build.js from the CivicTheme starter kit (civictheme_starter_kit/build.js) over your sub-theme's build.js, re-applying any local customisations. The new version silences the Sass import deprecation (the build generates import rules itself), treats all other active Sass deprecations as errors, and exits non-zero on failure so CI catches broken builds.
3. Delete your sub-theme's build-config.json (a cache file, regenerated on the next build) and dist directory, then run npm run build.
4. Fix any Sass deprecation errors in your sub-theme's own SCSS. These are the deprecations that were fixed in the UI Kit and CivicTheme SCSS, and the same ones are likely in sub-theme code:
   • Global built-in functions (removed in Dart Sass 3.0) — replace with their module equivalents and add the matching use line at the top of the file: map-get() → map.get() and map-keys() → map.keys() (use sass:map); type-of() → meta.type-of() (use sass:meta); index() → list.index(), join() → list.join() and length() → list.length() (use sass:list); str-index() → string.index() (use sass:string). Older sub-themes may also use colour built-ins such as darken() and lighten() — replace with color.adjust() (use sass:color).
   • Colour channel functions (ambiguous with CSS Color 4 colour spaces) — replace color.red($c), color.green($c) and color.blue($c) with color.channel($c, 'red', $space: rgb) (and so on), and color.lightness($c) with color.channel($c, 'lightness', $space: hsl).
   • Legacy ternary if() (clashes with the native CSS if() function) — rewrite if($condition, $a, $b) as if(sass($condition): $a; else: $b).

   The sass-migrator tool can automate most of the function replacements. You do not need to migrate import rules to the Sass module system: the new build.js silences that deprecation, and import remains supported until Dart Sass 3.

5. Expect the compiled CSS to be reordered: Dart Sass now emits declarations that follow nested rules (for example, declarations written after an included mixin that contains nesting) in source order instead of moving them up. The cascade result is unchanged, so this needs no action — but it makes CSS diffs noisy. Visually review the rebuilt site, as the new compiler together with UI Kit 1.14.0's shared-style changes alters compiled output across the whole theme.

If you want to defer adopting the new build.js, bumping only sass-embedded still works: deprecations are then reported as warnings rather than failing the build.

UI Kit 1.14.0 changes

This release includes UI Kit 1.14.0, the result of a full audit of components against the CivicTheme Figma design system. Because the elevation and colour-mixing fixes change shared base styles, and the sass-embedded upgrade regenerates all compiled stylesheets, visual changes extend across the whole theme — sub-themes with heavy style overrides should re-verify their pages broadly after upgrading.

Figma design alignment fixes

• #934: Rebuilt elevation (shadow) styles to match Figma, affecting popover, cards and navigation.
• #936: Aligned Back to Top button styles with Figma.
• #938: Corrected the Heading type scale to match Figma.
• #940: Aligned Blockquote typography and quote styles with Figma.
• #942: Aligned Attachment styles with Figma.
• #944: Fixed the Accordion highlight stripe rendering.
• #946: Fixed the Callout highlight stripe rendering.
• #948: Fixed Subject card background image spilling past the card border radius.
• #950: Aligned Navigation card styles with Figma.
• #952: Aligned Tag styles with Figma.
• #954: Fixed the Next Step highlight stripe rendering.
• #956: Aligned Fast Fact card styles with Figma.
• #958: Aligned Promo card and Event card styles with Figma.
• #960: Fixed a Table of Contents display bug on the hover feature strip.
• #962: Aligned Campaign styles with Figma.
• #964: Aligned Service card styles with Figma.
• #966: Aligned Pagination styles with Figma.
• #968: Aligned Tooltip styles with Figma.
• #970: Aligned Alert styles with Figma.
• #972: Aligned Message styles with Figma.
• #974: Aligned Promo styles with Figma.
• #976: Aligned Social Links styles with Figma.
• #978: Corrected the clipping path of the Banner feature image.
• #980: Aligned Checkbox and Radio styles with Figma.
• #982: Aligned Side Navigation styles with Figma.
• #988: Corrected the Layout sidebar width to match Figma.
• #990: Added a custom colour mixer so SCSS colour blends match Figma output.
• #998: Aligned Button styles with Figma, affecting Button and Chip.
• #1001: List Link Below is now rendered inside the List container.
• #1010: Aligned Figure styles and markup with Figma.

Other fixes

• #1011: Buttons now have their own typography settings (large, regular, small), so button type no longer needs overriding per breakpoint; Chip typography standardised to match.
• #1012: Fixed pill and tag icons not being vertically centred, and standardised the icon gap.
• #1013: Fixed Event card tag items being documented as a text property instead of content — the documented key rendered no tag at all.
• #1014: Moved drupal-attribute to the published @civictheme/drupal-attribute package, fixing stray keys rendering as an HTML attribute.
• #1015: Added a separate Storybook base stylesheet so the assets directory resolves correctly, fixing local font URLs in Storybook.
• #1016: Updated Storybook developer packages and pinned Twig dependencies.

UI Kit fixes tracked on drupal.org

• #3612927 by alan.cole: Fixed UI Kit fonts not correctly embedding OTF and TTF files — font declarations now emit the correct format hints.
• #3467058: UI Kit half of the duplicate main element fix — the layout component now uses a div, and the page component renders a single main element.
• #3623436: UI Kit half of the external link icon wrapping fix — added a no-wrap typography utility and corrected external-link icon padding.

UI Kit maintenance

• Upgraded sass-embedded from 1.77.5 to 1.105.0, regenerating all compiled stylesheets (#1018).
• Upgraded Storybook and addons from 10.2.13 to 10.6.0.
• Replaced the glob package with Node's built-in file globbing.
• Added npm audit checks to CI and applied security updates to development dependencies.
• Excluded Twig 3.30.0 from the Drupal test harness due to an upstream regression in Drupal's escape filter.