@microsoft/atlas-css 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +42 -42
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +57 -57
  5. package/src/atomics/README.md +54 -54
  6. package/src/atomics/border.scss +56 -56
  7. package/src/atomics/colors.scss +166 -166
  8. package/src/atomics/display.scss +33 -33
  9. package/src/atomics/flex.scss +69 -69
  10. package/src/atomics/index.scss +8 -8
  11. package/src/atomics/position.scss +19 -19
  12. package/src/atomics/shadow.scss +19 -19
  13. package/src/atomics/spacing.scss +73 -73
  14. package/src/atomics/typography.scss +105 -105
  15. package/src/components/README.md +41 -41
  16. package/src/components/button-reset.scss +8 -8
  17. package/src/components/button.scss +245 -243
  18. package/src/components/buttons.scss +86 -87
  19. package/src/components/component.md +6 -6
  20. package/src/components/icon.scss +20 -20
  21. package/src/components/index.scss +7 -7
  22. package/src/components/link-button.scss +30 -30
  23. package/src/components/markdown.scss +156 -156
  24. package/src/components/table.scss +67 -67
  25. package/src/core/animations.scss +8 -8
  26. package/src/core/focus.scss +35 -35
  27. package/src/core/font-stack.scss +28 -28
  28. package/src/core/index.scss +6 -6
  29. package/src/core/themes.scss +86 -86
  30. package/src/index.scss +6 -6
  31. package/src/mixins/center.scss +11 -11
  32. package/src/mixins/code-block.scss +43 -43
  33. package/src/mixins/control.scss +44 -44
  34. package/src/mixins/focus.scss +10 -10
  35. package/src/mixins/font-size.scss +35 -35
  36. package/src/mixins/index.scss +9 -9
  37. package/src/mixins/loader.scss +16 -16
  38. package/src/mixins/media-queries.scss +49 -49
  39. package/src/mixins/transparency.scss +14 -14
  40. package/src/mixins/unselectable.scss +13 -13
  41. package/src/patterns/index.scss +1 -1
  42. package/src/tokens/animation.scss +8 -8
  43. package/src/tokens/border.scss +8 -8
  44. package/src/tokens/breakpoints.scss +11 -11
  45. package/src/tokens/colors.scss +215 -215
  46. package/src/tokens/direction.scss +18 -18
  47. package/src/tokens/display.scss +5 -5
  48. package/src/tokens/focus.scss +9 -9
  49. package/src/tokens/font-stack.scss +10 -10
  50. package/src/tokens/index.scss +18 -18
  51. package/src/tokens/layout.scss +8 -8
  52. package/src/tokens/palette.scss +188 -188
  53. package/src/tokens/position.scss +5 -5
  54. package/src/tokens/radius.scss +9 -9
  55. package/src/tokens/schemes.scss +14 -14
  56. package/src/tokens/shadow.scss +11 -11
  57. package/src/tokens/spacing.scss +25 -25
  58. package/src/tokens/themes.scss +291 -291
  59. package/src/tokens/typography.scss +29 -29
  60. package/src/tokens/z-index.scss +20 -20
  61. package/tokens/README.md +34 -34
  62. package/tokens/index.js +246 -246
  63. package/tokens/types.d.ts +35 -35
package/src/tokens/themes.scss CHANGED
@@ -1,291 +1,291 @@
1
- /**
2
- * @sass-export-section="themes"
3
- */
4
- $themes: (
5
- 'light': (
6
- 'text': $palette-grey-120,
7
- 'text-subtle': $palette-grey-90,
8
- 'text-invert': $palette-white,
9
- 'text-glow-high-contrast': $palette-grey-120,
10
- 'box-shadow-light': $palette-black-opacity-108,
11
- 'box-shadow-medium': $palette-black-opacity-132,
12
- 'box-shadow-heavy': $palette-black-opacity-18,
13
- 'box-shadow-extra-heavy': $palette-black-opacity-22,
14
- 'overlay': $palette-black-opacity-70,
15
- 'overlay-invert': $palette-white,
16
- 'body-background': $palette-white,
17
- 'body-background-medium': $palette-grey-20,
18
- 'alternate-background': $palette-grey-120,
19
- 'alternate-background-medium': $palette-grey-110,
20
- 'border': $palette-grey-30,
21
- 'table-header': $palette-grey-30,
22
- 'table-row-header': $palette-grey-10,
23
- 'table-border-dark': $palette-grey-40,
24
- 'hover-base': $palette-grey-110,
25
- 'hover-invert': $palette-grey-10,
26
- 'border-white-high-contrast': $palette-white-opacity-0,
27
- 'border-yellow-high-contrast': $palette-black-opacity-0,
28
- 'code-header': $palette-grey-30,
29
- 'code-block': $palette-grey-20,
30
- 'inline-code': $palette-grey-30,
31
- 'code-highlight-background': $palette-yellow-10,
32
- 'visited': $palette-purple-70,
33
- 'score-low-off': $palette-red-opacity-30,
34
- 'score-low': $palette-red-50,
35
- 'score-medium-off': $palette-yellow-opacity-30,
36
- 'score-medium': $palette-yellow-50,
37
- 'score-high-off': $palette-green-opacity-30,
38
- 'score-high': $palette-green-50,
39
- 'hyperlink': $palette-blue-60,
40
- 'primary-base': $palette-blue-50,
41
- 'primary-background': $palette-blue-10,
42
- 'primary-background-glow-high-contrast': $palette-blue-10,
43
- 'primary-dark': $palette-blue-80,
44
- 'primary-hover': $palette-blue-60,
45
- 'primary-active': $palette-blue-70,
46
- 'primary-box-shadow': $palette-blue-opacity-30,
47
- 'primary-invert': $palette-white,
48
- 'secondary-base': $palette-grey-60,
49
- 'secondary-background': $palette-grey-30,
50
- 'secondary-background-glow-high-contrast': $palette-grey-30,
51
- 'secondary-dark': $palette-grey-110,
52
- 'secondary-hover': $palette-grey-40,
53
- 'secondary-active': $palette-grey-40,
54
- 'secondary-box-shadow': $palette-black-opacity-30,
55
- 'secondary-invert': $palette-black,
56
- 'tertiary-base': $palette-navy-70,
57
- 'tertiary-background': $palette-navy-90,
58
- 'tertiary-background-glow-high-contrast': $palette-navy-90,
59
- 'tertiary-dark': $palette-navy-30,
60
- 'tertiary-hover': $palette-navy-80,
61
- 'tertiary-active': $palette-navy-50,
62
- 'tertiary-box-shadow': $palette-navy-opacity-30,
63
- 'tertiary-invert': $palette-white,
64
- 'success-base': $palette-green-60,
65
- 'success-background': $palette-green-10,
66
- 'success-background-glow-high-contrast': $palette-green-10,
67
- 'success-dark': $palette-green-80,
68
- 'success-hover': $palette-green-70,
69
- 'success-active': $palette-green-80,
70
- 'success-box-shadow': $palette-green-opacity-30,
71
- 'success-invert': $palette-white,
72
- 'info-base': $palette-purple-60,
73
- 'info-background': $palette-purple-10,
74
- 'info-background-glow-high-contrast': $palette-purple-10,
75
- 'info-dark': $palette-purple-80,
76
- 'info-hover': $palette-purple-60,
77
- 'info-active': $palette-purple-70,
78
- 'info-box-shadow': $palette-purple-opacity-30,
79
- 'info-invert': $palette-white,
80
- 'warning-base': $palette-yellow-50,
81
- 'warning-background': $palette-yellow-10,
82
- 'warning-background-glow-high-contrast': $palette-yellow-10,
83
- 'warning-dark': $palette-yellow-80,
84
- 'warning-hover': $palette-yellow-60,
85
- 'warning-active': $palette-yellow-70,
86
- 'warning-box-shadow': $palette-yellow-opacity-30,
87
- 'warning-invert': $palette-black,
88
- 'danger-base': $palette-red-60,
89
- 'danger-background': $palette-red-10,
90
- 'danger-background-glow-high-contrast': $palette-red-10,
91
- 'danger-dark': $palette-red-90,
92
- 'danger-hover': $palette-red-70,
93
- 'danger-active': $palette-red-80,
94
- 'danger-box-shadow': $palette-red-opacity-30,
95
- 'danger-invert': $palette-white,
96
- 'facepile-red': $palette-red-60,
97
- 'facepile-teal': $palette-turqoise-60,
98
- 'facepile-blue': $palette-blue-50
99
- ),
100
- 'dark': (
101
- 'text': $palette-grey-30,
102
- 'text-subtle': $palette-grey-40,
103
- 'text-invert': $palette-grey-110,
104
- 'text-glow-high-contrast': $palette-grey-30,
105
- 'box-shadow-light': $palette-white-opacity-108,
106
- 'box-shadow-medium': $palette-white-opacity-132,
107
- 'box-shadow-heavy': $palette-white-opacity-18,
108
- 'box-shadow-extra-heavy': $palette-white-opacity-22,
109
- 'overlay': $palette-black-opacity-70,
110
- 'overlay-invert': $palette-white,
111
- 'body-background': $palette-grey-120,
112
- 'body-background-medium': $palette-grey-110,
113
- 'alternate-background': $palette-grey-20,
114
- 'alternate-background-medium': $palette-grey-10,
115
- 'border': $palette-grey-100,
116
- 'table-header': $palette-grey-100,
117
- 'table-row-header': $palette-grey-110,
118
- 'table-border-dark': $palette-grey-90,
119
- 'hover-base': $palette-grey-40,
120
- 'hover-invert': $palette-grey-110,
121
- 'border-white-high-contrast': $palette-white-opacity-0,
122
- 'border-yellow-high-contrast': $palette-black-opacity-0,
123
- 'code-header': $palette-grey-100,
124
- 'code-block': $palette-grey-110,
125
- 'inline-code': $palette-grey-100,
126
- 'code-highlight-background': $palette-green-70,
127
- 'visited': $palette-purple-40,
128
- 'score-low-off': $palette-red-opacity-70,
129
- 'score-low': $palette-red-50,
130
- 'score-medium-off': $palette-yellow-opacity-30,
131
- 'score-medium': $palette-yellow-40,
132
- 'score-high-off': $palette-green-opacity-70,
133
- 'score-high': $palette-green-40,
134
- 'hyperlink': $palette-blue-30,
135
- 'primary-base': $palette-blue-30,
136
- 'primary-background': $palette-blue-80,
137
- 'primary-background-glow-high-contrast': $palette-blue-80,
138
- 'primary-dark': $palette-blue-20,
139
- 'primary-hover': $palette-blue-40,
140
- 'primary-active': $palette-blue-50,
141
- 'primary-box-shadow': $palette-blue-opacity-30,
142
- 'primary-invert': $palette-black,
143
- 'secondary-base': $palette-grey-80,
144
- 'secondary-background': $palette-grey-100,
145
- 'secondary-background-glow-high-contrast': $palette-grey-100,
146
- 'secondary-dark': $palette-grey-30,
147
- 'secondary-hover': $palette-grey-70,
148
- 'secondary-active': $palette-grey-60,
149
- 'secondary-box-shadow': $palette-black-opacity-70,
150
- 'secondary-invert': $palette-white,
151
- 'tertiary-base': $palette-grey-100,
152
- 'tertiary-background': $palette-grey-120,
153
- 'tertiary-background-glow-high-contrast': $palette-grey-120,
154
- 'tertiary-dark': $palette-grey-30,
155
- 'tertiary-hover': $palette-grey-90,
156
- 'tertiary-active': $palette-grey-80,
157
- 'tertiary-box-shadow': $palette-blue-opacity-30,
158
- 'tertiary-invert': $palette-white,
159
- 'success-base': $palette-green-30,
160
- 'success-background': $palette-green-80,
161
- 'success-background-glow-high-contrast': $palette-green-80,
162
- 'success-dark': $palette-green-10,
163
- 'success-hover': $palette-green-40,
164
- 'success-active': $palette-green-30,
165
- 'success-box-shadow': $palette-green-opacity-70,
166
- 'success-invert': $palette-black,
167
- 'info-base': $palette-purple-50,
168
- 'info-background': $palette-purple-80,
169
- 'info-background-glow-high-contrast': $palette-purple-80,
170
- 'info-dark': $palette-purple-10,
171
- 'info-hover': $palette-purple-40,
172
- 'info-active': $palette-purple-30,
173
- 'info-box-shadow': $palette-purple-opacity-70,
174
- 'info-invert': $palette-black,
175
- 'warning-base': $palette-yellow-50,
176
- 'warning-background': $palette-yellow-80,
177
- 'warning-background-glow-high-contrast': $palette-yellow-80,
178
- 'warning-dark': $palette-yellow-10,
179
- 'warning-hover': $palette-yellow-40,
180
- 'warning-active': $palette-yellow-30,
181
- 'warning-box-shadow': $palette-yellow-opacity-70,
182
- 'warning-invert': $palette-black,
183
- 'danger-base': $palette-red-30,
184
- 'danger-background': $palette-red-80,
185
- 'danger-background-glow-high-contrast': $palette-red-80,
186
- 'danger-dark': $palette-red-10,
187
- 'danger-hover': $palette-red-40,
188
- 'danger-active': $palette-red-30,
189
- 'danger-box-shadow': $palette-red-opacity-70,
190
- 'danger-invert': $palette-black,
191
- 'facepile-red': $palette-red-40,
192
- 'facepile-teal': $palette-turqoise-40,
193
- 'facepile-blue': $palette-blue-40
194
- ),
195
- 'high-contrast': (
196
- 'text': $palette-white,
197
- 'text-subtle': $palette-white,
198
- 'text-invert': $palette-black,
199
- 'text-glow-high-contrast': $palette-yellow-high-contrast,
200
- 'box-shadow-light': $palette-white-opacity-0,
201
- 'box-shadow-medium': $palette-white-opacity-0,
202
- 'box-shadow-heavy': $palette-white-opacity-0,
203
- 'box-shadow-extra-heavy': $palette-white-opacity-0,
204
- 'overlay': $palette-grey-100,
205
- 'overlay-invert': $palette-white,
206
- 'body-background': $palette-black,
207
- 'body-background-medium': $palette-black,
208
- 'alternate-background': $palette-white,
209
- 'alternate-background-medium': $palette-white,
210
- 'border': $palette-white,
211
- 'table-header': $palette-grey-90,
212
- 'table-row-header': $palette-grey-120,
213
- 'table-border-dark': $palette-white,
214
- 'hover-base': $palette-yellow-high-contrast,
215
- 'hover-invert': $palette-black,
216
- 'border-white-high-contrast': $palette-white,
217
- 'border-yellow-high-contrast': $palette-yellow-high-contrast,
218
- 'code-header': $palette-black,
219
- 'code-block': $palette-black,
220
- 'inline-code': $palette-grey-110,
221
- 'code-highlight-background': $palette-green-70,
222
- 'visited': $palette-visited-high-contrast,
223
- 'score-low-off': $palette-red-60,
224
- 'score-low': $palette-red-10,
225
- 'score-medium-off': $palette-yellow-opacity-70,
226
- 'score-medium': $palette-yellow-20,
227
- 'score-high-off': $palette-green-60,
228
- 'score-high': $palette-green-10,
229
- 'hyperlink': $palette-yellow-high-contrast,
230
- 'primary-base': $palette-yellow-high-contrast,
231
- 'primary-background': $palette-black,
232
- 'primary-background-glow-high-contrast': $palette-yellow-high-contrast,
233
- 'primary-dark': $palette-yellow-high-contrast,
234
- 'primary-hover': $palette-yellow-high-contrast-hover,
235
- 'primary-active': $palette-yellow-high-contrast-hover,
236
- 'primary-box-shadow': $palette-white,
237
- 'primary-invert': $palette-black,
238
- 'secondary-base': $palette-grey-30,
239
- 'secondary-background': $palette-black,
240
- 'secondary-background-glow-high-contrast': $palette-grey-90,
241
- 'secondary-dark': $palette-grey-30,
242
- 'secondary-hover': $palette-grey-40,
243
- 'secondary-active': $palette-grey-40,
244
- 'secondary-box-shadow': $palette-grey-30,
245
- 'secondary-invert': $palette-black,
246
- 'tertiary-base': $palette-white,
247
- 'tertiary-background': $palette-black,
248
- 'tertiary-background-glow-high-contrast': $palette-white,
249
- 'tertiary-dark': $palette-white,
250
- 'tertiary-hover': $palette-grey-30,
251
- 'tertiary-active': $palette-grey-30,
252
- 'tertiary-box-shadow': $palette-white,
253
- 'tertiary-invert': $palette-black,
254
- 'success-base': $palette-green-20,
255
- 'success-background': $palette-black,
256
- 'success-background-glow-high-contrast': $palette-green-20,
257
- 'success-dark': $palette-green-10,
258
- 'success-hover': $palette-green-10,
259
- 'success-active': $palette-green-10,
260
- 'success-box-shadow': $palette-white,
261
- 'success-invert': $palette-black,
262
- 'info-base': $palette-purple-20,
263
- 'info-background': $palette-black,
264
- 'info-background-glow-high-contrast': $palette-purple-20,
265
- 'info-dark': $palette-purple-10,
266
- 'info-hover': $palette-purple-10,
267
- 'info-active': $palette-purple-10,
268
- 'info-box-shadow': $palette-white,
269
- 'info-invert': $palette-black,
270
- 'warning-base': $palette-yellow-20,
271
- 'warning-background': $palette-black,
272
- 'warning-background-glow-high-contrast': $palette-yellow-20,
273
- 'warning-dark': $palette-yellow-10,
274
- 'warning-hover': $palette-yellow-10,
275
- 'warning-active': $palette-yellow-10,
276
- 'warning-box-shadow': $palette-white,
277
- 'warning-invert': $palette-black,
278
- 'danger-base': $palette-red-20,
279
- 'danger-background': $palette-black,
280
- 'danger-background-glow-high-contrast': $palette-red-20,
281
- 'danger-dark': $palette-red-10,
282
- 'danger-hover': $palette-red-10,
283
- 'danger-active': $palette-red-10,
284
- 'danger-box-shadow': $palette-white,
285
- 'danger-invert': $palette-black,
286
- 'facepile-red': $palette-red-30,
287
- 'facepile-teal': $palette-turqoise-30,
288
- 'facepile-blue': $palette-blue-30
289
- )
290
- ) !default;
291
- //@end-sass-export-section
1
+ /**
2
+ * @sass-export-section="themes"
3
+ */
4
+ $themes: (
5
+ 'light': (
6
+ 'text': $palette-grey-120,
7
+ 'text-subtle': $palette-grey-90,
8
+ 'text-invert': $palette-white,
9
+ 'text-glow-high-contrast': $palette-grey-120,
10
+ 'box-shadow-light': $palette-black-opacity-108,
11
+ 'box-shadow-medium': $palette-black-opacity-132,
12
+ 'box-shadow-heavy': $palette-black-opacity-18,
13
+ 'box-shadow-extra-heavy': $palette-black-opacity-22,
14
+ 'overlay': $palette-black-opacity-70,
15
+ 'overlay-invert': $palette-white,
16
+ 'body-background': $palette-white,
17
+ 'body-background-medium': $palette-grey-20,
18
+ 'alternate-background': $palette-grey-120,
19
+ 'alternate-background-medium': $palette-grey-110,
20
+ 'border': $palette-grey-30,
21
+ 'table-header': $palette-grey-30,
22
+ 'table-row-header': $palette-grey-10,
23
+ 'table-border-dark': $palette-grey-40,
24
+ 'hover-base': $palette-grey-110,
25
+ 'hover-invert': $palette-grey-10,
26
+ 'border-white-high-contrast': $palette-white-opacity-0,
27
+ 'border-yellow-high-contrast': $palette-black-opacity-0,
28
+ 'code-header': $palette-grey-30,
29
+ 'code-block': $palette-grey-20,
30
+ 'inline-code': $palette-grey-30,
31
+ 'code-highlight-background': $palette-yellow-10,
32
+ 'visited': $palette-purple-70,
33
+ 'score-low-off': $palette-red-opacity-30,
34
+ 'score-low': $palette-red-50,
35
+ 'score-medium-off': $palette-yellow-opacity-30,
36
+ 'score-medium': $palette-yellow-50,
37
+ 'score-high-off': $palette-green-opacity-30,
38
+ 'score-high': $palette-green-50,
39
+ 'hyperlink': $palette-blue-60,
40
+ 'primary-base': $palette-blue-50,
41
+ 'primary-background': $palette-blue-10,
42
+ 'primary-background-glow-high-contrast': $palette-blue-10,
43
+ 'primary-dark': $palette-blue-80,
44
+ 'primary-hover': $palette-blue-60,
45
+ 'primary-active': $palette-blue-70,
46
+ 'primary-box-shadow': $palette-blue-opacity-30,
47
+ 'primary-invert': $palette-white,
48
+ 'secondary-base': $palette-grey-60,
49
+ 'secondary-background': $palette-grey-30,
50
+ 'secondary-background-glow-high-contrast': $palette-grey-30,
51
+ 'secondary-dark': $palette-grey-110,
52
+ 'secondary-hover': $palette-grey-40,
53
+ 'secondary-active': $palette-grey-40,
54
+ 'secondary-box-shadow': $palette-black-opacity-30,
55
+ 'secondary-invert': $palette-black,
56
+ 'tertiary-base': $palette-navy-70,
57
+ 'tertiary-background': $palette-navy-90,
58
+ 'tertiary-background-glow-high-contrast': $palette-navy-90,
59
+ 'tertiary-dark': $palette-navy-30,
60
+ 'tertiary-hover': $palette-navy-80,
61
+ 'tertiary-active': $palette-navy-50,
62
+ 'tertiary-box-shadow': $palette-navy-opacity-30,
63
+ 'tertiary-invert': $palette-white,
64
+ 'success-base': $palette-green-60,
65
+ 'success-background': $palette-green-10,
66
+ 'success-background-glow-high-contrast': $palette-green-10,
67
+ 'success-dark': $palette-green-80,
68
+ 'success-hover': $palette-green-70,
69
+ 'success-active': $palette-green-80,
70
+ 'success-box-shadow': $palette-green-opacity-30,
71
+ 'success-invert': $palette-white,
72
+ 'info-base': $palette-purple-60,
73
+ 'info-background': $palette-purple-10,
74
+ 'info-background-glow-high-contrast': $palette-purple-10,
75
+ 'info-dark': $palette-purple-80,
76
+ 'info-hover': $palette-purple-60,
77
+ 'info-active': $palette-purple-70,
78
+ 'info-box-shadow': $palette-purple-opacity-30,
79
+ 'info-invert': $palette-white,
80
+ 'warning-base': $palette-yellow-50,
81
+ 'warning-background': $palette-yellow-10,
82
+ 'warning-background-glow-high-contrast': $palette-yellow-10,
83
+ 'warning-dark': $palette-yellow-80,
84
+ 'warning-hover': $palette-yellow-60,
85
+ 'warning-active': $palette-yellow-70,
86
+ 'warning-box-shadow': $palette-yellow-opacity-30,
87
+ 'warning-invert': $palette-black,
88
+ 'danger-base': $palette-red-60,
89
+ 'danger-background': $palette-red-10,
90
+ 'danger-background-glow-high-contrast': $palette-red-10,
91
+ 'danger-dark': $palette-red-90,
92
+ 'danger-hover': $palette-red-70,
93
+ 'danger-active': $palette-red-80,
94
+ 'danger-box-shadow': $palette-red-opacity-30,
95
+ 'danger-invert': $palette-white,
96
+ 'facepile-red': $palette-red-60,
97
+ 'facepile-teal': $palette-turqoise-60,
98
+ 'facepile-blue': $palette-blue-50
99
+ ),
100
+ 'dark': (
101
+ 'text': $palette-grey-30,
102
+ 'text-subtle': $palette-grey-40,
103
+ 'text-invert': $palette-grey-110,
104
+ 'text-glow-high-contrast': $palette-grey-30,
105
+ 'box-shadow-light': $palette-white-opacity-108,
106
+ 'box-shadow-medium': $palette-white-opacity-132,
107
+ 'box-shadow-heavy': $palette-white-opacity-18,
108
+ 'box-shadow-extra-heavy': $palette-white-opacity-22,
109
+ 'overlay': $palette-black-opacity-70,
110
+ 'overlay-invert': $palette-white,
111
+ 'body-background': $palette-grey-120,
112
+ 'body-background-medium': $palette-grey-110,
113
+ 'alternate-background': $palette-grey-20,
114
+ 'alternate-background-medium': $palette-grey-10,
115
+ 'border': $palette-grey-100,
116
+ 'table-header': $palette-grey-100,
117
+ 'table-row-header': $palette-grey-110,
118
+ 'table-border-dark': $palette-grey-90,
119
+ 'hover-base': $palette-grey-40,
120
+ 'hover-invert': $palette-grey-110,
121
+ 'border-white-high-contrast': $palette-white-opacity-0,
122
+ 'border-yellow-high-contrast': $palette-black-opacity-0,
123
+ 'code-header': $palette-grey-100,
124
+ 'code-block': $palette-grey-110,
125
+ 'inline-code': $palette-grey-100,
126
+ 'code-highlight-background': $palette-green-70,
127
+ 'visited': $palette-purple-40,
128
+ 'score-low-off': $palette-red-opacity-70,
129
+ 'score-low': $palette-red-50,
130
+ 'score-medium-off': $palette-yellow-opacity-30,
131
+ 'score-medium': $palette-yellow-40,
132
+ 'score-high-off': $palette-green-opacity-70,
133
+ 'score-high': $palette-green-40,
134
+ 'hyperlink': $palette-blue-30,
135
+ 'primary-base': $palette-blue-30,
136
+ 'primary-background': $palette-blue-80,
137
+ 'primary-background-glow-high-contrast': $palette-blue-80,
138
+ 'primary-dark': $palette-blue-20,
139
+ 'primary-hover': $palette-blue-40,
140
+ 'primary-active': $palette-blue-50,
141
+ 'primary-box-shadow': $palette-blue-opacity-30,
142
+ 'primary-invert': $palette-black,
143
+ 'secondary-base': $palette-grey-80,
144
+ 'secondary-background': $palette-grey-100,
145
+ 'secondary-background-glow-high-contrast': $palette-grey-100,
146
+ 'secondary-dark': $palette-grey-30,
147
+ 'secondary-hover': $palette-grey-70,
148
+ 'secondary-active': $palette-grey-60,
149
+ 'secondary-box-shadow': $palette-black-opacity-70,
150
+ 'secondary-invert': $palette-white,
151
+ 'tertiary-base': $palette-grey-100,
152
+ 'tertiary-background': $palette-grey-120,
153
+ 'tertiary-background-glow-high-contrast': $palette-grey-120,
154
+ 'tertiary-dark': $palette-grey-30,
155
+ 'tertiary-hover': $palette-grey-90,
156
+ 'tertiary-active': $palette-grey-80,
157
+ 'tertiary-box-shadow': $palette-blue-opacity-30,
158
+ 'tertiary-invert': $palette-white,
159
+ 'success-base': $palette-green-30,
160
+ 'success-background': $palette-green-80,
161
+ 'success-background-glow-high-contrast': $palette-green-80,
162
+ 'success-dark': $palette-green-10,
163
+ 'success-hover': $palette-green-40,
164
+ 'success-active': $palette-green-30,
165
+ 'success-box-shadow': $palette-green-opacity-70,
166
+ 'success-invert': $palette-black,
167
+ 'info-base': $palette-purple-50,
168
+ 'info-background': $palette-purple-80,
169
+ 'info-background-glow-high-contrast': $palette-purple-80,
170
+ 'info-dark': $palette-purple-10,
171
+ 'info-hover': $palette-purple-40,
172
+ 'info-active': $palette-purple-30,
173
+ 'info-box-shadow': $palette-purple-opacity-70,
174
+ 'info-invert': $palette-black,
175
+ 'warning-base': $palette-yellow-50,
176
+ 'warning-background': $palette-yellow-80,
177
+ 'warning-background-glow-high-contrast': $palette-yellow-80,
178
+ 'warning-dark': $palette-yellow-10,
179
+ 'warning-hover': $palette-yellow-40,
180
+ 'warning-active': $palette-yellow-30,
181
+ 'warning-box-shadow': $palette-yellow-opacity-70,
182
+ 'warning-invert': $palette-black,
183
+ 'danger-base': $palette-red-30,
184
+ 'danger-background': $palette-red-80,
185
+ 'danger-background-glow-high-contrast': $palette-red-80,
186
+ 'danger-dark': $palette-red-10,
187
+ 'danger-hover': $palette-red-40,
188
+ 'danger-active': $palette-red-30,
189
+ 'danger-box-shadow': $palette-red-opacity-70,
190
+ 'danger-invert': $palette-black,
191
+ 'facepile-red': $palette-red-40,
192
+ 'facepile-teal': $palette-turqoise-40,
193
+ 'facepile-blue': $palette-blue-40
194
+ ),
195
+ 'high-contrast': (
196
+ 'text': $palette-white,
197
+ 'text-subtle': $palette-white,
198
+ 'text-invert': $palette-black,
199
+ 'text-glow-high-contrast': $palette-yellow-high-contrast,
200
+ 'box-shadow-light': $palette-white-opacity-0,
201
+ 'box-shadow-medium': $palette-white-opacity-0,
202
+ 'box-shadow-heavy': $palette-white-opacity-0,
203
+ 'box-shadow-extra-heavy': $palette-white-opacity-0,
204
+ 'overlay': $palette-grey-100,
205
+ 'overlay-invert': $palette-white,
206
+ 'body-background': $palette-black,
207
+ 'body-background-medium': $palette-black,
208
+ 'alternate-background': $palette-white,
209
+ 'alternate-background-medium': $palette-white,
210
+ 'border': $palette-white,
211
+ 'table-header': $palette-grey-90,
212
+ 'table-row-header': $palette-grey-120,
213
+ 'table-border-dark': $palette-white,
214
+ 'hover-base': $palette-yellow-high-contrast,
215
+ 'hover-invert': $palette-black,
216
+ 'border-white-high-contrast': $palette-white,
217
+ 'border-yellow-high-contrast': $palette-yellow-high-contrast,
218
+ 'code-header': $palette-black,
219
+ 'code-block': $palette-black,
220
+ 'inline-code': $palette-grey-110,
221
+ 'code-highlight-background': $palette-green-70,
222
+ 'visited': $palette-visited-high-contrast,
223
+ 'score-low-off': $palette-red-60,
224
+ 'score-low': $palette-red-10,
225
+ 'score-medium-off': $palette-yellow-opacity-70,
226
+ 'score-medium': $palette-yellow-20,
227
+ 'score-high-off': $palette-green-60,
228
+ 'score-high': $palette-green-10,
229
+ 'hyperlink': $palette-yellow-high-contrast,
230
+ 'primary-base': $palette-yellow-high-contrast,
231
+ 'primary-background': $palette-black,
232
+ 'primary-background-glow-high-contrast': $palette-yellow-high-contrast,
233
+ 'primary-dark': $palette-yellow-high-contrast,
234
+ 'primary-hover': $palette-yellow-high-contrast-hover,
235
+ 'primary-active': $palette-yellow-high-contrast-hover,
236
+ 'primary-box-shadow': $palette-white,
237
+ 'primary-invert': $palette-black,
238
+ 'secondary-base': $palette-grey-30,
239
+ 'secondary-background': $palette-black,
240
+ 'secondary-background-glow-high-contrast': $palette-grey-90,
241
+ 'secondary-dark': $palette-grey-30,
242
+ 'secondary-hover': $palette-grey-40,
243
+ 'secondary-active': $palette-grey-40,
244
+ 'secondary-box-shadow': $palette-grey-30,
245
+ 'secondary-invert': $palette-black,
246
+ 'tertiary-base': $palette-white,
247
+ 'tertiary-background': $palette-black,
248
+ 'tertiary-background-glow-high-contrast': $palette-white,
249
+ 'tertiary-dark': $palette-white,
250
+ 'tertiary-hover': $palette-grey-30,
251
+ 'tertiary-active': $palette-grey-30,
252
+ 'tertiary-box-shadow': $palette-white,
253
+ 'tertiary-invert': $palette-black,
254
+ 'success-base': $palette-green-20,
255
+ 'success-background': $palette-black,
256
+ 'success-background-glow-high-contrast': $palette-green-20,
257
+ 'success-dark': $palette-green-10,
258
+ 'success-hover': $palette-green-10,
259
+ 'success-active': $palette-green-10,
260
+ 'success-box-shadow': $palette-white,
261
+ 'success-invert': $palette-black,
262
+ 'info-base': $palette-purple-20,
263
+ 'info-background': $palette-black,
264
+ 'info-background-glow-high-contrast': $palette-purple-20,
265
+ 'info-dark': $palette-purple-10,
266
+ 'info-hover': $palette-purple-10,
267
+ 'info-active': $palette-purple-10,
268
+ 'info-box-shadow': $palette-white,
269
+ 'info-invert': $palette-black,
270
+ 'warning-base': $palette-yellow-20,
271
+ 'warning-background': $palette-black,
272
+ 'warning-background-glow-high-contrast': $palette-yellow-20,
273
+ 'warning-dark': $palette-yellow-10,
274
+ 'warning-hover': $palette-yellow-10,
275
+ 'warning-active': $palette-yellow-10,
276
+ 'warning-box-shadow': $palette-white,
277
+ 'warning-invert': $palette-black,
278
+ 'danger-base': $palette-red-20,
279
+ 'danger-background': $palette-black,
280
+ 'danger-background-glow-high-contrast': $palette-red-20,
281
+ 'danger-dark': $palette-red-10,
282
+ 'danger-hover': $palette-red-10,
283
+ 'danger-active': $palette-red-10,
284
+ 'danger-box-shadow': $palette-white,
285
+ 'danger-invert': $palette-black,
286
+ 'facepile-red': $palette-red-30,
287
+ 'facepile-teal': $palette-turqoise-30,
288
+ 'facepile-blue': $palette-blue-30
289
+ )
290
+ ) !default;
291
+ //@end-sass-export-section
package/src/tokens/typography.scss CHANGED
@@ -1,29 +1,29 @@
1
- /**
2
- * @sass-export-section="typography"
3
- */
4
-
5
- $document-font-size: 16px;
6
-
7
- // Typography
8
- $font-size-9: 0.75rem !default; // 12px
9
- $font-size-8: 0.875rem !default; // 14px
10
- $font-size-7: 1rem !default; // 16px
11
- $font-size-6: 1.125rem !default; // 18px
12
- $font-size-5: 1.25rem !default; // 20px
13
- $font-size-4: 1.5rem !default; // 24px
14
- $font-size-3: 1.75rem !default; // 28px
15
- $font-size-2: 2.125rem !default; // 34px
16
- $font-size-1: 2.5rem !default; // 40px
17
- $font-size-0: 3.375rem !default; // 54px
18
-
19
- // Font Weight
20
- $weight-light: 100;
21
- $weight-semilight: 200;
22
- $weight-normal: 400;
23
- $weight-semibold: 600;
24
- $weight-bold: 700;
25
-
26
- // Letter spacing
27
- $letter-spacing-medium: 0.125rem;
28
- $letter-spacing-wide: 0.225rem;
29
- //@end-sass-export-section
1
+ /**
2
+ * @sass-export-section="typography"
3
+ */
4
+
5
+ $document-font-size: 16px;
6
+
7
+ // Typography
8
+ $font-size-9: 0.75rem !default; // 12px
9
+ $font-size-8: 0.875rem !default; // 14px
10
+ $font-size-7: 1rem !default; // 16px
11
+ $font-size-6: 1.125rem !default; // 18px
12
+ $font-size-5: 1.25rem !default; // 20px
13
+ $font-size-4: 1.5rem !default; // 24px
14
+ $font-size-3: 1.75rem !default; // 28px
15
+ $font-size-2: 2.125rem !default; // 34px
16
+ $font-size-1: 2.5rem !default; // 40px
17
+ $font-size-0: 3.375rem !default; // 54px
18
+
19
+ // Font Weight
20
+ $weight-light: 100;
21
+ $weight-semilight: 200;
22
+ $weight-normal: 400;
23
+ $weight-semibold: 600;
24
+ $weight-bold: 700;
25
+
26
+ // Letter spacing
27
+ $letter-spacing-medium: 0.125rem;
28
+ $letter-spacing-wide: 0.225rem;
29
+ //@end-sass-export-section