Blaster Theme

BlasterJS Components come with built-in access to the default Blaster theme, by wrapping your application with the Blaster component. The theme file contains predefined values for common variables such as color, fonts, spacing and more. The Blaster theme structure is based on Styled-System's theme specification.

The Style Props on our components give direct access to the theme keys. For example, if you'd like to set the border-radius on a <Box> you can specify a value in the theme: <Box borderRadius="small">.

With the help of Styled-System, this will automatically do a lookup to find the value of the key radii.small in the theme and applies the corresponding CSS.

Our base theme is as follows:

 
{
  "colors": {
    "primary": "#738FFC",
    "primaryTint": "#E2E8FF",
    "primaryShade": "#5E73CC",
    "secondary": "#6372B4",
    "secondaryTint": "#A1AAD2",
    "secondaryShade": "#263263",
    "gray100": "#F2F5FF",
    "gray200": "#E0E5F5",
    "gray300": "#C3CADF",
    "gray400": "#B4B8CB",
    "gray500": "#959CB6",
    "gray600": "#6E779B",
    "gray700": "#464F77",
    "gray800": "#2A304D",
    "gray900": "#171B29",
    "white": "#FFFFFF",
    "offWhite": "#F4F5F7",
    "black": "#000000",
    "green": "#28c662",
    "greenTint": "#C7EAC9",
    "greenShade": "#2D7B31",
    "red": "#D42C3A",
    "redTint": "#F2C0C4",
    "redShade": "#A9232E",
    "yellow": "#DCA209",
    "yellowTint": "#FCE8B6",
    "yellowShade": "#886200",
    "textBase": "#2A304D",
    "link": "#738FFC",
    "linkHover": "#5E73CC",
    "success": "#28c662",
    "successTint": "#C7EAC9",
    "successShade": "#2D7B31",
    "danger": "#D42C3A",
    "dangerTint": "#F2C0C4",
    "dangerShade": "#A9232E",
    "warning": "#DCA209",
    "warningTint": "#FCE8B6",
    "warningShade": "#886200"
  },
  "fonts": {
    "body": "'Open Sans', sans-serif",
    "display": "'Libre Franklin', sans-serif",
    "code": "'Source Code Pro', monospace"
  },
  "fontSizes": [
    "1rem",
    "1.2rem",
    "1.5rem",
    "1.8rem",
    "2.2rem",
    "2.6rem",
    "2.9rem",
    "3.4rem"
  ],
  "radii": {
    "0": "0px",
    "none": "0px",
    "small": "3px",
    "base": "4px",
    "large": "10px"
  },
  "shadows": [
    "initial",
    "0px 2px 5px -2px #171B2933",
    "0px 2px 5px 0px #171B2933",
    "0px 2px 10px 1px #171B2920",
    "0px 12px 20px -3px #171B2920, 0px 2px 20px -9px #171B2920",
    "0 12px 17px 2px #171B2920, 0 5px 22px 4px #171B2920"
  ],
  "space": [
    "0",
    "0.8rem",
    "1.6rem",
    "2.4rem",
    "3.2rem",
    "4rem",
    "4.8rem",
    "5.6rem",
    "6.4rem",
    "7.2rem",
    "8rem"
  ],
  "lineHeights": {
    "inherit": "inherit",
    "small": "1",
    "base": "1.3",
    "large": "1.6"
  },
  "fontWeights": {},
  "letterSpacings": {},
  "maxWidths": {},
  "minWidths": {},
  "widths": {},
  "maxHeights": {},
  "minHeights": {},
  "heights": {},
  "borders": {},
  "borderWidths": {},
  "borderStyles": {},
  "zIndices": {},
  "styles": {}

To understand how to customize the theme, see the documentation on the Blaster component.