Added on: v3.0.0 (15/09/17)
Updated on: v5.7.0 (18/05/21)

Managed themes

A managed themed is a Framework-managed override the default colours and fonts in the Framework setup (eg, 2021, Legacy, B2B or Business).

Design and usage

Structure

The custom theme can override colours, fonts and possibly more, but must adopt the base Framework structure from everything else:
- Font sizes remain the same
- Padding is the same
- Usage rules are the same
- Interaction patterns remain the same
Any changes or additions to managed themes must be agreed with the Framework team.
The list of standard themable variables can be seen on the introduction to theming page.

Accessibility and screen readers

The custom site adopts the accessibility and screen reader guidance from the standard global rules.

In particular all colour contrasts must meet WCAG 2.1 level AA and requires a contrast ratio of at least 4.5:1 for functional images and normal text, and 3:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Non-JS requirements and considerations

Follows standard global rules for non-JS.

Theme specifics

Default

This theme is based off the brand guidelines released in Q3 2020 and is superseded by the 2021 theme. This theme provides the following accent colours for use:

2021 theme

This theme is based off the brand guidelines released in Q1 2021 and supersedes the default theme. This theme provides the following accent colours for use:

In addition to the accent colour changes the following has been adjusted for this theme only

Heading and body copy colour has been updated to charcoal (#191919)
Background colour for the highlighted total within a data replay section has been updated to dark grey (#444)
Highlighted quote background and quote mark colour for quotes has been updated to dark teal (#005a6c)
All used of warm grey within components has been updated to charcoal (#191919)

Legacy

This theme is based off the brand guidelines prior to Q3 2020 and is provided to allow teams to maintain theme consistency while migrating applications to v5. This theme provides the following accent colours for use:

In addition to the accent colour changes the following has been adjusted for this theme only

Semi bold font weight is available for use
Highlighted quote background and quote mark colour for quotes has been updated to pink (#c01b83)
Utility help section background has been updated to light blue (#1a61bd)

B2B

This theme is a variant of the legacy theme designed specifically for use on B2B websites.

The following accent colours replace the light and dark purple accents from the legacy theme accents:

In addition to the accent colour changes the following has been adjusted for this theme only (in addition to any adjustment made for the legacy theme)

Cookie policy background has be updated to Boston Blue (#3c445e)

Business

This theme is a variant of the legacy theme designed specifically for use on B2B websites.

The following accent colour replaces the pink accent from the legacy theme accents:

In addition to the accent colour changes the following has been adjusted for this theme only (in addition to any adjustment made for the legacy theme)

Heading colour has been updated to raven black (#333)
Semibold text appears bold weight
Cookie policy background has be updated to raven black (#333)
Highlighted quote background and quote mark colour for quotes has been updated to raven black (#333)
Primary buttons, when placed on Abeille Assurances yellow background become raven black (#333), and any icons become white (hover and focus states remain as per default)

Development and test

Notes for developers

Creating new themes

Requests for new themes should come first to the Framework team, who will discuss suitability and next steps. Do not proceed with the creation of any new theme until you have confirmation / sign off from both Design and Development Leads.

CSS and core icons

Themes work by overriding the default CSS with customised versions of the files which are located in a different directory. They can be linked directly from a template within the site where the link would replace that to the standard Framework CSS files:

<link media="all" href="./v.2023.01/shared/assets/themes-managed/[ release version ]/[ organisation ]/[ theme name ]/css/[ css filename ].css" rel="stylesheet" />

To make changes to the colour scheme, images and icons, identify all classes where the new colours/images/icons are to be represented and duplicate these sections in your local CSS file with updated colours and paths to the new images and icons.

NOTE: Ensure any instances where class styling has changed at set break points is also captured in the new override cascade, for instance background:none; or border:0;

Icon library images

If your them requires custom coloured functional and product icons as are normally housed in the icon library, specific versions will be available. These can be accessed at:

/assets/themes-icons/v2/[ organisation ]/[ theme name ]/.../[ image name ].svg

Changing the logo

If you wish to override the default Abeille Assurances logo used by your pages, update the following HTML:

<a class="o-masthead-logo__link" href="..." aria-label="...">
	<img class="o-masthead-logo__image" src="./v.2023.01/documentation//mysite.abeille-assurances.fr/local/.../new-logo-image.svg" decoding="async" width="..." height="..." alt="...">
</a>

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.7.0 (18/05/21)

Latest update:

Latest brand theme, named "2021" is now available for use. This theme will be made the default theme in v6.0.0.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team