@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
75 lines (73 loc) • 2.61 kB
text/less
// 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;