Color

As a general rule, SKY UX uses color to convey meaning and not as pure decoration. You should rarely apply colors directly to elements because components incorporate colors as necessary. If a need for color arises outside of a component, you likely need to create a component for that scenario.

Text

For text, ensure that the contrast between the text color and the background color is at least 4.5:1 to meet Web Content Accessibility Guidelines 2.0 level AA.
Usage
The default color for text
Code
$sky-text-color-default
Styling
#282b31
Usage
De-emphasized text
Code
$sky-text-color-deemphasized
Styling
#686c73
Usage
Text on a dark background
Code
$sky-text-color-on-dark
Styling
#ffffff
Usage
Action-invoking elements such as links
Code
$sky-text-color-action-primary
Styling
#007ca6
Usage
Borderless icon buttons such as the expand/collapse chevron
Code
$sky-text-color-icon-borderless
Styling
#cdcfd2

Backgrounds

Usage
Background for elements that need to contrast with the containers they hold, such as a record page made up of tiles
Code
$sky-background-color-neutral-light
Styling
#eeeeef
Usage
Background for elements that invoke primary actions, such as a primary button
Code
$sky-background-color-primary-dark
Styling
#007ca6
Usage
Background for disabled interactive elements such as buttons
Code
$sky-background-color-disabled
Styling
#cdcfd2
Usage
Background for selected items within a list of items
Code
$sky-background-color-selected
Styling
#f1eef6
Usage
Background for elements that convey an "information" status, such as alerts, labels, and toasts
Code
$sky-background-color-info
Styling
#81d4f7
Usage
Background for less important elements that convey an "information" status, such as applied filter bubbles
Code
$sky-background-color-info-light
Styling
#c1e8fb
Usage
Background for elements that convey a "success" status, such as alerts, labels, and toasts
Code
$sky-background-color-success
Styling
#b7da9b
Usage
Background for elements that convey a "warning" status, such as alerts, labels, and toasts
Code
$sky-background-color-warning
Styling
#ffd597
Usage
Background for elements that convey a "danger" status, such as alerts, labels, and toasts
Code
$sky-background-color-danger
Styling
#f7a08f
Usage
Background for buttons that invoke a primary action that is destructive, such as deleting an item
Code
$sky-background-color-danger-dark
Styling
#d93a3d

Highlights

Usage
Highlight for elements that convey an "information" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-info
Styling
#00b4f1
Usage
Highlight for elements that convey a "success" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-success
Styling
#71bf43
Usage
Highlight for elements that convey a "warning" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-warning
Styling
#fbb034
Usage
Highlight for elements that convey a "danger" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-danger
Styling
#ef4044

Borders

Usage
Borders that separate sections of content within a container
Code
$sky-border-color-neutral-light
Styling
#e2e3e4
Usage
Borders that separate containers from their surroundings, or that separate sections of active elements from the contents of a container such as separating a toolbar from a list of records
Code
$sky-border-color-neutral-medium
Styling
#cdcfd2