created:12/30/2020
updated:12/30/2020
loc
72
comments
14%

UniformColor

avatar of atanasster

Color item displaying as a table row, with color block, color name and rgb value. Design inspired by Uniform.

Component

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

Palette

ColorNameRGBA
Primary
16, 124, 178
PrimaryLight
183, 216, 232
Alert
216, 64, 15
AlertLight
243, 198, 183
Weather
153, 0, 153

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

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

atanasster

avatar of atanasster
feat: clean up color tokens and add table color
10/1/2020

atanasster

avatar of atanasster
fix: spelling updates
10/1/2020

atanasster

avatar of atanasster
feat: add universe color token
4 commits

External dependencies

package
imports
peer
CopyContainer
react
^17.0.1
FC
*
theme-ui
^0.8.4
jsx

Internal dependencies

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

Component JSX

<TableRowContainer
>
TableRowContainer
from"../../containers"
<BaseUniformColor
/>
BaseUniformColor
<tr
sx
>
tr
<td
>
td
<td
>
td
<code
sx
/>
code
<td
>
td
<div
/>
div
<TableContainer
columnssx
>
TableContainer
from"../../containers"
<BaseUniformColor
keynamecolor
/>
BaseUniformColor

Stories

Overview

Weather
153, 0, 153