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",
'dark-900': "#000",
custom: "#F12345",
// ...
},
}
Primary #
primary-100#FFF8D9
primary-200#FFE166
primary-500#FFCD00
primary-600#E5B800
primary-700#997B00
primary-800#735C00
primary-900#4C3D00
Light #
light-100rgba(255, 255, 255, 0.1)
light-200rgba(255, 255, 255, 0.17)
light-400rgba(255, 255, 255, 0.4)
light-500rgba(255, 255, 255, 0.55)
light-700rgba(255, 255, 255, 0.7)
light-900rgba(255, 255, 255, 1)
Dark #
dark-100rgba(0, 0, 0, 0.1)
dark-200rgba(0, 0, 0, 0.17)
dark-400rgba(0, 0, 0, 0.4)
dark-500rgba(0, 0, 0, 0.55)
dark-700rgba(0, 0, 0, 0.7)
dark-900rgba(0, 0, 0, 1)
Black and White #
blackdark-900
whitelight-900
Nudes #
nude-100#F6F3EF
nude-200#EFEAE4
nude-400#D6D2CC
nude-600#8F8C88
nude-700#6B6966
nude-900#474543
Success #
success-100#E3F0EC
success-200#99DCC7
success-300#45BE98
success-400#00A772
success-500#00875C
Danger #
danger-100#FFE7E7
danger-200#EBBDB5
danger-300#D87C6E
danger-400#CE5947
danger-500#AF4636
Info #
info-100#EDF3FE
info-200#B7D7F9
info-300#9AC7F7
info-400#4B9BF1
info-500#106DD1
Warning #
warning-100#FFF2DC
warning-200#F4DFBB
warning-300#EBC484
warning-400#E4AE56
warning-500#B97F22
Subs #
sub-1#8CB3DB
sub-2#3B52D0
sub-3#EE4B65
sub-4#F79D85
sub-5#A5D0A8
sub-6#267566
sub-7#9B8CC0

Spacing #

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

NameSpacePixel
xxs0.125rem2px
xs0.25rem4px
sm0.5rem8px
md0.75rem12px
lg1rem16px
xl1.5rem24px
xxl2rem32px
3xl3rem48px
4xl4rem64px
5xl6rem96px
6xl8rem128px
7xl12rem192px
export default {
"space": {
"xxs": "0.125rem",
"xs": "0.25rem",
"sm": "0.5rem",
"md": "0.75rem",
"lg": "1rem",
"xl": "1.5rem",
"xxl": "2rem",
"3xl": "3rem",
"4xl": "4rem",
"5xl": "6rem",
"6xl": "8rem",
"7xl": "12rem"
}
}

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": {
"none": "0",
"sm": "0.125rem",
"md": "0.25rem",
"lg": "0.5rem",
"xl": "1rem"
},
"borderWidths": {
"sm": "1px",
"md": "2px",
"lg": "3px"
}
}

Breakpoints (screens) #

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

export default {
"screens": {
"xs": 0,
"sm": 480,
"md": 736,
"lg": 980,
"xl": 1280,
"xxl": 1440,
"3xl": 1620,
"4xl": 1920
}
}
Usage #

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",
"lg": "1.125rem",
"md": "1rem",
"sm": "0.875rem",
"xs": "0.75rem",
"subtitle-md": "0.8125rem",
"subtitle-sm": "0.6875rem"
},
"defaultLineHeight": 1.15,
"defaultLetterSpacing": "-0.019rem",
"lineHeights": {
"html": 1.15,
"h0": "4.5rem",
"h1": "3rem",
"h2": "2.5rem",
"h3": "2rem",
"h4": "1.5rem",
"h5": "1.125rem",
"h6": "1rem",
"lg": "1.5rem",
"md": "1.125rem",
"sm": "1.125rem",
"xs": "0.875rem",
"subtitle-md": 1.15,
"subtitle-sm": 1.15
},
"fontWeights": {
"regular": 400,
"medium": 500,
"bold": 600
},
"letterSpacings": {
"html": "-0.019rem",
"h0": "-0.10625rem",
"h1": "-0.075rem",
"h2": "-0.0625rem",
"h3": "-0.05625rem",
"h4": "-0.0375rem",
"h5": "-0.03125rem",
"h6": "-0.03125rem",
"lg": "-0.019rem",
"md": "-0.019rem",
"sm": "-0.019rem",
"xs": "-0.0125rem",
"subtitle-md": "-0.0125rem",
"subtitle-sm": "-0.0125rem"
}
}

Previous

Upgrade