created:12/30/2020
updated:12/30/2020
loc
104
comments
10%
BeelineColor
Color item displaying the color as a block with values for rgb and Pantone colors. Design inspired by Beeline Design System.
Blue 5
HEX:
#001b38
RGB:
rgb(0,27,56)
Pantone:
289C:
Blue Accessibility
HEX:
#0352a0
RGB:
rgb(3,82,160)
Pantone:
2945C:
Blue Primary
HEX:
#0575e6
RGB:
rgb(5,117,230)
Pantone:
2727C:
Blue 1
HEX:
#4fa7ff
RGB:
rgb(79,167,255)
Pantone:
279C:
Blue 2
HEX:
#85dfff
RGB:
rgb(133,223,255)
Pantone:
636C:
Blue 3
HEX:
#ecf5ff
RGB:
rgb(236,245,255)
Pantone:
656C:
Blue 4
HEX:
#fbfdff
RGB:
rgb(251,253,255)
Pantone:
656C:
Name | Description | Default |
|---|---|---|
| name | name of the color, If none, or same as the color value, some color blocks will not display it string | - |
| color | color value as a string. accepted hex, rgb, hsl color strings ColorValue | - |
| hover | hover prop boolean | - |
| blackTextColor | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 string | - |
| whiteTextColor | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff string | - |
7 commits
package | imports | peer |
|---|---|---|
CopyContainer | ||
react ^17.0.1 | FC | * |
simple-color-converter ^2.1.9 | simpleColorConverter | |
theme-ui ^0.8.4 | jsxTheme |
file | imports |
|---|---|
| "../utils" | colorToStr |
| "../../types" | ColorBlockProps |
| "../../containers" | GridContainerPropsGridContainer |