Bristlecone Color Styles, Default Theme and Customization

Bristlecone Components come with built-in access to our @bristlecone/theme. The theme file contains an object which holds values for common variables such as color, fonts, box shadows, and more. The theme file pulls many of its color and typography values from @bristlecone/primitives.

Many of our theme keys correspond to system props on our components. For example, if you'd like to set the max width on a <Box> set the maxWidth prop to medium: <Box maxWidth='medium'>

In the background, styled-system does the work of finding the medium value from maxWidth key in the theme file and applying the corresponding CSS.


Color Styles

Below are the default color styles that are used by @bristlecone/components, specifically, with the scheme prop; the color styles map to the default theme's colorStyles key.

The default color styles are configured to have a minimum contrast ratio of 4.5:1. Learn more about color contrast and what it means to your users at the A11Y project site.

Pro tip: Some components may have custom variant styles defined that map to another color dictionary in the theme, e.g. outlineStyles. Checkout the full theme to see what all other color style definitions are by default. You can also create your own colorStyles, or build upon the existing ones below - lots of flexibility!

Scheme:blue

Color: #fffBackground: #0366d6

Scheme:branchName

Color: rgba(27, 31, 35, 0.80)Background: #f1f8ff

Scheme:branchNameLink

Color: #0366d6Background: #dbedff

Scheme:dark

Color: #fffBackground: #24292e

Scheme:default

Color: #24292eBackground: N/A

Scheme:disabled

Color: #e1e4e8Background: #586069

Scheme:error

Color: #fffBackground: #d73a49

Scheme:gray

Color: #586069Background: #e1e4e8

Scheme:grayDarker

Color: #fffBackground: #6a737d

Scheme:grayLight

Color: #24292eBackground: #e1e4e8

Scheme:green

Color: #28a745Background: transparent

Scheme:greenInverted

Color: #fffBackground: #22863a

Scheme:light

Color: #24292eBackground: #fff

Scheme:orange

Color: #fffBackground: #c24e00

Scheme:pending

Color: #24292eBackground: #dbab09

Scheme:purple

Color: #fffBackground: #6f42c1

Scheme:red

Color: #fffBackground: #cb2431

Scheme:success

Color: #fffBackground: #22863a

Scheme:warning

Color: #fffBackground: #c24e00

Scheme:yellow

Color: #24292eBackground: #ffd33d

Full Theme

The full default theme is as follows:

{
  "fonts": {
    "normal": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
    "mono": "SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, Courier, monospace"
  },
  "borders": [
    0,
    "1px solid",
    "3px solid",
    "6px solid",
    "9px solid"
  ],
  "borderStyles": [
    "solid",
    "dashed",
    "double",
    "groove",
    "ridge",
    "unset"
  ],
  "borderWidths": [
    0,
    1,
    3,
    4,
    8,
    12,
    16,
    24,
    32,
    40,
    48
  ],
  "colors": {
    "bodytext": "#24292e",
    "link": "#0366d6",
    "black": "#1b1f23",
    "white": "#fff",
    "transparent": "transparent",
    "brown": [
      "#efebe8",
      "#ded4ce",
      "#cabbb1",
      "#b29b8d",
      "#92725e",
      "#532000",
      "#491c00",
      "#3f1800",
      "#311300",
      "#1f0c00"
    ],
    "gray": [
      "#fafbfc",
      "#f6f8fa",
      "#e1e4e8",
      "#d1d5da",
      "#959da5",
      "#6a737d",
      "#586069",
      "#444d56",
      "#2f363d",
      "#24292e"
    ],
    "blue": [
      "#f1f8ff",
      "#dbedff",
      "#c8e1ff",
      "#79b8ff",
      "#2188ff",
      "#0366d6",
      "#005cc5",
      "#044289",
      "#032f62",
      "#05264c"
    ],
    "fuschia": [
      "#fff7ff",
      "#ffefff",
      "#ffe7ff",
      "#ffdeff",
      "#ffd5ff",
      "#ffccff",
      "#e6b8e6",
      "#cba2cb",
      "#a887a8",
      "#7a627a"
    ],
    "indigo": [
      "#f7f7ff",
      "#efefff",
      "#e7e7ff",
      "#dedeff",
      "#d5d5ff",
      "#ccccff",
      "#b8b8e6",
      "#a2a2ca",
      "#8686a8",
      "#61617a"
    ],
    "midnight": [
      "#e8ecee",
      "#d0d8db",
      "#b3c0c6",
      "#91a3ac",
      "#637d8a",
      "#0d364a",
      "#0b2f41",
      "#092838",
      "#07202c",
      "#04141c"
    ],
    "lime": [
      "#fbfff4",
      "#f8ffe9",
      "#f4ffde",
      "#f1ffd2",
      "#edffc6",
      "#e9ffb9",
      "#d3e7a7",
      "#b9cb93",
      "#9aa97a",
      "#707b59"
    ],
    "green": [
      "#f0fff4",
      "#dcffe4",
      "#bef5cb",
      "#85e89d",
      "#34d058",
      "#28a745",
      "#22863a",
      "#176f2c",
      "#165c26",
      "#144620"
    ],
    "yellow": [
      "#fffdef",
      "#fffbdd",
      "#fff5b1",
      "#ffea7f",
      "#ffdf5d",
      "#ffd33d",
      "#f9c513",
      "#dbab09",
      "#b08800",
      "#735c0f"
    ],
    "orange": [
      "#fff8f2",
      "#ffebda",
      "#ffd1ac",
      "#ffab70",
      "#fb8532",
      "#f66a0a",
      "#e36209",
      "#d15704",
      "#c24e00",
      "#a04100"
    ],
    "red": [
      "#ffeef0",
      "#ffdce0",
      "#fdaeb7",
      "#f97583",
      "#ea4a5a",
      "#d73a49",
      "#cb2431",
      "#b31d28",
      "#9e1c23",
      "#86181d"
    ],
    "purple": [
      "#f5f0ff",
      "#e6dcfd",
      "#d1bcf9",
      "#b392f0",
      "#8a63d2",
      "#6f42c1",
      "#5a32a3",
      "#4c2889",
      "#3a1d6e",
      "#29134e"
    ],
    "teal": [
      "#f5fff8",
      "#eafff0",
      "#dfffe9",
      "#d3ffe1",
      "#c6ffd8",
      "#b9ffcf",
      "#a7e7bb",
      "#93cba5",
      "#7aa989",
      "#597b63"
    ],
    "blackfadeLow": "rgba(27, 31, 35, 0.07)",
    "blackfade10": "rgba(27, 31, 35, 0.10)",
    "blackfade15": "rgba(27, 31, 35, 0.15)",
    "blackfade20": "rgba(27, 31, 35, 0.20)",
    "blackfade35": "rgba(27, 31, 35, 0.35)",
    "blackfade40": "rgba(27, 31, 35, 0.40)",
    "blackfade50": "rgba(27, 31, 35, 0.50)",
    "blackfade60": "rgba(27, 31, 35, 0.60)",
    "blackfade70": "rgba(27, 31, 35, 0.70)",
    "blackfade80": "rgba(27, 31, 35, 0.80)",
    "blackfade90": "rgba(27, 31, 35, 0.90)",
    "whitefade10": "rgba(255, 255, 255, 0.10)",
    "whitefade15": "rgba(255, 255, 255, 0.15)",
    "whitefade20": "rgba(255, 255, 255, 0.20)",
    "whitefade35": "rgba(255, 255, 255, 0.35)",
    "whitefade40": "rgba(255, 255, 255, 0.40)",
    "whitefade50": "rgba(255, 255, 255, 0.50)",
    "whitefade60": "rgba(255, 255, 255, 0.60)",
    "whitefade70": "rgba(255, 255, 255, 0.70)",
    "whitefade80": "rgba(255, 255, 255, 0.80)",
    "whitefade90": "rgba(255, 255, 255, 0.90)",
    "bodytextfade40": "rgba(36, 41, 46, 0.40)",
    "state": {
      "checked": "#0366d6",
      "error": "#d73a49",
      "failure": "#d73a49",
      "pending": "#dbab09",
      "queued": "#dbab09",
      "success": "#22863a",
      "unknown": "#959da5",
      "disabled": "#e1e4e8",
      "disabledDarker": "#586069"
    }
  },
  "fontWeights": {
    "light": 300,
    "normal": 400,
    "bold": 600
  },
  "gradients": {
    "none": "none",
    "gray": [
      "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 90%)",
      "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 60%)"
    ],
    "green": [
      "linear-gradient(-180deg, #34d058 0%, #28a745 90%)",
      "linear-gradient(-180deg, #34d058 0%, #28a745 60%)"
    ],
    "red": [
      "linear-gradient(-180deg, #ea4a5a 0%, #cb2431 90%)",
      "linear-gradient(-180deg, #ea4a5a 0%, #cb2431 60%)"
    ],
    "purple": [
      "linear-gradient(-180deg, #8a63d2 0%, #6f42c1 90%)",
      "linear-gradient(-180deg, #8a63d2 0%, #6f42c1 60%)"
    ]
  },
  "fontSizes": [
    12,
    14,
    16,
    20,
    24,
    32,
    40,
    48
  ],
  "lineHeights": {
    "condensedUltra": 1,
    "condensed": 1.25,
    "default": 1.5
  },
  "radii": [
    0,
    1,
    3,
    6,
    9,
    12,
    24,
    48,
    96,
    128
  ],
  "breakpoints": {
    "sm": 0,
    "md": "20em",
    "lg": "40em",
    "xlg": "64em",
    "jumbo": "80em"
  },
  "maxWidths": {
    "sm": "20em",
    "md": "34em",
    "lg": "63.25em",
    "xlg": "80em"
  },
  "minWidths": {
    "sm": "20em",
    "md": "34em",
    "lg": "63.25em",
    "xlg": "80em"
  },
  "minHeights": {
    "sm": "20em",
    "md": "34em",
    "lg": "63.25em",
    "xlg": "80em"
  },
  "shadows": {
    "none": "none",
    "small": "0 1px 1px rgba(27, 31, 35, 0.20)",
    "medium": "0 1px 5px rgba(27, 31, 35, 0.35)",
    "large": "0 1px 15px rgba(27, 31, 35, 0.40)",
    "xlarge": "0 10px 50px rgba(27, 31, 35, 0.07)",
    "avatars": {
      "small": "-2px -2px 0 rgba(255, 255, 255, 0.8)"
    },
    "inset": {
      "small": "inset 0 -1px 0 rgba(27, 31, 35, 0.15)",
      "medium": "inset 0 1px 2px rgba(27, 31, 35, 0.07)",
      "blue": {
        "glow": "inset 0 1px 2px rgba(27, 31, 35, 0.07), 0 0 0 0.2em #0366d64d"
      }
    },
    "tooltip": {
      "top": "1px 1px 1px rgba(27, 31, 35, 0.40)",
      "bottom": "1px 1px 1px rgba(27, 31, 35, 0.40)"
    }
  },
  "space": [
    0,
    4,
    8,
    16,
    24,
    32,
    40,
    48,
    64,
    80,
    96,
    112,
    128
  ],
  "textStyles": {
    "caps": {
      "textTransform": "uppercase",
      "letterSpacing": "0.2em"
    },
    "small": {
      "fontSize": 12
    },
    "medium": {
      "fontSize": 14
    },
    "large": {
      "fontSize": 16
    },
    "xlarge": {
      "fontSize": 20
    }
  },
  "colorStyles": {
    "blue": {
      "color": "#fff",
      "backgroundColor": "#0366d6"
    },
    "branchName": {
      "color": "rgba(27, 31, 35, 0.80)",
      "backgroundColor": "#f1f8ff"
    },
    "branchNameLink": {
      "color": "#0366d6",
      "backgroundColor": "#dbedff"
    },
    "dark": {
      "color": "#fff",
      "backgroundColor": "#24292e"
    },
    "default": {
      "color": "#24292e"
    },
    "disabled": {
      "color": "#e1e4e8",
      "backgroundColor": "#586069"
    },
    "error": {
      "color": "#fff",
      "backgroundColor": "#d73a49"
    },
    "gray": {
      "color": "#586069",
      "backgroundColor": "#e1e4e8"
    },
    "grayDarker": {
      "color": "#fff",
      "backgroundColor": "#6a737d"
    },
    "grayLight": {
      "color": "#24292e",
      "backgroundColor": "#e1e4e8"
    },
    "green": {
      "color": "#28a745",
      "backgroundColor": "transparent"
    },
    "greenInverted": {
      "color": "#fff",
      "backgroundColor": "#22863a"
    },
    "light": {
      "color": "#24292e",
      "backgroundColor": "#fff"
    },
    "link": {
      "black": {
        "color": "#fff",
        "backgroundColor": "#1b1f23",
        "&:hover": {
          "backgroundColor": "#2f363d"
        },
        "&:active": {
          "backgroundColor": "#1b1f23"
        }
      },
      "blue": {
        "color": "#fff",
        "backgroundColor": "#0366d6",
        "&:hover": {
          "backgroundColor": "#005cc5"
        },
        "&:active": {
          "backgroundColor": "#044289"
        }
      },
      "charcoal": {
        "color": "#fff",
        "backgroundColor": "#2f363d",
        "&:hover": {
          "backgroundColor": "#1b1f23"
        },
        "&:active": {
          "backgroundColor": "#24292e"
        }
      },
      "danger": {
        "color": "#cb2431",
        "backgroundColor": "#fafbfc",
        "&:hover": {
          "color": "#fff",
          "backgroundColor": "#cb2431"
        },
        "&:active": {
          "backgroundColor": "#9e1c23"
        }
      },
      "default": {
        "color": "#0366d6"
      },
      "disabled": {
        "color": "rgba(36, 41, 46, 0.40)",
        "backgroundColor": "#e1e4e8"
      },
      "gray": {
        "color": "#24292e",
        "backgroundColor": "#f6f8fa",
        "&:hover": {
          "backgroundColor": "#e1e4e8"
        },
        "&:active": {
          "backgroundColor": "#d1d5da"
        }
      },
      "green": {
        "color": "#fff",
        "backgroundColor": "#28a745",
        "&:hover": {
          "backgroundColor": "#22863a"
        },
        "&:active": {
          "backgroundColor": "#176f2c"
        }
      },
      "outline": {
        "color": "#0366d6",
        "&:hover": {
          "color": "#fff",
          "backgroundColor": "#0366d6"
        },
        "&:active": {
          "backgroundColor": "#044289"
        }
      },
      "primary": {
        "color": "#fff",
        "backgroundColor": "#28a745",
        "&:hover": {
          "backgroundColor": "#22863a"
        },
        "&:active": {
          "backgroundColor": "#176f2c"
        }
      },
      "purple": {
        "color": "#fff",
        "backgroundColor": "#6f42c1",
        "&:hover": {
          "backgroundColor": "#5a32a3"
        },
        "&:active": {
          "backgroundColor": "#4c2889"
        }
      },
      "red": {
        "color": "#fff",
        "backgroundColor": "#cb2431",
        "&:hover": {
          "backgroundColor": "#9e1c23"
        },
        "&:active": {
          "backgroundColor": "#86181d"
        }
      }
    },
    "none": {
      "backgroundColor": "transparent"
    },
    "orange": {
      "color": "#fff",
      "backgroundColor": "#c24e00"
    },
    "pending": {
      "color": "#24292e",
      "backgroundColor": "#dbab09"
    },
    "purple": {
      "color": "#fff",
      "backgroundColor": "#6f42c1"
    },
    "red": {
      "color": "#fff",
      "backgroundColor": "#cb2431"
    },
    "success": {
      "color": "#fff",
      "backgroundColor": "#22863a"
    },
    "warning": {
      "color": "#fff",
      "backgroundColor": "#c24e00"
    },
    "yellow": {
      "color": "#24292e",
      "backgroundColor": "#ffd33d"
    }
  },
  "buttons": {
    "black": {
      "color": "#fff",
      "backgroundColor": "#1b1f23",
      "&:hover": {
        "backgroundColor": "#2f363d"
      },
      "&:active": {
        "backgroundColor": "#1b1f23"
      }
    },
    "blue": {
      "color": "#fff",
      "backgroundColor": "#0366d6",
      "&:hover": {
        "backgroundColor": "#005cc5"
      },
      "&:active": {
        "backgroundColor": "#044289"
      }
    },
    "charcoal": {
      "color": "#fff",
      "backgroundColor": "#2f363d",
      "&:hover": {
        "backgroundColor": "#1b1f23"
      },
      "&:active": {
        "backgroundColor": "#24292e"
      }
    },
    "danger": {
      "color": "#cb2431",
      "backgroundColor": "#fafbfc",
      "&:hover": {
        "color": "#fff",
        "backgroundColor": "#cb2431"
      },
      "&:active": {
        "backgroundColor": "#9e1c23"
      }
    },
    "default": {
      "color": "#24292e",
      "backgroundColor": "#f6f8fa",
      "&:hover": {
        "backgroundColor": "#e1e4e8"
      },
      "&:active": {
        "backgroundColor": "#d1d5da"
      }
    },
    "disabled": {
      "color": "rgba(36, 41, 46, 0.40)",
      "backgroundColor": "#e1e4e8"
    },
    "gray": {
      "color": "#24292e",
      "backgroundColor": "#f6f8fa",
      "&:hover": {
        "backgroundColor": "#e1e4e8"
      },
      "&:active": {
        "backgroundColor": "#d1d5da"
      }
    },
    "green": {
      "color": "#fff",
      "backgroundColor": "#28a745",
      "&:hover": {
        "backgroundColor": "#22863a"
      },
      "&:active": {
        "backgroundColor": "#176f2c"
      }
    },
    "outline": {
      "color": "#0366d6",
      "&:hover": {
        "color": "#fff",
        "backgroundColor": "#0366d6"
      },
      "&:active": {
        "backgroundColor": "#044289"
      }
    },
    "primary": {
      "color": "#fff",
      "backgroundColor": "#28a745",
      "&:hover": {
        "backgroundColor": "#22863a"
      },
      "&:active": {
        "backgroundColor": "#176f2c"
      }
    },
    "purple": {
      "color": "#fff",
      "backgroundColor": "#6f42c1",
      "&:hover": {
        "backgroundColor": "#5a32a3"
      },
      "&:active": {
        "backgroundColor": "#4c2889"
      }
    },
    "red": {
      "color": "#fff",
      "backgroundColor": "#cb2431",
      "&:hover": {
        "backgroundColor": "#9e1c23"
      },
      "&:active": {
        "backgroundColor": "#86181d"
      }
    },
    "link": {
      "border": 0,
      "backgroundColor": "transparent",
      "&:hover": {
        "textDecoration": "underline"
      }
    },
    "plain": {
      "border": 0,
      "backgroundColor": "transparent"
    }
  },
  "flashStyles": {
    "gray": {
      "color": "#586069",
      "backgroundColor": "#f6f8fa"
    },
    "green": {
      "color": "#165c26",
      "backgroundColor": "#dcffe4"
    },
    "red": {
      "color": "#86181d",
      "backgroundColor": "#ffdce0"
    },
    "yellow": {
      "color": "#24292e",
      "backgroundColor": "#fffbdd"
    },
    "purple": {
      "color": "#29134e",
      "backgroundColor": "#e6dcfd"
    }
  },
  "formStyles": {
    "blue": {
      "color": "#fff",
      "backgroundColor": "#0366d6"
    },
    "branchName": {
      "color": "rgba(27, 31, 35, 0.80)",
      "backgroundColor": "#f1f8ff"
    },
    "branchNameLink": {
      "color": "#0366d6",
      "backgroundColor": "#dbedff"
    },
    "dark": {
      "color": "#fff",
      "backgroundColor": "#24292e"
    },
    "default": {
      "color": "#24292e"
    },
    "disabled": {
      "color": "#e1e4e8",
      "backgroundColor": "#586069"
    },
    "error": {
      "color": "#fff",
      "backgroundColor": "#d73a49"
    },
    "gray": {
      "color": "#586069",
      "backgroundColor": "#e1e4e8"
    },
    "grayDarker": {
      "color": "#fff",
      "backgroundColor": "#6a737d"
    },
    "grayLight": {
      "color": "#24292e",
      "backgroundColor": "#e1e4e8"
    },
    "green": {
      "color": "#28a745",
      "backgroundColor": "transparent"
    },
    "greenInverted": {
      "color": "#fff",
      "backgroundColor": "#22863a"
    },
    "light": {
      "color": "#24292e",
      "backgroundColor": "#fff"
    },
    "link": {
      "black": {
        "color": "#fff",
        "backgroundColor": "#1b1f23",
        "&:hover": {
          "backgroundColor": "#2f363d"
        },
        "&:active": {
          "backgroundColor": "#1b1f23"
        }
      },
      "blue": {
        "color": "#fff",
        "backgroundColor": "#0366d6",
        "&:hover": {
          "backgroundColor": "#005cc5"
        },
        "&:active": {
          "backgroundColor": "#044289"
        }
      },
      "charcoal": {
        "color": "#fff",
        "backgroundColor": "#2f363d",
        "&:hover": {
          "backgroundColor": "#1b1f23"
        },
        "&:active": {
          "backgroundColor": "#24292e"
        }
      },
      "danger": {
        "color": "#cb2431",
        "backgroundColor": "#fafbfc",
        "&:hover": {
          "color": "#fff",
          "backgroundColor": "#cb2431"
        },
        "&:active": {
          "backgroundColor": "#9e1c23"
        }
      },
      "default": {
        "color": "#0366d6"
      },
      "disabled": {
        "color": "rgba(36, 41, 46, 0.40)",
        "backgroundColor": "#e1e4e8"
      },
      "gray": {
        "color": "#24292e",
        "backgroundColor": "#f6f8fa",
        "&:hover": {
          "backgroundColor": "#e1e4e8"
        },
        "&:active": {
          "backgroundColor": "#d1d5da"
        }
      },
      "green": {
        "color": "#fff",
        "backgroundColor": "#28a745",
        "&:hover": {
          "backgroundColor": "#22863a"
        },
        "&:active": {
          "backgroundColor": "#176f2c"
        }
      },
      "outline": {
        "color": "#0366d6",
        "&:hover": {
          "color": "#fff",
          "backgroundColor": "#0366d6"
        },
        "&:active": {
          "backgroundColor": "#044289"
        }
      },
      "primary": {
        "color": "#fff",
        "backgroundColor": "#28a745",
        "&:hover": {
          "backgroundColor": "#22863a"
        },
        "&:active": {
          "backgroundColor": "#176f2c"
        }
      },
      "purple": {
        "color": "#fff",
        "backgroundColor": "#6f42c1",
        "&:hover": {
          "backgroundColor": "#5a32a3"
        },
        "&:active": {
          "backgroundColor": "#4c2889"
        }
      },
      "red": {
        "color": "#fff",
        "backgroundColor": "#cb2431",
        "&:hover": {
          "backgroundColor": "#9e1c23"
        },
        "&:active": {
          "backgroundColor": "#86181d"
        }
      }
    },
    "none": {
      "border": "none"
    },
    "orange": {
      "color": "#fff",
      "backgroundColor": "#c24e00"
    },
    "pending": {
      "color": "#24292e",
      "backgroundColor": "#dbab09"
    },
    "purple": {
      "color": "#fff",
      "backgroundColor": "#6f42c1"
    },
    "red": {
      "color": "#fff",
      "backgroundColor": "#cb2431"
    },
    "success": {
      "color": "#fff",
      "backgroundColor": "#22863a"
    },
    "warning": {
      "color": "#fff",
      "backgroundColor": "#c24e00"
    },
    "yellow": {
      "color": "#24292e",
      "backgroundColor": "#ffd33d"
    }
  },
  "pointerStyles": {
    "black": {
      "color": "#fff",
      "borderColor": "#1b1f23",
      "backgroundColor": "#1b1f23"
    },
    "default": {
      "color": "#586069",
      "borderColor": "#586069",
      "backgroundColor": "#f6f8fa"
    },
    "gray": {
      "color": "#586069",
      "borderColor": "#586069",
      "backgroundColor": "#f6f8fa"
    },
    "green": {
      "color": "#165c26",
      "borderColor": "#165c26",
      "backgroundColor": "#dcffe4"
    },
    "red": {
      "color": "#86181d",
      "borderColor": "#86181d",
      "backgroundColor": "#ffdce0"
    },
    "yellow": {
      "color": "#24292e",
      "borderColor": "rgba(27, 31, 35, 0.60)",
      "backgroundColor": "#fffbdd"
    },
    "purple": {
      "color": "#29134e",
      "borderColor": "#29134e",
      "backgroundColor": "#e6dcfd"
    },
    "whiteLight": {
      "color": "inherit",
      "borderColor": "rgba(27, 31, 35, 0.20)",
      "backgroundColor": "#fff"
    },
    "whiteContrast": {
      "color": "inherit",
      "borderColor": "#1b1f23",
      "backgroundColor": "#fff"
    }
  },
  "gradientStyles": {
    "danger": {
      "backgroundImage": "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 90%)",
      "&:hover": {
        "backgroundImage": "linear-gradient(-180deg, #ea4a5a 0%, #cb2431 90%)"
      }
    },
    "default": {
      "backgroundImage": "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 90%)",
      "&:hover": {
        "backgroundImage": "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 60%)"
      }
    },
    "disabled": {
      "backgroundColor": "#e1e4e8"
    },
    "gray": {
      "backgroundImage": "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 90%)",
      "&:hover": {
        "backgroundImage": "linear-gradient(-180deg, rgba(255, 255, 255, 0.20) 0%, #e1e4e8 60%)"
      }
    },
    "none": {
      "backgroundImage": "none",
      "&:hover": {
        "backgroundImage": "none"
      }
    },
    "primary": {
      "backgroundImage": "linear-gradient(-180deg, #34d058 0%, #28a745 90%)",
      "&:hover": {
        "backgroundImage": "linear-gradient(-180deg, #34d058 0%, #28a745 60%)"
      }
    },
    "purple": {
      "backgroundImage": "linear-gradient(-180deg, #8a63d2 0%, #6f42c1 90%)",
      "&:hover": {
        "backgroundImage": "linear-gradient(-180deg, #8a63d2 0%, #6f42c1 60%)"
      }
    },
    "red": {
      "backgroundImage": "linear-gradient(-180deg, #ea4a5a 0%, #cb2431 90%)",
      "&:hover": {
        "backgroundImage": "linear-gradient(-180deg, #ea4a5a 0%, #cb2431 60%)"
      }
    }
  },
  "outlineStyles": {
    "default": {
      "border": "1px solid",
      "borderColor": "rgba(27, 31, 35, 0.15)"
    },
    "black": {
      "color": "inherit",
      "border": "3px solid",
      "borderColor": "#1b1f23",
      "backgroundImage": "none",
      "backgroundColor": "transparent",
      "&:hover": {
        "color": "#fff",
        "backgroundImage": "none",
        "backgroundColor": "#1b1f23"
      }
    },
    "blue": {
      "color": "inherit",
      "border": "3px solid",
      "borderColor": "#0366d6",
      "backgroundImage": "none",
      "backgroundColor": "transparent",
      "&:hover": {
        "color": "#0366d6",
        "backgroundImage": "none",
        "backgroundColor": "transparent"
      }
    },
    "gray": {
      "color": "inherit",
      "border": "3px solid",
      "borderColor": "#586069",
      "backgroundImage": "none",
      "backgroundColor": "transparent",
      "&:hover": {
        "color": "#fff",
        "backgroundImage": "none",
        "backgroundColor": "#586069"
      }
    },
    "green": {
      "color": "inherit",
      "border": "3px solid",
      "borderColor": "#28a745",
      "backgroundImage": "none",
      "backgroundColor": "transparent",
      "&:hover": {
        "color": "#fff",
        "backgroundImage": "none",
        "backgroundColor": "#28a745"
      }
    },
    "purple": {
      "color": "inherit",
      "border": "3px solid",
      "borderColor": "#6f42c1",
      "backgroundImage": "none",
      "backgroundColor": "transparent",
      "&:hover": {
        "color": "#fff",
        "backgroundImage": "none",
        "backgroundColor": "#6f42c1"
      }
    },
    "red": {
      "color": "inherit",
      "border": "3px solid",
      "borderColor": "#cb2431",
      "backgroundImage": "none",
      "backgroundColor": "transparent",
      "&:hover": {
        "color": "#fff",
        "backgroundImage": "none",
        "backgroundColor": "#cb2431"
      }
    }
  },
  "elements": {
    "color": "#24292e",
    "borderColor": "#e1e4e8",
    "backgroundColor": "#fff",
    "blockquote": {
      "color": "#586069"
    },
    "code": {
      "borderRadius": 1,
      "backgroundColor": "rgba(27, 31, 35, 0.10)"
    },
    "forms": {
      "fieldset": {
        "color": "#24292e",
        "backgroundColor": "inherit"
      }
    },
    "headings": {
      "h1": {
        "color": "inherit",
        "borderColor": "#edeff1"
      },
      "h2": {
        "borderColor": "#edeff1"
      },
      "h3": {
        "color": "#2f363d"
      }
    },
    "link": {
      "default": {
        "color": "#0366d6"
      },
      "visited": {
        "color": "#0366d6"
      },
      "hover": {
        "color": "#0366d6"
      },
      "active": {
        "color": "#0366d6"
      }
    },
    "pre": {
      "padding": 6,
      "borderRadius": 1,
      "borderWidth": 1,
      "borderStyle": "solid",
      "borderColor": "#e1e4e8",
      "backgroundColor": "#f6f8fa"
    },
    "tables": {
      "th": {
        "color": "inherit",
        "backgroundColor": "#e1e4e8",
        "fontWeight": 600
      },
      "tr": {
        "color": "inherit",
        "borderColor": "#fff",
        "backgroundColor": "#fff",
        "zebra": {
          "backgroundColor": "#f6f8fa"
        },
        "td": {
          "borderColor": "#edeff1"
        }
      }
    }
  },
  "sections": {
    "footer": {
      "color": "#6a737d",
      "borderColor": "#e1e4e8",
      "backgroundColor": "#f6f8fa"
    },
    "header": {
      "color": "#eafff0",
      "borderColor": "#e1e4e8",
      "backgroundColor": "#24292e",
      "link": {
        "color": "#eafff0"
      },
      "blocks": {
        "borderColor": "#eafff0"
      }
    },
    "hero": {
      "color": "#eafff0",
      "backgroundColor": "#1f0c00"
    },
    "sideNav": {
      "color": "inherit",
      "borderColor": "gray.2",
      "backgroundColor": "gray.0",
      "links": {
        "items": {
          "color": "#0366d6",
          "active": "inherit"
        },
        "heading": {
          "color": "#044289",
          "active": "inherit"
        }
      },
      "lists": {
        "borderColor": "#e1e4e8"
      }
    },
    "liveEdit": {
      "outer": {
        "borderColor": "#e1e4e8"
      },
      "preview": {
        "backgroundColor": "inherit"
      }
    },
    "home": {
      "main": {
        "packages": {
          "container": {
            "borderColor": "#1f0c00",
            "backgroundColor": "#f3efec",
            "&:hover": {
              "backgroundColor": "#dedeff"
            }
          },
          "links": {
            "color": "#504050",
            "textDecoration": "none",
            ":hover": {
              "color": "#04141c",
              "textDecoration": "none"
            },
            ":active": {
              "color": "#04141c",
              "textDecoration": "underline"
            }
          }
        }
      }
    },
    "theme": {
      "colorScheme": {
        "backgroundColor": "colors.gray3"
      }
    }
  },
  "color": "#24292e",
  "backgroundColor": "#fff",
  "transition": {
    "transitionDuration": "225ms",
    "transitionProperty": "color, background-color"
  },
  "mode": {
    "dark": false,
    "color": "#24292e",
    "backgroundColor": "#fff"
  }
}
<Text is='pre' css={{whiteSpace: 'pre-wrap'}}>
{JSON.stringify(theme, null, '  ')}
</Text>

Custom Theming

Custom theming is an optional way to override the Bristlecone values that control color, spacing, typography, and other aspects of our components.

There are two ways to change the theme of Bristlecone components:

  1. You can override the theme for an entire tree of components using the <ThemeProvider> from Styled Components:

    import {Block, Button, Text, theme as bristlecone} from '@bristlecone/components'
    import {ThemeProvider} from 'styled-components'
    
    // a theme with custom spacing and font sizes
    const theme = {
      ...bristlecone,
      space: [0, 8, 16, 32, 64],
      fontSizes: [10, 12, 16, 24, 48]
    }
    
    // override
    theme.colors.bodytext = '#111'
    
    export default () => (
      <ThemeProvider theme={theme}>
        <Block color='bodytext' p={4}>
          <Text fontSize={4}>Hello, world!</Text>
        </Block>
      </ThemeProvider>
    )
    
  2. You can theme individual components by passing the theme prop directly:

    import {Text} from '@bristlecone/components'
    
    const theme = {
      colors: {
        magenta: '#f0f'
      }
    }
    
    export default () => (
      <Text theme={theme} color='magenta'>Hi, I'm magenta!</Text>
    )
    

    ☝️ This is an intentionally convoluted example, since you can use <Text color='#f0f'> out of the box.

Read the styled-system docs for more information on theming in styled-system.