Colors
gray
$gray-100$gray-200$gray-300$gray-400$gray-500$gray-600$gray-700$gray-800$gray-900primary
$primary-100$primary-200$primary-300$primary-400$primary-500$primary-600$primary-700$primary-800$primary-900brand
$brand-100$brand-200$brand-300$brand-400$brand-500$brand-600$brand-700$brand-800$brand-900accents
$accent-a$accent-blight
$light-100$light-200$light-300$light-400$light-500$light-600$light-700$light-800$light-900dark
$dark-100$dark-200$dark-300$dark-400$dark-500$dark-600$dark-700$dark-800$dark-900success
$success-100$success-200$success-300$success-400$success-500$success-600$success-700$success-800$success-900info
$info-100$info-200$info-300$info-400$info-500$info-600$info-700$info-800$info-900danger
$danger-100$danger-200$danger-300$danger-400$danger-500$danger-600$danger-700$danger-800$danger-900warning
$warning-100$warning-200$warning-300$warning-400$warning-500$warning-600$warning-700$warning-800$warning-900SCSS 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-200Mixin (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 100200300400500600700800900Element 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}
| Use | Color | Level |
|---|---|---|
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-100Borders & 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-200Icons & 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-300Text
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-900Element 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