WUI logo

Basics

We expose a theme object for our customizable design system. You can easily customize colors, typography, breakpoints, etc to match with your design.

Colors #

Customize the color on the theme.colors object. Colors can be used for color, borderColor, backgroundColor, etc. Example of a color: dark.900. See more on github

export default {
colors: {
primary: {
// ...
500: "#FF0000"
// ...
},
dark: {
100: "#333",
// ...
900: "#000",
},
custom: "#F12345"
// ...
},
}
Primary #
100
#FFF8D9
200
#FFE166
500
#FFCD00
700
#E5B800
800
#735C00
900
#4C3D00
Light #
100
#737373
200
#8C8C8C
500
#999999
700
#B3B3B3
800
#E5E5E5
900
#FFFFFF
Dark #
100
#666666
200
#4C4C4C
500
#2B2B2B
700
#1A1A1A
800
#151515
900
#000000
Nudes #
100
#F6F3EF
200
#EFEAE4
500
#D6D2CC
700
#8F8C88
800
#6B6966
900
#474543
Success #
100
#E3F0EC
200
#45BE98
500
#00A772
700
#00875C
Danger #
100
#FFE7E7
200
#D87C6E
500
#CE5947
700
#AF4636
Info #
100
#EDF3FE
200
#9AC7F7
500
#4B9BF1
700
#106DD1
Warning #
100
#FFF2DC
200
#EBC484
500
#E4AE56
700
#B97F22
Subs #
1
#8CB3DB
2
#3B52D0
3
#EE4B65
4
#F79D85
5
#A5D0A8
6
#267566
7
#9B8CC0

Typography #

We use fonts, fontSizes, fontWeights, lineHeights and letterSpacings to customize the theme. You should use the Text component with predefined text styles where you can.

export default {
"fonts": {
"texts": "Work Sans, sans-serif",
"headings": "welcome-font, sans-serif",
"icons": "welcome-icon-font"
},
"fontSizes": {
"h0": "4.0625rem",
"h1": "2.8125rem",
"h2": "2.25rem",
"h3": "1.625rem",
"h4": "1.25rem",
"h5": "1rem",
"h6": "0.875rem",
"body1": "1.125rem",
"body2": "1rem",
"body3": "0.875rem",
"body4": "0.75rem",
"button": "0.75rem",
"subtitle1": "0.8125rem",
"subtitle2": "0.6875rem",
"meta1": "0.875rem",
"meta2": "0.75rem"
},
"defaultLineHeight": 1.15,
"defaultLetterSpacing": 0,
"headingLineHeight": 1.2,
"headingLetterSpacing": 0,
"lineHeights": {
"html": 1.15,
"h0": 1.2,
"h1": 1.2,
"h2": 1.2,
"h3": 1.2,
"h4": 1.2,
"h5": 1.2,
"h6": 1.2,
"body1": 1.15,
"body2": 1.15,
"body3": 1.15,
"body4": 1.15,
"subtitle1": 1.2,
"subtitle2": 1.2,
"meta1": 1.15,
"meta2": 1.15
},
"fontWeights": {
"regular": 400,
"medium": 500,
"bold": 600
},
"letterSpacings": {
"sm": "0.5px",
"md": "1px",
"lg": "2px",
"html": 0,
"h0": 0,
"h1": 0,
"h2": 0,
"h3": 0,
"h4": 0,
"h5": 0,
"h6": 0,
"body1": 0,
"body2": 0,
"body3": 0,
"body4": 0,
"subtitle1": 0,
"subtitle2": 0,
"meta1": 0,
"meta2": 0
}
}

Spacing #

You can customize the global spacing for padding and margin, top, left, right and bottom.

export default {
"space": {
"xxs": "0.375rem",
"xs": "0.5rem",
"sm": "0.625rem",
"md": "0.75rem",
"lg": "0.9375rem",
"xl": "1.25rem",
"xxl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3.125rem",
"6xl": "4rem"
}
}

Borders #

By default, we have a border radius on components. You can remove it by set to 0 the radii borders. You can also configure the width of the border.

export default {
"radii": {
"sm": "4px",
"md": "6px",
"lg": "10px"
},
"borderWidths": {
"sm": "1px",
"md": "2px",
"lg": "3px"
}
}

Breakpoints #

We use breakpoints from xstyled. Default sizes from the core theme are below. (Note: values are taken from this article).

theme.breakpoints = {
xs: 0,
sm: 480,
md: 736,
lg: 980,
xl: 1280
}

Usage #

<Box
display="flex"
alignItems="center"
justifyContent="center"
textAlign="center"
color={{ xs: 'light.900', lg: 'dark.900' }}
fontSize={{ lg: 'h2' }}
h={{ xs: '10rem', lg: '20rem' }}
backgroundColor={{ xs: 'sub.1', lg: 'primary.100' }}
>
Resize screen to change this Box 🌝
</Box>

Previous

Upgrade