UNPKG

@salesforce-ux/design-system

Version:

Salesforce Lightning Design System

github.com/salesforce-ux/design-system

salesforce-ux/design-system

87 lines • 2.91 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$border-width-thin = 1px $border-width-thick = 2px $border-stroke-width-thin = 1px $border-stroke-width-thick = 2px $spacing-none = 0 $spacing-xxx-small = 0.125rem $spacing-xx-small = 0.25rem $spacing-x-small = 0.5rem $spacing-small = 0.75rem $spacing-medium = 1rem $spacing-large = 2rem $spacing-x-large = 4rem $spacing-xx-large = 8rem // font-face should be 'Salesforce Sans'. $font-family-body = 'Salesforce Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif // Salesforce Sans Light $font-weight-light = 300 // Salesforce Sans Regular $font-weight-regular = 400 // Salesforce Sans Bold $font-weight-bold = 700 $font-size-x-small = 0.625rem $font-size-small = 0.75rem $font-size-x-medium = 0.875rem $font-size-medium = 1rem $font-size-large = 1.125rem $font-size-x-large = 1.25rem $font-size-xx-large = 1.5rem $border-radius-small = .125rem $border-radius-medium = .25rem $border-radius-large = .5rem $border-radius-pill = 5rem $border-radius-circle = 50% $line-height-reset = 1 $line-height-heading = 1.25 $line-height-text = 1.5 // 448px, for phone devices and larger. $mq-small = only screen and (min-width: 28em) // 768px, for phone devices and larger. $mq-medium = only screen and (min-width: 48em) // 1024px, for tablet devices and larger. $mq-large = only screen and (min-width: 64em) // 1280px, for desktop screens and larger. $mq-x-large = only screen and (min-width: 80em) $timing-1 = .1s $timing-2 = .2s $timing-3 = .4s $timing-4 = .6s $timing-5 = .8s $timing-test = 5s $color-white = rgb(255, 255, 255) $color-green-sea-100 = rgb(53, 212, 204) $color-green-sea-300 = rgb(46, 194, 186) $color-green-sea-500 = rgb(39, 171, 164) $color-green-sea-700 = rgb(32, 150, 145) $color-green-sea-900 = rgb(27, 130, 125) $color-blue-sky-100 = rgb(108, 183, 250) $color-blue-sky-300 = rgb(68, 162, 245) $color-blue-sky-500 = rgb(45, 147, 237) $color-blue-sky-700 = rgb(32, 129, 214) $color-blue-sky-900 = rgb(25, 112, 189) $color-purple-rain-100 = rgb(173, 144, 245) $color-purple-rain-300 = rgb(146, 113, 232) $color-purple-rain-500 = rgb(122, 86, 214) $color-purple-rain-700 = rgb(100, 63, 192) $color-purple-rain-900 = rgb(89, 65, 149) $color-blue-athens = rgb(242, 246, 250) $color-blue-sparta = rgb(230, 236, 242) $color-blue-rome = rgb(197, 211, 224) $color-blue-spider = rgb(163, 184, 204) $color-blue-ghost = rgb(125, 152, 179) $color-blue-aluminium = rgb(92, 122, 153) $color-blue-rollingstone = rgb(64, 96, 127) $color-blue-rhino = rgb(41, 71, 102) $color-blue-zodiac = rgb(23, 50, 77) $color-blue-bigstone-blue = rgb(10, 31, 51) $color-orange-alert = rgb(255, 183, 93) $color-red-error = rgb(212, 80, 76) $color-green-success = rgb(75, 202, 129) // Link color (508) $color-blue-science = rgb(0, 112, 210) // Hover and focus link color $color-blue-endeavour = rgb(0, 95, 178) // Active link color $color-blue-midnight-blue = rgb(0, 57, 107) // Disabled link color $color-blue-biscay = rgb(22, 50, 92)