WUI logo

Theming

BasicsCustomize

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

blackrgba(0, 0, 0, 1)
whitergba(255, 255, 255, 1)

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.

xxs

0.125rem

(2px)

xs

0.25rem

(4px)

sm

0.5rem

(8px)

md

0.75rem

(12px)

lg

1rem

(16px)

xl

1.5rem

(24px)

xxl

2rem

(32px)

3xl

3rem

(48px)

4xl

4rem

(64px)

5xl

6rem

(96px)

6xl

8rem

(128px)

7xl

12rem

(192px)

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.

none

0

(0px)

sm

0.125rem

(2px)

md

0.25rem

(4px)

lg

0.5rem

(8px)

xl

1rem

(16px)

Breakpoints (screens)

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

xs

0px

sm

480px

md

736px

lg

980px

xl

1280px

xxl

1440px

3xl

1620px

4xl

1920px

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.

font-size

h0

4.0625rem

(65px)

h1

2.8125rem

(45px)

h2

2.25rem

(36px)

h3

1.625rem

(26px)

h4

1.25rem

(20px)

h5

1rem

(16px)

h6

0.875rem

(14px)

lg

1.125rem

(18px)

md

1rem

(16px)

sm

0.875rem

(14px)

xs

0.75rem

(12px)

subtitle-md

0.8125rem

(13px)

subtitle-sm

0.6875rem

(11px)

weight

regular

400px

medium

500px

bold

600px

How to contributeTheming/customize