created:12/30/2020
updated:12/30/2020
loc
105
comments
10%
IBMDLColor
Color item displaying the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values. Design inspired by IBM's Design Language.
- HEX
- RGB
- PMS
- CMYK
Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1
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 | - |
| display | hexrgbpmscmyk | hex |
5 commits
package | imports | peer |
|---|---|---|
TabsTabPanelTabListTabCopyContainer | ||
react ^17.0.1 | useStateReactNodeFC | * |
simple-color-converter ^2.1.9 | simpleColorConverter | |
theme-ui ^0.8.4 | jsx |
file | imports |
|---|---|
| "../utils" | colorToStrmostReadable |
| "../../types" | ColorBlockPropsColorValue |
| "../../containers" | FlexContainerPropsFlexContainer |