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

AudiDSColor

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

Color item displaying the color as a color block and the values for RGB, RML, CMYK and Pantone. Design inspired by Audi Design System.

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

Palette

Poppy surprise
RGB: 255/86/48
HEX: #ff5630
CMYK: 0/66/81/0
Pantone 171C
RAL: 2004
Golden state
RGB: 255/171/0
HEX: #ffab00
CMYK: 0/33/100/0
Pantone 137C
RAL: 1003
Fine pine
RGB: 54/179/126
HEX: #36b37e
CMYK: 70/0/30/30
Pantone 339C
RAL: 6024
Tamarama
RGB: 0/184/217
HEX: #00b8d9
CMYK: 100/15/0/15
Pantone 3125C
RAL: 5012
Da' juice
RGB: 101/84/192
HEX: #6554c0
CMYK: 47/56/0/25
Pantone 2725C
RAL: 5002
Critical
RGB: 249/77/50
HEX: #f94d32
CMYK: 0/69/80/2
Pantone 171C
RAL: 3028
Name
Description
Default
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
12/25/2021

atanasster

avatar of atanasster
chore: upgrade eslint, gatsby, next
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/23/2020

atanasster

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

Stories

Overview

Brand
RGB: 34/112/238
HEX: #2270ee
CMYK: 86/53/0/7
Pantone 2726C
RAL: 5002

Name

Critical
RGB: 249/77/50
HEX: #f94d32
CMYK: 0/69/80/2
Pantone 171C
RAL: 3028

Rgb

text
RGB: 0/0/0
HEX: #000000
CMYK: 0/0/0/100
Pantone 419C
RAL: 9005

Rgba

shadow
RGB: 0/0/0/0.1
HEX: #000000
CMYK: 0/0/0/100
Pantone 419C
RAL: 9005

Hsl

accent
RGB: 140/120/115
HEX: #8c7873
CMYK: 0/14/18/45
Pantone 409C
RAL: 7048

Hsla

accent
RGB: 140/120/115
HEX: #8c7873
CMYK: 0/14/18/45
Pantone 409C
RAL: 7048