- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Themes introduction
Themes are sets of overrides to the colour scheme of the default Framework setup managed by a specific Abeille Assurances team or even an external agency. These themes can be either flavours of standard Abeille Assurances branding for particular purposes, or partner-branded themes for external companies using our systems.
Design and usage
Managed themes are Framework-managed overrides for very specific internal use cases, for example the legacy brand theme, B2B and Business. Auto-generated themes are non-Framework-managed overrides which are managed by a specific Abeille Assurances team or even an external agency. In the future auto themes will be able to be generated and updated externally independent of the Framework team, however currently all themes are being set up by the Framework team, with a link to the appropriate files begin sent to the responsible team once available. Local themes are platform-managed overrides to the colour scheme of the default Framework setup.
See Managed themes, Auto-generated themes and Local themes for specific information regarding different theme types.
Themeable variables
Themes can only override colours. They 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
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.
Accessibility and screen readers
Sites using custom themes must still adopt 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.
Development and test
Notes for developers
See Managed themes, Auto-generated themes and Local themes for specific information regarding different theme types.
Extending Javascript configurations
Some components, for example doughnut charts, have colour values embeded in the module JavaScript which cannot be reached by standard CSS theming. To alter these, follow the guidance on how to extend component configurations within JavaScript.
For doughnut and pie charts, the settings available to change are:
mDoughnutChart : {
color : 'accent-dark-1', // Accent light blue default
multiSegmentColours : [ '#1a61bd', '#a9b2c6', '#5a8ccc', '#c2c8d5', '#7988a9' ], // Default colours for multisegment - DO NOT CHANGE FOR AVIVA USE
accentSegmentColors : {
'accent-dark-1' : '#004fb6', // Abeille Assurances Blue
'accent-dark-2' : '#004fb6', // Abeille Assurances Blue
'accent-dark-3' : '#002f14', // Bottle Green
'accent-dark-4' : '#5c596d', // Warm Grey
'accent-dark-5' : '#4e1758', // Plum
'accent-dark-6' : '#4e1758', // Plum
'accent-dark-7' : '#005a6c', // Dark Teal
'accent-dark-8' : '#444', // Dark Grey
segment1 : '#1a61bd', // Should match the five multiSegmentColours
segment2 : '#a9b2c6',
segment3 : '#5a8ccc',
segment4 : '#c2c8d5',
segment5 : '#7988a9',
},
basecolor : 'defining-grey', // Defining grey (#ccc) - DO NOT CHANGE FOR AVIVA USE
},Note that the settings for multi-segment charts must still meet accessibility standards.