TableColor

3.15.0

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.

browse

docs

issues

import { TableColor } from '@component-controls/design-tokens';

Palette Dark

		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

Commits

Date	Author	Commit Message
12/25/2021	atanasster	chore: upgrade eslint, gatsby, next
10/5/2020	atanasster	fix: adjust column sizes for table color
10/5/2020	atanasster	feat: clean up color tokens and add table color

3 commits

package	imports	peer
@component-controls/components ^3.15.0	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

Stories

Overview

#5C6AC4

#EFEFEF

primary

AA+

AAA

Legend

Score	Contrast ratio	Result
AAA	>= 7.0:1	Passes WCAG 2.0 AAA
AA	>= 4.5:1	Passes WCAG 2.0 AA
AA+	>= 3.0:1	Passes WCAG 2.0 Large Text AA
F	< 3.0:1	AA Test failed

Palette

		AA color
color	name	#FFFFFF	#000000
#FAFAF9	background	AAA	F
#B6DEE2	blue	AAA	F
#247BA0	blueDark	AA+	AA
#B2E4DC	green	AAA	F
#2D5948	greenDark	F	AAA
RGBA(0,0,0,.1)	muted	F	AAA
#F25F5C	primary	AA	AA+
#B51916	primaryDark	AA+	AA
#FCBAB1	primaryLight	AAA	F

Design Tokens/Colors/SolidColor