#Palette

Bumbag provides an accessible default palette to get you up and running, hopefully you like it. If not, feel free to customize it.

#Defaults

default
#fcfcfd
text400
#2e2e2e
text300
#3a3a3a
text200
#474747
text100
#545454
text
#212121
textTint
#d3d3d3
primary400
#6861ed
primary300
#8984f1
primary200
#aba7f5
primary100
#cdcaf9
primary
#574feb
primaryTint
#eeedfd
primaryShade
#11102f
primary600
#4e47d4
primary700
#3d37a5
primary800
#2c2876
primary900
#1a1847
secondary400
#a859dc
secondary300
#bb7ee4
secondary200
#cfa3ec
secondary100
#e2c8f3
secondary
#9e46d8
secondaryTint
#f5edfb
secondaryShade
#200e2b
secondary600
#8e3fc2
secondary700
#6f3197
secondary800
#4f236c
secondary900
#2f1541

#Grayscales

black
#0b0e13
black400
#171a1f
black300
#23262b
black200
#303236
black100
#3c3e42
white
white
white600
#f7f7fa
white700
#f2f2f5
white800
#e6e6eb
white900
#d9d9e1
gray400
#727d90
gray300
#919aa9
gray200
#b1b7c2
gray100
#d0d4da
gray
#626f84
gray600
#586477
gray700
#4e596a
gray800
#454e5c
gray900
#3b434f

#Statuses

info400
#3576d9
info300
#6295e2
info200
#8fb3ea
info100
#bcd1f2
info
#1e67d5
infoTint
#e9f0fb
infoShade
#06152b
info600
#1b5dc0
info700
#154895
info800
#0f346b
info900
#091f40
success400
#238a47
success300
#54a470
success200
#85be99
success100
#b6d8c2
success
#0a7d33
successTint
#e7f2eb
successShade
#02190a
success600
#09712e
success700
#075824
success800
#053f1a
success900
#03260f
danger400
#de2e2e
danger300
#e55d5d
danger200
#ed8b8b
danger100
#f4b9b9
danger
#da1717
dangerTint
#fbe8e8
dangerShade
#2c0505
danger600
#c41515
danger700
#991010
danger800
#6d0c0c
danger900
#410707
warning400
#efa638
warning300
#f2ba64
warning200
#f6ce91
warning100
#fae1bd
warning
#ed9c22
warningTint
#fdf5e9
warningShade
#2f1f07
warning600
#d58c1f
warning700
#a66d18
warning800
#774e11
warning900
#472f0a

#Accessing the palette

#Within themeable components

#applyTheme

You can access any palette value in any of the color based CSS attributes (such as backgroundColor or color):

import { Button, applyTheme } from 'bumbag';
const PrimaryButton = applyTheme(Button, {
styles: {
base: {
color: 'primary'
}
}
})
<PrimaryButton>I am a primary button</PrimaryButton>

#styled

import { Button, styled, palette } from 'bumbag';
const PrimaryButton = styled(Button)`
color: ${palette('primary')}
`;
<PrimaryButton>I am a primary button</PrimaryButton>

#Within CSS Props

Any CSS color attribute (e.g. color, borderColor, etc) can take a color from the palette:

import { Text } from 'bumbag';
<Text color="primary">I am a primary text</Text>

#Modifying the palette

You can modify the palette by altering the Bumbag theme.

You can use tools such as Coolors or Smart Swatch to generate a decent accessible palette.

#Example

import { Provider } from 'bumbag';
const theme = {
palette: {
text: '#212121',
primary: '#574feb',
info: '#1e67d5',
success: '#0a7d33',
danger: '#da1717',
warning: '#ed9c22'
}
}
<Provider theme={theme}>Hello world!</Provider>

#Theming

#Schema

const theme = {
palette: {
background: string,
black: string,
white: string,
white600: string,
white700: string,
white800: string,
white900: string,
gray100: string,
gray200: string,
gray300: string,
gray400: string,
gray: string,
gray500: string,
gray600: string,
gray700: string,
gray800: string,
gray900: string,
default: string,
defaultInverted: string,
primaryTint: string,
primaryTintInverted: string,
primary100: string,
primary200: string,
primary300: string,
primary400: string,
primary: string,
primaryInverted: string,
primary500: string,
primary600: string,
primary700: string,
primary800: string,
primary900: string,
secondaryTint: string,
secondaryTintInverted: string,
secondary100: string,
secondary200: string,
secondary300: string,
secondary400: string,
secondary: string,
secondaryInverted: string,
secondary500: string,
secondary600: string,
secondary700: string,
secondary800: string,
secondary900: string,
infoTint: string,
infoTintInverted: string,
info100: string,
info200: string,
info300: string,
info400: string,
info: string,
infoInverted: string,
info500: string,
info600: string,
info700: string,
info800: string,
info900: string,
successTint: string,
successTintInverted: string,
success100: string,
success200: string,
success300: string,
success400: string,
success: string,
successInverted: string,
success500: string,
success600: string,
success700: string,
success800: string,
success900: string,
dangerTint: string,
dangerTintInverted: string,
danger100: string,
danger200: string,
danger300: string,
danger400: string,
danger: string,
dangerInverted: string,
danger500: string,
danger600: string,
danger700: string,
danger800: string,
danger900: string,
warningTint: string,
warningTintInverted: string,
warning100: string,
warning200: string,
warning300: string,
warning400: string,
warning: string,
warningInverted: string,
warning500: string,
warning600: string,
warning700: string,
warning800: string,
warning900: string,
// Plus your own definitions...
[key: string]: string,
// e.g. fullySickBlue: '#145abc'
}
}

#Example

import { Provider } from 'bumbag';
const theme = {
palette: {
text: '#212121',
primary: '#574feb',
info: '#1e67d5',
success: '#0a7d33',
danger: '#da1717',
warning: '#ed9c22'
}
}
<Provider theme={theme}>Hello world!</Provider>
Copyright © 2020 Jake Moxey