Theming

Twigs ships with maximum flexibility to customize the look and feel of your application.

Once you wrap your application inside ThemeProvider, you will have access to theme object which can be used to modify the colors and other aspects of the components.

Default theme object

Below is the complete default theme object

{
  "colors": {
    "primary": "#2E666D",
    "secondary": "#363A43",
    "accent50": "#F3F3FF",
    "accent100": "#EAE9FE",
    "accent200": "#D7D6FE",
    "accent300": "#B9B5FD",
    "accent400": "#978CF9",
    "accent500": "#7158F5",
    "accent600": "#623BEC",
    "accent700": "#5329D8",
    "accent800": "#4622B5",
    "accent900": "#3B1E94",
    "primary50": "#E6F5F6",
    "primary100": "#B8E1E5",
    "primary200": "#8ACCD2",
    "primary300": "#5CB5BD",
    "primary400": "#2E9CA6",
    "primary500": "#00828D",
    "primary600": "#006B74",
    "primary700": "#00555C",
    "primary800": "#003E43",
    "primary900": "#00272A",
    "warning50": "#FFF6EF",
    "warning100": "#FEEAC7",
    "warning200": "#FDD28A",
    "warning300": "#FCBD4F",
    "warning400": "#FBAB24",
    "warning500": "#F59E0B",
    "warning600": "#DB8D06",
    "warning700": "#B47409",
    "warning800": "#92610E",
    "warning900": "#78510F",
    "highlight50": "#FFFCDA",
    "highlight100": "#FFF7AD",
    "highlight200": "#FFF27D",
    "highlight300": "#FFED4B",
    "highlight400": "#FFE81A",
    "highlight500": "#E6CF00",
    "highlight600": "#B3A100",
    "highlight700": "#807300",
    "highlight800": "#786B03",
    "highlight900": "#6A5F00",
    "positive50": "#F4FAF1",
    "positive100": "#E8F4E3",
    "positive200": "#D4E8CA",
    "positive300": "#A8D291",
    "positive400": "#67B034",
    "positive500": "#5EA130",
    "positive600": "#55932A",
    "positive700": "#4C8425",
    "positive800": "#437720",
    "positive900": "#3C691C",
    "secondary50": "#F4F6F7",
    "secondary100": "#E2E6EB",
    "secondary200": "#C9CFD8",
    "secondary300": "#A3AEBD",
    "secondary400": "#76859A",
    "secondary500": "#64748B",
    "secondary600": "#4E596C",
    "secondary700": "#444B5A",
    "secondary800": "#3D424D",
    "secondary900": "#363A43",
    "negative50": "#FFF6F3",
    "negative100": "#FDEDE8",
    "negative200": "#FFDAD0",
    "negative300": "#FFB4A1",
    "negative400": "#FA7659",
    "negative500": "#F65633",
    "negative600": "#E75030",
    "negative700": "#D14729",
    "negative800": "#BC4024",
    "negative900": "#A9371E",
    "neutral50": "#F8F8F8",
    "neutral100": "#F1F1F1",
    "neutral200": "#E2E2E2",
    "neutral300": "#C6C6C6",
    "neutral400": "#9E9E9E",
    "neutral500": "#919191",
    "neutral600": "#848484",
    "neutral700": "#757575",
    "neutral800": "#575757",
    "neutral900": "#111111",
    "black50": "#0000000A",
    "black100": "#00000014",
    "black200": "#0000001A",
    "black300": "#00000026",
    "black400": "#00000033",
    "black500": "#0000004D",
    "black600": "#00000080",
    "black700": "#000000B2",
    "black800": "#000000CC",
    "black900": "#000000",
    "white50": "#FFFFFF0D",
    "white100": "#FFFFFF14",
    "white200": "#FFFFFF1A",
    "white300": "#FFFFFF26",
    "white400": "#FFFFFF33",
    "white500": "#FFFFFF4D",
    "white600": "#FFFFFF80",
    "white700": "#FFFFFFB2",
    "white800": "#FFFFFFCC",
    "white900": "#FFFFFF"
  },
  "space": {
    "1": "0.125rem",
    "2": "0.25rem",
    "3": "0.375rem",
    "4": "0.5rem",
    "5": "0.625rem",
    "6": "0.75rem",
    "7": "0.875rem",
    "8": "1rem",
    "9": "1.125rem",
    "10": "1.25rem",
    "11": "1.375rem",
    "12": "1.5rem",
    "13": "1.625rem",
    "14": "1.75rem",
    "15": "1.875rem",
    "16": "2rem",
    "17": "2.125rem",
    "18": "2.25rem",
    "19": "2.375rem",
    "20": "2.5rem",
    "21": "2.625rem",
    "22": "2.75rem",
    "23": "2.875rem",
    "24": "3rem",
    "25": "3.125rem",
    "26": "3.25rem",
    "27": "3.375rem",
    "28": "3.5rem",
    "29": "3.625rem",
    "30": "3.75rem",
    "31": "3.875rem",
    "32": "4rem",
    "33": "4.125rem",
    "34": "4.25rem",
    "35": "4.375rem",
    "36": "4.5rem",
    "37": "4.625rem",
    "38": "4.75rem",
    "39": "4.875rem",
    "40": "5rem",
    "41": "5.125rem",
    "42": "5.25rem",
    "43": "5.375rem",
    "44": "5.5rem",
    "45": "5.625rem",
    "46": "5.75rem",
    "47": "5.875rem",
    "48": "6rem",
    "49": "6.125rem",
    "50": "6.25rem"
  },
  "fontSizes": {
    "xxs": "0.625rem",
    "xs": "0.75rem",
    "sm": "0.875rem",
    "md": "1rem",
    "lg": "1.2rem",
    "xl": "1.44rem",
    "2xl": "1.728rem",
    "3xl": "2.074rem",
    "4xl": "2.488rem",
    "5xl": "2.986rem"
  },
  "fonts": {
    "body": "sytem-ui",
    "heading": "sans-serif"
  },
  "fontWeights": {
    "1": "100",
    "2": "200",
    "3": "300",
    "4": "400",
    "5": "500",
    "6": "600",
    "7": "700",
    "8": "800",
    "9": "900"
  },
  "lineHeights": {
    "xxs": "0.75rem",
    "xs": "1rem",
    "sm": "1.25rem",
    "md": "1.5rem",
    "lg": "1.75rem",
    "xl": "2rem",
    "2xl": "2.5rem",
    "3xl": "3rem",
    "4xl": "4rem"
  },
  "letterSpacings": {},
  "sizes": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "20px",
    "6": "24px",
    "7": "28px",
    "8": "32px",
    "9": "36px",
    "10": "40px",
    "11": "44px",
    "12": "48px",
    "13": "52px",
    "14": "56px",
    "15": "60px",
    "16": "64px",
    "17": "68px",
    "18": "72px",
    "19": "76px",
    "20": "80px",
    "21": "84px",
    "22": "88px",
    "23": "92px",
    "24": "96px",
    "25": "100px",
    "26": "104px",
    "27": "108px",
    "28": "112px",
    "29": "116px",
    "30": "120px",
    "31": "124px",
    "32": "128px",
    "33": "132px",
    "34": "136px"
  },
  "borderWidths": {
    "xs": "1px",
    "sm": "2px",
    "md": "3px",
    "lg": "4px",
    "xl": "5px"
  },
  "borderStyles": {},
  "radii": {
    "none": "0px",
    "xs": "0.125rem",
    "sm": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem",
    "xl": "0.75rem",
    "2xl": "1rem",
    "3xl": "1.25rem",
    "4xl": "1.5rem",
    "round": "50%",
    "pill": "9999px"
  },
  "shadows": {
    "sm": "0px 5px 15px rgba(0, 0, 0, 0.04)"
  },
  "zIndices": {},
  "transitions": {
    "1": "0.1s",
    "2": "0.2s",
    "3": "0.3s"
  }
}

Using theme variables

You can consume thene variables in your components using $ before the variable name. Below is an example on how to use theme variables in your components.

import { Button } from '@sparrowengg/twigs-react';

<Button
  css={{
    backgroundColor: '$primary100',
    color: '$white900',
    borderRadius: '$pill',
    width: '200px',
    padding: '$6 $10',
    cursor: 'pointer',
    fontSize: '$md',
    '&:hover': {
      backgroundColor: '$primary200'
    },
    '&:active': {
      backgroundColor: '$primary900'
    }
  }}
> Submit </Button>

Colors

Primary

$primary

#2E666D

$primary50

#E6F5F6

$primary100

#B8E1E5

$primary200

#8ACCD2

$primary300

#5CB5BD

$primary400

#2E9CA6

$primary500

#00828D

$primary600

#006B74

$primary700

#00555C

$primary800

#003E43

$primary900

#00272A

Secondary

$secondary

#363A43

$secondary50

#F4F6F7

$secondary100

#E2E6EB

$secondary200

#C9CFD8

$secondary300

#A3AEBD

$secondary400

#76859A

$secondary500

#64748B

$secondary600

#4E596C

$secondary700

#444B5A

$secondary800

#3D424D

$secondary900

#363A43

Accent

$accent50

#F3F3FF

$accent100

#EAE9FE

$accent200

#D7D6FE

$accent300

#B9B5FD

$accent400

#978CF9

$accent500

#7158F5

$accent600

#623BEC

$accent700

#5329D8

$accent800

#4622B5

$accent900

#3B1E94

Highlight

$highlight50

#FFFCDA

$highlight100

#FFF7AD

$highlight200

#FFF27D

$highlight300

#FFED4B

$highlight400

#FFE81A

$highlight500

#E6CF00

$highlight600

#B3A100

$highlight700

#807300

$highlight800

#786B03

$highlight900

#6A5F00

Positive

$positive50

#F4FAF1

$positive100

#E8F4E3

$positive200

#D4E8CA

$positive300

#A8D291

$positive400

#67B034

$positive500

#5EA130

$positive600

#55932A

$positive700

#4C8425

$positive800

#437720

$positive900

#3C691C

Negative

$negative50

#FFF6F3

$negative100

#FDEDE8

$negative200

#FFDAD0

$negative300

#FFB4A1

$negative400

#FA7659

$negative500

#F65633

$negative600

#E75030

$negative700

#D14729

$negative800

#BC4024

$negative900

#A9371E

Neutral

$neutral50

#F8F8F8

$neutral100

#F1F1F1

$neutral200

#E2E2E2

$neutral300

#C6C6C6

$neutral400

#9E9E9E

$neutral500

#919191

$neutral600

#848484

$neutral700

#757575

$neutral800

#575757

$neutral900

#111111

Black

$black50

#0000000A

$black100

#00000014

$black200

#0000001A

$black300

#00000026

$black400

#00000033

$black500

#0000004D

$black600

#00000080

$black700

#000000B2

$black800

#000000CC

$black900

#000000

White

$white50

#FFFFFF0D

$white100

#FFFFFF14

$white200

#FFFFFF1A

$white300

#FFFFFF26

$white400

#FFFFFF33

$white500

#FFFFFF4D

$white600

#FFFFFF80

$white700

#FFFFFFB2

$white800

#FFFFFFCC

$white900

#FFFFFF

Font size

$xxs

:

0.625rem

(

10px

)

The quick brown fox jumps over the lazy dog

$xs

:

0.75rem

(

12px

)

The quick brown fox jumps over the lazy dog

$sm

:

0.875rem

(

14px

)

The quick brown fox jumps over the lazy dog

$md

:

1rem

(

16px

)

The quick brown fox jumps over the lazy dog

$lg

:

1.2rem

(

19.2px

)

The quick brown fox jumps over the lazy dog

$xl

:

1.44rem

(

23.04px

)

The quick brown fox jumps over the lazy dog

$2xl

:

1.728rem

(

27.648px

)

The quick brown fox jumps over the lazy dog

$3xl

:

2.074rem

(

33.184px

)

The quick brown fox jumps over the lazy dog

$4xl

:

2.488rem

(

39.808px

)

The quick brown fox jumps over the lazy dog

$5xl

:

2.986rem

(

47.776px

)

The quick brown fox jumps over the lazy dog

Font weights

$1

/

100

The quick brown fox jumps over the lazy dog

$2

/

200

The quick brown fox jumps over the lazy dog

$3

/

300

The quick brown fox jumps over the lazy dog

$4

/

400

The quick brown fox jumps over the lazy dog

$5

/

500

The quick brown fox jumps over the lazy dog

$6

/

600

The quick brown fox jumps over the lazy dog

$7

/

700

The quick brown fox jumps over the lazy dog

$8

/

800

The quick brown fox jumps over the lazy dog

$9

/

900

The quick brown fox jumps over the lazy dog

Line heights

$xxs

/

0.75rem

(12px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$xs

/

1rem

(16px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$sm

/

1.25rem

(20px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$md

/

1.5rem

(24px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$lg

/

1.75rem

(28px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$xl

/

2rem

(32px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$2xl

/

2.5rem

(40px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$3xl

/

3rem

(48px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

$4xl

/

4rem

(64px)

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Border width

$ xs

/

1px

$ sm

/

2px

$ md

/

3px

$ lg

/

4px

$ xl

/

5px

Radius

none

:

0px

xs

:

0.125rem

(2px)

sm

:

0.25rem

(4px)

md

:

0.375rem

(6px)

lg

:

0.5rem

(8px)

xl

:

0.75rem

(12px)

2xl

:

1rem

(16px)

3xl

:

1.25rem

(20px)

4xl

:

1.5rem

(24px)

round

:

50%

pill

:

9999px

Spacing

Space values can be used for padding, margin, gap

Key	Value	px Value
1	0.125rem	2px
2	0.25rem	4px
3	0.375rem	6px
4	0.5rem	8px
5	0.625rem	10px
6	0.75rem	12px
7	0.875rem	14px
8	1rem	16px
9	1.125rem	18px
10	1.25rem	20px
11	1.375rem	22px
12	1.5rem	24px
13	1.625rem	26px
14	1.75rem	28px
15	1.875rem	30px
16	2rem	32px
17	2.125rem	34px
18	2.25rem	36px
19	2.375rem	38px
20	2.5rem	40px
21	2.625rem	42px
22	2.75rem	44px
23	2.875rem	46px
24	3rem	48px
25	3.125rem	50px
26	3.25rem	52px
27	3.375rem	54px
28	3.5rem	56px
29	3.625rem	58px
30	3.75rem	60px
31	3.875rem	62px
32	4rem	64px
33	4.125rem	66px
34	4.25rem	68px
35	4.375rem	70px
36	4.5rem	72px
37	4.625rem	74px
38	4.75rem	76px
39	4.875rem	78px
40	5rem	80px
41	5.125rem	82px
42	5.25rem	84px
43	5.375rem	86px
44	5.5rem	88px
45	5.625rem	90px
46	5.75rem	92px
47	5.875rem	94px
48	6rem	96px
49	6.125rem	98px
50	6.25rem	100px

Size

Size can be used for height, width, top, bottom etc...

Key	Value
1	4px
2	8px
3	12px
4	16px
5	20px
6	24px
7	28px
8	32px
9	36px
10	40px
11	44px
12	48px
13	52px
14	56px
15	60px
16	64px
17	68px
18	72px
19	76px
20	80px
21	84px
22	88px
23	92px
24	96px
25	100px
26	104px
27	108px
28	112px
29	116px
30	120px
31	124px
32	128px
33	132px
34	136px

Customize component style

Twigs exposes an prop css which can be used to pass your own styles to modify the components.

You can pass your theme variables in css attributes to css object. Below is an example on how to use that. In order to use your primary100 as background color, use a $ before the theme variable. Example below,

<Button 
  css={{
    backgroundColor: '$primary100'
  }}>
  Submit
</Button>

Below is an example which modifies our primary button using custom css and theme variables.

<Button 
  css={{
    backgroundColor: '$positive500',
    color: '$white900',
    borderRadius: '$pill',
    width: '200px',
    padding: '$6 $10',
    cursor: 'pointer',
    fontSize: '$md',
    '&:hover': {
      backgroundColor: '$positive600'
    },
    '&:active': {
      backgroundColor: '$positive900'
    }
  }}>
  Submit
</Button>

Output

Submit

Customize theme

The recommended way to customize the theme is to create a twigs.config.js file in the root of your project and then using that in the ThemeProvider. Below is an example on how you can customize the theme.

twigs.config.js

export default {
  theme: {
    extends: {
      colors: {
        primary: "#2E666D",
        secondary: "#363A43",
      },
      fontSizes: {
        xxs: "0.5rem",
        xs: "0.7rem",
        sm: "0.85rem",
        md: "1rem",
        lg: "1.2rem",
        xl: "1.44rem",
        "2xl": "2rem",
        "3xl": "2.5rem",
        "4xl": "3.6rem",
        "5xl": "5rem",
      },
    }
  }
};

src/index.js

import { theme } from '@root/twigs.config.js';

<ThemeProvider theme={theme.extends}>
  <App>
</ThemeProvider>

You can always directly pass the theme object to the ThemeProvider as well, however, it is recommended to use a separate file as it will be helpful in providing better VSCode intellisense support if you are using our VSCode plugin.