Installation
|
Install |
yarn add '@carlsberggroup/malty.theme.malty-theme-provider' |
Source |
@carlsberggroup |
|
Package |
@carlsberggroup/malty.theme.malty-theme-provider |
Bundle |
bit & yarn |
Component and Properties
Once you've installed the package for this component, you can import it anywhere as follows:
import { MaltyThemeProvider } from "@carlsberggroup/malty.theme.malty-theme-provider";
This component makes use of the following properties:
|
Property |
Description |
Default Value |
|---|---|---|
|
theme |
Value that determines which theme to use. String |
global |
|
children |
Element or array of Elements to pass down as children. ReactNode |
|
Currently the theme values only change the primary, secondary and tertiary colours. The following options are available:
globalTheme
{
"theme": {
"global": {
"overlay": {
"25": {
"value": "[style]99892445:background[/style]"
},
"50": {
"value": "[style]99892444:background[/style]"
},
"75": {
"value": "[style]99892443:background[/style]"
}
},
"primary": {
"value": "[style]79021351:background[/style]"
},
"secondary": {
"value": "[style]79021353:background[/style]"
},
"tertiary": {
"value": "[style]79021352:background[/style]"
}
}
}
}
cadiTheme
{
"theme": {
"cadi": {
"primary": {
"value": "[style]91354405:background[/style]"
},
"secondary": {
"value": "[style]79021360:background[/style]"
},
"tertiary": {
"value": "[style]79021361:background[/style]"
}
}
}
}
carlsbergTheme
{
"theme": {
"carlsberg": {
"overlay": {
"25": {
"value": "[style]99892448:background[/style]"
},
"50": {
"value": "[style]99892447:background[/style]"
},
"75": {
"value": "[style]99892446:background[/style]"
}
},
"primary": {
"value": "[style]79021354:background[/style]"
},
"secondary": {
"value": "[style]79021355:background[/style]"
},
"tertiary": {
"value": "[style]79021356:background[/style]"
}
}
}
}
lbcTheme
{
"theme": {
"laos": {
"overlay": {
"25": {
"value": "[style]114088401:background[/style]"
},
"50": {
"value": "[style]114088400:background[/style]"
},
"75": {
"value": "[style]114088399:background[/style]"
}
},
"primary": {
"value": "[style]103364881:background[/style]"
},
"secondary": {
"value": "[style]103364882:background[/style]"
},
"tertiary": {
"value": "[style]103364883:background[/style]"
}
}
}
}