@salesforce-ux/design-system/design-tokens/dist/ui-analytics.styl

Salesforce Lightning Design System

// 1024px, for tablet devices and larger.
$mq-large = only screen and (min-width: 64em)
$timing-5 = .8s
// Active link color
$color-blue-midnight-blue = rgb(0, 57, 107)
$border-radius-large = .5rem
$line-height-reset = 1
$font-size-medium = 1rem
// Hover and focus link color
$color-blue-endeavour = rgb(0, 95, 178)
$color-blue-sparta = rgb(230, 236, 242)
$color-blue-zodiac = rgb(23, 50, 77)
$font-weight-regular = 400
$font-size-x-large = 1.25rem
$color-blue-ghost = rgb(125, 152, 179)
$color-orange-alert = rgb(255, 183, 93)
$timing-test = 5s
$color-green-sea-100 = rgb(53, 212, 204)
$color-blue-rollingstone = rgb(64, 96, 127)
$border-radius-circle = 50%
$color-blue-sky-100 = rgb(108, 183, 250)
$font-size-xx-large = 1.5rem
$font-size-x-medium = 0.875rem
$color-green-sea-300 = rgb(46, 194, 186)
$color-blue-rhino = rgb(41, 71, 102)
$color-blue-bigstone-blue = rgb(10, 31, 51)
$color-green-success = rgb(75, 202, 129)
$color-blue-sky-300 = rgb(68, 162, 245)
// 448px, for phone devices and larger.
$mq-small = only screen and (min-width: 28em)
$color-white = rgb(255, 255, 255)
$border-radius-small = .125rem
$font-family-body = -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
$color-purple-rain-100 = rgb(173, 144, 245)
$font-size-large = 1.125rem
$color-green-sea-500 = rgb(39, 171, 164)
$color-blue-sky-500 = rgb(45, 147, 237)
$color-blue-spider = rgb(163, 184, 204)
$border-radius-medium = .25rem
$color-purple-rain-300 = rgb(146, 113, 232)
$color-green-sea-700 = rgb(32, 150, 145)
$color-blue-sky-700 = rgb(32, 129, 214)
$color-blue-aluminium = rgb(92, 122, 153)
// 768px, for phone devices and larger.
$mq-medium = only screen and (min-width: 48em)
$color-purple-rain-500 = rgb(122, 86, 214)
$color-green-sea-900 = rgb(27, 130, 125)
$color-blue-sky-900 = rgb(25, 112, 189)
$font-size-x-small = 0.625rem
$border-radius-pill = 5rem
$color-purple-rain-700 = rgb(100, 63, 192)
$color-purple-rain-900 = rgb(89, 65, 149)
$line-height-heading = 1.25
$spacing-x-large = 4rem
$spacing-xx-large = 8rem
// Disabled link color
$color-blue-biscay = rgb(22, 50, 92)
// 1280px, for desktop screens and larger.
$mq-x-large = only screen and (min-width: 80em)
$font-size-small = 0.75rem
$line-height-text = 1.5
// Link color (508)
$color-blue-science = rgb(0, 112, 210)
$timing-1 = .1s
$font-weight-bold = 700
$timing-2 = .2s
$timing-3 = .4s
$color-red-error = rgb(212, 80, 76)
$color-blue-athens = rgb(242, 246, 250)
$color-blue-rome = rgb(197, 211, 224)
$timing-4 = .6s
$font-weight-light = 300
$spacing-large = 2rem