created:12/30/2020
updated:12/30/2020
loc
127
comments
8%

LightningColor

avatar of atanasster

Color item displaying as a table row, with color, name, description, and allows for custom columns. Design inspired by Oracle's Lightning Design System.

Overview

$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 77, 128)
#004d80
BRAND_ACCESSIBLE
2.6.0
Yes
GA

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-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 77, 128)
#004d80
BRAND_ACCESSIBLE
2.6.0
Yes
GA
 
impact
id
description
serious
color-contrast

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

summary
target
Fix any of the following: Element has insufficient color contrast of 2.2 (foreground color: #ffffff, background color: #54c473, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-rmw7lg > tbody > .css-rygtr0 > td:nth-child(5) > div

Viewport

$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 77, 128)
#004d80
BRAND_ACCESSIBLE
2.6.0
Yes
GA
320px
$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 77, 128)
#004d80
BRAND_ACCESSIBLE
2.6.0
Yes
GA
375px
$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 77, 128)
#004d80
BRAND_ACCESSIBLE
2.6.0
Yes
GA
768px
$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 77, 128)
#004d80
BRAND_ACCESSIBLE
2.6.0
Yes
GA
1024px