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

IBMDLColor

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

Color item displaying the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values. Design inspired by IBM's Design Language.

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

Overview

Green 10
defbe6
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
-
display
hexrgbpmscmyk
hex

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
9/28/2020

atanasster

avatar of atanasster
feat: add lightning color token, table container
9/26/2020

atanasster

avatar of atanasster
feat: ad imb design language color token
4 commits
package
imports
peer
TabsTabPanelTabListTabCopyContainer
react
^17.0.1
useStateReactNodeFC
*
simpleColorConverter
theme-ui
^0.8.4
jsx
file
imports
"../utils"
colorToStrmostReadable
"../../types"
ColorBlockPropsColorValue
"../../containers"
FlexContainerPropsFlexContainer

Stories

Palette

Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1