A next-generation tool to create blazing-fast documentation sites
API
created:4/29/2021
updated:4/29/2021
loc
377
comments
3%

TableColor

avatar of atanasster
@component-controls/design-tokens
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.

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

Palette Dark

AA colorAA dark
color / darkname
#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

avatar of atanasster
chore: upgrade eslint, gatsby, next
10/5/2020

atanasster

avatar of atanasster
fix: adjust column sizes for table color
10/5/2020

atanasster

avatar of atanasster
feat: clean up color tokens and add table color
3 commits
package
imports
peer
ExternalLinkCopyContainer
react
^17.0.1
FragmentFC
*
theme-ui
^0.8.4
jsxTheme
tinycolor
file
imports
"../utils"
colorToStrmostReadablecontrastGrade
"../../types"
ColorBlockPropsColorValuedefaultWhiteTextColordefaultBlackTextColorcolorContrastThemeColorProps
"../../containers"
TableContainerPropsTableContainerTableRowContainerTableContainerHeaderPropsTableColumn

Stories

Overview

#5C6AC4
#EFEFEF
primary
AA+
AA
F
AAA

Legend

ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed

Palette

AA color
colorname
#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