created:12/30/2020

updated:12/30/2020

loc

comments

10%

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.

Component

browse

docs

issues

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

Overview

$weather-color

#990099

153, 0, 153

0, 100, 0, 40

Properties

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	-

Commits

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

External dependencies

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

Internal dependencies

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

Component JSX

<TableRowContainer

TableRowContainer

from"../../containers"

<BaseOPatternColor

BaseOPatternColor

<tr

<td

<CopyContainer

valuenamesx

@component-controls/components

^3.15.0

<td

<code

code

<td

colSpan

<Fragment

react

^17.0.1

<td

<TableContainer

columnssx

TableContainer