Color helper

Another cool feature of Fower is the color helper. you can handle color with some postfix.

all color helper postfix:

• --D{0-100}, to darken a color, eg: red200--D20
• --L{0-100}, to lighten a color, eg: red200--L20
• --T{0-100}, to transparentize a color, eg: red200--T20
• --O{0-100}, to opacify a color, eg: color="rgba(0, 0, 0, 0.2)--20)"

Darken

Use --D{0-100} postfix to darken a color.

Result

Loading...

Live Editor

<Box toEvenly toCenterY> <Box red300>normal</Box> <Box red300--D40>darken</Box> <Box color="#fff--D40">darken</Box> <Box bgRed300 square-84></Box> <Box bgRed300--D40 square-84></Box> <Box border borderRed300 square-84></Box> <Box border borderRed300--D40 square-84></Box> </Box>

<Box toEvenly toCenterY>
  <Box red300>normal</Box>
  <Box red300--D40>darken</Box>
  <Box color="#fff--D40">darken</Box>
  <Box bgRed300 square-84></Box>
  <Box bgRed300--D40 square-84></Box>
  <Box border borderRed300 square-84></Box>
  <Box border borderRed300--D40 square-84></Box>
</Box>

Lighten

Use --L{0-100} to lighten a color.

Result

Loading...

Live Editor

<Box toEvenly toCenterY> <Box red500>normal</Box> <Box red500--L40>lighten</Box> <Box color="#000--L40">lighten</Box> <Box bgRed300 square-84></Box> <Box bgRed300--L20 square-84></Box> <Box border borderRed300 square-84></Box> <Box border borderRed300--L20 square-84></Box> </Box>

<Box toEvenly toCenterY>
  <Box red500>normal</Box>
  <Box red500--L40>lighten</Box>
  <Box color="#000--L40">lighten</Box>
  <Box bgRed300 square-84></Box>
  <Box bgRed300--L20 square-84></Box>
  <Box border borderRed300 square-84></Box>
  <Box border borderRed300--L20 square-84></Box>
</Box>

Transparentize

Use --T{0-100} to transparentize a color.

Result

Loading...

Live Editor

<Box toEvenly> <Box red500>normal</Box> <Box red500--T40>transparentize</Box> <Box color="#000--T40">transparentize</Box> <Box bgRed500 square-84></Box> <Box bgRed500--T40 square-84></Box> <Box border borderRed300 square-84></Box> <Box border borderRed300--T40 square-84></Box> </Box>

<Box toEvenly>
  <Box red500>normal</Box>
  <Box red500--T40>transparentize</Box>
  <Box color="#000--T40">transparentize</Box>
  <Box bgRed500 square-84></Box>
  <Box bgRed500--T40 square-84></Box>
  <Box border borderRed300 square-84></Box>
  <Box border borderRed300--T40 square-84></Box>
</Box>

Opacify

Use --O{0-100} to opacify a color.

Result

Loading...

Live Editor

<Box toEvenly> <Box color="rgba(0,0,0,0.4)">0.4</Box> <Box color="rgba(0,0,0,0.4)--O40">Opacify to 0.6</Box> <Box bg="rgba(0,0,0,0.4)" square-84></Box> <Box bg="rgba(0,0,0,0.4)--O40" square-84></Box> <Box border borderColor="rgba(0,0,0,0.4)" square-84></Box> <Box border borderColor="rgba(0,0,0,0.4)--O40" square-84></Box> </Box>

<Box toEvenly>
  <Box color="rgba(0,0,0,0.4)">0.4</Box>
  <Box color="rgba(0,0,0,0.4)--O40">Opacify to 0.6</Box>
  <Box bg="rgba(0,0,0,0.4)" square-84></Box>
  <Box bg="rgba(0,0,0,0.4)--O40" square-84></Box>
  <Box border borderColor="rgba(0,0,0,0.4)" square-84></Box>
  <Box border borderColor="rgba(0,0,0,0.4)--O40" square-84></Box>
</Box>

Use with pseudo

The color helper postfix can use with pseudo postfix, Let's build a beautiful Button Component:

Result

Loading...

Live Editor

<Box as="button" bgOrange400 bgOrange400--D10--hover white rounded py3 px5 outlineNone cursorPointer > Button </Box>

<Box
  as="button"
  bgOrange400
  bgOrange400--D10--hover
  white
  rounded
  py3
  px5
  outlineNone
  cursorPointer
>
  Button
</Box>