Theming
Hero Health SDKs utilizes a theming system based on semantic tokens. These tokens can be customized to match your brand identity. The default theme, as shown below, serves as a good starting point for creating your own.
Injecting the theme
All SDKs expose a property called theme that can be utilized to inject the desired theme.
Default theme
Consider that colours represent an object containing the value of the colours on hexadecimal value. Any valid CSS value for colour is accepted (rgb, rgba, hsl, etc):
{
"loadFonts": [
{
"font": "Inter",
"weight": [
"400",
"500",
"600",
"700"
]
}
],
"font": {
"sans": "Inter, sans-serif"
},
"colours": {
"typography": {
"lightest": "#ffffff",
"light": "#0f0f87",
"base": "#0f0f87",
"dark": "#090955",
"darkest": "#070742"
},
"primary": {
"lightest": "#f5fefd",
"light": "#2ef1df",
"base": "#2ef1df",
"dark": "#23b5a7",
"darkest": "#17766d"
},
"secondary": {
"lightest": "#e7e7f3",
"light": "#0f0f87",
"base": "#0f0f87",
"dark": "#090955",
"darkest": "#070742"
},
"contrast": {
"primary": {
"lightest": "",
"light": "#090955",
"base": "#090955",
"dark": "#090955",
"darkest": "#070742"
},
"secondary": {
"lightest": "",
"light": "#ffffff",
"base": "#ffffff",
"dark": "",
"darkest": "#ffffff"
}
},
"background": {
"primary": {
"light": "#f5fefd",
"base": "#eafefc",
"dark": "#cbfcf7",
"darkest": "#2ef1df"
},
"secondary": {
"light": "#e7e7f3",
"base": "#eafefc",
"dark": "#cbfcf7",
"darkest": "#2ef1df"
}
},
"border": {
"primary": {
"light": "#eafefc",
"base": "#cbfcf7",
"dark": "#abf9f2",
"darkest": "#17766d"
},
"secondary": {
"light": "#e7e7f3",
"base": "#eafefc",
"dark": "#cbfcf7",
"darkest": "#17766d"
}
},
"success": {
"typography": {
"lightest": "#d1fae5",
"light": "#34d399",
"base": "#10b981",
"dark": "#047857",
"darkest": "#064e3b"
},
"background": {
"light": "#d1fae5",
"base": "#a7f3d0",
"dark": "#6ee7b7",
"darkest": "#064e3b"
},
"border": {
"light": "#d1fae5",
"base": "#a7f3d0",
"dark": "#6ee7b7",
"darkest": "#064e3b"
}
},
"failure": {
"typography": {
"lightest": "#fee2e2",
"light": "#f87171",
"base": "#ef4444",
"dark": "#b91c1c",
"darkest": "#7f1d1d"
},
"primary": {
"lightest": "#fee2e2",
"light": "#f87171",
"base": "#ef4444",
"dark": "#b91c1c",
"darkest": "#7f1d1d"
},
"background": {
"light": "#fef2f2",
"base": "#fee2e2",
"dark": "#fecaca",
"darkest": "#7f1d1d"
},
"border": {
"light": "#fee2e2",
"base": "#fecaca",
"dark": "#fca5a5",
"darkest": "#7f1d1d"
}
},
"info": {
"typography": {
"lightest": "#dbeafe",
"light": "#60a5fa",
"base": "#3b82f6",
"dark": "#1d4ed8",
"darkest": "#1e3a8a"
},
"background": {
"light": "#dbeafe",
"base": "#bfdbfe",
"dark": "#93c5fd",
"darkest": "#1e3a8a"
},
"border": {
"light": "#dbeafe",
"base": "#bfdbfe",
"dark": "#93c5fd",
"darkest": "#1e3a8a"
}
},
"warning": {
"typography": {
"lightest": "#fef3c7",
"light": "#fcd34d",
"base": "#f59e0b",
"dark": "#b45309",
"darkest": "#78350f"
},
"background": {
"light": "#fffbeb",
"base": "#fef3c7",
"dark": "#fde68a",
"darkest": "#78350f"
},
"border": {
"light": "#fef3c7",
"base": "#fde68a",
"dark": "#fcd34d",
"darkest": "#78350f"
}
},
"disabled": {
"border": "#9f9fcf",
"background": "#e7e7f3",
"typography": "#0f0f87"
}
},
"focus": {
"border": {
"size": "1px",
"color": "transparent"
},
"outline": {
"size": "2px",
"color": "#0f0f87"
},
"ring": {
"size": "3px",
"color": "#37ffdb"
}
},
"radius": {
"sm": "4px",
"md": "6px",
"lg": "8px",
"xl": "12px"
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "12px",
"lg": "16px",
"xl": "20px",
"2xl": "24px",
"3xl": "40px"
}
}