created:12/30/2020
updated:12/30/2020
loc
114
comments
10%

BackpackColor

avatar of atanasster

Color item displaying the color as a color block and the values for RGB, CMYK and Pantone. If specified, will display the dark color as a bottom-right side triangle. Design inspired by Backpack.

Overview

Brand
light: Blue400
dark: Blue800

Controls

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
-

A11y tests

Brand
light: Blue400
dark: Blue800
 
id
description
avoid-inline-spacing

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets...

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

Viewport

Brand
light: Blue400
dark: Blue800
320px
Brand
light: Blue400
dark: Blue800
375px
Brand
light: Blue400
dark: Blue800
768px
Brand
light: Blue400
dark: Blue800
1024px