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
#1e293f
text300
#263450
text200
#2f4062
text100
#374b73
text
#161e2e
textTint
#d0d2d5
primary400
#6861ed
primary300
#8984f1
primary200
#aba7f5
primary100
#cdcaf9
primary
#574feb
primaryTint
#eeedfd
primaryShade
#11102f
primary600
#4e47d4
primary700
#3d37a5
primary800
#2c2876
primary900
#1a1847
secondary400
#894eef
secondary300
#a375f2
secondary200
#be9df6
secondary100
#d8c4fa
secondary
#7c3aed
secondaryTint
#f2ebfd
secondaryShade
#190c2f
secondary600
#7034d5
secondary700
#5729a6
secondary800
#3e1d77
secondary900
#251147

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
#f6a823
warning300
#f8bb54
warning200
#facf85
warning100
#fce2b6
warning
#f59e0b
warningTint
#fef5e7
warningShade
#312002
warning600
#dd8e0a
warning700
#ac6f08
warning800
#7b4f06
warning900
#4a2f03

Colors#

blue400
#4f8ff7
blue300
#76a8f9
blue200
#9dc1fb
blue100
#c4dafc
blue
#3b82f6
blueTint
#ebf3fe
blueShade
#0c1a31
blue600
#3575dd
blue700
#295bac
blue800
#1e417b
blue900
#12274a
green400
#28c08e
green300
#58cea7
green200
#88dcc0
green100
#b7ead9
green
#10b981
greenTint
#e7f8f2
greenShade
#03251a
green600
#0ea774
green700
#0b825a
green800
#085d41
green900
#053827
red400
#f15757
red300
#f47c7c
red200
#f7a2a2
red100
#fac7c7
red
#ef4444
redTint
#fdecec
redShade
#300e0e
red600
#d73d3d
red700
#a73030
red800
#782222
red900
#481414
orange400
#f6a823
orange300
#f8bb54
orange200
#facf85
orange100
#fce2b6
orange
#f59e0b
orangeTint
#fef5e7
orangeShade
#312002
orange600
#dd8e0a
orange700
#ac6f08
orange800
#7b4f06
orange900
#4a2f03
pink400
#ee5aa3
pink300
#f27fb8
pink200
#f6a4cc
pink100
#f9c8e0
pink
#ec4899
pinkTint
#fdedf5
pinkShade
#2f0e1f
pink600
#d4418a
pink700
#a5326b
pink800
#76244d
pink900
#47162e
purple400
#894eef
purple300
#a375f2
purple200
#be9df6
purple100
#d8c4fa
purple
#7c3aed
purpleTint
#f2ebfd
purpleShade
#190c2f
purple600
#7034d5
purple700
#5729a6
purple800
#3e1d77
purple900
#251147
indigo400
#6861ed
indigo300
#8984f1
indigo200
#aba7f5
indigo100
#cdcaf9
indigo
#574feb
indigoTint
#eeedfd
indigoShade
#11102f
indigo600
#4e47d4
indigo700
#3d37a5
indigo800
#2c2876
indigo900
#1a1847

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 style 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 © 2021 Jake Moxey