created:12/30/2020
updated:12/30/2020
loc
57
comments
18%

FishTankColor

avatar of atanasster

Color item displaying the color as a row with the sass var name and hex color. Design inspired by Blooomberg BNA's FishTank.

A11y tests

$color-highlight-1
#FFF8B0
$color-highlight-2
#E3F7FF
$color-highlight-3
#E0FFE0
$color-action
#3DA774
$color-warning
#FFB511
$color-error
#E1483E
 
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

$color-highlight-1
#FFF8B0
$color-highlight-2
#E3F7FF
$color-highlight-3
#E0FFE0
$color-action
#3DA774
$color-warning
#FFB511
$color-error
#E1483E
320px
$color-highlight-1
#FFF8B0
$color-highlight-2
#E3F7FF
$color-highlight-3
#E0FFE0
$color-action
#3DA774
$color-warning
#FFB511
$color-error
#E1483E
375px
$color-highlight-1
#FFF8B0
$color-highlight-2
#E3F7FF
$color-highlight-3
#E0FFE0
$color-action
#3DA774
$color-warning
#FFB511
$color-error
#E1483E
768px
$color-highlight-1
#FFF8B0
$color-highlight-2
#E3F7FF
$color-highlight-3
#E0FFE0
$color-action
#3DA774
$color-warning
#FFB511
$color-error
#E1483E
1024px