Typography
Monserrat and Open-Sans font-families have been replaced by the custom OVOCircular font-family.
You need add font files to your project in order for fonts to display correctly
(weights: Book = regular, Bold, Black = headings).
You can download the fonts from ovobyus here ->
For web, use of woff2 files is recommended via font-face declarations, whilst for native there are TTF and OTF versions available within the “Desktop fonts” folder.
If it's not possible to self-host font files. If it's not possible to self-host font files, as a workaround, it is possible to load them from the www.ovoenergy.com website (e.g. www.ovoenergy.com/fonts/OVOCircularWeb-Book.woff2). Please note this will increase loading time in your web app due to the added DNS handshake and download time.
Here is CSS to declare fonts stored locally:
@font-face {
font-family: "OVOCircular";
src: url("/fonts/OVOCircularWeb-Book.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "OVOCircular";
src: url("/fonts/OVOCircularWeb-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "OVOCircular";
src: url("/fonts/OVOCircularWeb-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
The fonts theme object now will look like:
// Web
fonts: {
body: "'OVOCircular', Futura, 'Century Gothic', sans-serif",
monospace: 'Courier',
}
// Native
fonts: {
body: 'OVOCircular-Book',
}
You should either add needed font files and definitions to your app or rewrite theme tokens with fonts you need.
responsiveFontSizes theme object was updated:
web:
responsiveFontSizes: {
- small: ['1.2rem', '1.4rem'],
- body: ['1.4rem', '1.6rem'],
- level1: ['2.8rem', '3.2rem'],
- level2: ['2.4rem', '2.8rem'],
- level3: ['2.0rem', '2.4rem'],
- level4: ['1.6rem', '2.0rem'],
- display: ['3.2rem', '4.8rem'],
+ label: ['1.1rem', '1.4rem'],
+ small: ['1.4rem', '1.4rem'],
+ body: ['1.6rem', '1.6rem'],
+ level1: ['2.8rem', '4.8rem'],
+ level2: ['2.4rem', '3.6rem'],
+ level3: ['2.0rem', '2.8rem'],
+ level4: ['1.6rem', '2.2rem'],
+ lead: ['1.8rem', '2.2rem'],
}
native:
responsiveFontSizes: {
- small: ['12px', '14px'],
- body: ['14px', '16px'],
- level1: ['28px', '32px'],
- level2: ['24px', '28px'],
- level3: ['20px', '24px'],
- level4: ['16px', '20px'],
- display: ['32px', '48px'],
- label: ['11px', '14px'],
+ small: ['14px', '14px'],
+ body: ['16px', '16px'],
+ level1: ['28px', '48px'],
+ level2: ['24px', '36px'],
+ level3: ['20px', '28px'],
+ lead: ['18px', '22px'],
}
new theme property responsiveLineHeights was added:
// Web
responsiveLineHeights: {
label: ['2rem', '2rem'],
small: ['2rem', '2rem'],
body: ['2.4rem', '2.4rem'],
level1: ['3.6rem', '5.2rem'],
level2: ['3.2rem', '4.4rem'],
level3: ['2.4rem', '3.6rem'],
level4: ['2rem', '2.8rem'],
lead: ['2.4rem', '2.8rem'],
}
// Native
responsiveLineHeights: {
label: ['20px', '20px'],
small: ['20px', '20px'],
body: ['24px', '24px'],
level1: ['36px', '52px'],
level2: ['32px', '44px'],
level3: ['24px', '36px'],
level4: ['20px', '28px'],
lead: ['24px', '28px']
}
colors and breakpoints have been updated:
Primary brand colour
The theme.colors.brand.primary token was updated as below:
{
+ muted: '#E7F3EA',
lightest: '#B6D727',
lighter: '#9DC431',
light: '#6CBD27',
- base: '#0A9828',
+ base: '#0D8426',
dark: '#0D8426',
darker: '#006945'
}
theme.radii update
native
radii: {
- standard: '4px',
+ small: '4px',
+ medium: '8px',
+ large: '12px',
}
web
radii: {
- standard: '0.4rem',
+ small: '0.4rem,
+ medium: '0.8rem,
+ large: '1.2rem,
}
Breakpoint updates
The theme.breakpoints token was updated with the values below:
breakpoints: {
- small: 480,
+ small: 576,
medium: 768,
- large: 1208
+ large: 1200
}
Please be aware of the changes above make sure everything looks okay on your side you can always overwrite any theme properties in case of any problems, by extending the theme using Element's createTheme method with additional (or overriding) tokens.
Github code changes
You can find links to the commits with all changes in this PR description.