@ptsecurity/mosaic 14.1.0 → 14.2.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 (39) hide show
  1. package/_theming.scss +7407 -90
  2. package/_visual.scss +3032 -6
  3. package/design-tokens/legacy-2017/tokens/components/markdown.json5 +294 -0
  4. package/design-tokens/legacy-2017/tokens/properties/md-typography.json5 +103 -0
  5. package/design-tokens/legacy-2017/tokens.d.ts +204 -0
  6. package/design-tokens/pt-2022/tokens/components/markdown.json5 +294 -0
  7. package/design-tokens/pt-2022/tokens/properties/md-typography.json5 +103 -0
  8. package/design-tokens/pt-2022/tokens.d.ts +204 -0
  9. package/design-tokens/style-dictionary/build.js +2 -0
  10. package/design-tokens/style-dictionary/configs/scss.js +6 -0
  11. package/design-tokens/style-dictionary/filters/color.js +3 -1
  12. package/design-tokens/style-dictionary/filters/md-typography.js +7 -0
  13. package/design-tokens/style-dictionary/transformGroups/scss.js +1 -0
  14. package/design-tokens/style-dictionary/transforms/attribute/md-typography.js +9 -0
  15. package/esm2020/design-tokens/legacy-2017/tokens.mjs +205 -1
  16. package/esm2020/design-tokens/pt-2022/tokens.mjs +205 -1
  17. package/esm2020/markdown/index.mjs +2 -0
  18. package/esm2020/markdown/markdown.component.mjs +45 -0
  19. package/esm2020/markdown/markdown.module.mjs +23 -0
  20. package/esm2020/markdown/markdown.service.mjs +52 -0
  21. package/esm2020/markdown/ptsecurity-mosaic-markdown.mjs +5 -0
  22. package/esm2020/markdown/public-api.mjs +4 -0
  23. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs +613 -1
  24. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  25. package/fesm2015/ptsecurity-mosaic-markdown.mjs +120 -0
  26. package/fesm2015/ptsecurity-mosaic-markdown.mjs.map +1 -0
  27. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs +613 -1
  28. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  29. package/fesm2020/ptsecurity-mosaic-markdown.mjs +119 -0
  30. package/fesm2020/ptsecurity-mosaic-markdown.mjs.map +1 -0
  31. package/markdown/README.md +0 -0
  32. package/markdown/index.d.ts +1 -0
  33. package/markdown/markdown.component.d.ts +16 -0
  34. package/markdown/markdown.module.d.ts +11 -0
  35. package/markdown/markdown.service.d.ts +7 -0
  36. package/markdown/public-api.d.ts +3 -0
  37. package/package.json +12 -4
  38. package/prebuilt-themes/dark-theme.css +1 -1
  39. package/prebuilt-themes/default-theme.css +1 -1
package/_visual.scss CHANGED
@@ -1,11 +1,3037 @@
1
- @use './body';
2
- @use './layout';
3
- @use './layout-media';
1
+ @mixin size($width, $height) {
2
+ width: $width;
3
+ height: $height;
4
+ }
5
+
6
+ @mixin square($size) {
7
+ @include size($size, $size);
8
+ }
9
+
10
+
11
+
12
+ @mixin body-html() {
13
+
14
+ // HTML & Body reset
15
+ html,
16
+ body {
17
+ @include square(100%);
18
+ }
19
+
20
+ html {
21
+ // Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
22
+ -webkit-text-size-adjust: 100%;
23
+ -ms-text-size-adjust: 100%;
24
+
25
+ // Setting @viewport causes scrollbars to overlap content in Edge, so
26
+ // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
27
+ -ms-overflow-style: scrollbar;
28
+
29
+ -moz-osx-font-smoothing: grayscale;
30
+
31
+ // Helps fonts on OSX looks more consistent with other systems
32
+ // Isn't currently in button styles due to performance concerns
33
+ -webkit-font-smoothing: antialiased;
34
+ // Change the default tap highlight to be completely transparent in iOS.
35
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
36
+ -webkit-touch-callout: none;
37
+ }
38
+
39
+ body {
40
+ // remove the margin in all browsers.
41
+ margin: 0;
42
+ }
43
+ }
44
+
45
+ // mixin definition ; sets LTR and RTL within the same style call
46
+ // @see https://css-tricks.com/almanac/properties/d/direction/
47
+
48
+ @mixin rtl($prop, $ltr-value, $rtl-value) {
49
+ #{$prop}: $ltr-value;
50
+
51
+ [dir=rtl] & {
52
+ #{$prop}: $rtl-value;
53
+ }
54
+ }
55
+
56
+ @mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
57
+ #{$ltr-prop}: $value;
58
+
59
+ [dir=rtl] & {
60
+ #{$ltr-prop}: $reset-value;
61
+ #{$rtl-prop}: $value;
62
+ }
63
+ }
64
+
65
+ // To reverse padding (top left bottom right) -> (top right bottom left)
66
+ @function rtl-value($list) {
67
+ @if length($list) == 4 {
68
+ @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2)
69
+ }
70
+ @if length($list) == 5 {
71
+ @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2) nth($list, 5)
72
+ }
73
+ @return $list;
74
+ }
75
+
76
+
77
+ // Do not edit directly
78
+
79
+ $light-color-scheme-primary-default: #0374eb;
80
+ $light-color-scheme-second-default: #6d7a86;
81
+ $light-color-scheme-error-default: #db3c55;
82
+ $light-color-scheme-info-default: #0374eb;
83
+ $light-color-scheme-success-default: #028b49;
84
+ $light-color-scheme-warning-default: #a26e0c;
85
+ $light-color-scheme-foreground-text: #19252f;
86
+ $light-color-scheme-foreground-text-less-contrast: #6d7a86;
87
+ $light-color-scheme-foreground-text-disabled: #8c99a5;
88
+ $light-color-scheme-foreground-text-error: #db3c55;
89
+ $light-color-scheme-foreground-text-success: #016b37;
90
+ $light-color-scheme-foreground-divider: #d7dee4;
91
+ $light-color-scheme-foreground-border: #bdc7d1;
92
+ $light-color-scheme-foreground-icon: #8c99a5;
93
+ $light-color-scheme-background-background: white;
94
+ $light-color-scheme-background-background-disabled: #f2f5f9;
95
+ $light-color-scheme-background-background-less-contrast: #f2f5f9;
96
+ $light-color-scheme-background-background-under: #f2f5f9;
97
+ $light-color-scheme-background-overlay-hover: rgba(black, 0.05);
98
+ $light-color-scheme-background-overlay-active: rgba(black, 0.1);
99
+ $light-color-scheme-background-overlay-disabled: rgba(white, 0.3);
100
+ $light-color-scheme-states-focused-color: #0374eb;
101
+ $light-color-scheme-states-focused-color-error: #db3c55;
102
+ $light-color-scheme-states-selected-color: #e7f1ff;
103
+ $light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
104
+ $light-color-scheme-states-disabled-opacity: 0.3;
105
+ $dark-color-scheme-primary-default: #0059b8;
106
+ $dark-color-scheme-second-default: #515e69;
107
+ $dark-color-scheme-error-default: #b9023a;
108
+ $dark-color-scheme-info-default: #0c6579;
109
+ $dark-color-scheme-success-default: #016b37;
110
+ $dark-color-scheme-warning-default: #7e5406;
111
+ $dark-color-scheme-foreground-text: #d7dee4;
112
+ $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
113
+ $dark-color-scheme-foreground-text-disabled: #6d7a86;
114
+ $dark-color-scheme-foreground-text-error: #ee6f79;
115
+ $dark-color-scheme-foreground-text-success: #4ba96c;
116
+ $dark-color-scheme-foreground-divider: mix(#515e69, transparent, 50%);
117
+ $dark-color-scheme-foreground-border: #515e69;
118
+ $dark-color-scheme-foreground-icon: #8c99a5;
119
+ $dark-color-scheme-background-background: #19252f;
120
+ $dark-color-scheme-background-background-disabled: #333f4a;
121
+ $dark-color-scheme-background-background-less-contrast: #27333e;
122
+ $dark-color-scheme-background-background-under: #151e25;
123
+ $dark-color-scheme-background-overlay-hover: rgba(white, 0.05);
124
+ $dark-color-scheme-background-overlay-active: rgba(white, 0.1);
125
+ $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
126
+ $dark-color-scheme-states-focused-color: #4187ff;
127
+ $dark-color-scheme-states-focused-color-error: #b9023a;
128
+ $dark-color-scheme-states-selected-color: rgba(3, 116, 235, 0.3);
129
+ $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
130
+ $dark-color-scheme-states-disabled-opacity: 0.45;
131
+ $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
132
+ $font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
133
+ $font-family-monospace: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
134
+ $size-3xs: 2px;
135
+ $size-xxs: 4px;
136
+ $size-xs: 6px;
137
+ $size-s: 8px;
138
+ $size-m: 12px;
139
+ $size-l: 16px;
140
+ $size-xl: 20px;
141
+ $size-xxl: 24px;
142
+ $size-3xl: 32px;
143
+ $size-4xl: 40px;
144
+ $size-5xl: 48px;
145
+ $size-6xl: 56px;
146
+ $size-7xl: 64px;
147
+ $size-border-width: 1px;
148
+ $size-border-radius: 4px;
149
+ $size-option-height: 32px;
150
+ $size-panel-height: 48px;
151
+ $size-control-s-height: 16px;
152
+ $size-control-m-height: 32px;
153
+ $size-button-min-width: 64px;
154
+ $size-badge-tag-height: 24px;
155
+ $size-header-height: 56px;
156
+ $size-footer-height: 64px;
157
+ $padding-control-horizontal: 16px;
158
+ $padding-option-horizontal: 16px;
159
+ $padding-badge-tag-horizontal: 8px;
160
+ $padding-header-right: 8px;
161
+ $padding-header-footer-horizontal: 16px;
162
+ $margin-control-group-s-vertical: 8px;
163
+ $margin-icon-text-m-horizontal: 8px;
164
+ $margin-icon-text-s-horizontal: 4px;
165
+ $palette-blue-40: #eff6ff;
166
+ $palette-blue-60: #e7f1ff;
167
+ $palette-blue-100: #c8dfff;
168
+ $palette-blue-200: #a2c7fe;
169
+ $palette-blue-300: #5697ff;
170
+ $palette-blue-400: #4187ff;
171
+ $palette-blue-500: #0374eb;
172
+ $palette-blue-560: #0059b8;
173
+ $palette-blue-600: #014b9d;
174
+ $palette-blue-700: #023c7f;
175
+ $palette-blue-800: #193060;
176
+ $palette-blue-900: #00224f;
177
+ $palette-blue-1000: #001a40;
178
+ $palette-blue-a100: rgba(3, 116, 235, 0.15);
179
+ $palette-blue-a200: rgba(3, 116, 235, 0.3);
180
+ $palette-blue-contrast-40: #4D4D4D;
181
+ $palette-blue-contrast-60: #4D4D4D;
182
+ $palette-blue-contrast-100: #4D4D4D;
183
+ $palette-blue-contrast-200: #4D4D4D;
184
+ $palette-blue-contrast-300: #4D4D4D;
185
+ $palette-blue-contrast-400: white;
186
+ $palette-blue-contrast-500: white;
187
+ $palette-blue-contrast-560: white;
188
+ $palette-blue-contrast-600: white;
189
+ $palette-blue-contrast-700: white;
190
+ $palette-blue-contrast-800: white;
191
+ $palette-blue-contrast-a100: #4D4D4D;
192
+ $palette-blue-contrast-a200: white;
193
+ $palette-green-40: #ecf9ef;
194
+ $palette-green-60: #d2f7db;
195
+ $palette-green-100: #b6ebc3;
196
+ $palette-green-200: #8ed5a1;
197
+ $palette-green-300: #4ba96c;
198
+ $palette-green-400: #319d5c;
199
+ $palette-green-500: #028b49;
200
+ $palette-green-560: #016b37;
201
+ $palette-green-600: #015a2d;
202
+ $palette-green-700: #004823;
203
+ $palette-green-800: #103920;
204
+ $palette-green-900: #002a12;
205
+ $palette-green-1000: #00210c;
206
+ $palette-green-a100: rgba(2, 139, 73, 0.15);
207
+ $palette-green-contrast-40: #4D4D4D;
208
+ $palette-green-contrast-60: #4D4D4D;
209
+ $palette-green-contrast-100: #4D4D4D;
210
+ $palette-green-contrast-200: #4D4D4D;
211
+ $palette-green-contrast-300: #4D4D4D;
212
+ $palette-green-contrast-400: white;
213
+ $palette-green-contrast-500: white;
214
+ $palette-green-contrast-560: white;
215
+ $palette-green-contrast-600: white;
216
+ $palette-green-contrast-700: white;
217
+ $palette-green-contrast-800: white;
218
+ $palette-green-contrast-a100: #4D4D4D;
219
+ $palette-red-40: #fff3f3;
220
+ $palette-red-60: #ffeaea;
221
+ $palette-red-100: #fbd6d6;
222
+ $palette-red-200: #fcb2b4;
223
+ $palette-red-300: #ee6f79;
224
+ $palette-red-400: #ea5868;
225
+ $palette-red-500: #db3c55;
226
+ $palette-red-560: #b9023a;
227
+ $palette-red-600: #9e0130;
228
+ $palette-red-700: #800025;
229
+ $palette-red-800: #621420;
230
+ $palette-red-900: #500013;
231
+ $palette-red-1000: #41000b;
232
+ $palette-red-a100: rgba(219, 60, 85, 0.15);
233
+ $palette-red-contrast-40: #4D4D4D;
234
+ $palette-red-contrast-60: #4D4D4D;
235
+ $palette-red-contrast-100: #4D4D4D;
236
+ $palette-red-contrast-200: #4D4D4D;
237
+ $palette-red-contrast-300: #4D4D4D;
238
+ $palette-red-contrast-400: white;
239
+ $palette-red-contrast-500: white;
240
+ $palette-red-contrast-560: white;
241
+ $palette-red-contrast-600: white;
242
+ $palette-red-contrast-700: white;
243
+ $palette-red-contrast-800: white;
244
+ $palette-red-contrast-a100: #4D4D4D;
245
+ $palette-grey-40: #f2f5f9;
246
+ $palette-grey-60: #ebeef2;
247
+ $palette-grey-100: #d7dee4;
248
+ $palette-grey-200: #bdc7d1;
249
+ $palette-grey-300: #8c99a5;
250
+ $palette-grey-400: #7f8c98;
251
+ $palette-grey-500: #6d7a86;
252
+ $palette-grey-560: #515e69;
253
+ $palette-grey-600: #434f5a;
254
+ $palette-grey-700: #333f4a;
255
+ $palette-grey-800: #27333e;
256
+ $palette-grey-900: #19252f;
257
+ $palette-grey-1000: #151e25;
258
+ $palette-grey-a40: rgba(25, 37, 47, 0.04);
259
+ $palette-grey-a60: rgba(25, 37, 47, 0.06);
260
+ $palette-grey-a100: rgba(25, 37, 47, 0.1);
261
+ $palette-grey-a200: rgba(25, 37, 47, 0.2);
262
+ $palette-grey-a300: rgba(25, 37, 47, 0.3);
263
+ $palette-grey-a500: rgba(25, 37, 47, 0.5);
264
+ $palette-grey-contrast-40: #4D4D4D;
265
+ $palette-grey-contrast-60: #4D4D4D;
266
+ $palette-grey-contrast-100: #4D4D4D;
267
+ $palette-grey-contrast-200: #4D4D4D;
268
+ $palette-grey-contrast-300: #4D4D4D;
269
+ $palette-grey-contrast-400: white;
270
+ $palette-grey-contrast-500: white;
271
+ $palette-grey-contrast-560: white;
272
+ $palette-grey-contrast-600: white;
273
+ $palette-grey-contrast-700: white;
274
+ $palette-grey-contrast-800: white;
275
+ $palette-yellow-40: #fff4dd;
276
+ $palette-yellow-60: #ffecce;
277
+ $palette-yellow-100: #fcdda6;
278
+ $palette-yellow-200: #f5c23c;
279
+ $palette-yellow-300: #e19f12;
280
+ $palette-yellow-400: #c78816;
281
+ $palette-yellow-500: #a26e0c;
282
+ $palette-yellow-560: #7e5406;
283
+ $palette-yellow-600: #6b4804;
284
+ $palette-yellow-700: #543803;
285
+ $palette-yellow-800: #3e3015;
286
+ $palette-yellow-900: #312001;
287
+ $palette-yellow-1000: #1f1500;
288
+ $palette-yellow-a100: rgba(255, 159, 18, 0.15);
289
+ $palette-yellow-contrast-40: #4D4D4D;
290
+ $palette-yellow-contrast-60: #4D4D4D;
291
+ $palette-yellow-contrast-100: #4D4D4D;
292
+ $palette-yellow-contrast-200: #4D4D4D;
293
+ $palette-yellow-contrast-300: #4D4D4D;
294
+ $palette-yellow-contrast-400: white;
295
+ $palette-yellow-contrast-500: white;
296
+ $palette-yellow-contrast-560: white;
297
+ $palette-yellow-contrast-600: white;
298
+ $palette-yellow-contrast-700: white;
299
+ $palette-yellow-contrast-800: white;
300
+ $palette-yellow-contrast-a100: #4D4D4D;
301
+ $palette-teal-40: #ebf8fd;
302
+ $palette-teal-60: #d9f3fd;
303
+ $palette-teal-100: #afe6f9;
304
+ $palette-teal-200: #6ed3f2;
305
+ $palette-teal-300: #18a5c5;
306
+ $palette-teal-400: #2099b7;
307
+ $palette-teal-500: #218ca8;
308
+ $palette-teal-560: #0c6579;
309
+ $palette-teal-600: #0c5567;
310
+ $palette-teal-700: #084453;
311
+ $palette-teal-800: #143641;
312
+ $palette-teal-900: #022731;
313
+ $palette-teal-1000: #001f28;
314
+ $palette-teal-contrast-40: #4D4D4D;
315
+ $palette-teal-contrast-60: #4D4D4D;
316
+ $palette-teal-contrast-100: #4D4D4D;
317
+ $palette-teal-contrast-200: #4D4D4D;
318
+ $palette-teal-contrast-300: #4D4D4D;
319
+ $palette-teal-contrast-400: white;
320
+ $palette-teal-contrast-500: white;
321
+ $palette-teal-contrast-560: white;
322
+ $palette-teal-contrast-600: white;
323
+ $palette-teal-contrast-700: white;
324
+ $palette-teal-contrast-800: white;
325
+ $palette-teal-contrast-a100: #4D4D4D;
326
+ $palette-teal-contrast-a200: white;
327
+ $palette-purple-40: #fff3fb;
328
+ $palette-purple-60: #ffe9f8;
329
+ $palette-purple-100: #f2d4e8;
330
+ $palette-purple-200: #e4bbd7;
331
+ $palette-purple-300: #c692b5;
332
+ $palette-purple-400: #bb78a7;
333
+ $palette-purple-500: #a65d92;
334
+ $palette-purple-560: #864775;
335
+ $palette-purple-600: #753865;
336
+ $palette-purple-700: #612853;
337
+ $palette-purple-800: #48273f;
338
+ $palette-purple-900: #36172e;
339
+ $palette-purple-1000: #23001b;
340
+ $palette-purple-contrast-40: #4D4D4D;
341
+ $palette-purple-contrast-60: #4D4D4D;
342
+ $palette-purple-contrast-100: #4D4D4D;
343
+ $palette-purple-contrast-200: #4D4D4D;
344
+ $palette-purple-contrast-300: #4D4D4D;
345
+ $palette-purple-contrast-400: white;
346
+ $palette-purple-contrast-500: white;
347
+ $palette-purple-contrast-560: white;
348
+ $palette-purple-contrast-600: white;
349
+ $palette-purple-contrast-700: white;
350
+ $palette-purple-contrast-800: white;
351
+ $palette-purple-contrast-a100: #4D4D4D;
352
+ $palette-purple-contrast-a200: white;
353
+ $alert-light-color-scheme-error-background: #fff3f3;
354
+ $alert-light-color-scheme-error-border: #fbd6d6;
355
+ $alert-light-color-scheme-error-icon: #ee6f79;
356
+ $alert-light-color-scheme-warning-background: #fff4dd;
357
+ $alert-light-color-scheme-warning-border: #fcdda6;
358
+ $alert-light-color-scheme-warning-icon: #e19f12;
359
+ $alert-light-color-scheme-success-background: #ecf9ef;
360
+ $alert-light-color-scheme-success-border: #b6ebc3;
361
+ $alert-light-color-scheme-success-icon: #4ba96c;
362
+ $alert-light-color-scheme-info-background: #ebf8fd;
363
+ $alert-light-color-scheme-info-border: #afe6f9;
364
+ $alert-light-color-scheme-info-icon: #18a5c5;
365
+ $alert-light-color-scheme-default-background: #f2f5f9;
366
+ $alert-light-color-scheme-default-border: #d7dee4;
367
+ $alert-light-color-scheme-default-icon: #8c99a5;
368
+ $alert-dark-color-scheme-error-background: #500013;
369
+ $alert-dark-color-scheme-error-border: #800025;
370
+ $alert-dark-color-scheme-error-icon: #ee6f79;
371
+ $alert-dark-color-scheme-warning-background: #3e3015;
372
+ $alert-dark-color-scheme-warning-border: #543803;
373
+ $alert-dark-color-scheme-warning-icon: #e19f12;
374
+ $alert-dark-color-scheme-success-background: #103920;
375
+ $alert-dark-color-scheme-success-border: #004823;
376
+ $alert-dark-color-scheme-success-icon: #4ba96c;
377
+ $alert-dark-color-scheme-info-background: #143641;
378
+ $alert-dark-color-scheme-info-border: #084453;
379
+ $alert-dark-color-scheme-info-icon: #18a5c5;
380
+ $alert-dark-color-scheme-default-background: #27333e;
381
+ $alert-dark-color-scheme-default-border: #333f4a;
382
+ $alert-dark-color-scheme-default-icon: #8c99a5;
383
+ $alert-size-border-width: 1px;
384
+ $alert-size-border-radius: 4px;
385
+ $alert-size-horizontal-padding: 16px;
386
+ $alert-size-vertical-padding: 12px;
387
+ $alert-size-icon-margin: 8px;
388
+ $alert-size-close-button-width: 16px;
389
+ $alert-size-small-vertical-padding: 12px;
390
+ $alert-font-default-header: subheading;
391
+ $alert-font-default-body: body;
392
+ $alert-font-small-header: caption;
393
+ $alert-font-small-body: caption;
394
+ $autocomplete-size-panel-padding: 4px 0;
395
+ $autocomplete-size-panel-max-height: 256px;
396
+ $autocomplete-size-panel-border-radius: 4px;
397
+ $badge-light-color-scheme-solid-primary-background: #4187ff;
398
+ $badge-light-color-scheme-solid-primary-border: #4187ff;
399
+ $badge-light-color-scheme-solid-primary-color: white;
400
+ $badge-light-color-scheme-solid-info-background: #2099b7;
401
+ $badge-light-color-scheme-solid-info-border: #2099b7;
402
+ $badge-light-color-scheme-solid-info-color: white;
403
+ $badge-light-color-scheme-solid-success-background: #319d5c;
404
+ $badge-light-color-scheme-solid-success-border: #319d5c;
405
+ $badge-light-color-scheme-solid-success-color: white;
406
+ $badge-light-color-scheme-solid-warning-background: #c78816;
407
+ $badge-light-color-scheme-solid-warning-border: #c78816;
408
+ $badge-light-color-scheme-solid-warning-color: white;
409
+ $badge-light-color-scheme-solid-error-background: #ea5868;
410
+ $badge-light-color-scheme-solid-error-border: #ea5868;
411
+ $badge-light-color-scheme-solid-error-color: white;
412
+ $badge-light-color-scheme-solid-transparent-background: transparent;
413
+ $badge-light-color-scheme-solid-transparent-border: #bdc7d1;
414
+ $badge-light-color-scheme-solid-transparent-color: #19252f;
415
+ $badge-light-color-scheme-solid-light-background: #d7dee4;
416
+ $badge-light-color-scheme-solid-light-border: #d7dee4;
417
+ $badge-light-color-scheme-solid-light-color: #19252f;
418
+ $badge-light-color-scheme-solid-second-background: #7f8c98;
419
+ $badge-light-color-scheme-solid-second-border: #7f8c98;
420
+ $badge-light-color-scheme-solid-second-color: white;
421
+ $badge-light-color-scheme-pastel-primary-background: #eff6ff;
422
+ $badge-light-color-scheme-pastel-primary-border: #a2c7fe;
423
+ $badge-light-color-scheme-pastel-primary-color: #4187ff;
424
+ $badge-light-color-scheme-pastel-info-background: #ebf8fd;
425
+ $badge-light-color-scheme-pastel-info-border: #6ed3f2;
426
+ $badge-light-color-scheme-pastel-info-color: #2099b7;
427
+ $badge-light-color-scheme-pastel-success-background: #ecf9ef;
428
+ $badge-light-color-scheme-pastel-success-border: #8ed5a1;
429
+ $badge-light-color-scheme-pastel-success-color: #028b49;
430
+ $badge-light-color-scheme-pastel-warning-background: #fff4dd;
431
+ $badge-light-color-scheme-pastel-warning-border: #f5c23c;
432
+ $badge-light-color-scheme-pastel-warning-color: #a26e0c;
433
+ $badge-light-color-scheme-pastel-error-background: #fff3f3;
434
+ $badge-light-color-scheme-pastel-error-border: #fcb2b4;
435
+ $badge-light-color-scheme-pastel-error-color: #db3c55;
436
+ $badge-dark-color-scheme-pastel-primary-background: #193060;
437
+ $badge-dark-color-scheme-pastel-primary-border: #014b9d;
438
+ $badge-dark-color-scheme-pastel-primary-color: #a2c7fe;
439
+ $badge-dark-color-scheme-pastel-info-background: #143641;
440
+ $badge-dark-color-scheme-pastel-info-border: #0c5567;
441
+ $badge-dark-color-scheme-pastel-info-color: #6ed3f2;
442
+ $badge-dark-color-scheme-pastel-success-background: #103920;
443
+ $badge-dark-color-scheme-pastel-success-border: #015a2d;
444
+ $badge-dark-color-scheme-pastel-success-color: #8ed5a1;
445
+ $badge-dark-color-scheme-pastel-warning-background: #3e3015;
446
+ $badge-dark-color-scheme-pastel-warning-border: #6b4804;
447
+ $badge-dark-color-scheme-pastel-warning-color: #f5c23c;
448
+ $badge-dark-color-scheme-pastel-error-background: #621420;
449
+ $badge-dark-color-scheme-pastel-error-border: #9e0130;
450
+ $badge-dark-color-scheme-pastel-error-color: #fcb2b4;
451
+ $badge-dark-color-scheme-solid-primary-background: #0059b8;
452
+ $badge-dark-color-scheme-solid-primary-border: #0059b8;
453
+ $badge-dark-color-scheme-solid-primary-color: white;
454
+ $badge-dark-color-scheme-solid-info-background: #0c6579;
455
+ $badge-dark-color-scheme-solid-info-border: #0c6579;
456
+ $badge-dark-color-scheme-solid-info-color: white;
457
+ $badge-dark-color-scheme-solid-success-background: #016b37;
458
+ $badge-dark-color-scheme-solid-success-border: #016b37;
459
+ $badge-dark-color-scheme-solid-success-color: white;
460
+ $badge-dark-color-scheme-solid-warning-background: #7e5406;
461
+ $badge-dark-color-scheme-solid-warning-border: #7e5406;
462
+ $badge-dark-color-scheme-solid-warning-color: white;
463
+ $badge-dark-color-scheme-solid-error-background: #b9023a;
464
+ $badge-dark-color-scheme-solid-error-border: #b9023a;
465
+ $badge-dark-color-scheme-solid-error-color: white;
466
+ $badge-dark-color-scheme-solid-transparent-background: transparent;
467
+ $badge-dark-color-scheme-solid-transparent-border: #515e69;
468
+ $badge-dark-color-scheme-solid-transparent-color: white;
469
+ $badge-dark-color-scheme-solid-light-background: #7f8c98;
470
+ $badge-dark-color-scheme-solid-light-border: #7f8c98;
471
+ $badge-dark-color-scheme-solid-light-color: white;
472
+ $badge-dark-color-scheme-solid-second-background: #515e69;
473
+ $badge-dark-color-scheme-solid-second-border: #515e69;
474
+ $badge-dark-color-scheme-solid-second-color: white;
475
+ $badge-size-default-height: 24px;
476
+ $badge-size-default-min-width: 10px;
477
+ $badge-size-default-padding: 0 8px;
478
+ $badge-size-default-border-width: 1px;
479
+ $badge-size-default-border-radius: 4px;
480
+ $badge-size-mini-height: 16px;
481
+ $badge-size-mini-min-width: 10px;
482
+ $badge-size-mini-border-width: 1px;
483
+ $badge-size-mini-border-radius: 2px;
484
+ $badge-size-mini-padding: 0 4px;
485
+ $badge-font-default-default: caption;
486
+ $badge-font-default-caps: caption-caps;
487
+ $badge-font-default-mono: caption-mono;
488
+ $badge-font-mini-default: extra-small-text;
489
+ $badge-font-mini-caps: extra-small-text-caps;
490
+ $badge-font-mini-mono: extra-small-text-mono;
491
+ $button-toggle-size-border-size: 1px;
492
+ $button-toggle-size-border-radius: 4px;
493
+ $button-toggle-size-border-siblings-radius: 0;
494
+ $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
495
+ $button-light-color-scheme-primary-color: white;
496
+ $button-light-color-scheme-primary-border: #0374eb;
497
+ $button-light-color-scheme-primary-background: #0374eb;
498
+ $button-light-color-scheme-primary-icon: white;
499
+ $button-light-color-scheme-primary-states-active-border: #0059b8;
500
+ $button-light-color-scheme-primary-states-active-background: #0059b8;
501
+ $button-light-color-scheme-primary-transparent-color: #0374eb;
502
+ $button-light-color-scheme-primary-transparent-icon: #5697ff;
503
+ $button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
504
+ $button-light-color-scheme-primary-transparent-states-hover-icon: #0374eb;
505
+ $button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
506
+ $button-light-color-scheme-primary-transparent-states-active-icon: #014b9d;
507
+ $button-light-color-scheme-second-border: #d7dee4;
508
+ $button-light-color-scheme-second-background: #d7dee4;
509
+ $button-light-color-scheme-second-color: #19252f;
510
+ $button-light-color-scheme-second-icon: #8c99a5;
511
+ $button-light-color-scheme-second-states-active-border: #bdc7d1;
512
+ $button-light-color-scheme-second-states-active-background: #bdc7d1;
513
+ $button-light-color-scheme-error-border: #d7dee4;
514
+ $button-light-color-scheme-error-background: #d7dee4;
515
+ $button-light-color-scheme-error-color: #ea5868;
516
+ $button-light-color-scheme-error-icon: #ea5868;
517
+ $button-light-color-scheme-error-states-active-border: #bdc7d1;
518
+ $button-light-color-scheme-error-states-active-background: #bdc7d1;
519
+ $button-dark-color-scheme-active-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
520
+ $button-dark-color-scheme-primary-color: white;
521
+ $button-dark-color-scheme-primary-border: #0059b8;
522
+ $button-dark-color-scheme-primary-background: #0059b8;
523
+ $button-dark-color-scheme-primary-icon: white;
524
+ $button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
525
+ $button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
526
+ $button-dark-color-scheme-primary-transparent-color: #5697ff;
527
+ $button-dark-color-scheme-primary-transparent-icon: #5697ff;
528
+ $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
529
+ $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
530
+ $button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
531
+ $button-dark-color-scheme-primary-transparent-states-active-icon: #a2c7fe;
532
+ $button-dark-color-scheme-second-border: #515e69;
533
+ $button-dark-color-scheme-second-background: #515e69;
534
+ $button-dark-color-scheme-second-color: #f2f5f9;
535
+ $button-dark-color-scheme-second-icon: #8c99a5;
536
+ $button-dark-color-scheme-second-states-active-border: #333f4a;
537
+ $button-dark-color-scheme-second-states-active-background: #333f4a;
538
+ $button-dark-color-scheme-error-border: #515e69;
539
+ $button-dark-color-scheme-error-background: #515e69;
540
+ $button-dark-color-scheme-error-color: #ea5868;
541
+ $button-dark-color-scheme-error-icon: #ea5868;
542
+ $button-dark-color-scheme-error-states-active-border: #333f4a;
543
+ $button-dark-color-scheme-error-states-active-background: #333f4a;
544
+ $button-size-height: 32px;
545
+ $button-size-border-width: 1px;
546
+ $button-size-border-radius: 4px;
547
+ $button-size-horizontal-padding: 12px;
548
+ $button-font-default: body;
549
+ $button-font-primary: body-strong;
550
+ $button-font-primary-transparent: body;
551
+ $icon-button-size-horizontal-padding: 8px;
552
+ $icon-button-size-left-icon-padding: 6px;
553
+ $card-light-color-scheme-error-vertical-line: #fbd6d6;
554
+ $card-light-color-scheme-error-background: #fff3f3;
555
+ $card-light-color-scheme-error-shadow: #fbd6d6;
556
+ $card-light-color-scheme-warning-vertical-line: #fcdda6;
557
+ $card-light-color-scheme-warning-background: #fff4dd;
558
+ $card-light-color-scheme-warning-shadow: #fcdda6;
559
+ $card-light-color-scheme-success-vertical-line: #b6ebc3;
560
+ $card-light-color-scheme-success-background: #ecf9ef;
561
+ $card-light-color-scheme-success-shadow: #b6ebc3;
562
+ $card-light-color-scheme-info-vertical-line: #afe6f9;
563
+ $card-light-color-scheme-info-background: #ebf8fd;
564
+ $card-light-color-scheme-info-shadow: #afe6f9;
565
+ $card-dark-color-scheme-error-vertical-line: #800025;
566
+ $card-dark-color-scheme-error-background: #500013;
567
+ $card-dark-color-scheme-error-shadow: #800025;
568
+ $card-dark-color-scheme-warning-vertical-line: #543803;
569
+ $card-dark-color-scheme-warning-background: #3e3015;
570
+ $card-dark-color-scheme-warning-shadow: #543803;
571
+ $card-dark-color-scheme-success-vertical-line: #004823;
572
+ $card-dark-color-scheme-success-background: #103920;
573
+ $card-dark-color-scheme-success-shadow: #004823;
574
+ $card-dark-color-scheme-info-vertical-line: #084453;
575
+ $card-dark-color-scheme-info-background: #143641;
576
+ $card-dark-color-scheme-info-shadow: #084453;
577
+ $card-size-vertical-line: 4px;
578
+ $checkbox-light-color-scheme-default-border: #bdc7d1;
579
+ $checkbox-light-color-scheme-default-color: white;
580
+ $checkbox-light-color-scheme-default-background: transparent;
581
+ $checkbox-light-color-scheme-default-states-checked-border: #0374eb;
582
+ $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
583
+ $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
584
+ $checkbox-light-color-scheme-default-states-focused-shadow: 0 0 0 1px #0374eb;
585
+ $checkbox-light-color-scheme-default-states-checked-focused-border: #0374eb;
586
+ $checkbox-light-color-scheme-default-states-checked-focused-background: #0374eb;
587
+ $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0374eb;
588
+ $checkbox-light-color-scheme-default-states-checked-focused-outline: 1px solid white;
589
+ $checkbox-light-color-scheme-error-border: #db3c55;
590
+ $checkbox-light-color-scheme-error-color: white;
591
+ $checkbox-light-color-scheme-error-background: transparent;
592
+ $checkbox-light-color-scheme-error-states-checked-border: #db3c55;
593
+ $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
594
+ $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
595
+ $checkbox-light-color-scheme-error-states-focused-shadow: 0 0 0 1px #db3c55;
596
+ $checkbox-light-color-scheme-error-states-checked-focused-border: #db3c55;
597
+ $checkbox-light-color-scheme-error-states-checked-focused-background: #db3c55;
598
+ $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3c55;
599
+ $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid white;
600
+ $checkbox-dark-color-scheme-default-border: #515e69;
601
+ $checkbox-dark-color-scheme-default-color: white;
602
+ $checkbox-dark-color-scheme-default-background: transparent;
603
+ $checkbox-dark-color-scheme-default-states-checked-border: #0059b8;
604
+ $checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
605
+ $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
606
+ $checkbox-dark-color-scheme-default-states-focused-shadow: 0 0 0 1px #4187ff;
607
+ $checkbox-dark-color-scheme-default-states-checked-focused-border: #4187ff;
608
+ $checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
609
+ $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
610
+ $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
611
+ $checkbox-dark-color-scheme-error-border: #b9023a;
612
+ $checkbox-dark-color-scheme-error-color: white;
613
+ $checkbox-dark-color-scheme-error-background: transparent;
614
+ $checkbox-dark-color-scheme-error-states-checked-border: #b9023a;
615
+ $checkbox-dark-color-scheme-error-states-checked-background: #b9023a;
616
+ $checkbox-dark-color-scheme-error-states-focused-border: #b9023a;
617
+ $checkbox-dark-color-scheme-error-states-focused-shadow: 0 0 0 1px #b9023a;
618
+ $checkbox-dark-color-scheme-error-states-checked-focused-border: #b9023a;
619
+ $checkbox-dark-color-scheme-error-states-checked-focused-background: #b9023a;
620
+ $checkbox-dark-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #b9023a;
621
+ $checkbox-dark-color-scheme-error-states-checked-focused-outline: 1px solid #19252f;
622
+ $checkbox-size-width: 16px;
623
+ $checkbox-size-label-margin: 8px;
624
+ $checkbox-size-border-width: 1px;
625
+ $checkbox-size-border-radius: 4px;
626
+ $checkbox-size-toggle-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
627
+ $checkbox-font-default: body;
628
+ $datepicker-toggle-size-width: 30px;
629
+ $datepicker-toggle-size-height: 30px;
630
+ $datepicker-body-light-color-scheme-states-selected-color: #0374eb;
631
+ $datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
632
+ $datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
633
+ $datepicker-body-dark-color-scheme-states-selected-background: rgba(3, 116, 235, 0.3);
634
+ $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
635
+ $datepicker-body-size-cell-min-size: 32px;
636
+ $datepicker-body-size-cell-margin: 5%;
637
+ $datepicker-body-size-cell-padding: 8px;
638
+ $datepicker-body-size-cell-border-width: 1px;
639
+ $datepicker-body-font-label: body-strong;
640
+ $datepicker-body-font-today: body-strong;
641
+ $datepicker-calendar-size-padding-top: 16px;
642
+ $datepicker-calendar-size-padding-horizontal: 8px;
643
+ $datepicker-calendar-size-padding-bottom: 8px;
644
+ $datepicker-calendar-size-padding-blocks: 12px;
645
+ $datepicker-calendar-size-divider-width: 1px;
646
+ $datepicker-calendar-size-icon-border-width: 2px;
647
+ $datepicker-calendar-size-icon-prev-icon-transform: translateX(2px) rotate(-45deg);
648
+ $datepicker-calendar-size-icon-nex-icon-transform: translateX(-2px) rotate(45deg);
649
+ $datepicker-calendar-font-default: body;
650
+ $datepicker-calendar-font-header: caption;
651
+ $datepicker-input-size-width: 130px;
652
+ $divider-light-color-scheme-color: #d7dee4;
653
+ $divider-dark-color-scheme-color: mix(#515e69, transparent, 50%);
654
+ $divider-size-width: 1px;
655
+ $divider-size-inset-margin: 80px;
656
+ $description-list-light-color-scheme-dt: #6d7a86;
657
+ $description-list-light-color-scheme-dd: #19252f;
658
+ $description-list-dark-color-scheme-dt: #8c99a5;
659
+ $description-list-dark-color-scheme-dd: #d7dee4;
660
+ $description-list-size-grid-template-columns: repeat(4, 1fr);
661
+ $description-list-size-dt-grid-column: 1;
662
+ $description-list-size-dd-grid-column: 2 / span 3;
663
+ $description-list-size-horizontal-column-gap: 16px;
664
+ $description-list-size-horizontal-row-gap: 12px;
665
+ $description-list-size-vertical-column-gap: 0;
666
+ $description-list-size-vertical-row-gap: 2px;
667
+ $description-list-size-vertical-dd-margin-bottom: 16px;
668
+ $description-list-font-horizontal-dt: body;
669
+ $description-list-font-horizontal-dd: body;
670
+ $description-list-font-vertical-dt: caption;
671
+ $description-list-font-vertical-dd: body;
672
+ $dropdown-item-size-padding: 5px 15px;
673
+ $dropdown-item-size-icon-padding: 0 8px 2px 0;
674
+ $dropdown-item-font-default: body;
675
+ $dropdown-item-font-caption: caption;
676
+ $dropdown-group-header-size-default-padding: 6px 15px;
677
+ $dropdown-group-header-size-small-padding: 8px 15px;
678
+ $dropdown-group-header-font-default: body-strong;
679
+ $dropdown-group-header-font-small: caption-caps;
680
+ $dropdown-divider-size-height: 1px;
681
+ $dropdown-divider-size-margin: 4px 0;
682
+ $dropdown-trigger-size-button-right-padding: 8px;
683
+ $dropdown-trigger-size-right-icon-padding: 2px;
684
+ $dropdown-panel-size-max-width: 640px;
685
+ $dropdown-panel-size-padding: 4px 0;
686
+ $dropdown-panel-size-border-width: 1px;
687
+ $dropdown-panel-size-border-radius: 4px;
688
+ $form-field-light-color-scheme-border: #bdc7d1;
689
+ $form-field-light-color-scheme-background: white;
690
+ $form-field-light-color-scheme-states-hover-border: #8c99a5;
691
+ $form-field-light-color-scheme-states-invalid-border: #db3c55;
692
+ $form-field-light-color-scheme-states-invalid-background: #fff3f3;
693
+ $form-field-dark-color-scheme-border: #515e69;
694
+ $form-field-dark-color-scheme-background: transparent;
695
+ $form-field-dark-color-scheme-states-hover-border: #6d7a86;
696
+ $form-field-dark-color-scheme-states-invalid-border: #b9023a;
697
+ $form-field-dark-color-scheme-states-invalid-background: mix(#41000b, transparent, 30%);
698
+ $form-field-size-height: 32px;
699
+ $form-field-size-border-width: 1px;
700
+ $form-field-size-border-radius: 4px;
701
+ $form-field-size-button-width: 32px;
702
+ $form-field-font-default: body;
703
+ $form-field-hint-size-margin-top: 4px;
704
+ $form-field-hint-font-default: caption;
705
+ $form-field-password-hint-light-color-scheme-text-color: #19252f;
706
+ $form-field-password-hint-light-color-scheme-icon-color: #8c99a5;
707
+ $form-field-password-hint-light-color-scheme-states-invalid-icon-color: #ee6f79;
708
+ $form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
709
+ $form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
710
+ $form-field-password-hint-light-color-scheme-states-valid-icon-color: #4ba96c;
711
+ $form-field-password-hint-dark-color-scheme-text-color: #d7dee4;
712
+ $form-field-password-hint-dark-color-scheme-icon-color: #8c99a5;
713
+ $form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ee6f79;
714
+ $form-field-password-hint-dark-color-scheme-states-invalid-text-color: #d7dee4;
715
+ $form-field-password-hint-dark-color-scheme-states-valid-text-color: #4ba96c;
716
+ $form-field-password-hint-dark-color-scheme-states-valid-icon-color: #4ba96c;
717
+ $form-field-password-hint-size-margin-top: 8px;
718
+ $form-field-password-hint-size-icon-margin: 4px;
719
+ $form-field-password-hint-font-default: caption;
720
+ $forms-light-color-scheme-label: #6d7a86;
721
+ $forms-light-color-scheme-legend: #19252f;
722
+ $forms-dark-color-scheme-label: #8c99a5;
723
+ $forms-dark-color-scheme-legend: #d7dee4;
724
+ $forms-size-horizontal-row-margin-bottom: 20px;
725
+ $forms-size-horizontal-control-padding-left: 16px;
726
+ $forms-size-horizontal-legend-margin-top: 32px;
727
+ $forms-size-horizontal-legend-margin-bottom: 16px;
728
+ $forms-size-vertical-row-margin-bottom: 16px;
729
+ $forms-size-vertical-label-padding-top: 0;
730
+ $forms-size-vertical-label-padding-bottom: 4px;
731
+ $forms-size-vertical-control-padding-left: 24px;
732
+ $forms-size-vertical-legend-margin-top: 32px;
733
+ $forms-size-vertical-legend-margin-bottom: 12px;
734
+ $forms-font-default-label: body;
735
+ $forms-font-default-legend: subheading;
736
+ $icon-light-color-scheme-secondary-default: #8c99a5;
737
+ $icon-light-color-scheme-secondary-states-hover: #6d7a86;
738
+ $icon-light-color-scheme-secondary-states-active: #434f5a;
739
+ $icon-light-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
740
+ $icon-light-color-scheme-primary-default: #5697ff;
741
+ $icon-light-color-scheme-primary-states-hover: #0374eb;
742
+ $icon-light-color-scheme-primary-states-active: #014b9d;
743
+ $icon-light-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
744
+ $icon-light-color-scheme-info-default: #18a5c5;
745
+ $icon-light-color-scheme-info-states-hover: #218ca8;
746
+ $icon-light-color-scheme-info-states-active: #0c5567;
747
+ $icon-light-color-scheme-info-states-disabled: mix(#18a5c5, transparent, 30%);
748
+ $icon-light-color-scheme-success-default: #4ba96c;
749
+ $icon-light-color-scheme-success-states-hover: #028b49;
750
+ $icon-light-color-scheme-success-states-active: #015a2d;
751
+ $icon-light-color-scheme-success-states-disabled: mix(#4ba96c, transparent, 30%);
752
+ $icon-light-color-scheme-warning-default: #e19f12;
753
+ $icon-light-color-scheme-warning-states-hover: #a26e0c;
754
+ $icon-light-color-scheme-warning-states-active: #6b4804;
755
+ $icon-light-color-scheme-warning-states-disabled: mix(#e19f12, transparent, 30%);
756
+ $icon-light-color-scheme-error-default: #ee6f79;
757
+ $icon-light-color-scheme-error-states-hover: #db3c55;
758
+ $icon-light-color-scheme-error-states-active: #9e0130;
759
+ $icon-light-color-scheme-error-states-disabled: mix(#ee6f79, transparent, 30%);
760
+ $icon-dark-color-scheme-secondary-default: #8c99a5;
761
+ $icon-dark-color-scheme-secondary-states-hover: #6d7a86;
762
+ $icon-dark-color-scheme-secondary-states-active: #bdc7d1;
763
+ $icon-dark-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
764
+ $icon-dark-color-scheme-primary-default: #5697ff;
765
+ $icon-dark-color-scheme-primary-states-hover: #0374eb;
766
+ $icon-dark-color-scheme-primary-states-active: #a2c7fe;
767
+ $icon-dark-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
768
+ $icon-dark-color-scheme-info-default: #18a5c5;
769
+ $icon-dark-color-scheme-info-states-hover: #218ca8;
770
+ $icon-dark-color-scheme-info-states-active: #6ed3f2;
771
+ $icon-dark-color-scheme-info-states-disabled: mix(#18a5c5, transparent, 30%);
772
+ $icon-dark-color-scheme-success-default: #4ba96c;
773
+ $icon-dark-color-scheme-success-states-hover: #028b49;
774
+ $icon-dark-color-scheme-success-states-active: #8ed5a1;
775
+ $icon-dark-color-scheme-success-states-disabled: mix(#4ba96c, transparent, 30%);
776
+ $icon-dark-color-scheme-warning-default: #e19f12;
777
+ $icon-dark-color-scheme-warning-states-hover: #a26e0c;
778
+ $icon-dark-color-scheme-warning-states-active: #f5c23c;
779
+ $icon-dark-color-scheme-warning-states-disabled: mix(#e19f12, transparent, 30%);
780
+ $icon-dark-color-scheme-error-default: #ee6f79;
781
+ $icon-dark-color-scheme-error-states-hover: #db3c55;
782
+ $icon-dark-color-scheme-error-states-active: #fcb2b4;
783
+ $icon-dark-color-scheme-error-states-disabled: mix(#ee6f79, transparent, 30%);
784
+ $input-size-padding: 0 12px;
785
+ $input-size-width: 100%;
786
+ $input-font-default: body;
787
+ $input-font-monospace: body-mono;
788
+ $link-light-color-scheme-text: #0374eb;
789
+ $link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
790
+ $link-light-color-scheme-state-visited-text: #864775;
791
+ $link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
792
+ $link-light-color-scheme-state-hover-text: #0059b8;
793
+ $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
794
+ $link-light-color-scheme-state-active: #014b9d;
795
+ $link-light-color-scheme-state-focused-outline: #0374eb;
796
+ $link-dark-color-scheme-text: #5697ff;
797
+ $link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
798
+ $link-dark-color-scheme-state-visited-text: #bb78a7;
799
+ $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
800
+ $link-dark-color-scheme-state-hover-text: #4187ff;
801
+ $link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
802
+ $link-dark-color-scheme-state-active: #0374eb;
803
+ $link-dark-color-scheme-state-focused-outline: #4187ff;
804
+ $link-size-icon-margin: 4px;
805
+ $link-size-state-focused-outline-offset: 2px;
806
+ $link-size-state-focused-outline-width: 2px;
807
+ $link-font-default: body;
808
+ $list-size-horizontal-padding: 12px;
809
+ $list-size-icon-right-margin: 8px;
810
+ $list-size-item-height: 32px;
811
+ $list-font-item: body;
812
+ $loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
813
+ $loader-overlay-light-color-scheme-text: #19252f;
814
+ $loader-overlay-light-color-scheme-caption: #6d7a86;
815
+ $loader-overlay-dark-color-scheme-background: mix(#19252f, transparent, 90%);
816
+ $loader-overlay-dark-color-scheme-text: #d7dee4;
817
+ $loader-overlay-dark-color-scheme-caption: #8c99a5;
818
+ $loader-overlay-size-text-max-width: 480px;
819
+ $loader-overlay-size-fixed-top-padding: 72px;
820
+ $loader-overlay-size-center-optical-compensation: -40%;
821
+ $loader-overlay-font-text: body;
822
+ $loader-overlay-font-caption: caption;
823
+ $markdown-h1-light-color-scheme-color: #19252f;
824
+ $markdown-h1-dark-color-scheme-color: #d7dee4;
825
+ $markdown-h1-size-max-width: 650px;
826
+ $markdown-h1-size-margin-top: 0;
827
+ $markdown-h1-size-margin-bottom: 16px;
828
+ $markdown-h1-font-default: md-h1;
829
+ $markdown-h2-light-color-scheme-color: #19252f;
830
+ $markdown-h2-dark-color-scheme-color: #d7dee4;
831
+ $markdown-h2-size-max-width: 650px;
832
+ $markdown-h2-size-margin-top: 24px;
833
+ $markdown-h2-size-margin-bottom: 12px;
834
+ $markdown-h2-font-default: md-h2;
835
+ $markdown-h3-light-color-scheme-color: #19252f;
836
+ $markdown-h3-dark-color-scheme-color: #d7dee4;
837
+ $markdown-h3-size-max-width: 650px;
838
+ $markdown-h3-size-margin-top: 24px;
839
+ $markdown-h3-size-margin-bottom: 12px;
840
+ $markdown-h3-font-default: md-h3;
841
+ $markdown-h4-light-color-scheme-color: #19252f;
842
+ $markdown-h4-dark-color-scheme-color: #d7dee4;
843
+ $markdown-h4-size-max-width: 650px;
844
+ $markdown-h4-size-margin-top: 24px;
845
+ $markdown-h4-size-margin-bottom: 12px;
846
+ $markdown-h4-font-default: md-h4;
847
+ $markdown-h5-light-color-scheme-color: #19252f;
848
+ $markdown-h5-dark-color-scheme-color: #d7dee4;
849
+ $markdown-h5-size-max-width: 650px;
850
+ $markdown-h5-size-margin-top: 24px;
851
+ $markdown-h5-size-margin-bottom: 8px;
852
+ $markdown-h5-font-default: md-h5;
853
+ $markdown-h6-light-color-scheme-color: #19252f;
854
+ $markdown-h6-dark-color-scheme-color: #d7dee4;
855
+ $markdown-h6-size-max-width: 650px;
856
+ $markdown-h6-size-margin-top: 24px;
857
+ $markdown-h6-size-margin-bottom: 8px;
858
+ $markdown-h6-font-default: md-h6;
859
+ $markdown-p-light-color-scheme-color: #19252f;
860
+ $markdown-p-dark-color-scheme-color: #d7dee4;
861
+ $markdown-p-size-max-width: 650px;
862
+ $markdown-p-size-margin-top: 12px;
863
+ $markdown-p-size-margin-bottom: 12px;
864
+ $markdown-p-font-default: md-body;
865
+ $markdown-list-light-color-scheme-color: #19252f;
866
+ $markdown-list-dark-color-scheme-color: #d7dee4;
867
+ $markdown-list-size-max-width: 650px;
868
+ $markdown-list-size-margin-top: 12px;
869
+ $markdown-list-size-margin-bottom: 12px;
870
+ $markdown-list-size-margin-top-after-paragraph: -8px;
871
+ $markdown-list-size-ol-number-padding-right: 4px;
872
+ $markdown-list-size-ul-padding: 0 0 0 24px;
873
+ $markdown-list-size-item-margin-bottom: 4px;
874
+ $markdown-list-font-default: md-body;
875
+ $markdown-blockquote-light-color-scheme-text: #19252f;
876
+ $markdown-blockquote-light-color-scheme-line: #bdc7d1;
877
+ $markdown-blockquote-light-color-scheme-background: transparent;
878
+ $markdown-blockquote-light-color-scheme-border: transparent;
879
+ $markdown-blockquote-dark-color-scheme-text: #d7dee4;
880
+ $markdown-blockquote-dark-color-scheme-line: #515e69;
881
+ $markdown-blockquote-dark-color-scheme-background: transparent;
882
+ $markdown-blockquote-dark-color-scheme-border: transparent;
883
+ $markdown-blockquote-size-max-width: 650px;
884
+ $markdown-blockquote-size-margin-top: 12px;
885
+ $markdown-blockquote-size-margin-bottom: 12px;
886
+ $markdown-blockquote-size-padding: 2px 12px;
887
+ $markdown-blockquote-size-line-width: 4px;
888
+ $markdown-blockquote-size-border-radius: 0;
889
+ $markdown-blockquote-size-border-width: 0;
890
+ $markdown-blockquote-font-default: md-body;
891
+ $markdown-code-light-color-scheme-text: #19252f;
892
+ $markdown-code-light-color-scheme-background: #f2f5f9;
893
+ $markdown-code-light-color-scheme-border: #d7dee4;
894
+ $markdown-code-dark-color-scheme-text: #d7dee4;
895
+ $markdown-code-dark-color-scheme-background: #27333e;
896
+ $markdown-code-dark-color-scheme-border: mix(#515e69, transparent, 50%);
897
+ $markdown-code-size-max-width: 650px;
898
+ $markdown-code-size-multiline-margin-top: 12px;
899
+ $markdown-code-size-multiline-margin-bottom: 24px;
900
+ $markdown-code-size-inline-padding: 1px 4px;
901
+ $markdown-code-size-multiline-padding: 12px 16px;
902
+ $markdown-code-size-border-radius: 4px;
903
+ $markdown-code-size-border-width: 1px;
904
+ $markdown-code-font-default: md-body-mono;
905
+ $markdown-link-light-color-scheme-text: #0374eb;
906
+ $markdown-link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
907
+ $markdown-link-light-color-scheme-state-visited-text: #864775;
908
+ $markdown-link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
909
+ $markdown-link-light-color-scheme-state-hover-text: #0059b8;
910
+ $markdown-link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
911
+ $markdown-link-light-color-scheme-state-active: #014b9d;
912
+ $markdown-link-light-color-scheme-state-focused-outline: #0374eb;
913
+ $markdown-link-dark-color-scheme-text: #5697ff;
914
+ $markdown-link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
915
+ $markdown-link-dark-color-scheme-state-visited-text: #bb78a7;
916
+ $markdown-link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
917
+ $markdown-link-dark-color-scheme-state-hover-text: #4187ff;
918
+ $markdown-link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
919
+ $markdown-link-dark-color-scheme-state-active: #0374eb;
920
+ $markdown-link-dark-color-scheme-state-focused-outline: #4187ff;
921
+ $markdown-link-size-icon-margin: 4px;
922
+ $markdown-link-size-state-focused-outline-offset: 2px;
923
+ $markdown-link-size-state-focused-outline-width: 2px;
924
+ $markdown-link-font-default: md-body;
925
+ $markdown-image-light-color-scheme-caption-text: #6d7a86;
926
+ $markdown-image-dark-color-scheme-caption-text: #8c99a5;
927
+ $markdown-image-size-max-width: 650px;
928
+ $markdown-image-size-margin-top: 12px;
929
+ $markdown-image-size-margin-bottom: 12px;
930
+ $markdown-image-size-caption-margin-top: -8px;
931
+ $markdown-image-size-caption-margin-bottom: 24px;
932
+ $markdown-image-font-caption: md-caption;
933
+ $markdown-hr-light-color-scheme-color: #d7dee4;
934
+ $markdown-hr-dark-color-scheme-color: mix(#515e69, transparent, 50%);
935
+ $markdown-hr-size-width: 1px;
936
+ $markdown-hr-size-margin-vertical: 24px;
937
+ $markdown-table-light-color-scheme-header: #6d7a86;
938
+ $markdown-table-light-color-scheme-body: #19252f;
939
+ $markdown-table-light-color-scheme-border: #d7dee4;
940
+ $markdown-table-dark-color-scheme-header: #8c99a5;
941
+ $markdown-table-dark-color-scheme-body: #d7dee4;
942
+ $markdown-table-dark-color-scheme-border: mix(#515e69, transparent, 50%);
943
+ $markdown-table-size-border-width: 1px;
944
+ $markdown-table-size-padding: 8px;
945
+ $markdown-table-size-margin-bottom: 12px;
946
+ $markdown-table-font-header: md-table-header;
947
+ $markdown-table-font-body: md-table-cell;
948
+ $markdown-size-max-width: 650px;
949
+ $markdown-font-default: md-body;
950
+ $modal-light-color-scheme-shadow: (0 0 0 1px #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5));
951
+ $modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.16);
952
+ $modal-light-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(39, 51, 62, 0.16);
953
+ $modal-light-color-scheme-background-mask: rgba(39, 51, 62, 0.5);
954
+ $modal-dark-color-scheme-shadow: (0 0 0 1px #19252f, 0 6px 12px 0 rgba(0, 0, 0, 0.5));
955
+ $modal-dark-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
956
+ $modal-dark-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
957
+ $modal-dark-color-scheme-background-mask: rgba(0, 0, 0, 0.5);
958
+ $modal-size-small: 400px;
959
+ $modal-size-normal: 640px;
960
+ $modal-size-large: 960px;
961
+ $modal-size-top: 48px;
962
+ $modal-size-close-width: 56px;
963
+ $modal-size-border-radius: 4px;
964
+ $modal-size-border-width: 1px;
965
+ $modal-header-light-color-scheme-border: #d7dee4;
966
+ $modal-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
967
+ $modal-header-size-border-radius: 4px 4px 0 0;
968
+ $modal-header-size-height: 56px;
969
+ $modal-header-size-padding: 0 16px;
970
+ $modal-header-font-default: title;
971
+ $modal-body-size-max-height: calc(100vh - 260px);
972
+ $modal-body-size-padding: 16px 24px 24px;
973
+ $modal-body-font-default: body;
974
+ $modal-footer-light-color-scheme-border: #f2f5f9;
975
+ $modal-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
976
+ $modal-footer-size-border-radius: 0 0 4px 4px;
977
+ $modal-footer-size-height: 64px;
978
+ $modal-footer-size-padding: 0 16px;
979
+ $modal-confirm-size-padding: 24px;
980
+ $navbar-light-color-scheme-background: #19252f;
981
+ $navbar-light-color-scheme-divider-background: #515e69;
982
+ $navbar-dark-color-scheme-background: #333f4a;
983
+ $navbar-dark-color-scheme-divider-background: #515e69;
984
+ $navbar-size-icon-margin: 6px;
985
+ $navbar-size-right-icon-margin: 2px;
986
+ $navbar-font-title: body;
987
+ $vertical-navbar-size-states-expanded-width: 240px;
988
+ $vertical-navbar-size-states-collapsed-width: 56px;
989
+ $vertical-navbar-size-icon-margin: 16px;
990
+ $navbar-item-light-color-scheme-text: #f2f5f9;
991
+ $navbar-item-light-color-scheme-icon: #bdc7d1;
992
+ $navbar-item-light-color-scheme-states-active: rgba(0, 0, 0, 0.1);
993
+ $navbar-item-light-color-scheme-states-selected: #333f4a;
994
+ $navbar-item-light-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
995
+ $navbar-item-light-color-scheme-states-progress: #333f4a;
996
+ $navbar-item-light-color-scheme-states-disabled-opacity: 0.3;
997
+ $navbar-item-dark-color-scheme-text: #f2f5f9;
998
+ $navbar-item-dark-color-scheme-icon: #bdc7d1;
999
+ $navbar-item-dark-color-scheme-states-active: rgba(0, 0, 0, 0.1);
1000
+ $navbar-item-dark-color-scheme-states-selected: #434f5a;
1001
+ $navbar-item-dark-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
1002
+ $navbar-item-dark-color-scheme-states-progress: #333f4a;
1003
+ $navbar-item-dark-color-scheme-states-disabled-opacity: 0.3;
1004
+ $navbar-item-size-padding: 16px;
1005
+ $navbar-item-size-height: 48px;
1006
+ $navbar-item-size-height-vertical: 56px;
1007
+ $navbar-brand-size-padding: 12px;
1008
+ $navbar-brand-size-margin-right: 24px;
1009
+ $navbar-brand-font-title: title;
1010
+ $optgroup-size-padding-left: 17px;
1011
+ $optgroup-font-default: subheading;
1012
+ $option-size-horizontal-padding: 12px;
1013
+ $option-size-height: 32px;
1014
+ $option-size-border-width: 2px;
1015
+ $option-font-default: body;
1016
+ $popover-light-color-scheme-background: white;
1017
+ $popover-light-color-scheme-text: #19252f;
1018
+ $popover-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
1019
+ $popover-light-color-scheme-border: #d7dee4;
1020
+ $popover-dark-color-scheme-background: #333f4a;
1021
+ $popover-dark-color-scheme-text: #d7dee4;
1022
+ $popover-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
1023
+ $popover-dark-color-scheme-border: #333f4a;
1024
+ $popover-size-max-height: 480px;
1025
+ $popover-size-padding: 16px;
1026
+ $popover-size-border-radius: 4px;
1027
+ $popover-size-border-width: 1px;
1028
+ $popover-size-arrow-size: 12px;
1029
+ $popover-size-trigger-margin: 9px;
1030
+ $popover-size-small-width: 200px;
1031
+ $popover-size-normal-width: 400px;
1032
+ $popover-size-large-width: 640px;
1033
+ $popover-font-default: body;
1034
+ $popover-header-light-color-scheme-border: #d7dee4;
1035
+ $popover-header-light-color-scheme-text: #19252f;
1036
+ $popover-header-light-color-scheme-background: white;
1037
+ $popover-header-dark-color-scheme-border: #434f5a;
1038
+ $popover-header-dark-color-scheme-text: #d7dee4;
1039
+ $popover-header-dark-color-scheme-background: #333f4a;
1040
+ $popover-header-size-height: 40px;
1041
+ $popover-header-size-padding: 0 16px;
1042
+ $popover-header-font-default: subheading;
1043
+ $popover-footer-light-color-scheme-border: #f2f5f9;
1044
+ $popover-footer-light-color-scheme-background: #f2f5f9;
1045
+ $popover-footer-dark-color-scheme-border: #434f5a;
1046
+ $popover-footer-dark-color-scheme-background: #333f4a;
1047
+ $popover-footer-size-margin-top: 8px;
1048
+ $popover-footer-size-padding: 12px 16px;
1049
+ $popover-footer-size-height: 56px;
1050
+ $popover-footer-font-default: body;
1051
+ $popup-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
1052
+ $popup-light-color-scheme-border: #d7dee4;
1053
+ $popup-light-color-scheme-background: white;
1054
+ $popup-light-color-scheme-footer-background: #f2f5f9;
1055
+ $popup-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
1056
+ $popup-dark-color-scheme-border: #333f4a;
1057
+ $popup-dark-color-scheme-background: #333f4a;
1058
+ $popup-dark-color-scheme-footer-background: transparent;
1059
+ $progress-bar-light-color-scheme-background: rgba(25, 37, 47, 0.06);
1060
+ $progress-bar-dark-color-scheme-background: rgba(white,0.06);
1061
+ $progress-bar-size-height: 4px;
1062
+ $progress-spinner-size-default-size: 16px;
1063
+ $progress-spinner-size-default-svg-circle-radius: 42.5%;
1064
+ $progress-spinner-size-default-svg-stroke-width: 13%;
1065
+ $progress-spinner-size-large-size: 48px;
1066
+ $progress-spinner-size-large-svg-circle-radius: 47%;
1067
+ $progress-spinner-size-large-svg-stroke-width: 6%;
1068
+ $radio-light-color-scheme-outer-circle-border: #bdc7d1;
1069
+ $radio-light-color-scheme-inner-circle-border: transparent;
1070
+ $radio-light-color-scheme-cap-color: white;
1071
+ $radio-light-color-scheme-states-checked-outer-circle-border: #0374eb;
1072
+ $radio-light-color-scheme-states-checked-inner-circle-border: #0374eb;
1073
+ $radio-light-color-scheme-states-focused-outer-circle-border: #0374eb;
1074
+ $radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #0374eb;
1075
+ $radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
1076
+ $radio-dark-color-scheme-outer-circle-border: #515e69;
1077
+ $radio-dark-color-scheme-inner-circle-border: transparent;
1078
+ $radio-dark-color-scheme-cap-color: white;
1079
+ $radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
1080
+ $radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
1081
+ $radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
1082
+ $radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
1083
+ $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
1084
+ $radio-size-outer-size: 14px;
1085
+ $radio-size-inner-size: 10px;
1086
+ $radio-size-cap-size: 6px;
1087
+ $radio-size-label-margin: 8px;
1088
+ $radio-font-default: body;
1089
+ $select-size-left-padding: 12px;
1090
+ $select-size-right-padding: 6px;
1091
+ $select-size-left-padding-multiple: 12px;
1092
+ $select-font-default: body;
1093
+ $select-panel-size-max-height: 232px;
1094
+ $select-panel-size-max-width: 640px;
1095
+ $select-panel-size-vertical-padding: 4px;
1096
+ $select-panel-size-border-width: 1px;
1097
+ $select-panel-size-border-radius: 4px;
1098
+ $select-panel-font-default: body;
1099
+ $sidepanel-light-color-scheme-border: #bdc7d1;
1100
+ $sidepanel-dark-color-scheme-border: #19252f;
1101
+ $sidepanel-font-default: body;
1102
+ $sidepanel-header-light-color-scheme-border: #d7dee4;
1103
+ $sidepanel-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
1104
+ $sidepanel-header-size-height: 56px;
1105
+ $sidepanel-header-size-padding: 0 16px;
1106
+ $sidepanel-header-size-close-padding: 0 0 0 8px;
1107
+ $sidepanel-header-font-default: title;
1108
+ $sidepanel-footer-light-color-scheme-border: #f2f5f9;
1109
+ $sidepanel-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
1110
+ $sidepanel-footer-size-height: 64px;
1111
+ $sidepanel-footer-size-padding: 0 16px;
1112
+ $sidepanel-footer-font-default: body;
1113
+ $table-size-border-width: 1px;
1114
+ $table-size-row-padding-vertical: 8px;
1115
+ $table-size-row-padding-horizontal: 16px;
1116
+ $table-font-header: caption;
1117
+ $table-font-body: body-tabular;
1118
+ $tabs-light-color-scheme-border: #d7dee4;
1119
+ $tabs-light-color-scheme-state-normal-icon: #8c99a5;
1120
+ $tabs-light-color-scheme-state-normal-text: #19252f;
1121
+ $tabs-light-color-scheme-state-hover-icon: #6d7a86;
1122
+ $tabs-light-color-scheme-state-hover-text: #19252f;
1123
+ $tabs-light-color-scheme-state-active-marker-color: #0374eb;
1124
+ $tabs-light-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
1125
+ $tabs-light-color-scheme-state-empty-text: #8c99a5;
1126
+ $tabs-light-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
1127
+ $tabs-light-color-scheme-state-disabled-text: #8c99a5;
1128
+ $tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
1129
+ $tabs-dark-color-scheme-border: #333f4a;
1130
+ $tabs-dark-color-scheme-state-normal-icon: #8c99a5;
1131
+ $tabs-dark-color-scheme-state-normal-text: #d7dee4;
1132
+ $tabs-dark-color-scheme-state-hover-icon: #6d7a86;
1133
+ $tabs-dark-color-scheme-state-hover-text: #d7dee4;
1134
+ $tabs-dark-color-scheme-state-active-marker-color: #0059b8;
1135
+ $tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
1136
+ $tabs-dark-color-scheme-state-empty-text: #6d7a86;
1137
+ $tabs-dark-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
1138
+ $tabs-dark-color-scheme-state-disabled-text: #6d7a86;
1139
+ $tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
1140
+ $tabs-size-height: 40px;
1141
+ $tabs-size-highlight-height: 4px;
1142
+ $tabs-size-padding-horizontal: 16px;
1143
+ $tabs-size-border-width: 1px;
1144
+ $tabs-size-border-radius: 4px;
1145
+ $tabs-size-label-icon-margin: 8px;
1146
+ $tabs-font-default: body;
1147
+ $vertical-tabs-light-color-scheme-state-normal-background: transparent;
1148
+ $vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
1149
+ $vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
1150
+ $vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
1151
+ $vertical-tabs-dark-color-scheme-state-normal-background: transparent;
1152
+ $vertical-tabs-dark-color-scheme-state-selected-background: rgba(3, 116, 235, 0.3);
1153
+ $vertical-tabs-dark-color-scheme-state-hover-background: rgba(white, 0.05);
1154
+ $vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(rgba(3, 116, 235, 0.3), $lightness:-1%);
1155
+ $tags-light-color-scheme-primary-background: #e7f1ff;
1156
+ $tags-light-color-scheme-primary-border: transparent;
1157
+ $tags-light-color-scheme-primary-text: #0374eb;
1158
+ $tags-light-color-scheme-primary-icon: #5697ff;
1159
+ $tags-light-color-scheme-primary-states-hover-icon: #0374eb;
1160
+ $tags-light-color-scheme-primary-states-focused: #0374eb;
1161
+ $tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
1162
+ $tags-light-color-scheme-primary-states-disabled-background: mix(#0374eb, transparent, 10%);
1163
+ $tags-light-color-scheme-primary-states-disabled-border: transparent;
1164
+ $tags-light-color-scheme-second-background: #d7dee4;
1165
+ $tags-light-color-scheme-second-border: transparent;
1166
+ $tags-light-color-scheme-second-text: #19252f;
1167
+ $tags-light-color-scheme-second-icon: #8c99a5;
1168
+ $tags-light-color-scheme-second-states-hover-icon: #6d7a86;
1169
+ $tags-light-color-scheme-second-states-focused: #0374eb;
1170
+ $tags-light-color-scheme-second-states-disabled-text: mix(#8c99a5, transparent, 50%);
1171
+ $tags-light-color-scheme-second-states-disabled-background: mix(#8c99a5, transparent, 10%);
1172
+ $tags-light-color-scheme-second-states-disabled-border: transparent;
1173
+ $tags-light-color-scheme-error-background: #ffeaea;
1174
+ $tags-light-color-scheme-error-border: transparent;
1175
+ $tags-light-color-scheme-error-text: #db3c55;
1176
+ $tags-light-color-scheme-error-icon: #ee6f79;
1177
+ $tags-light-color-scheme-error-states-hover-icon: #db3c55;
1178
+ $tags-light-color-scheme-error-states-focused: #db3c55;
1179
+ $tags-light-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
1180
+ $tags-light-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
1181
+ $tags-light-color-scheme-error-states-disabled-border: transparent;
1182
+ $tags-dark-color-scheme-primary-background: #014b9d;
1183
+ $tags-dark-color-scheme-primary-border: transparent;
1184
+ $tags-dark-color-scheme-primary-text: #a2c7fe;
1185
+ $tags-dark-color-scheme-primary-icon: #5697ff;
1186
+ $tags-dark-color-scheme-primary-states-hover-icon: #0374eb;
1187
+ $tags-dark-color-scheme-primary-states-focused: #4187ff;
1188
+ $tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
1189
+ $tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
1190
+ $tags-dark-color-scheme-primary-states-disabled-border: transparent;
1191
+ $tags-dark-color-scheme-second-background: #333f4a;
1192
+ $tags-dark-color-scheme-second-border: transparent;
1193
+ $tags-dark-color-scheme-second-text: #bdc7d1;
1194
+ $tags-dark-color-scheme-second-icon: #8c99a5;
1195
+ $tags-dark-color-scheme-second-states-hover-icon: #6d7a86;
1196
+ $tags-dark-color-scheme-second-states-focused: #4187ff;
1197
+ $tags-dark-color-scheme-second-states-disabled-text: mix(#7f8c98, transparent, 50%);
1198
+ $tags-dark-color-scheme-second-states-disabled-background: mix(#7f8c98, transparent, 10%);
1199
+ $tags-dark-color-scheme-second-states-disabled-border: transparent;
1200
+ $tags-dark-color-scheme-error-background: #800025;
1201
+ $tags-dark-color-scheme-error-border: transparent;
1202
+ $tags-dark-color-scheme-error-text: #fcb2b4;
1203
+ $tags-dark-color-scheme-error-icon: #ee6f79;
1204
+ $tags-dark-color-scheme-error-states-hover-icon: #db3c55;
1205
+ $tags-dark-color-scheme-error-states-focused: #b9023a;
1206
+ $tags-dark-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
1207
+ $tags-dark-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
1208
+ $tags-dark-color-scheme-error-states-disabled-border: transparent;
1209
+ $tags-size-margin: 2px;
1210
+ $tags-size-height: 24px;
1211
+ $tags-size-border-width: 1px;
1212
+ $tags-size-border-radius: 4px;
1213
+ $tags-size-icon-padding: 4px;
1214
+ $tags-size-text-margin: 8px;
1215
+ $tags-font-default: caption;
1216
+ $tags-font-mono: caption-mono;
1217
+ $tags-font-caps: caption-caps;
1218
+ $tag-list-size-padding: 1px 12px;
1219
+ $tag-input-size-height: 22px;
1220
+ $tag-input-size-margin: 2px 4px;
1221
+ $tag-input-font-default: body;
1222
+ $textarea-size-min-height: 50px;
1223
+ $textarea-size-padding: 5px 12px;
1224
+ $textarea-font-default: body;
1225
+ $textarea-font-mono: body-mono;
1226
+ $timepicker-size-padding-right: 16px;
1227
+ $timezone-option-light-color-scheme-text: #19252f;
1228
+ $timezone-option-light-color-scheme-caption: #6d7a86;
1229
+ $timezone-option-dark-color-scheme-text: #d7dee4;
1230
+ $timezone-option-dark-color-scheme-caption: #8c99a5;
1231
+ $timezone-option-size-padding: 6px 8px 6px 14px;
1232
+ $timezone-option-size-column-gap: 16px;
1233
+ $timezone-option-size-height: auto;
1234
+ $timezone-option-size-max-height: 4em;
1235
+ $timezone-option-font-text: body;
1236
+ $timezone-option-font-offset-text: body-tabular;
1237
+ $timezone-option-font-caption: caption;
1238
+ $toast-light-color-scheme-background: white;
1239
+ $toast-light-color-scheme-border: #bdc7d1;
1240
+ $toast-light-color-scheme-text: #19252f;
1241
+ $toast-light-color-scheme-text-caption: #6d7a86;
1242
+ $toast-light-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
1243
+ $toast-light-color-scheme-icon-info: #18a5c5;
1244
+ $toast-light-color-scheme-icon-error: #ee6f79;
1245
+ $toast-light-color-scheme-icon-success: #4ba96c;
1246
+ $toast-light-color-scheme-icon-warning: #e19f12;
1247
+ $toast-dark-color-scheme-background: #333f4a;
1248
+ $toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
1249
+ $toast-dark-color-scheme-text: #d7dee4;
1250
+ $toast-dark-color-scheme-text-caption: #8c99a5;
1251
+ $toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
1252
+ $toast-dark-color-scheme-icon-info: #18a5c5;
1253
+ $toast-dark-color-scheme-icon-error: #ee6f79;
1254
+ $toast-dark-color-scheme-icon-success: #4ba96c;
1255
+ $toast-dark-color-scheme-icon-warning: #e19f12;
1256
+ $toast-size-border-width: 1px;
1257
+ $toast-size-border-radius: 3px;
1258
+ $toast-size-width: 360px;
1259
+ $toast-size-padding-vertical: 12px;
1260
+ $toast-size-padding-left: 12px;
1261
+ $toast-size-padding-right: 16px;
1262
+ $toast-size-close-button-width: 32px;
1263
+ $toast-size-close-button-margin: 8px;
1264
+ $toast-size-icon-margin: 8px;
1265
+ $toast-size-caption-margin: 8px;
1266
+ $toast-size-actionbar-margin: 8px;
1267
+ $toast-size-actionbar-gap: 12px;
1268
+ $toast-size-vertical-margin: 16px;
1269
+ $toast-size-horizontal-margin: 16px;
1270
+ $toast-size-gap: 12px;
1271
+ $toast-font-title: body;
1272
+ $toast-font-caption: body;
1273
+ $toggle-light-color-scheme-border: #bdc7d1;
1274
+ $toggle-light-color-scheme-background: white;
1275
+ $toggle-light-color-scheme-circle-border: #bdc7d1;
1276
+ $toggle-light-color-scheme-circle-background: #d7dee4;
1277
+ $toggle-light-color-scheme-states-focused-shadow: inset 0 0 0 1px white, 0 0 0 2px #0374eb;
1278
+ $toggle-light-color-scheme-primary-checked-border-color: #0374eb;
1279
+ $toggle-light-color-scheme-primary-checked-background: #0374eb;
1280
+ $toggle-light-color-scheme-error-checked-border-color: #db3c55;
1281
+ $toggle-light-color-scheme-error-checked-background: #db3c55;
1282
+ $toggle-dark-color-scheme-border: #515e69;
1283
+ $toggle-dark-color-scheme-background: #19252f;
1284
+ $toggle-dark-color-scheme-circle-border: #515e69;
1285
+ $toggle-dark-color-scheme-circle-background: #6d7a86;
1286
+ $toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #19252f, 0 0 0 2px #4187ff;
1287
+ $toggle-dark-color-scheme-primary-checked-border-color: #0059b8;
1288
+ $toggle-dark-color-scheme-primary-checked-background: #0059b8;
1289
+ $toggle-dark-color-scheme-error-checked-border-color: #b9023a;
1290
+ $toggle-dark-color-scheme-error-checked-background: #b9023a;
1291
+ $toggle-size-height: 16px;
1292
+ $toggle-size-width: 28px;
1293
+ $toggle-size-border-radius: 9px;
1294
+ $toggle-size-label-margin: 8px;
1295
+ $toggle-font-default: body;
1296
+ $toggle-small-size-height: 14px;
1297
+ $toggle-small-size-width: 24px;
1298
+ $toggle-small-size-border-radius: 8px;
1299
+ $toggle-small-font-default: caption;
1300
+ $tooltip-light-color-scheme-background: #333f4a;
1301
+ $tooltip-light-color-scheme-text: #d7dee4;
1302
+ $tooltip-light-color-scheme-border: transparent;
1303
+ $tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1304
+ $tooltip-light-color-scheme-warning-background: #fff4dd;
1305
+ $tooltip-light-color-scheme-warning-text: #19252f;
1306
+ $tooltip-light-color-scheme-warning-border: #fcdda6;
1307
+ $tooltip-dark-color-scheme-background: white;
1308
+ $tooltip-dark-color-scheme-text: #19252f;
1309
+ $tooltip-dark-color-scheme-border: transparent;
1310
+ $tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1311
+ $tooltip-dark-color-scheme-warning-background: #7e5406;
1312
+ $tooltip-dark-color-scheme-warning-text: #d7dee4;
1313
+ $tooltip-dark-color-scheme-warning-border: #7e5406;
1314
+ $tooltip-size-max-width: 300px;
1315
+ $tooltip-size-border-width: 1px;
1316
+ $tooltip-size-border-radius: 4px;
1317
+ $tooltip-size-padding: 8px 16px;
1318
+ $tooltip-size-arrow-size: 12px;
1319
+ $tooltip-size-trigger-margin: 9px;
1320
+ $tooltip-font-default: caption;
1321
+ $extended-tooltip-light-color-scheme-background: white;
1322
+ $extended-tooltip-light-color-scheme-text: #19252f;
1323
+ $extended-tooltip-light-color-scheme-border: #d7dee4;
1324
+ $extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1325
+ $extended-tooltip-dark-color-scheme-background: #333f4a;
1326
+ $extended-tooltip-dark-color-scheme-text: #d7dee4;
1327
+ $extended-tooltip-dark-color-scheme-border: #333f4a;
1328
+ $extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1329
+ $extended-tooltip-size-border-radius: 4px;
1330
+ $extended-tooltip-size-arrow-size: 12px;
1331
+ $extended-tooltip-size-trigger-margin: 9px;
1332
+ $extended-tooltip-size-padding: 8px 16px;
1333
+ $extended-tooltip-size-max-height: 480px;
1334
+ $extended-tooltip-font-default: caption;
1335
+ $extended-tooltip-header-light-color-scheme-border: #d7dee4;
1336
+ $extended-tooltip-header-light-color-scheme-text: #19252f;
1337
+ $extended-tooltip-header-light-color-scheme-background: white;
1338
+ $extended-tooltip-header-dark-color-scheme-border: #434f5a;
1339
+ $extended-tooltip-header-dark-color-scheme-text: #d7dee4;
1340
+ $extended-tooltip-header-dark-color-scheme-background: #333f4a;
1341
+ $extended-tooltip-header-size-height: 40px;
1342
+ $extended-tooltip-header-size-padding: 8px 16px;
1343
+ $extended-tooltip-header-font-default: subheading;
1344
+ $tree-size-node-height: 32px;
1345
+ $tree-size-padding-left: 12px;
1346
+ $tree-size-toggle-padding: 4px;
1347
+ $tree-size-icon-padding: 8px;
1348
+ $tree-size-padding-right: 16px;
1349
+ $tree-font-node: body;
1350
+ $light-color-scheme-primary-palette: (
1351
+ 40: #eff6ff,
1352
+ 60: #e7f1ff,
1353
+ 100: #c8dfff,
1354
+ 200: #a2c7fe,
1355
+ 300: #5697ff,
1356
+ 400: #4187ff,
1357
+ 500: #0374eb,
1358
+ 560: #0059b8,
1359
+ 600: #014b9d,
1360
+ 700: #023c7f,
1361
+ 800: #193060,
1362
+ 900: #00224f,
1363
+ 1000: #001a40,
1364
+ A100: rgba(3, 116, 235, 0.15),
1365
+ A200: rgba(3, 116, 235, 0.3),
1366
+ contrast: (
1367
+ 40: #4D4D4D,
1368
+ 60: #4D4D4D,
1369
+ 100: #4D4D4D,
1370
+ 200: #4D4D4D,
1371
+ 300: #4D4D4D,
1372
+ 400: white,
1373
+ 500: white,
1374
+ 560: white,
1375
+ 600: white,
1376
+ 700: white,
1377
+ 800: white,
1378
+ A100: #4D4D4D,
1379
+ A200: white,
1380
+
1381
+ )
1382
+ );
1383
+
1384
+ $light-color-scheme-second-palette: (
1385
+ 40: #f2f5f9,
1386
+ 60: #ebeef2,
1387
+ 100: #d7dee4,
1388
+ 200: #bdc7d1,
1389
+ 300: #8c99a5,
1390
+ 400: #7f8c98,
1391
+ 500: #6d7a86,
1392
+ 560: #515e69,
1393
+ 600: #434f5a,
1394
+ 700: #333f4a,
1395
+ 800: #27333e,
1396
+ 900: #19252f,
1397
+ 1000: #151e25,
1398
+ A40: rgba(25, 37, 47, 0.04),
1399
+ A60: rgba(25, 37, 47, 0.06),
1400
+ A100: rgba(25, 37, 47, 0.1),
1401
+ A200: rgba(25, 37, 47, 0.2),
1402
+ A300: rgba(25, 37, 47, 0.3),
1403
+ A500: rgba(25, 37, 47, 0.5),
1404
+ contrast: (
1405
+ 40: #4D4D4D,
1406
+ 60: #4D4D4D,
1407
+ 100: #4D4D4D,
1408
+ 200: #4D4D4D,
1409
+ 300: #4D4D4D,
1410
+ 400: white,
1411
+ 500: white,
1412
+ 560: white,
1413
+ 600: white,
1414
+ 700: white,
1415
+ 800: white,
1416
+
1417
+ )
1418
+ );
1419
+
1420
+ $light-color-scheme-error-palette: (
1421
+ 40: #fff3f3,
1422
+ 60: #ffeaea,
1423
+ 100: #fbd6d6,
1424
+ 200: #fcb2b4,
1425
+ 300: #ee6f79,
1426
+ 400: #ea5868,
1427
+ 500: #db3c55,
1428
+ 560: #b9023a,
1429
+ 600: #9e0130,
1430
+ 700: #800025,
1431
+ 800: #621420,
1432
+ 900: #500013,
1433
+ 1000: #41000b,
1434
+ A100: rgba(219, 60, 85, 0.15),
1435
+ contrast: (
1436
+ 40: #4D4D4D,
1437
+ 60: #4D4D4D,
1438
+ 100: #4D4D4D,
1439
+ 200: #4D4D4D,
1440
+ 300: #4D4D4D,
1441
+ 400: white,
1442
+ 500: white,
1443
+ 560: white,
1444
+ 600: white,
1445
+ 700: white,
1446
+ 800: white,
1447
+ A100: #4D4D4D,
1448
+
1449
+ )
1450
+ );
1451
+
1452
+ $light-color-scheme-info-palette: (
1453
+ 40: #ebf8fd,
1454
+ 60: #d9f3fd,
1455
+ 100: #afe6f9,
1456
+ 200: #6ed3f2,
1457
+ 300: #18a5c5,
1458
+ 400: #2099b7,
1459
+ 500: #218ca8,
1460
+ 560: #0c6579,
1461
+ 600: #0c5567,
1462
+ 700: #084453,
1463
+ 800: #143641,
1464
+ 900: #022731,
1465
+ 1000: #001f28,
1466
+ contrast: (
1467
+ 40: #4D4D4D,
1468
+ 60: #4D4D4D,
1469
+ 100: #4D4D4D,
1470
+ 200: #4D4D4D,
1471
+ 300: #4D4D4D,
1472
+ 400: white,
1473
+ 500: white,
1474
+ 560: white,
1475
+ 600: white,
1476
+ 700: white,
1477
+ 800: white,
1478
+ A100: #4D4D4D,
1479
+ A200: white,
1480
+
1481
+ )
1482
+ );
1483
+
1484
+ $light-color-scheme-success-palette: (
1485
+ 40: #ecf9ef,
1486
+ 60: #d2f7db,
1487
+ 100: #b6ebc3,
1488
+ 200: #8ed5a1,
1489
+ 300: #4ba96c,
1490
+ 400: #319d5c,
1491
+ 500: #028b49,
1492
+ 560: #016b37,
1493
+ 600: #015a2d,
1494
+ 700: #004823,
1495
+ 800: #103920,
1496
+ 900: #002a12,
1497
+ 1000: #00210c,
1498
+ A100: rgba(2, 139, 73, 0.15),
1499
+ contrast: (
1500
+ 40: #4D4D4D,
1501
+ 60: #4D4D4D,
1502
+ 100: #4D4D4D,
1503
+ 200: #4D4D4D,
1504
+ 300: #4D4D4D,
1505
+ 400: white,
1506
+ 500: white,
1507
+ 560: white,
1508
+ 600: white,
1509
+ 700: white,
1510
+ 800: white,
1511
+ A100: #4D4D4D,
1512
+
1513
+ )
1514
+ );
1515
+
1516
+ $light-color-scheme-warning-palette: (
1517
+ 40: #fff4dd,
1518
+ 60: #ffecce,
1519
+ 100: #fcdda6,
1520
+ 200: #f5c23c,
1521
+ 300: #e19f12,
1522
+ 400: #c78816,
1523
+ 500: #a26e0c,
1524
+ 560: #7e5406,
1525
+ 600: #6b4804,
1526
+ 700: #543803,
1527
+ 800: #3e3015,
1528
+ 900: #312001,
1529
+ 1000: #1f1500,
1530
+ A100: rgba(255, 159, 18, 0.15),
1531
+ contrast: (
1532
+ 40: #4D4D4D,
1533
+ 60: #4D4D4D,
1534
+ 100: #4D4D4D,
1535
+ 200: #4D4D4D,
1536
+ 300: #4D4D4D,
1537
+ 400: white,
1538
+ 500: white,
1539
+ 560: white,
1540
+ 600: white,
1541
+ 700: white,
1542
+ 800: white,
1543
+ A100: #4D4D4D,
1544
+
1545
+ )
1546
+ );
1547
+
1548
+ $dark-color-scheme-primary-palette: (
1549
+ 40: #eff6ff,
1550
+ 60: #e7f1ff,
1551
+ 100: #c8dfff,
1552
+ 200: #a2c7fe,
1553
+ 300: #5697ff,
1554
+ 400: #4187ff,
1555
+ 500: #0374eb,
1556
+ 560: #0059b8,
1557
+ 600: #014b9d,
1558
+ 700: #023c7f,
1559
+ 800: #193060,
1560
+ 900: #00224f,
1561
+ 1000: #001a40,
1562
+ A100: rgba(3, 116, 235, 0.15),
1563
+ A200: rgba(3, 116, 235, 0.3),
1564
+ contrast: (
1565
+ 40: #4D4D4D,
1566
+ 60: #4D4D4D,
1567
+ 100: #4D4D4D,
1568
+ 200: #4D4D4D,
1569
+ 300: #4D4D4D,
1570
+ 400: white,
1571
+ 500: white,
1572
+ 560: white,
1573
+ 600: white,
1574
+ 700: white,
1575
+ 800: white,
1576
+ A100: #4D4D4D,
1577
+ A200: white,
1578
+
1579
+ )
1580
+ );
1581
+
1582
+ $dark-color-scheme-second-palette: (
1583
+ 40: #f2f5f9,
1584
+ 60: #ebeef2,
1585
+ 100: #d7dee4,
1586
+ 200: #bdc7d1,
1587
+ 300: #8c99a5,
1588
+ 400: #7f8c98,
1589
+ 500: #6d7a86,
1590
+ 560: #515e69,
1591
+ 600: #434f5a,
1592
+ 700: #333f4a,
1593
+ 800: #27333e,
1594
+ 900: #19252f,
1595
+ 1000: #151e25,
1596
+ A40: rgba(25, 37, 47, 0.04),
1597
+ A60: rgba(25, 37, 47, 0.06),
1598
+ A100: rgba(25, 37, 47, 0.1),
1599
+ A200: rgba(25, 37, 47, 0.2),
1600
+ A300: rgba(25, 37, 47, 0.3),
1601
+ A500: rgba(25, 37, 47, 0.5),
1602
+ contrast: (
1603
+ 40: #4D4D4D,
1604
+ 60: #4D4D4D,
1605
+ 100: #4D4D4D,
1606
+ 200: #4D4D4D,
1607
+ 300: #4D4D4D,
1608
+ 400: white,
1609
+ 500: white,
1610
+ 560: white,
1611
+ 600: white,
1612
+ 700: white,
1613
+ 800: white,
1614
+
1615
+ )
1616
+ );
1617
+
1618
+ $dark-color-scheme-error-palette: (
1619
+ 40: #fff3f3,
1620
+ 60: #ffeaea,
1621
+ 100: #fbd6d6,
1622
+ 200: #fcb2b4,
1623
+ 300: #ee6f79,
1624
+ 400: #ea5868,
1625
+ 500: #db3c55,
1626
+ 560: #b9023a,
1627
+ 600: #9e0130,
1628
+ 700: #800025,
1629
+ 800: #621420,
1630
+ 900: #500013,
1631
+ 1000: #41000b,
1632
+ A100: rgba(219, 60, 85, 0.15),
1633
+ contrast: (
1634
+ 40: #4D4D4D,
1635
+ 60: #4D4D4D,
1636
+ 100: #4D4D4D,
1637
+ 200: #4D4D4D,
1638
+ 300: #4D4D4D,
1639
+ 400: white,
1640
+ 500: white,
1641
+ 560: white,
1642
+ 600: white,
1643
+ 700: white,
1644
+ 800: white,
1645
+ A100: #4D4D4D,
1646
+
1647
+ )
1648
+ );
1649
+
1650
+ $dark-color-scheme-info-palette: (
1651
+ 40: #ebf8fd,
1652
+ 60: #d9f3fd,
1653
+ 100: #afe6f9,
1654
+ 200: #6ed3f2,
1655
+ 300: #18a5c5,
1656
+ 400: #2099b7,
1657
+ 500: #218ca8,
1658
+ 560: #0c6579,
1659
+ 600: #0c5567,
1660
+ 700: #084453,
1661
+ 800: #143641,
1662
+ 900: #022731,
1663
+ 1000: #001f28,
1664
+ contrast: (
1665
+ 40: #4D4D4D,
1666
+ 60: #4D4D4D,
1667
+ 100: #4D4D4D,
1668
+ 200: #4D4D4D,
1669
+ 300: #4D4D4D,
1670
+ 400: white,
1671
+ 500: white,
1672
+ 560: white,
1673
+ 600: white,
1674
+ 700: white,
1675
+ 800: white,
1676
+ A100: #4D4D4D,
1677
+ A200: white,
1678
+
1679
+ )
1680
+ );
1681
+
1682
+ $dark-color-scheme-success-palette: (
1683
+ 40: #ecf9ef,
1684
+ 60: #d2f7db,
1685
+ 100: #b6ebc3,
1686
+ 200: #8ed5a1,
1687
+ 300: #4ba96c,
1688
+ 400: #319d5c,
1689
+ 500: #028b49,
1690
+ 560: #016b37,
1691
+ 600: #015a2d,
1692
+ 700: #004823,
1693
+ 800: #103920,
1694
+ 900: #002a12,
1695
+ 1000: #00210c,
1696
+ A100: rgba(2, 139, 73, 0.15),
1697
+ contrast: (
1698
+ 40: #4D4D4D,
1699
+ 60: #4D4D4D,
1700
+ 100: #4D4D4D,
1701
+ 200: #4D4D4D,
1702
+ 300: #4D4D4D,
1703
+ 400: white,
1704
+ 500: white,
1705
+ 560: white,
1706
+ 600: white,
1707
+ 700: white,
1708
+ 800: white,
1709
+ A100: #4D4D4D,
1710
+
1711
+ )
1712
+ );
1713
+
1714
+ $dark-color-scheme-warning-palette: (
1715
+ 40: #fff4dd,
1716
+ 60: #ffecce,
1717
+ 100: #fcdda6,
1718
+ 200: #f5c23c,
1719
+ 300: #e19f12,
1720
+ 400: #c78816,
1721
+ 500: #a26e0c,
1722
+ 560: #7e5406,
1723
+ 600: #6b4804,
1724
+ 700: #543803,
1725
+ 800: #3e3015,
1726
+ 900: #312001,
1727
+ 1000: #1f1500,
1728
+ A100: rgba(255, 159, 18, 0.15),
1729
+ contrast: (
1730
+ 40: #4D4D4D,
1731
+ 60: #4D4D4D,
1732
+ 100: #4D4D4D,
1733
+ 200: #4D4D4D,
1734
+ 300: #4D4D4D,
1735
+ 400: white,
1736
+ 500: white,
1737
+ 560: white,
1738
+ 600: white,
1739
+ 700: white,
1740
+ 800: white,
1741
+ A100: #4D4D4D,
1742
+
1743
+ )
1744
+ );
1745
+
1746
+ $color-blue-palette: (
1747
+ 40: #eff6ff,
1748
+ 60: #e7f1ff,
1749
+ 100: #c8dfff,
1750
+ 200: #a2c7fe,
1751
+ 300: #5697ff,
1752
+ 400: #4187ff,
1753
+ 500: #0374eb,
1754
+ 560: #0059b8,
1755
+ 600: #014b9d,
1756
+ 700: #023c7f,
1757
+ 800: #193060,
1758
+ 900: #00224f,
1759
+ 1000: #001a40,
1760
+ A100: rgba(3, 116, 235, 0.15),
1761
+ A200: rgba(3, 116, 235, 0.3),
1762
+ contrast: (
1763
+ 40: #4D4D4D,
1764
+ 60: #4D4D4D,
1765
+ 100: #4D4D4D,
1766
+ 200: #4D4D4D,
1767
+ 300: #4D4D4D,
1768
+ 400: white,
1769
+ 500: white,
1770
+ 560: white,
1771
+ 600: white,
1772
+ 700: white,
1773
+ 800: white,
1774
+ A100: #4D4D4D,
1775
+ A200: white,
1776
+
1777
+ )
1778
+ );
1779
+
1780
+ $color-green-palette: (
1781
+ 40: #ecf9ef,
1782
+ 60: #d2f7db,
1783
+ 100: #b6ebc3,
1784
+ 200: #8ed5a1,
1785
+ 300: #4ba96c,
1786
+ 400: #319d5c,
1787
+ 500: #028b49,
1788
+ 560: #016b37,
1789
+ 600: #015a2d,
1790
+ 700: #004823,
1791
+ 800: #103920,
1792
+ 900: #002a12,
1793
+ 1000: #00210c,
1794
+ A100: rgba(2, 139, 73, 0.15),
1795
+ contrast: (
1796
+ 40: #4D4D4D,
1797
+ 60: #4D4D4D,
1798
+ 100: #4D4D4D,
1799
+ 200: #4D4D4D,
1800
+ 300: #4D4D4D,
1801
+ 400: white,
1802
+ 500: white,
1803
+ 560: white,
1804
+ 600: white,
1805
+ 700: white,
1806
+ 800: white,
1807
+ A100: #4D4D4D,
1808
+
1809
+ )
1810
+ );
1811
+
1812
+ $color-red-palette: (
1813
+ 40: #fff3f3,
1814
+ 60: #ffeaea,
1815
+ 100: #fbd6d6,
1816
+ 200: #fcb2b4,
1817
+ 300: #ee6f79,
1818
+ 400: #ea5868,
1819
+ 500: #db3c55,
1820
+ 560: #b9023a,
1821
+ 600: #9e0130,
1822
+ 700: #800025,
1823
+ 800: #621420,
1824
+ 900: #500013,
1825
+ 1000: #41000b,
1826
+ A100: rgba(219, 60, 85, 0.15),
1827
+ contrast: (
1828
+ 40: #4D4D4D,
1829
+ 60: #4D4D4D,
1830
+ 100: #4D4D4D,
1831
+ 200: #4D4D4D,
1832
+ 300: #4D4D4D,
1833
+ 400: white,
1834
+ 500: white,
1835
+ 560: white,
1836
+ 600: white,
1837
+ 700: white,
1838
+ 800: white,
1839
+ A100: #4D4D4D,
1840
+
1841
+ )
1842
+ );
1843
+
1844
+ $color-grey-palette: (
1845
+ 40: #f2f5f9,
1846
+ 60: #ebeef2,
1847
+ 100: #d7dee4,
1848
+ 200: #bdc7d1,
1849
+ 300: #8c99a5,
1850
+ 400: #7f8c98,
1851
+ 500: #6d7a86,
1852
+ 560: #515e69,
1853
+ 600: #434f5a,
1854
+ 700: #333f4a,
1855
+ 800: #27333e,
1856
+ 900: #19252f,
1857
+ 1000: #151e25,
1858
+ A40: rgba(25, 37, 47, 0.04),
1859
+ A60: rgba(25, 37, 47, 0.06),
1860
+ A100: rgba(25, 37, 47, 0.1),
1861
+ A200: rgba(25, 37, 47, 0.2),
1862
+ A300: rgba(25, 37, 47, 0.3),
1863
+ A500: rgba(25, 37, 47, 0.5),
1864
+ contrast: (
1865
+ 40: #4D4D4D,
1866
+ 60: #4D4D4D,
1867
+ 100: #4D4D4D,
1868
+ 200: #4D4D4D,
1869
+ 300: #4D4D4D,
1870
+ 400: white,
1871
+ 500: white,
1872
+ 560: white,
1873
+ 600: white,
1874
+ 700: white,
1875
+ 800: white,
1876
+
1877
+ )
1878
+ );
1879
+
1880
+ $color-yellow-palette: (
1881
+ 40: #fff4dd,
1882
+ 60: #ffecce,
1883
+ 100: #fcdda6,
1884
+ 200: #f5c23c,
1885
+ 300: #e19f12,
1886
+ 400: #c78816,
1887
+ 500: #a26e0c,
1888
+ 560: #7e5406,
1889
+ 600: #6b4804,
1890
+ 700: #543803,
1891
+ 800: #3e3015,
1892
+ 900: #312001,
1893
+ 1000: #1f1500,
1894
+ A100: rgba(255, 159, 18, 0.15),
1895
+ contrast: (
1896
+ 40: #4D4D4D,
1897
+ 60: #4D4D4D,
1898
+ 100: #4D4D4D,
1899
+ 200: #4D4D4D,
1900
+ 300: #4D4D4D,
1901
+ 400: white,
1902
+ 500: white,
1903
+ 560: white,
1904
+ 600: white,
1905
+ 700: white,
1906
+ 800: white,
1907
+ A100: #4D4D4D,
1908
+
1909
+ )
1910
+ );
1911
+
1912
+ $color-teal-palette: (
1913
+ 40: #ebf8fd,
1914
+ 60: #d9f3fd,
1915
+ 100: #afe6f9,
1916
+ 200: #6ed3f2,
1917
+ 300: #18a5c5,
1918
+ 400: #2099b7,
1919
+ 500: #218ca8,
1920
+ 560: #0c6579,
1921
+ 600: #0c5567,
1922
+ 700: #084453,
1923
+ 800: #143641,
1924
+ 900: #022731,
1925
+ 1000: #001f28,
1926
+ contrast: (
1927
+ 40: #4D4D4D,
1928
+ 60: #4D4D4D,
1929
+ 100: #4D4D4D,
1930
+ 200: #4D4D4D,
1931
+ 300: #4D4D4D,
1932
+ 400: white,
1933
+ 500: white,
1934
+ 560: white,
1935
+ 600: white,
1936
+ 700: white,
1937
+ 800: white,
1938
+ A100: #4D4D4D,
1939
+ A200: white,
1940
+
1941
+ )
1942
+ );
1943
+
1944
+ $color-purple-palette: (
1945
+ 40: #fff3fb,
1946
+ 60: #ffe9f8,
1947
+ 100: #f2d4e8,
1948
+ 200: #e4bbd7,
1949
+ 300: #c692b5,
1950
+ 400: #bb78a7,
1951
+ 500: #a65d92,
1952
+ 560: #864775,
1953
+ 600: #753865,
1954
+ 700: #612853,
1955
+ 800: #48273f,
1956
+ 900: #36172e,
1957
+ 1000: #23001b,
1958
+ contrast: (
1959
+ 40: #4D4D4D,
1960
+ 60: #4D4D4D,
1961
+ 100: #4D4D4D,
1962
+ 200: #4D4D4D,
1963
+ 300: #4D4D4D,
1964
+ 400: white,
1965
+ 500: white,
1966
+ 560: white,
1967
+ 600: white,
1968
+ 700: white,
1969
+ 800: white,
1970
+ A100: #4D4D4D,
1971
+ A200: white,
1972
+
1973
+ )
1974
+ );
1975
+
1976
+ $typography-display-1-font-size: 56px;
1977
+ $typography-display-1-line-height: 76px;
1978
+ $typography-display-1-letter-spacing: normal;
1979
+ $typography-display-1-font-weight: normal;
1980
+ $typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1981
+ $typography-display-1-text-transform: null;
1982
+ $typography-display-1-font-feature-settings: initial;
1983
+ $typography-display-2-font-size: 45px;
1984
+ $typography-display-2-line-height: 56px;
1985
+ $typography-display-2-letter-spacing: normal;
1986
+ $typography-display-2-font-weight: normal;
1987
+ $typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1988
+ $typography-display-2-text-transform: null;
1989
+ $typography-display-2-font-feature-settings: initial;
1990
+ $typography-display-3-font-size: 34px;
1991
+ $typography-display-3-line-height: 44px;
1992
+ $typography-display-3-letter-spacing: normal;
1993
+ $typography-display-3-font-weight: normal;
1994
+ $typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1995
+ $typography-display-3-text-transform: null;
1996
+ $typography-display-3-font-feature-settings: initial;
1997
+ $typography-headline-font-size: 24px;
1998
+ $typography-headline-line-height: 32px;
1999
+ $typography-headline-letter-spacing: normal;
2000
+ $typography-headline-font-weight: normal;
2001
+ $typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2002
+ $typography-headline-text-transform: null;
2003
+ $typography-headline-font-feature-settings: initial;
2004
+ $typography-title-font-size: 20px;
2005
+ $typography-title-line-height: 28px;
2006
+ $typography-title-letter-spacing: normal;
2007
+ $typography-title-font-weight: 600;
2008
+ $typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2009
+ $typography-title-text-transform: null;
2010
+ $typography-title-font-feature-settings: initial;
2011
+ $typography-subheading-font-size: 15px;
2012
+ $typography-subheading-line-height: 20px;
2013
+ $typography-subheading-letter-spacing: -0.009em;
2014
+ $typography-subheading-font-weight: 600;
2015
+ $typography-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2016
+ $typography-subheading-text-transform: null;
2017
+ $typography-subheading-font-feature-settings: "ss01" on, "ss04" on;
2018
+ $typography-body-font-size: 15px;
2019
+ $typography-body-line-height: 20px;
2020
+ $typography-body-letter-spacing: -0.009em;
2021
+ $typography-body-font-weight: normal;
2022
+ $typography-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2023
+ $typography-body-text-transform: null;
2024
+ $typography-body-font-feature-settings: "ss01" on, "ss04" on;
2025
+ $typography-body-tabular-font-size: 15px;
2026
+ $typography-body-tabular-line-height: 20px;
2027
+ $typography-body-tabular-letter-spacing: -0.009em;
2028
+ $typography-body-tabular-font-weight: normal;
2029
+ $typography-body-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2030
+ $typography-body-tabular-text-transform: null;
2031
+ $typography-body-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
2032
+ $typography-body-strong-font-size: 15px;
2033
+ $typography-body-strong-line-height: 20px;
2034
+ $typography-body-strong-letter-spacing: -0.009em;
2035
+ $typography-body-strong-font-weight: 500;
2036
+ $typography-body-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2037
+ $typography-body-strong-text-transform: null;
2038
+ $typography-body-strong-font-feature-settings: "ss01" on, "ss04" on;
2039
+ $typography-body-caps-font-size: 15px;
2040
+ $typography-body-caps-line-height: 20px;
2041
+ $typography-body-caps-letter-spacing: 1.7px;
2042
+ $typography-body-caps-font-weight: normal;
2043
+ $typography-body-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2044
+ $typography-body-caps-text-transform: uppercase;
2045
+ $typography-body-caps-font-feature-settings: "ss01" on, "ss04" on;
2046
+ $typography-body-mono-font-size: 15px;
2047
+ $typography-body-mono-line-height: 20px;
2048
+ $typography-body-mono-letter-spacing: normal;
2049
+ $typography-body-mono-font-weight: normal;
2050
+ $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
2051
+ $typography-body-mono-text-transform: null;
2052
+ $typography-body-mono-font-feature-settings: initial;
2053
+ $typography-caption-font-size: 13px;
2054
+ $typography-caption-line-height: 16px;
2055
+ $typography-caption-letter-spacing: -0.0025em;
2056
+ $typography-caption-font-weight: normal;
2057
+ $typography-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2058
+ $typography-caption-text-transform: null;
2059
+ $typography-caption-font-feature-settings: "ss01" on, "ss04" on;
2060
+ $typography-caption-tabular-font-size: 13px;
2061
+ $typography-caption-tabular-line-height: 16px;
2062
+ $typography-caption-tabular-letter-spacing: -0.0025em;
2063
+ $typography-caption-tabular-font-weight: normal;
2064
+ $typography-caption-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2065
+ $typography-caption-tabular-text-transform: null;
2066
+ $typography-caption-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
2067
+ $typography-caption-strong-font-size: 13px;
2068
+ $typography-caption-strong-line-height: 16px;
2069
+ $typography-caption-strong-letter-spacing: -0.0025em;
2070
+ $typography-caption-strong-font-weight: 500;
2071
+ $typography-caption-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2072
+ $typography-caption-strong-text-transform: null;
2073
+ $typography-caption-strong-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
2074
+ $typography-caption-caps-font-size: 13px;
2075
+ $typography-caption-caps-line-height: 16px;
2076
+ $typography-caption-caps-letter-spacing: 1.5px;
2077
+ $typography-caption-caps-font-weight: normal;
2078
+ $typography-caption-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2079
+ $typography-caption-caps-text-transform: uppercase;
2080
+ $typography-caption-caps-font-feature-settings: "ss01" on, "ss04" on;
2081
+ $typography-caption-mono-font-size: 13px;
2082
+ $typography-caption-mono-line-height: 16px;
2083
+ $typography-caption-mono-letter-spacing: normal;
2084
+ $typography-caption-mono-font-weight: normal;
2085
+ $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
2086
+ $typography-caption-mono-text-transform: null;
2087
+ $typography-caption-mono-font-feature-settings: initial;
2088
+ $typography-small-text-font-size: 13px;
2089
+ $typography-small-text-line-height: 16px;
2090
+ $typography-small-text-letter-spacing: -0.0025em;
2091
+ $typography-small-text-font-weight: normal;
2092
+ $typography-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2093
+ $typography-small-text-text-transform: null;
2094
+ $typography-small-text-font-feature-settings: "ss01" on, "ss04" on;
2095
+ $typography-extra-small-text-font-size: 11px;
2096
+ $typography-extra-small-text-line-height: 16px;
2097
+ $typography-extra-small-text-letter-spacing: 0.005em;
2098
+ $typography-extra-small-text-font-weight: normal;
2099
+ $typography-extra-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2100
+ $typography-extra-small-text-text-transform: null;
2101
+ $typography-extra-small-text-font-feature-settings: "ss01" on, "ss04" on;
2102
+ $typography-extra-small-text-caps-font-size: 11px;
2103
+ $typography-extra-small-text-caps-line-height: 16px;
2104
+ $typography-extra-small-text-caps-letter-spacing: 1px;
2105
+ $typography-extra-small-text-caps-font-weight: normal;
2106
+ $typography-extra-small-text-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2107
+ $typography-extra-small-text-caps-text-transform: uppercase;
2108
+ $typography-extra-small-text-caps-font-feature-settings: "ss01" on, "ss04" on;
2109
+ $typography-extra-small-text-mono-font-size: 11px;
2110
+ $typography-extra-small-text-mono-line-height: 16px;
2111
+ $typography-extra-small-text-mono-letter-spacing: 0px;
2112
+ $typography-extra-small-text-mono-font-weight: normal;
2113
+ $typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
2114
+ $typography-extra-small-text-mono-text-transform: null;
2115
+ $typography-extra-small-text-mono-font-feature-settings: initial;
2116
+
2117
+ $mosaic: (
2118
+ 'typography': (
2119
+ 'display-1': (
2120
+ 'font-size': $typography-display-1-font-size,
2121
+ 'line-height': $typography-display-1-line-height,
2122
+ 'letter-spacing': $typography-display-1-letter-spacing,
2123
+ 'font-weight': $typography-display-1-font-weight,
2124
+ 'font-family': $typography-display-1-font-family,
2125
+ 'text-transform': $typography-display-1-text-transform,
2126
+ 'font-feature-settings': $typography-display-1-font-feature-settings
2127
+ ),
2128
+ 'display-2': (
2129
+ 'font-size': $typography-display-2-font-size,
2130
+ 'line-height': $typography-display-2-line-height,
2131
+ 'letter-spacing': $typography-display-2-letter-spacing,
2132
+ 'font-weight': $typography-display-2-font-weight,
2133
+ 'font-family': $typography-display-2-font-family,
2134
+ 'text-transform': $typography-display-2-text-transform,
2135
+ 'font-feature-settings': $typography-display-2-font-feature-settings
2136
+ ),
2137
+ 'display-3': (
2138
+ 'font-size': $typography-display-3-font-size,
2139
+ 'line-height': $typography-display-3-line-height,
2140
+ 'letter-spacing': $typography-display-3-letter-spacing,
2141
+ 'font-weight': $typography-display-3-font-weight,
2142
+ 'font-family': $typography-display-3-font-family,
2143
+ 'text-transform': $typography-display-3-text-transform,
2144
+ 'font-feature-settings': $typography-display-3-font-feature-settings
2145
+ ),
2146
+ 'headline': (
2147
+ 'font-size': $typography-headline-font-size,
2148
+ 'line-height': $typography-headline-line-height,
2149
+ 'letter-spacing': $typography-headline-letter-spacing,
2150
+ 'font-weight': $typography-headline-font-weight,
2151
+ 'font-family': $typography-headline-font-family,
2152
+ 'text-transform': $typography-headline-text-transform,
2153
+ 'font-feature-settings': $typography-headline-font-feature-settings
2154
+ ),
2155
+ 'title': (
2156
+ 'font-size': $typography-title-font-size,
2157
+ 'line-height': $typography-title-line-height,
2158
+ 'letter-spacing': $typography-title-letter-spacing,
2159
+ 'font-weight': $typography-title-font-weight,
2160
+ 'font-family': $typography-title-font-family,
2161
+ 'text-transform': $typography-title-text-transform,
2162
+ 'font-feature-settings': $typography-title-font-feature-settings
2163
+ ),
2164
+ 'subheading': (
2165
+ 'font-size': $typography-subheading-font-size,
2166
+ 'line-height': $typography-subheading-line-height,
2167
+ 'letter-spacing': $typography-subheading-letter-spacing,
2168
+ 'font-weight': $typography-subheading-font-weight,
2169
+ 'font-family': $typography-subheading-font-family,
2170
+ 'text-transform': $typography-subheading-text-transform,
2171
+ 'font-feature-settings': $typography-subheading-font-feature-settings
2172
+ ),
2173
+ 'body': (
2174
+ 'font-size': $typography-body-font-size,
2175
+ 'line-height': $typography-body-line-height,
2176
+ 'letter-spacing': $typography-body-letter-spacing,
2177
+ 'font-weight': $typography-body-font-weight,
2178
+ 'font-family': $typography-body-font-family,
2179
+ 'text-transform': $typography-body-text-transform,
2180
+ 'font-feature-settings': $typography-body-font-feature-settings
2181
+ ),
2182
+ 'body-tabular': (
2183
+ 'font-size': $typography-body-tabular-font-size,
2184
+ 'line-height': $typography-body-tabular-line-height,
2185
+ 'letter-spacing': $typography-body-tabular-letter-spacing,
2186
+ 'font-weight': $typography-body-tabular-font-weight,
2187
+ 'font-family': $typography-body-tabular-font-family,
2188
+ 'text-transform': $typography-body-tabular-text-transform,
2189
+ 'font-feature-settings': $typography-body-tabular-font-feature-settings
2190
+ ),
2191
+ 'body-strong': (
2192
+ 'font-size': $typography-body-strong-font-size,
2193
+ 'line-height': $typography-body-strong-line-height,
2194
+ 'letter-spacing': $typography-body-strong-letter-spacing,
2195
+ 'font-weight': $typography-body-strong-font-weight,
2196
+ 'font-family': $typography-body-strong-font-family,
2197
+ 'text-transform': $typography-body-strong-text-transform,
2198
+ 'font-feature-settings': $typography-body-strong-font-feature-settings
2199
+ ),
2200
+ 'body-caps': (
2201
+ 'font-size': $typography-body-caps-font-size,
2202
+ 'line-height': $typography-body-caps-line-height,
2203
+ 'letter-spacing': $typography-body-caps-letter-spacing,
2204
+ 'font-weight': $typography-body-caps-font-weight,
2205
+ 'font-family': $typography-body-caps-font-family,
2206
+ 'text-transform': $typography-body-caps-text-transform,
2207
+ 'font-feature-settings': $typography-body-caps-font-feature-settings
2208
+ ),
2209
+ 'body-mono': (
2210
+ 'font-size': $typography-body-mono-font-size,
2211
+ 'line-height': $typography-body-mono-line-height,
2212
+ 'letter-spacing': $typography-body-mono-letter-spacing,
2213
+ 'font-weight': $typography-body-mono-font-weight,
2214
+ 'font-family': $typography-body-mono-font-family,
2215
+ 'text-transform': $typography-body-mono-text-transform,
2216
+ 'font-feature-settings': $typography-body-mono-font-feature-settings
2217
+ ),
2218
+ 'caption': (
2219
+ 'font-size': $typography-caption-font-size,
2220
+ 'line-height': $typography-caption-line-height,
2221
+ 'letter-spacing': $typography-caption-letter-spacing,
2222
+ 'font-weight': $typography-caption-font-weight,
2223
+ 'font-family': $typography-caption-font-family,
2224
+ 'text-transform': $typography-caption-text-transform,
2225
+ 'font-feature-settings': $typography-caption-font-feature-settings
2226
+ ),
2227
+ 'caption-tabular': (
2228
+ 'font-size': $typography-caption-tabular-font-size,
2229
+ 'line-height': $typography-caption-tabular-line-height,
2230
+ 'letter-spacing': $typography-caption-tabular-letter-spacing,
2231
+ 'font-weight': $typography-caption-tabular-font-weight,
2232
+ 'font-family': $typography-caption-tabular-font-family,
2233
+ 'text-transform': $typography-caption-tabular-text-transform,
2234
+ 'font-feature-settings': $typography-caption-tabular-font-feature-settings
2235
+ ),
2236
+ 'caption-strong': (
2237
+ 'font-size': $typography-caption-strong-font-size,
2238
+ 'line-height': $typography-caption-strong-line-height,
2239
+ 'letter-spacing': $typography-caption-strong-letter-spacing,
2240
+ 'font-weight': $typography-caption-strong-font-weight,
2241
+ 'font-family': $typography-caption-strong-font-family,
2242
+ 'text-transform': $typography-caption-strong-text-transform,
2243
+ 'font-feature-settings': $typography-caption-strong-font-feature-settings
2244
+ ),
2245
+ 'caption-caps': (
2246
+ 'font-size': $typography-caption-caps-font-size,
2247
+ 'line-height': $typography-caption-caps-line-height,
2248
+ 'letter-spacing': $typography-caption-caps-letter-spacing,
2249
+ 'font-weight': $typography-caption-caps-font-weight,
2250
+ 'font-family': $typography-caption-caps-font-family,
2251
+ 'text-transform': $typography-caption-caps-text-transform,
2252
+ 'font-feature-settings': $typography-caption-caps-font-feature-settings
2253
+ ),
2254
+ 'caption-mono': (
2255
+ 'font-size': $typography-caption-mono-font-size,
2256
+ 'line-height': $typography-caption-mono-line-height,
2257
+ 'letter-spacing': $typography-caption-mono-letter-spacing,
2258
+ 'font-weight': $typography-caption-mono-font-weight,
2259
+ 'font-family': $typography-caption-mono-font-family,
2260
+ 'text-transform': $typography-caption-mono-text-transform,
2261
+ 'font-feature-settings': $typography-caption-mono-font-feature-settings
2262
+ ),
2263
+ 'small-text': (
2264
+ 'font-size': $typography-small-text-font-size,
2265
+ 'line-height': $typography-small-text-line-height,
2266
+ 'letter-spacing': $typography-small-text-letter-spacing,
2267
+ 'font-weight': $typography-small-text-font-weight,
2268
+ 'font-family': $typography-small-text-font-family,
2269
+ 'text-transform': $typography-small-text-text-transform,
2270
+ 'font-feature-settings': $typography-small-text-font-feature-settings
2271
+ ),
2272
+ 'extra-small-text': (
2273
+ 'font-size': $typography-extra-small-text-font-size,
2274
+ 'line-height': $typography-extra-small-text-line-height,
2275
+ 'letter-spacing': $typography-extra-small-text-letter-spacing,
2276
+ 'font-weight': $typography-extra-small-text-font-weight,
2277
+ 'font-family': $typography-extra-small-text-font-family,
2278
+ 'text-transform': $typography-extra-small-text-text-transform,
2279
+ 'font-feature-settings': $typography-extra-small-text-font-feature-settings
2280
+ ),
2281
+ 'extra-small-text-caps': (
2282
+ 'font-size': $typography-extra-small-text-caps-font-size,
2283
+ 'line-height': $typography-extra-small-text-caps-line-height,
2284
+ 'letter-spacing': $typography-extra-small-text-caps-letter-spacing,
2285
+ 'font-weight': $typography-extra-small-text-caps-font-weight,
2286
+ 'font-family': $typography-extra-small-text-caps-font-family,
2287
+ 'text-transform': $typography-extra-small-text-caps-text-transform,
2288
+ 'font-feature-settings': $typography-extra-small-text-caps-font-feature-settings
2289
+ ),
2290
+ 'extra-small-text-mono': (
2291
+ 'font-size': $typography-extra-small-text-mono-font-size,
2292
+ 'line-height': $typography-extra-small-text-mono-line-height,
2293
+ 'letter-spacing': $typography-extra-small-text-mono-letter-spacing,
2294
+ 'font-weight': $typography-extra-small-text-mono-font-weight,
2295
+ 'font-family': $typography-extra-small-text-mono-font-family,
2296
+ 'text-transform': $typography-extra-small-text-mono-text-transform,
2297
+ 'font-feature-settings': $typography-extra-small-text-mono-font-feature-settings
2298
+ )
2299
+ )
2300
+ );
2301
+
2302
+ $md-typography-md-h1-font-size: 45px;
2303
+ $md-typography-md-h1-line-height: 48px;
2304
+ $md-typography-md-h1-letter-spacing: normal;
2305
+ $md-typography-md-h1-font-weight: normal;
2306
+ $md-typography-md-h1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2307
+ $md-typography-md-h1-text-transform: null;
2308
+ $md-typography-md-h1-font-feature-settings: initial;
2309
+ $md-typography-md-h2-font-size: 34px;
2310
+ $md-typography-md-h2-line-height: 38px;
2311
+ $md-typography-md-h2-letter-spacing: normal;
2312
+ $md-typography-md-h2-font-weight: normal;
2313
+ $md-typography-md-h2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2314
+ $md-typography-md-h2-text-transform: null;
2315
+ $md-typography-md-h2-font-feature-settings: initial;
2316
+ $md-typography-md-h3-font-size: 24px;
2317
+ $md-typography-md-h3-line-height: 28px;
2318
+ $md-typography-md-h3-letter-spacing: normal;
2319
+ $md-typography-md-h3-font-weight: normal;
2320
+ $md-typography-md-h3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2321
+ $md-typography-md-h3-text-transform: null;
2322
+ $md-typography-md-h3-font-feature-settings: initial;
2323
+ $md-typography-md-h4-font-size: 20px;
2324
+ $md-typography-md-h4-line-height: 24px;
2325
+ $md-typography-md-h4-letter-spacing: normal;
2326
+ $md-typography-md-h4-font-weight: 600;
2327
+ $md-typography-md-h4-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2328
+ $md-typography-md-h4-text-transform: null;
2329
+ $md-typography-md-h4-font-feature-settings: initial;
2330
+ $md-typography-md-h5-font-size: 15px;
2331
+ $md-typography-md-h5-line-height: 24px;
2332
+ $md-typography-md-h5-letter-spacing: -0.009em;
2333
+ $md-typography-md-h5-font-weight: 600;
2334
+ $md-typography-md-h5-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2335
+ $md-typography-md-h5-text-transform: null;
2336
+ $md-typography-md-h5-font-feature-settings: "ss01" on, "ss04" on;
2337
+ $md-typography-md-h6-font-size: 15px;
2338
+ $md-typography-md-h6-line-height: 24px;
2339
+ $md-typography-md-h6-letter-spacing: -0.009em;
2340
+ $md-typography-md-h6-font-weight: 600;
2341
+ $md-typography-md-h6-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2342
+ $md-typography-md-h6-text-transform: null;
2343
+ $md-typography-md-h6-font-feature-settings: "ss01" on, "ss04" on;
2344
+ $md-typography-md-body-font-size: 15px;
2345
+ $md-typography-md-body-line-height: 24px;
2346
+ $md-typography-md-body-letter-spacing: -0.009em;
2347
+ $md-typography-md-body-font-weight: normal;
2348
+ $md-typography-md-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2349
+ $md-typography-md-body-text-transform: null;
2350
+ $md-typography-md-body-font-feature-settings: "ss01" on, "ss04" on;
2351
+ $md-typography-md-body-mono-font-size: 14px;
2352
+ $md-typography-md-body-mono-line-height: 20px;
2353
+ $md-typography-md-body-mono-letter-spacing: normal;
2354
+ $md-typography-md-body-mono-font-weight: normal;
2355
+ $md-typography-md-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
2356
+ $md-typography-md-body-mono-text-transform: null;
2357
+ $md-typography-md-body-mono-font-feature-settings: initial;
2358
+ $md-typography-md-caption-font-size: 13px;
2359
+ $md-typography-md-caption-line-height: 16px;
2360
+ $md-typography-md-caption-letter-spacing: -0.0025em;
2361
+ $md-typography-md-caption-font-weight: normal;
2362
+ $md-typography-md-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2363
+ $md-typography-md-caption-text-transform: null;
2364
+ $md-typography-md-caption-font-feature-settings: "ss01" on, "ss04" on;
2365
+ $md-typography-md-table-cell-font-size: 15px;
2366
+ $md-typography-md-table-cell-line-height: 20px;
2367
+ $md-typography-md-table-cell-letter-spacing: -0.009em;
2368
+ $md-typography-md-table-cell-font-weight: normal;
2369
+ $md-typography-md-table-cell-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2370
+ $md-typography-md-table-cell-text-transform: null;
2371
+ $md-typography-md-table-cell-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
2372
+ $md-typography-md-table-header-font-size: 13px;
2373
+ $md-typography-md-table-header-line-height: 16px;
2374
+ $md-typography-md-table-header-letter-spacing: -0.0025em;
2375
+ $md-typography-md-table-header-font-weight: normal;
2376
+ $md-typography-md-table-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
2377
+ $md-typography-md-table-header-text-transform: null;
2378
+ $md-typography-md-table-header-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
2379
+
2380
+ $md-typography: (
2381
+ 'md-typography': (
2382
+ 'md-h1': (
2383
+ 'font-size': $md-typography-md-h1-font-size,
2384
+ 'line-height': $md-typography-md-h1-line-height,
2385
+ 'letter-spacing': $md-typography-md-h1-letter-spacing,
2386
+ 'font-weight': $md-typography-md-h1-font-weight,
2387
+ 'font-family': $md-typography-md-h1-font-family,
2388
+ 'text-transform': $md-typography-md-h1-text-transform,
2389
+ 'font-feature-settings': $md-typography-md-h1-font-feature-settings
2390
+ ),
2391
+ 'md-h2': (
2392
+ 'font-size': $md-typography-md-h2-font-size,
2393
+ 'line-height': $md-typography-md-h2-line-height,
2394
+ 'letter-spacing': $md-typography-md-h2-letter-spacing,
2395
+ 'font-weight': $md-typography-md-h2-font-weight,
2396
+ 'font-family': $md-typography-md-h2-font-family,
2397
+ 'text-transform': $md-typography-md-h2-text-transform,
2398
+ 'font-feature-settings': $md-typography-md-h2-font-feature-settings
2399
+ ),
2400
+ 'md-h3': (
2401
+ 'font-size': $md-typography-md-h3-font-size,
2402
+ 'line-height': $md-typography-md-h3-line-height,
2403
+ 'letter-spacing': $md-typography-md-h3-letter-spacing,
2404
+ 'font-weight': $md-typography-md-h3-font-weight,
2405
+ 'font-family': $md-typography-md-h3-font-family,
2406
+ 'text-transform': $md-typography-md-h3-text-transform,
2407
+ 'font-feature-settings': $md-typography-md-h3-font-feature-settings
2408
+ ),
2409
+ 'md-h4': (
2410
+ 'font-size': $md-typography-md-h4-font-size,
2411
+ 'line-height': $md-typography-md-h4-line-height,
2412
+ 'letter-spacing': $md-typography-md-h4-letter-spacing,
2413
+ 'font-weight': $md-typography-md-h4-font-weight,
2414
+ 'font-family': $md-typography-md-h4-font-family,
2415
+ 'text-transform': $md-typography-md-h4-text-transform,
2416
+ 'font-feature-settings': $md-typography-md-h4-font-feature-settings
2417
+ ),
2418
+ 'md-h5': (
2419
+ 'font-size': $md-typography-md-h5-font-size,
2420
+ 'line-height': $md-typography-md-h5-line-height,
2421
+ 'letter-spacing': $md-typography-md-h5-letter-spacing,
2422
+ 'font-weight': $md-typography-md-h5-font-weight,
2423
+ 'font-family': $md-typography-md-h5-font-family,
2424
+ 'text-transform': $md-typography-md-h5-text-transform,
2425
+ 'font-feature-settings': $md-typography-md-h5-font-feature-settings
2426
+ ),
2427
+ 'md-h6': (
2428
+ 'font-size': $md-typography-md-h6-font-size,
2429
+ 'line-height': $md-typography-md-h6-line-height,
2430
+ 'letter-spacing': $md-typography-md-h6-letter-spacing,
2431
+ 'font-weight': $md-typography-md-h6-font-weight,
2432
+ 'font-family': $md-typography-md-h6-font-family,
2433
+ 'text-transform': $md-typography-md-h6-text-transform,
2434
+ 'font-feature-settings': $md-typography-md-h6-font-feature-settings
2435
+ ),
2436
+ 'md-body': (
2437
+ 'font-size': $md-typography-md-body-font-size,
2438
+ 'line-height': $md-typography-md-body-line-height,
2439
+ 'letter-spacing': $md-typography-md-body-letter-spacing,
2440
+ 'font-weight': $md-typography-md-body-font-weight,
2441
+ 'font-family': $md-typography-md-body-font-family,
2442
+ 'text-transform': $md-typography-md-body-text-transform,
2443
+ 'font-feature-settings': $md-typography-md-body-font-feature-settings
2444
+ ),
2445
+ 'md-body-mono': (
2446
+ 'font-size': $md-typography-md-body-mono-font-size,
2447
+ 'line-height': $md-typography-md-body-mono-line-height,
2448
+ 'letter-spacing': $md-typography-md-body-mono-letter-spacing,
2449
+ 'font-weight': $md-typography-md-body-mono-font-weight,
2450
+ 'font-family': $md-typography-md-body-mono-font-family,
2451
+ 'text-transform': $md-typography-md-body-mono-text-transform,
2452
+ 'font-feature-settings': $md-typography-md-body-mono-font-feature-settings
2453
+ ),
2454
+ 'md-caption': (
2455
+ 'font-size': $md-typography-md-caption-font-size,
2456
+ 'line-height': $md-typography-md-caption-line-height,
2457
+ 'letter-spacing': $md-typography-md-caption-letter-spacing,
2458
+ 'font-weight': $md-typography-md-caption-font-weight,
2459
+ 'font-family': $md-typography-md-caption-font-family,
2460
+ 'text-transform': $md-typography-md-caption-text-transform,
2461
+ 'font-feature-settings': $md-typography-md-caption-font-feature-settings
2462
+ ),
2463
+ 'md-table-cell': (
2464
+ 'font-size': $md-typography-md-table-cell-font-size,
2465
+ 'line-height': $md-typography-md-table-cell-line-height,
2466
+ 'letter-spacing': $md-typography-md-table-cell-letter-spacing,
2467
+ 'font-weight': $md-typography-md-table-cell-font-weight,
2468
+ 'font-family': $md-typography-md-table-cell-font-family,
2469
+ 'text-transform': $md-typography-md-table-cell-text-transform,
2470
+ 'font-feature-settings': $md-typography-md-table-cell-font-feature-settings
2471
+ ),
2472
+ 'md-table-header': (
2473
+ 'font-size': $md-typography-md-table-header-font-size,
2474
+ 'line-height': $md-typography-md-table-header-line-height,
2475
+ 'letter-spacing': $md-typography-md-table-header-letter-spacing,
2476
+ 'font-weight': $md-typography-md-table-header-font-weight,
2477
+ 'font-family': $md-typography-md-table-header-font-family,
2478
+ 'text-transform': $md-typography-md-table-header-text-transform,
2479
+ 'font-feature-settings': $md-typography-md-table-header-font-feature-settings
2480
+ )
2481
+ )
2482
+ );
2483
+
2484
+
2485
+
2486
+
2487
+ /*
2488
+ * Responsive attributes
2489
+ *
2490
+ * References:
2491
+ * 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
2492
+ * 2) https://css-tricks.com/almanac/properties/f/flex/
2493
+ * 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2494
+ * 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
2495
+ * 5) http://godban.com.ua/projects/flexgrid
2496
+ */
2497
+ @-moz-document url-prefix() {
2498
+ .layout-fill {
2499
+ margin: 0;
2500
+ width: 100%;
2501
+ min-height: 100%;
2502
+ height: 100%;
2503
+ }
2504
+ }
2505
+
2506
+ @mixin flex-order-for-name($sizes: null) {
2507
+ @if $sizes == null {
2508
+ $sizes: '';
2509
+
2510
+ .flex-order {
2511
+ order: 0;
2512
+ }
2513
+ }
2514
+
2515
+ @for $i from -20 through 20 {
2516
+ $order: '';
2517
+ $suffix: '';
2518
+
2519
+ @each $s in $sizes {
2520
+ @if $s != '' {
2521
+ $suffix: '#{$s}-#{$i}';
2522
+ } @else {
2523
+ $suffix: '#{$i}';
2524
+ }
2525
+
2526
+ $order: '.flex-order-#{$suffix}';
2527
+ }
2528
+
2529
+ #{$order} {
2530
+ order: #{$i};
2531
+ }
2532
+ }
2533
+ }
2534
+
2535
+ @mixin offset-for-name($sizes:null) {
2536
+ @if $sizes == null {
2537
+ $sizes: '';
2538
+ }
2539
+
2540
+ @for $i from 0 through 19 {
2541
+ $offsets: '';
2542
+ $suffix: '';
2543
+
2544
+ @each $s in $sizes {
2545
+ @if $s != '' {
2546
+ $suffix: '#{$s}-#{$i * 5}';
2547
+ } @else {
2548
+ $suffix: '#{$i * 5}';
2549
+ }
2550
+
2551
+ $offsets:
2552
+ '.offset-#{$suffix}, ' +
2553
+ '.flex-offset-#{$suffix}, ' +
2554
+ '.layout-margin .flex-offset-#{$suffix}, ' +
2555
+ '.layout-margin .offset-#{$suffix}';
2556
+ }
2557
+
2558
+ #{$offsets} {
2559
+ @if $i != 0 {
2560
+ @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto);
2561
+ } @else {
2562
+ @include rtl-prop(margin-left, margin-right, 0, auto);
2563
+ }
2564
+ }
2565
+ }
2566
+
2567
+ @each $i in 33 {
2568
+ $offsets: '';
2569
+ $suffix: '';
2570
+
2571
+ @each $s in $sizes {
2572
+ @if $s != '' {
2573
+ $suffix: '#{$s}-#{$i}';
2574
+ } @else {
2575
+ $suffix: '#{$i}';
2576
+ }
2577
+
2578
+ $offsets:
2579
+ '.offset-#{$suffix}, ' +
2580
+ '.flex-offset-#{$suffix}, ' +
2581
+ '.layout-margin .flex-offset-#{$suffix}, ' +
2582
+ '.layout-margin .offset-#{$suffix}';
2583
+ }
2584
+
2585
+ #{$offsets} {
2586
+ margin-left: calc(100% / 3);
2587
+ }
2588
+ }
2589
+
2590
+ @each $i in 66 {
2591
+ $offsets: '';
2592
+ $suffix: '';
2593
+
2594
+ @each $s in $sizes {
2595
+ @if $s != '' {
2596
+ $suffix: '#{$s}-#{$i}';
2597
+ } @else {
2598
+ $suffix: '#{$i}';
2599
+ }
2600
+
2601
+ $offsets:
2602
+ '.offset-#{$suffix}, ' +
2603
+ '.flex-offset-#{$suffix}, ' +
2604
+ '.layout-margin .flex-offset-#{$suffix}, ' +
2605
+ '.layout-margin .offset-#{$suffix}';
2606
+ }
2607
+
2608
+ #{$offsets} {
2609
+ @include rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
2610
+ }
2611
+ }
2612
+ }
2613
+
2614
+ @mixin layout-for-name($name: null) {
2615
+ @if $name == null {
2616
+ $name: '';
2617
+ }
2618
+
2619
+ @if $name != '' {
2620
+ $name: '-#{$name}';
2621
+ }
2622
+
2623
+ .layout#{$name},
2624
+ .layout#{$name}-column,
2625
+ .layout#{$name}-row {
2626
+ box-sizing: border-box;
2627
+ display: -webkit-box;
2628
+ display: -webkit-flex;
2629
+ display: -moz-box;
2630
+ display: -ms-flexbox;
2631
+ display: flex;
2632
+
2633
+ min-width: 0;
2634
+ min-height: 0;
2635
+ }
2636
+
2637
+ .layout#{$name}-column {
2638
+ flex-direction: column;
2639
+ }
2640
+
2641
+ .layout#{$name}-row {
2642
+ flex-direction: row;
2643
+ }
2644
+ }
2645
+
2646
+ @mixin flex-properties-for-name($name: null) {
2647
+ $flexName: 'flex';
2648
+
2649
+ @if $name != null {
2650
+ $flexName: 'flex-#{$name}';
2651
+ $name: '-#{$name}';
2652
+ } @else {
2653
+ $name: '';
2654
+ }
2655
+
2656
+ // === flex: 1 1 0%;
2657
+ .#{$flexName} { flex: 1; box-sizing: border-box; }
2658
+ .#{$flexName}-grow { flex: 1 1 100%; box-sizing: border-box; }
2659
+ .#{$flexName}-initial { flex: 0 1 auto; box-sizing: border-box; }
2660
+ .#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
2661
+ .#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
2662
+ .#{$flexName}-no-shrink { flex: 1 0 auto; box-sizing: border-box; }
2663
+ .#{$flexName}-no-grow { flex: 0 1 auto; box-sizing: border-box; }
2664
+
2665
+ // (1-20) * 5 = 0-100%
2666
+ @for $i from 0 through 20 {
2667
+ $value: #{$i * 5 + '%'};
2668
+
2669
+ .#{$flexName}-#{$i * 5} {
2670
+ flex: 1 1 100%;
2671
+ max-width: #{$value};
2672
+ max-height: 100%;
2673
+ box-sizing: border-box;
2674
+ }
2675
+
2676
+ .layout-row > .#{$flexName}-#{$i * 5} {
2677
+ flex: 1 1 100%;
2678
+ max-width: #{$value};
2679
+ max-height: 100%;
2680
+ box-sizing: border-box;
2681
+
2682
+ // Required by Chrome M48+ due to http://crbug.com/546034
2683
+ @if $i == 0 {
2684
+ min-width: 0;
2685
+ }
2686
+ }
2687
+
2688
+ .layout-column > .#{$flexName}-#{$i * 5} {
2689
+ flex: 1 1 100%;
2690
+ max-width: 100%;
2691
+ max-height: #{$value};
2692
+ box-sizing: border-box;
2693
+ }
2694
+
2695
+ .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
2696
+ flex: 1 1 100%;
2697
+ max-width: #{$value};
2698
+ max-height: 100%;
2699
+ box-sizing: border-box;
2700
+
2701
+ // Required by Chrome M48+ due to http://crbug.com/546034
2702
+ @if $i == 0 {
2703
+ min-width: 0;
2704
+ }
2705
+ }
2706
+
2707
+ .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
2708
+ flex: 1 1 100%;
2709
+ max-width: 100%;
2710
+ max-height: #{$value};
2711
+ box-sizing: border-box;
2712
+
2713
+ // Required by Chrome M48+ due to http://crbug.com/546034
2714
+ @if $i == 0 {
2715
+ min-height: 0;
2716
+ }
2717
+ }
2718
+ }
2719
+
2720
+ @if ($name == '') {
2721
+ .flex-33 {
2722
+ flex: 1 1 100%;
2723
+ max-width: 33.33%;
2724
+ max-height: 100%;
2725
+ box-sizing: border-box;
2726
+ }
2727
+
2728
+ .flex-66 {
2729
+ flex: 1 1 100%;
2730
+ max-width: 66.66%;
2731
+ max-height: 100%;
2732
+ box-sizing: border-box;
2733
+ }
2734
+ }
2735
+
2736
+ .layout-row {
2737
+ > .#{$flexName}-33 {
2738
+ flex: 1 1 33.33%;
2739
+ max-width: 33.33%;
2740
+ max-height: 100%;
2741
+ box-sizing: border-box;
2742
+ }
2743
+
2744
+ > .#{$flexName}-66 {
2745
+ flex: 1 1 66.66%;
2746
+ max-width: 66.66%;
2747
+ max-height: 100%;
2748
+ box-sizing: border-box;
2749
+ }
2750
+ }
2751
+
2752
+ .layout-column {
2753
+ > .#{$flexName}-33 {
2754
+ flex: 1 1 33.33%;
2755
+ max-width: 100%;
2756
+ max-height: 33.33%;
2757
+ box-sizing: border-box;
2758
+ }
2759
+
2760
+ > .#{$flexName}-66 {
2761
+ flex: 1 1 66.66%;
2762
+ max-width: 100%;
2763
+ max-height: 66.66%;
2764
+ box-sizing: border-box;
2765
+ }
2766
+ }
2767
+
2768
+ .layout#{$name}-row {
2769
+ > .#{$flexName}-33 {
2770
+ flex: 1 1 100%;
2771
+ max-width: 33.33%;
2772
+ max-height: 100%;
2773
+ box-sizing: border-box;
2774
+ }
2775
+
2776
+ > .#{$flexName}-66 {
2777
+ flex: 1 1 100%;
2778
+ max-width: 66.66%;
2779
+ max-height: 100%;
2780
+ box-sizing: border-box;
2781
+ }
2782
+
2783
+ // Required by Chrome M48+ due to http://crbug.com/546034
2784
+ > .flex {
2785
+ min-width: 0;
2786
+ }
2787
+ }
2788
+
2789
+ .layout#{$name}-column {
2790
+ > .#{$flexName}-33 {
2791
+ flex: 1 1 100%;
2792
+ max-width: 100%;
2793
+ max-height: 33.33%;
2794
+ box-sizing: border-box;
2795
+ }
2796
+
2797
+ > .#{$flexName}-66 {
2798
+ flex: 1 1 100%;
2799
+ max-width: 100%;
2800
+ max-height: 66.66%;
2801
+ box-sizing: border-box;
2802
+ }
2803
+
2804
+ // Required by Chrome M48+ due to http://crbug.com/546034
2805
+ > .flex {
2806
+ min-height: 0;
2807
+ }
2808
+ }
2809
+
2810
+ .layout-wrap {
2811
+ flex-wrap: wrap;
2812
+ }
2813
+
2814
+ .layout-nowrap {
2815
+ flex-wrap: nowrap;
2816
+ }
2817
+
2818
+ .layout-fill {
2819
+ margin: 0;
2820
+
2821
+ width: 100%;
2822
+
2823
+ min-height: 100%;
2824
+ height: 100%;
2825
+ }
2826
+ }
2827
+
2828
+ @mixin layout-align-for-name($suffix: null) {
2829
+
2830
+ // Alignment attributes for layout containers' children
2831
+ // Arrange on the Main Axis
2832
+ // center, start, end, space-between, space-around
2833
+ // flex-start is the default for justify-content
2834
+ // ------------------------------
2835
+
2836
+ $name: 'layout-align';
2837
+ @if $suffix != null {
2838
+ $name: 'layout-align-#{$suffix}';
2839
+ }
2840
+
2841
+ .#{$name},
2842
+ .#{$name}-start-stretch {
2843
+ justify-content: flex-start;
2844
+ align-content: stretch;
2845
+ align-items: stretch;
2846
+ }
2847
+
2848
+ // Main Axis Center
2849
+ .#{$name}-start,
2850
+ .#{$name}-start-start,
2851
+ .#{$name}-start-center,
2852
+ .#{$name}-start-end,
2853
+ .#{$name}-start-stretch {
2854
+ justify-content: flex-start;
2855
+ }
2856
+
2857
+ // Main Axis Center
2858
+ .#{$name}-center, //stretch
2859
+ .#{$name}-center-start,
2860
+ .#{$name}-center-center,
2861
+ .#{$name}-center-end,
2862
+ .#{$name}-center-stretch {
2863
+ justify-content: center;
2864
+ }
2865
+
2866
+ // Main Axis End
2867
+ .#{$name}-end, //stretch
2868
+ .#{$name}-end-start,
2869
+ .#{$name}-end-center,
2870
+ .#{$name}-end-end,
2871
+ .#{$name}-end-stretch {
2872
+ justify-content: flex-end;
2873
+ }
2874
+
2875
+ // Main Axis Space Around
2876
+ .#{$name}-space-around, //stretch
2877
+ .#{$name}-space-around-center,
2878
+ .#{$name}-space-around-start,
2879
+ .#{$name}-space-around-end,
2880
+ .#{$name}-space-around-stretch {
2881
+ justify-content: space-around;
2882
+ }
2883
+
2884
+ // Main Axis Space Between
2885
+ .#{$name}-space-between, //stretch
2886
+ .#{$name}-space-between-center,
2887
+ .#{$name}-space-between-start,
2888
+ .#{$name}-space-between-end,
2889
+ .#{$name}-space-between-stretch {
2890
+ justify-content: space-between;
2891
+ }
2892
+
2893
+ // Arrange on the Cross Axis
2894
+ // center, start, end
2895
+ // stretch is the default for align-items
2896
+ // ------------------------------
2897
+
2898
+ // Cross Axis Start
2899
+ .#{$name}-start-start,
2900
+ .#{$name}-center-start,
2901
+ .#{$name}-end-start,
2902
+ .#{$name}-space-between-start,
2903
+ .#{$name}-space-around-start {
2904
+ align-items: flex-start;
2905
+ align-content: flex-start;
2906
+ }
2907
+
2908
+ // Cross Axis Center
2909
+ .#{$name}-start-center,
2910
+ .#{$name}-center-center,
2911
+ .#{$name}-end-center,
2912
+ .#{$name}-space-between-center,
2913
+ .#{$name}-space-around-center {
2914
+ align-items: center;
2915
+ align-content: center;
2916
+ max-width: 100%;
2917
+ }
2918
+
2919
+ // Cross Axis Center IE overflow fix
2920
+ .#{$name}-start-center > *,
2921
+ .#{$name}-center-center > *,
2922
+ .#{$name}-end-center > *,
2923
+ .#{$name}-space-between-center > *,
2924
+ .#{$name}-space-around-center > * {
2925
+ max-width: 100%;
2926
+ box-sizing: border-box;
2927
+ }
2928
+
2929
+ // Cross Axis End
2930
+ .#{$name}-start-end,
2931
+ .#{$name}-center-end,
2932
+ .#{$name}-end-end,
2933
+ .#{$name}-space-between-end,
2934
+ .#{$name}-space-around-end {
2935
+ align-items: flex-end;
2936
+ align-content: flex-end;
2937
+ }
2938
+
2939
+ // Cross Axis Start
2940
+ .#{$name}-start-stretch,
2941
+ .#{$name}-center-stretch,
2942
+ .#{$name}-end-stretch,
2943
+ .#{$name}-space-between-stretch,
2944
+ .#{$name}-space-around-stretch {
2945
+ align-items: stretch;
2946
+ align-content: stretch;
2947
+ }
2948
+ }
2949
+
2950
+ @mixin layout-indents() {
2951
+ $sizes: (
2952
+ '3xs': $size-3xs,
2953
+ 'xxs': $size-xxs,
2954
+ 'xs': $size-xs,
2955
+ 's': $size-s,
2956
+ 'm': $size-m,
2957
+ 'l': $size-l,
2958
+ 'xl': $size-xl,
2959
+ 'xxl': $size-xxl,
2960
+ '3xl': $size-3xl,
2961
+ '4xl': $size-4xl,
2962
+ '5xl': $size-5xl,
2963
+ '6xl': $size-6xl,
2964
+ '7xl': $size-7xl
2965
+ );
2966
+
2967
+ $indents: 'padding', 'margin';
2968
+
2969
+ @each $indent in $indents {
2970
+ @each $name, $value in $sizes {
2971
+ .layout-#{$indent}-#{$name} {
2972
+ #{$indent}: $value !important;
2973
+ }
2974
+
2975
+ .layout-#{$indent}-top-#{$name} {
2976
+ #{$indent}-top: $value !important;
2977
+ }
2978
+
2979
+ .layout-#{$indent}-right-#{$name} {
2980
+ #{$indent}-right: $value !important;
2981
+ }
2982
+
2983
+ .layout-#{$indent}-bottom-#{$name} {
2984
+ #{$indent}-bottom: $value !important;
2985
+ }
2986
+
2987
+ .layout-#{$indent}-left-#{$name} {
2988
+ #{$indent}-left: $value !important;
2989
+ }
2990
+ }
2991
+
2992
+ .layout-#{$indent}-no-top {
2993
+ #{$indent}-top: 0 !important;
2994
+ }
2995
+
2996
+ .layout-#{$indent}-no-right {
2997
+ #{$indent}-right: 0 !important;
2998
+ }
2999
+
3000
+ .layout-#{$indent}-no-bottom {
3001
+ #{$indent}-bottom: 0 !important;
3002
+ }
3003
+
3004
+ .layout-#{$indent}-no-left {
3005
+ #{$indent}-left: 0 !important;
3006
+ }
3007
+ }
3008
+ }
3009
+
3010
+ @mixin layouts-for-breakpoint($name: null) {
3011
+ @include flex-order-for-name($name);
3012
+ @include offset-for-name($name);
3013
+ @include layout-align-for-name($name);
3014
+
3015
+ @include flex-properties-for-name($name);
3016
+ @include layout-for-name($name);
3017
+
3018
+ @include layout-indents();
3019
+ }
3020
+
3021
+
3022
+ @mixin media-print {
3023
+ @media print {
3024
+ .hide-print:not(.show-print):not(.show) {
3025
+ display: none !important;
3026
+ }
3027
+ }
3028
+ }
3029
+
4
3030
 
5
3031
 
6
3032
  @mixin mosaic-visual() {
7
3033
  // include specific mixins
8
- @include body.body-html();
9
- @include layout.layouts-for-breakpoint();
10
- @include layout-media.media-print();
3034
+ @include body-html();
3035
+ @include layouts-for-breakpoint();
3036
+ @include media-print();
11
3037
  }