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
#fcfcfd
text400
#1e293f
#1e293f
text300
#263450
#263450
text200
#2f4062
#2f4062
text100
#374b73
#374b73
text
#161e2e
#161e2e
textTint
#d0d2d5
#d0d2d5
primary400
#6861ed
#6861ed
primary300
#8984f1
#8984f1
primary200
#aba7f5
#aba7f5
primary100
#cdcaf9
#cdcaf9
primary
#574feb
#574feb
primaryTint
#eeedfd
#eeedfd
primaryShade
#11102f
#11102f
primary600
#4e47d4
#4e47d4
primary700
#3d37a5
#3d37a5
primary800
#2c2876
#2c2876
primary900
#1a1847
#1a1847
secondary400
#894eef
#894eef
secondary300
#a375f2
#a375f2
secondary200
#be9df6
#be9df6
secondary100
#d8c4fa
#d8c4fa
secondary
#7c3aed
#7c3aed
secondaryTint
#f2ebfd
#f2ebfd
secondaryShade
#190c2f
#190c2f
secondary600
#7034d5
#7034d5
secondary700
#5729a6
#5729a6
secondary800
#3e1d77
#3e1d77
secondary900
#251147
#251147
Grayscales#
black
#0b0e13
#0b0e13
black400
#171a1f
#171a1f
black300
#23262b
#23262b
black200
#303236
#303236
black100
#3c3e42
#3c3e42
white
white
white
white600
#f7f7fa
#f7f7fa
white700
#f2f2f5
#f2f2f5
white800
#e6e6eb
#e6e6eb
white900
#d9d9e1
#d9d9e1
gray400
#727d90
#727d90
gray300
#919aa9
#919aa9
gray200
#b1b7c2
#b1b7c2
gray100
#d0d4da
#d0d4da
gray
#626f84
#626f84
gray600
#586477
#586477
gray700
#4e596a
#4e596a
gray800
#454e5c
#454e5c
gray900
#3b434f
#3b434f
Statuses#
info400
#3576d9
#3576d9
info300
#6295e2
#6295e2
info200
#8fb3ea
#8fb3ea
info100
#bcd1f2
#bcd1f2
info
#1e67d5
#1e67d5
infoTint
#e9f0fb
#e9f0fb
infoShade
#06152b
#06152b
info600
#1b5dc0
#1b5dc0
info700
#154895
#154895
info800
#0f346b
#0f346b
info900
#091f40
#091f40
success400
#238a47
#238a47
success300
#54a470
#54a470
success200
#85be99
#85be99
success100
#b6d8c2
#b6d8c2
success
#0a7d33
#0a7d33
successTint
#e7f2eb
#e7f2eb
successShade
#02190a
#02190a
success600
#09712e
#09712e
success700
#075824
#075824
success800
#053f1a
#053f1a
success900
#03260f
#03260f
danger400
#de2e2e
#de2e2e
danger300
#e55d5d
#e55d5d
danger200
#ed8b8b
#ed8b8b
danger100
#f4b9b9
#f4b9b9
danger
#da1717
#da1717
dangerTint
#fbe8e8
#fbe8e8
dangerShade
#2c0505
#2c0505
danger600
#c41515
#c41515
danger700
#991010
#991010
danger800
#6d0c0c
#6d0c0c
danger900
#410707
#410707
warning400
#f6a823
#f6a823
warning300
#f8bb54
#f8bb54
warning200
#facf85
#facf85
warning100
#fce2b6
#fce2b6
warning
#f59e0b
#f59e0b
warningTint
#fef5e7
#fef5e7
warningShade
#312002
#312002
warning600
#dd8e0a
#dd8e0a
warning700
#ac6f08
#ac6f08
warning800
#7b4f06
#7b4f06
warning900
#4a2f03
#4a2f03
Colors#
blue400
#4f8ff7
#4f8ff7
blue300
#76a8f9
#76a8f9
blue200
#9dc1fb
#9dc1fb
blue100
#c4dafc
#c4dafc
blue
#3b82f6
#3b82f6
blueTint
#ebf3fe
#ebf3fe
blueShade
#0c1a31
#0c1a31
blue600
#3575dd
#3575dd
blue700
#295bac
#295bac
blue800
#1e417b
#1e417b
blue900
#12274a
#12274a
green400
#28c08e
#28c08e
green300
#58cea7
#58cea7
green200
#88dcc0
#88dcc0
green100
#b7ead9
#b7ead9
green
#10b981
#10b981
greenTint
#e7f8f2
#e7f8f2
greenShade
#03251a
#03251a
green600
#0ea774
#0ea774
green700
#0b825a
#0b825a
green800
#085d41
#085d41
green900
#053827
#053827
red400
#f15757
#f15757
red300
#f47c7c
#f47c7c
red200
#f7a2a2
#f7a2a2
red100
#fac7c7
#fac7c7
red
#ef4444
#ef4444
redTint
#fdecec
#fdecec
redShade
#300e0e
#300e0e
red600
#d73d3d
#d73d3d
red700
#a73030
#a73030
red800
#782222
#782222
red900
#481414
#481414
orange400
#f6a823
#f6a823
orange300
#f8bb54
#f8bb54
orange200
#facf85
#facf85
orange100
#fce2b6
#fce2b6
orange
#f59e0b
#f59e0b
orangeTint
#fef5e7
#fef5e7
orangeShade
#312002
#312002
orange600
#dd8e0a
#dd8e0a
orange700
#ac6f08
#ac6f08
orange800
#7b4f06
#7b4f06
orange900
#4a2f03
#4a2f03
pink400
#ee5aa3
#ee5aa3
pink300
#f27fb8
#f27fb8
pink200
#f6a4cc
#f6a4cc
pink100
#f9c8e0
#f9c8e0
pink
#ec4899
#ec4899
pinkTint
#fdedf5
#fdedf5
pinkShade
#2f0e1f
#2f0e1f
pink600
#d4418a
#d4418a
pink700
#a5326b
#a5326b
pink800
#76244d
#76244d
pink900
#47162e
#47162e
purple400
#894eef
#894eef
purple300
#a375f2
#a375f2
purple200
#be9df6
#be9df6
purple100
#d8c4fa
#d8c4fa
purple
#7c3aed
#7c3aed
purpleTint
#f2ebfd
#f2ebfd
purpleShade
#190c2f
#190c2f
purple600
#7034d5
#7034d5
purple700
#5729a6
#5729a6
purple800
#3e1d77
#3e1d77
purple900
#251147
#251147
indigo400
#6861ed
#6861ed
indigo300
#8984f1
#8984f1
indigo200
#aba7f5
#aba7f5
indigo100
#cdcaf9
#cdcaf9
indigo
#574feb
#574feb
indigoTint
#eeedfd
#eeedfd
indigoShade
#11102f
#11102f
indigo600
#4e47d4
#4e47d4
indigo700
#3d37a5
#3d37a5
indigo800
#2c2876
#2c2876
indigo900
#1a1847
#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>
On this page