Theme

npm_versionnpm Paragon package page

Colors

gray

$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900

primary

$primary-100
$primary-200
$primary-300
$primary-400
$primary-500
$primary-600
$primary-700
$primary-800
$primary-900

brand

$brand-100
$brand-200
$brand-300
$brand-400
$brand-500
$brand-600
$brand-700
$brand-800
$brand-900

accents

$accent-a
$accent-b

light

$light-100
$light-200
$light-300
$light-400
$light-500
$light-600
$light-700
$light-800
$light-900

dark

$dark-100
$dark-200
$dark-300
$dark-400
$dark-500
$dark-600
$dark-700
$dark-800
$dark-900

success

$success-100
$success-200
$success-300
$success-400
$success-500
$success-600
$success-700
$success-800
$success-900

info

$info-100
$info-200
$info-300
$info-400
$info-500
$info-600
$info-700
$info-800
$info-900

danger

$danger-100
$danger-200
$danger-300
$danger-400
$danger-500
$danger-600
$danger-700
$danger-800
$danger-900

warning

$warning-100
$warning-200
$warning-300
$warning-400
$warning-500
$warning-600
$warning-700
$warning-800
$warning-900

SCSS Color Usage

Include these colors in scss files in one of two ways:

Variable name

// $color_name-level
$primary-100
$primary-200
$brand-100
$brand-200

Mixin (deprecated)

theme-color($color-name, $variant)

Using the variable name instead of the theme-color mixin will make later upgrade paths easier. Paragon may begin to adopt CSS variables for theming and attempt to eliminate mixins from the public api.

Color Name
A theme color
grayprimarybrandlightdarksuccessinfodangerwarning
Variant

A number level or element type

Levels 100200300400500600700800900
Element types backgrounddisabled-borderbordericonactive-borderfocusgraphicdefaultlight-texthovertextactivedark-text

Example

border: solid 1px $gray-300;border: solid 1px theme-color(“gray”, “border”);border: solid 1px theme-color(“gray”, 300);

CSS Class Utilties

Utility classes for backgrounds, borders, and text colors follow the format below:

.{use}-{color}-{level}

UseColorLevel
bg-
border-
text-
gray-primary-brand-light-dark-success-info-danger-warning-100200300400500600700800900

Background Fills

.bg-gray-100
.bg-primary-100
.bg-brand-100
.bg-light-100
.bg-dark-100
.bg-success-100
.bg-info-100
.bg-danger-100
.bg-warning-100

Borders & Lines

.border-gray-200
.border-primary-200
.border-brand-200
.border-light-200
.border-dark-200
.border-success-200
.border-info-200
.border-danger-200
.border-warning-200

Icons & Semantic Lines

.border-gray-300
.border-primary-300
.border-brand-300
.border-light-300
.border-dark-300
.border-success-300
.border-info-300
.border-danger-300
.border-warning-300

Text

Color levels 500 and above are accessible on white and 100 level backgrounds.

Lighter Text

Regular Text

Darker Text

.text-gray-500.text-primary-500.text-brand-500.text-light-500.text-dark-500.text-success-500.text-info-500.text-danger-500.text-warning-500
.text-gray-700.text-primary-700.text-brand-700.text-light-700.text-dark-700.text-success-700.text-info-700.text-danger-700.text-warning-700
.text-gray-900.text-primary-900.text-brand-900.text-light-900.text-dark-900.text-success-900.text-info-900.text-danger-900.text-warning-900

Element Fills

Buttons or other interactive elements.

Default State

Hover State

Active State

.bg-gray-500
.bg-gray-700
.bg-gray-900
.bg-primary-500
.bg-primary-700
.bg-primary-900
.bg-brand-500
.bg-brand-700
.bg-brand-900
.bg-light-500
.bg-light-700
.bg-light-900
.bg-dark-500
.bg-dark-700
.bg-dark-900
.bg-success-500
.bg-success-700
.bg-success-900
.bg-info-500
.bg-info-700
.bg-info-900
.bg-danger-500
.bg-danger-700
.bg-danger-900

Contents