created:4/29/2021
updated:4/29/2021
loc
377
comments
3%
TableColor
Color item displaying as a table row, with support for dark mode colors and AA accessibility tests. Design created to accomodate theme-ui-type color palettes. Custom design created by component-controls.
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#69768C #C9CACF | mutedText | AA | AA | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA | ||
#F6F6F6 #4D5866 | gray | AAA | F | AAA | F |
#D9F2F1 #B7ECEC | highlight | AAA | F | F | AAA |
#3B817D #D9F2F1 | action | AA | AA | F | AAA |
#027AC5 #B3D9FF | selected | AA | AA | F | AAA |
RGBA(0, 0, 0, 0.1) RGBA(211, 212, 219, 0.1) | shadow | F | AAA | F | AAA |
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 | #000000 |
| whiteTextColor | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff string | #ffffff |
package | imports | peer |
|---|---|---|
ExternalLinkCopyContainer | ||
react ^17.0.1 | FragmentFC | * |
theme-ui ^0.8.4 | jsxTheme | |
tinycolor2 ^1.4.1 | tinycolor |
file | imports |
|---|---|
| "../utils" | colorToStrmostReadablecontrastGrade |
| "../../types" | ColorBlockPropsColorValuedefaultWhiteTextColordefaultBlackTextColorcolorContrastThemeColorProps |
| "../../containers" | TableContainerPropsTableContainerTableRowContainerTableContainerHeaderPropsTableColumn |