Theme Provider's structure
Styled-Component themes provide a JSON structure to be consumed by styling, through functions and tools built into the Styled-Components library and framework. We can include as many parts as needed, in this JSON structure, and alter the final JSON with themes — before the final output is delivered for styling. The current structure contains the following three parts:
colors.json
This is a direct output for Colors, coming from Figma. This file is left as-is coming, and should not be altered in any way. Changes to this file should not happen often, and should only be a reflection of the tokens in this tool (ZeroHeight).
typography.json
The logic here is that all styling is rolling into a font style. So font size, weight, spacing, line height, and color are all rolled into an object; so when you select "Headline Large", all the styling comes pre-selected.
sizes.json
These are meant to be used universally, so all pixel size references in the app can be pulled as tokens.
|
5xs |
2px |
|
4xs |
4px |
|
3xs |
6px |
|
2xs |
8px |
|
xs |
12px |
|
s |
16px |
|
ms |
20px |
|
m |
24px |
|
l |
32px |
|
xl |
40px |
|
2xl |
48px |
|
3xl |
56px |
|
4xl |
64px |
|
5xl |
80px |
borders.json
Similar to sizes.json, this is a token to be used universally throughout the code, whenever a border is defined.
How to use it?
import { MaltyThemeProvider } from '@carlsberggroup/malty.theme.malty-theme-provider';
<MaltyThemeProvider theme="global">
{childen}
</MaltyThemeProvider>
The currently available themes are:
- global (default)
- cadi
- carlsberg
- lbc
Not required
We made MaltyThemeProvider not required.
What this means, in practical terms, is that if you don't wrap an element in MaltyThemeProvider, we're still including it as a dependency, and are assuming the default theme (global) to be your style of choice.
TypographyProvider
This is a font provider wrapper component used by MaltyThemeProvider. Currently it loads the appropriate font which is then used by every component according to the theme's specifications.
The idea here is that eventually, when market themes have a market-specific font, we will be able to replace the font per market theme, and this way makes Malty more broadly compatible with not only different styles, but also different typography, and provide that typography through Malty's Component Library.
Given that both TypographyProvider and MaltyThemeProvider are part of the bundled javascript code, the font will only load once all the code is parsed by the browser. This may lead to a slower display of the correct font. A solution for this would be to add a preload call inside of the main html file.
Here's an example of that:
<link rel="preload" href="https://cdn.carlsberggroup.com/fonts/montserrat/Montserrat-VF.woff2" as="font">