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

ETradeColor

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

Color item displaying the color as a block with values for hex, class, and sass can be copied to clipboard on hover. Design inspired by E-Trade Design System.

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

Overview

Negative red
#cc0000
$negative
Error state
Data trending down
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
#ffffff
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
9/26/2020

atanasster

avatar of atanasster
chore: refactor colors
9/25/2020

atanasster

avatar of atanasster
feat: added etrade color token
4 commits
package
imports
peer
CircleSlashIcon
copy
react
^17.0.1
useStateFragmentFC
*
theme-ui
^0.8.4
jsx
tinycolor
file
imports
"../utils"
colorToStrmostReadable
"../../types"
ColorBlockPropsColorValuecolorContrastdefaultWhiteTextColorThemeColorProps
"../../containers"
GridContainerPropsGridContainer

Stories

Palette

Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text