OPatternColor

3.15.0

Color item displaying as a table row, with color block, sass name, and hex, RGB, and CMYK color values. Design inspired by OPattern.

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

Variable	Hex	RGB	CMYK
`$primary-color`	#107CB2	16, 124, 178	91, 30, 0, 30
`$primary-color-light`	30% of $primary-color
`$alert-color`	#D8400F	216, 64, 15	0, 70, 93, 15
`$alert-color-light`	30% of $alert-color
`$weather-color`	#990099	153, 0, 153	0, 100, 0, 40

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	-

Date	Author	Commit Message
12/25/2021	atanasster	chore: upgrade eslint, gatsby, next
10/5/2020	atanasster	feat: clean up color tokens and add table color
10/1/2020	atanasster	fix: spelling updates
9/29/2020	atanasster	feat: added opattern color token

4 commits

package	imports	peer
@component-controls/components ^3.15.0	CopyContainer
react ^17.0.1	FragmentFC	*
simple-color-converter ^2.1.9	simpleColorConverter
theme-ui ^0.8.4	jsx

file	imports
"../utils"	colorToStr
"../../types"	ColorBlockPropsColorValue
"../../containers"	TableContainerPropsTableContainerTableRowContainer

$weather-color

#990099

153, 0, 153

0, 100, 0, 40