A next-generation tool to create blazing-fast documentation sites
API
created:12/30/2020
updated:12/30/2020
loc
109
comments
9%

XColor

avatar of atanasster
@component-controls/design-tokens
3.14.5

Color item displaying the color as a circle with the variable name, HEX, RGB, CMYK, and PANTONE values below. Design inspired by Biteable's Design System X.

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

Overview

Lady Black
HEX
3C3C3B
RGB
60,60,59
CMYK
0,0,2,76
Pantone
447C
Name
Description
Default
Controls
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
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: added biteable x color token
3 commits
package
imports
peer
CopyContainer
react
^17.0.1
FC
*
simpleColorConverter
theme-ui
^0.8.4
jsxTheme
file
imports
"../utils"
colorToStr
"../../types"
ColorBlockPropsColorValue
"../../containers"
GridContainerPropsGridContainer

Stories

Palette

Dame Tangerine
HEX
FF5000
RGB
255,80,0
CMYK
0,69,100,0
Pantone
1655C
Señor Purple
HEX
5F285A
RGB
95,40,90
CMYK
0,58,5,63
Pantone
261C
Baron Von Teal
HEX
1DE9B6
RGB
29,233,182
CMYK
88,0,22,9
Pantone
3385C
Agent Cyan
HEX
18FFFF
RGB
24,255,255
CMYK
91,0,0,0
Pantone
3252C
Madam Yellow
HEX
FFF500
RGB
255,245,0
CMYK
0,4,100,0
Pantone
3945C
Pastor Pink
HEX
FF96B4
RGB
255,150,180
CMYK
0,41,29,0
Pantone
183C
Brigadier Blue
HEX
000A47
RGB
0,10,71
CMYK
100,86,0,72
Pantone
274C