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

BoltColor

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

Color item displaying the color as a block with AA color contrast tests. Design inspired by Bolt.

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

Overview

Brand
#2270ee
var(--bolt-color-navy)
Text sizeAaAa
#ffffff (4.55)
pass
pass
#000000 (4.62)
pass
pass
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
#000000
whiteTextColor

dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff

string
#ffffff

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: add duet color token
9/23/2020

atanasster

avatar of atanasster
feat: added bolt color token
5 commits
package
imports
peer
CopyContainer
XCircleFillIconCheckCircleFillIcon
react
^17.0.1
FC
*
theme-ui
^0.8.4
jsx
tinycolor
file
imports
"../utils"
colorToStrmostReadable
"../../types"
ColorBlockPropsColorValuecolorContrastdefaultBlackTextColordefaultWhiteTextColorThemeColorProps
"../../containers"
GridContainerPropsGridContainer

Stories

Palette

Navy
#001f5f
var(--bolt-color-navy)
Text sizeAaAa
#ffffff (15.43)
pass
pass
#000000 (1.36)
fail
fail
Teal
#10a5ac
var(--bolt-color-teal)
Text sizeAaAa
#ffffff (3.00)
pass
fail
#000000 (7.00)
pass
pass
Orange
#f76923
var(--bolt-color-orange)
Text sizeAaAa
#ffffff (3.00)
pass
fail
#000000 (7.00)
pass
pass
Yellow
#ffc836
var(--bolt-color-yellow)
Text sizeAaAa
#ffffff (1.55)
fail
fail
#000000 (13.57)
pass
pass
Wine
#661d34
var(--bolt-color-wine)
Text sizeAaAa
#ffffff (11.73)
pass
pass
#000000 (1.79)
fail
fail
Pink
#e63690
var(--bolt-color-pink)
Text sizeAaAa
#ffffff (3.97)
pass
fail
#000000 (5.29)
pass
pass
Berry
#ac1361
var(--bolt-color-berry)
Text sizeAaAa
#ffffff (6.95)
pass
pass
#000000 (3.02)
pass
fail
Violet
#5f67b9
var(--bolt-color-violet)
Text sizeAaAa
#ffffff (5.09)
pass
pass
#000000 (4.13)
pass
fail
Gray
#8d8e99
var(--bolt-color-gray)
Text sizeAaAa
#ffffff (3.25)
pass
fail
#000000 (6.46)
pass
pass
Black
#151619
var(--bolt-color-black)
Text sizeAaAa
#ffffff (18.09)
pass
pass
#000000 (1.16)
fail
fail
White
#ffffff
var(--bolt-color-white)
Text sizeAaAa
#ffffff (1.00)
fail
fail
#000000 (21.00)
pass
pass