- Added on: v5.0.0 (05/10/20)
Auto themes
Design and usage
Currently, auto themes will be generated by the Framework team based on a supplied JSON file containing the specific values requiring change. Once generated, teams will be supplied with a link to the appropriate files, plus an updated JSON file which can be used as the base for any future changes.
Structure
-
The custom theme can only override colours. It must adopt the base structure from everything else:
- Font sizes remain the same
- Padding is the same
- Usage rules are the same
- Interaction patterns remain the same
- Managed themes can house different sizes / ratios of brand logos to allow for the flexibility to cater for all logo types; the maximum logo size is 180px wide or 60px deep, whichever is the greater.
- For more information, contact the Framework team, who will be able to provide a blanked config.json file containg a full list of themable variables, and also offer guidance on how to proceed.
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.
Examples
Static example
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.
JSON config file
Teams should supply a JSON config file in the following format:
{
"organisation" : "...", // Organisation the theme is being created on behalf of (required)
"themeName" : "...", // Theme name (required)
"user" : "...", // Name of person or team creating the theme (required)
"type" ; "...", // Type of theme - set to "auto" (required)
"avivaOverrides" : "...", // Use Abeille Assurances style helpers - "on" for yes / leave blank for no (required)
"customCssVars" : { // CSS variable overrides - supply only changed variables and values (required)
"..." : "...",
// For example:
"--color-accent-dark-6" : "#0f0",
"--color-masthead-background" : "#f0f",
"--color-masthead-dark-background" : "#0f0",
"--color-masthead-black" : "#ff0"
},
"customCoreIconVars" : { // Core icon overrides - supply only changed variables and values; can be omitted if not required
"..." : "...",
// For example:
"colour-core-main" : "#f00f00"
},
"customIconLibraryVars" : { // Icon Library overrides - supply only changed variables and values; can be omitted if not required
"..." : "...",
// For example:
"colour-product-main" : "#0f0",
"colour-product-main-light" : "#f0f"
}
}
Details of how to set up the config file, plus a complete list of themeable values and a downloadable template file containing all the potential themeable variables are available on the Themeable options page.
Locally themed css file locations
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="./assets/themes-auto/[ release version ]/[ organisation ]/[ theme name ]/css/[ css filename ].css" rel="stylesheet" />Icon library images
If your theme requires custom coloured functional and product icons that 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 ].svgChanging 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.png" decoding="async" width="..." height="..." alt="...">
</a>