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

SeedsColor

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

Color item displaying the color as a block with RGB and CMYK colors. The color name and description are displayed below the block. Design inspired by SproutSocial's Seed.

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

Overview

RGB: 12,167,80
CMYK: 93,0,52,35
green.700
green.800

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.

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

atanasster

avatar of atanasster
feat: add seek oss color token
9/30/2020

atanasster

avatar of atanasster
feat: add seeds color token
4 commits
package
imports
peer
CopyContainer
react
^17.0.1
FC
*
simpleColorConverter
theme-ui
^0.8.4
jsxTheme
file
imports
"../utils"
colorToStrmostReadable
"../../types"
ColorBlockPropsColorValue
"../../containers"
GridContainerPropsGridContainer

Stories

Palette

RGB: 111,94,211
CMYK: 47,55,0,17
purple.700

Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.

RGB: 0,40,56
CMYK: 100,29,0,78
aqua.1100

Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.

RGB: 7,151,174
CMYK: 96,13,0,32
aqua.600

Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.

RGB: 32,121,195
CMYK: 84,38,0,24
Primary CTA
cta.primary
blue.700

RGB: 54,65,65
CMYK: 17,0,0,75
Secondary CTA
cta.scondary
neutral.800