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

SkylineColor

avatar of atanasster

Color item displaying as a row, with color name, custom columns for contrast checks scss variable name and color block. Design inspired by Skyline.

A11y tests

NameUse on WhiteUse on Gray 200ScssExample
Green
Yes
Yes
get-hue(green)
#1a801b
Green Light
No
No
get-hue(green, light)
#f4fce3
Yellow
No
No
get-hue(yellow)
#fcc419
Yellow Light
No
No
get-hue(yellow, light)
#fff9db
Gray 500
No
No
get-gray(500)
#8b8b8b
Gray 600
Yes
No
get-gray(600)
#757575
Gray 700
Yes
Yes
get-gray(700)
#616161

Viewport

NameUse on WhiteUse on Gray 200ScssExample
Green
Yes
Yes
get-hue(green)
#1a801b
Green Light
No
No
get-hue(green, light)
#f4fce3
Yellow
No
No
get-hue(yellow)
#fcc419
Yellow Light
No
No
get-hue(yellow, light)
#fff9db
Gray 500
No
No
get-gray(500)
#8b8b8b
Gray 600
Yes
No
get-gray(600)
#757575
Gray 700
Yes
Yes
get-gray(700)
#616161
320px
NameUse on WhiteUse on Gray 200ScssExample
Green
Yes
Yes
get-hue(green)
#1a801b
Green Light
No
No
get-hue(green, light)
#f4fce3
Yellow
No
No
get-hue(yellow)
#fcc419
Yellow Light
No
No
get-hue(yellow, light)
#fff9db
Gray 500
No
No
get-gray(500)
#8b8b8b
Gray 600
Yes
No
get-gray(600)
#757575
Gray 700
Yes
Yes
get-gray(700)
#616161
375px
NameUse on WhiteUse on Gray 200ScssExample
Green
Yes
Yes
get-hue(green)
#1a801b
Green Light
No
No
get-hue(green, light)
#f4fce3
Yellow
No
No
get-hue(yellow)
#fcc419
Yellow Light
No
No
get-hue(yellow, light)
#fff9db
Gray 500
No
No
get-gray(500)
#8b8b8b
Gray 600
Yes
No
get-gray(600)
#757575
Gray 700
Yes
Yes
get-gray(700)
#616161
768px
NameUse on WhiteUse on Gray 200ScssExample
Green
Yes
Yes
get-hue(green)
#1a801b
Green Light
No
No
get-hue(green, light)
#f4fce3
Yellow
No
No
get-hue(yellow)
#fcc419
Yellow Light
No
No
get-hue(yellow, light)
#fff9db
Gray 500
No
No
get-gray(500)
#8b8b8b
Gray 600
Yes
No
get-gray(600)
#757575
Gray 700
Yes
Yes
get-gray(700)
#616161
1024px