/** * Leverage these color variables in the app by importing the `_variables.less` file provided in the npm benchmark-patterns package. * * @section Color Palette * * @hideCode * @example * * *

General Colors

*
*
*
*

white

*

#fff

*

No variable for white, just use browser default.

*
*
*
*

@clr-black

*

#1a1b21

*
*
*
*

@clr-bg

*

#e5e7ec

*

Main background color.

*
*
*
*

@clr-shade

*

#f8f8f8

*

Shaded foregrounds, table headers, etc.

*
*
*
*

@clr-frame

*

#bcbcbc

*

General borders.

*
*
*
*

@clr-frame-lt

*

#ddd

*

Dividers and borders that need to be lighter.

*
*
*
*

@clr-disabled

*

#888

*
*
*
*

@clr-remove

*

#777

*

Remove/cancel/close buttons.

*
*
*
*

@clr-shadow

*

rgba(0, 0, 0, 0.333)

*

General shadows. It is OK to make your own shadow though.

*
*
*
*

@clr-link

*

#3b81c3

*
*
*
*

@clr-title-bg

*

#2c3c4b

*

Card titles, modal headers, sidebar nav bg, etc.

*
*
*
*

@clr-blue

*

#15a3c2

*

Activated. Neutral sentiment.

*
*
*
*

@clr-red

*

#c21a15

*

Negative, error, danger, etc.

*
*
*
*

@clr-yellow

*

#ffef3d

*

Warning, be careful, etc.

*
*
*
*

@clr-green

*

#1fa015

*

Positive. Successful.

*
*
*
*

@clr-orange

*

#ffbc1a

*

Special buttons. Benchmark logo.

*
*
*

Social Providers

*
*
*
*

@clr-gplus

*

#e04a39

*

Google Plus

*
*
*
*

@clr-yelp

*

#db5326

*
*
*
*

@clr-facebook

*

#335dab

*
*
*
*

@clr-foursquare

*

#2f7fc2

*
*
*
*

@clr-twitter

*

#55acee

*
*
*

Grades

*
*
*
*

@grade-a

*

#1fa015 (@clr-green)

*
*
*
*

@grade-b

*

#b4bf00

*
*
*
*

@grade-c

*

#e3cd00

*
*
*
*

@grade-d

*

#e18429

*
*
*
*

@grade-f

*

#c21a15 (@clr-red)

*
*
*/