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

DuetColor

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

Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status. Design inspired by Duet.

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

Overview

#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1
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/29/2020

atanasster

avatar of atanasster
feat: added opattern color token
9/28/2020

atanasster

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

atanasster

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

atanasster

avatar of atanasster
feat: add duet color token
6 commits
package
imports
peer
CopyContainer
XIconXCircleFillIconCheckIconCheckCircleFillIconAlertIcon
react
^17.0.1
ReactNodeFC
*
theme-ui
^0.8.4
jsx
tinycolor
file
imports
"../utils"
colorToStr
"../../types"
ColorBlockPropsColorValuecolorContrastTokenStatusdefaultWhiteTextColorThemeColorProps
"../../containers"
TableContainerPropsTableContainerTableRowContainer

Stories

Palette

ExampleDescriptionTokenContrastStatus
#de2362
rgb(222, 35, 98)
Status Danger

Danger red that is accessible with white. Only used in special cases like form validation and messaging.

$color-dangervar(--color-danger)4.64:1
#f7b228
rgb(247, 178, 40)
Status Warning

Warning orange (non-accessible) is only used in special cases like form validation and messaging.

$color-warningvar(--color-warning)1.85:1
#00875a
rgb(0, 135, 90)
Status Success

Success green that is accessible with white. Only used in special cases like form validation and messaging.

$color-successvar(--color-success)4.55:1
#657787
rgb(101, 119, 135)
Gray Darker

Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.

$color-gray-darkervar(--color-gray-darker)4.62:1
#909599
rgb(144, 149, 153)
Gray Dark

Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.

$color-gray-darkvar(--color-gray-dark)3.02:1
#7a01c4
rgb(122, 1, 196)
Data 01

Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.

$color-data-01var(--color-data-01)7.99:1
#c21565
rgb(194, 21, 101)
Data 06

Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.

$color-data-06var(--color-data-06)5.85:1