@vkontakte/vkui-tokens 4.56.0 → 4.56.1

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 (48) hide show
  1. package/interfaces/themes/workspaceAdmin/index.d.ts +2 -1
  2. package/package.json +1 -1
  3. package/themes/workspaceAdmin/cssVars/declarations/index.css +35 -23
  4. package/themes/workspaceAdmin/cssVars/declarations/noColors.css +21 -21
  5. package/themes/workspaceAdmin/cssVars/declarations/onlyAdaptiveGroups.css +5 -10
  6. package/themes/workspaceAdmin/cssVars/declarations/onlyMedia.css +7 -2
  7. package/themes/workspaceAdmin/cssVars/declarations/onlyVariables.css +7 -7
  8. package/themes/workspaceAdmin/cssVars/declarations/onlyVariables.js +2 -2
  9. package/themes/workspaceAdmin/cssVars/declarations/onlyVariablesLocal.css +7 -7
  10. package/themes/workspaceAdmin/cssVars/declarations/onlyVariablesLocalIncremental.css +7 -7
  11. package/themes/workspaceAdmin/cssVars/theme/fallbacks/index.css +22 -22
  12. package/themes/workspaceAdmin/cssVars/theme/fallbacks/index.less +8 -8
  13. package/themes/workspaceAdmin/cssVars/theme/fallbacks/index.pcss +8 -8
  14. package/themes/workspaceAdmin/cssVars/theme/fallbacks/index.scss +16 -16
  15. package/themes/workspaceAdmin/cssVars/theme/fallbacks/index.styl +8 -8
  16. package/themes/workspaceAdmin/cssVars/theme/index.js +44 -20
  17. package/themes/workspaceAdmin/cssVars/theme/index.json +44 -20
  18. package/themes/workspaceAdmin/index.css +21 -21
  19. package/themes/workspaceAdmin/index.js +9 -7
  20. package/themes/workspaceAdmin/index.json +9 -7
  21. package/themes/workspaceAdmin/index.less +7 -7
  22. package/themes/workspaceAdmin/index.pcss +7 -7
  23. package/themes/workspaceAdmin/index.scss +14 -14
  24. package/themes/workspaceAdmin/index.styl +7 -7
  25. package/themes/workspaceAdmin/struct.json +9 -7
  26. package/themes/workspaceAdminDark/cssVars/declarations/index.css +27 -15
  27. package/themes/workspaceAdminDark/cssVars/declarations/noColors.css +15 -15
  28. package/themes/workspaceAdminDark/cssVars/declarations/onlyAdaptiveGroups.css +5 -10
  29. package/themes/workspaceAdminDark/cssVars/declarations/onlyMedia.css +5 -0
  30. package/themes/workspaceAdminDark/cssVars/declarations/onlyVariables.css +5 -5
  31. package/themes/workspaceAdminDark/cssVars/declarations/onlyVariables.js +2 -2
  32. package/themes/workspaceAdminDark/cssVars/declarations/onlyVariablesLocal.css +5 -5
  33. package/themes/workspaceAdminDark/cssVars/declarations/onlyVariablesLocalIncremental.css +5 -5
  34. package/themes/workspaceAdminDark/cssVars/theme/fallbacks/index.css +16 -16
  35. package/themes/workspaceAdminDark/cssVars/theme/fallbacks/index.less +6 -6
  36. package/themes/workspaceAdminDark/cssVars/theme/fallbacks/index.pcss +6 -6
  37. package/themes/workspaceAdminDark/cssVars/theme/fallbacks/index.scss +12 -12
  38. package/themes/workspaceAdminDark/cssVars/theme/fallbacks/index.styl +6 -6
  39. package/themes/workspaceAdminDark/cssVars/theme/index.js +42 -18
  40. package/themes/workspaceAdminDark/cssVars/theme/index.json +42 -18
  41. package/themes/workspaceAdminDark/index.css +15 -15
  42. package/themes/workspaceAdminDark/index.js +7 -5
  43. package/themes/workspaceAdminDark/index.json +7 -5
  44. package/themes/workspaceAdminDark/index.less +5 -5
  45. package/themes/workspaceAdminDark/index.pcss +5 -5
  46. package/themes/workspaceAdminDark/index.scss +10 -10
  47. package/themes/workspaceAdminDark/index.styl +5 -5
  48. package/themes/workspaceAdminDark/struct.json +7 -5
package/interfaces/themes/workspaceAdmin/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ThemeCssVars } from '../../general';
2
2
  import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
3
+ import { Adaptive } from '../../general/tools';
3
4
  import { Font } from '../../general/typography';
4
5
  import { LocalParadigmColorsDescriptionStruct, ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
5
6
  export interface ThemeWorkspaceOverValues {
6
- fontHeadline3: Font;
7
+ fontHeadline3: Adaptive<Font>;
7
8
  }
8
9
  export interface LocalWorkspaceAdminColorsDescriptionStruct {
9
10
  colorAvatarsBlue: ColorDescription;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vkontakte/vkui-tokens",
3
- "version": "4.56.0",
3
+ "version": "4.56.1",
4
4
  "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
5
5
  "license": "MIT",
6
6
  "homepage": "https://vkcom.github.io/vkui-tokens",
package/themes/workspaceAdmin/cssVars/declarations/index.css CHANGED
@@ -35,11 +35,11 @@
35
35
  --vkui--font_title1--font_weight--regular: 500;
36
36
  --vkui--font_title2--font_size--regular: 20px;
37
37
  --vkui--font_title2--line_height--regular: 24px;
38
- --vkui--font_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
38
+ --vkui--font_title2--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
39
39
  --vkui--font_title2--font_weight--regular: 500;
40
40
  --vkui--font_title3--font_size--regular: 17px;
41
41
  --vkui--font_title3--line_height--regular: 24px;
42
- --vkui--font_title3--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
42
+ --vkui--font_title3--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
43
43
  --vkui--font_title3--font_weight--regular: 500;
44
44
  --vkui--font_headline1--font_size--regular: 16px;
45
45
  --vkui--font_headline1--line_height--regular: 20px;
@@ -320,11 +320,11 @@
320
320
  --vkui--type_border_button: solid;
321
321
  --vkui--type_border_position: inset;
322
322
  --vkui--theme_name_base: 'workspaceAdmin';
323
- --vkui--font_headline3--font_size: 13px;
324
- --vkui--font_headline3--line_height: 16px;
325
- --vkui--font_headline3--font_style: normal;
326
- --vkui--font_headline3--font_family: MailSans, Helvetica, Arial, sans-serif;
327
- --vkui--font_headline3--font_weight: 500;
323
+ --vkui--font_headline3--font_size--regular: 15px;
324
+ --vkui--font_headline3--line_height--regular: 20px;
325
+ --vkui--font_headline3--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
326
+ --vkui--font_headline3--font_weight--regular: 500;
327
+ --vkui--font_headline3--font_style--regular: normal;
328
328
  --vkui--font_headline--font_size--regular: 16px;
329
329
  --vkui--font_headline--line_height--regular: 20px;
330
330
  --vkui--font_headline--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
@@ -897,8 +897,8 @@
897
897
  font-size: var(--vkui--font_title2--font_size--regular, 20px);
898
898
  line-height: 24px;
899
899
  line-height: var(--vkui--font_title2--line_height--regular, 24px);
900
- font-family: MailSans, Helvetica, Arial, sans-serif;
901
- font-family: var(--vkui--font_title2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
900
+ font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
901
+ font-family: var(--vkui--font_title2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
902
902
  font-weight: 500;
903
903
  font-weight: var(--vkui--font_title2--font_weight--regular, 500);
904
904
  }
@@ -913,8 +913,8 @@
913
913
  font-size: var(--vkui--font_title3--font_size--regular, 17px);
914
914
  line-height: 24px;
915
915
  line-height: var(--vkui--font_title3--line_height--regular, 24px);
916
- font-family: MailSans, Helvetica, Arial, sans-serif;
917
- font-family: var(--vkui--font_title3--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
916
+ font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
917
+ font-family: var(--vkui--font_title3--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
918
918
  font-weight: 500;
919
919
  font-weight: var(--vkui--font_title3--font_weight--regular, 500);
920
920
  }
@@ -1274,17 +1274,24 @@
1274
1274
  font-weight: 500;
1275
1275
  font-weight: var(--vkui--font_h2--font_weight--regular, 500);
1276
1276
  }
1277
- .vkui--font_headline3 {
1278
- font-size: 13px;
1279
- font-size: var(--vkui--font_headline3--font_size, 13px);
1280
- line-height: 16px;
1281
- line-height: var(--vkui--font_headline3--line_height, 16px);
1282
- font-style: normal;
1283
- font-style: var(--vkui--font_headline3--font_style, normal);
1284
- font-family: MailSans, Helvetica, Arial, sans-serif;
1285
- font-family: var(--vkui--font_headline3--font_family, MailSans, Helvetica, Arial, sans-serif);
1277
+ .vkui--font_headline3--regular {
1278
+ font-size: 15px;
1279
+ font-size: var(--vkui--font_headline3--font_size--regular, 15px);
1280
+ line-height: 20px;
1281
+ line-height: var(--vkui--font_headline3--line_height--regular, 20px);
1282
+ font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
1283
+ font-family: var(--vkui--font_headline3--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
1286
1284
  font-weight: 500;
1287
- font-weight: var(--vkui--font_headline3--font_weight, 500);
1285
+ font-weight: var(--vkui--font_headline3--font_weight--regular, 500);
1286
+ font-style: normal;
1287
+ font-style: var(--vkui--font_headline3--font_style--regular, normal);
1288
+ }
1289
+ .vkui--font_headline3 {
1290
+ font-size: var(--vkui--font_headline3--font_size);
1291
+ line-height: var(--vkui--font_headline3--line_height);
1292
+ font-family: var(--vkui--font_headline3--font_family);
1293
+ font-weight: var(--vkui--font_headline3--font_weight);
1294
+ font-style: var(--vkui--font_headline3--font_style);
1288
1295
  }
1289
1296
  .vkui--font_headline--regular {
1290
1297
  font-size: 16px;
@@ -1336,11 +1343,11 @@
1336
1343
  --vkui--font_title1--font_weight: 500;
1337
1344
  --vkui--font_title2--font_size: 20px;
1338
1345
  --vkui--font_title2--line_height: 24px;
1339
- --vkui--font_title2--font_family: MailSans, Helvetica, Arial, sans-serif;
1346
+ --vkui--font_title2--font_family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
1340
1347
  --vkui--font_title2--font_weight: 500;
1341
1348
  --vkui--font_title3--font_size: 17px;
1342
1349
  --vkui--font_title3--line_height: 24px;
1343
- --vkui--font_title3--font_family: MailSans, Helvetica, Arial, sans-serif;
1350
+ --vkui--font_title3--font_family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
1344
1351
  --vkui--font_title3--font_weight: 500;
1345
1352
  --vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--regular);
1346
1353
  --vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--regular);
@@ -1534,6 +1541,11 @@
1534
1541
  --vkui--size_illustration_m: 96px;
1535
1542
  --vkui--size_illustration_l: 144px;
1536
1543
  --vkui--size_illustration_x_x_l: 228px;
1544
+ --vkui--font_headline3--font_size: 15px;
1545
+ --vkui--font_headline3--line_height: 20px;
1546
+ --vkui--font_headline3--font_family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
1547
+ --vkui--font_headline3--font_weight: 500;
1548
+ --vkui--font_headline3--font_style: normal;
1537
1549
  --vkui--font_headline--font_size: var(--vkui--font_headline--font_size--regular);
1538
1550
  --vkui--font_headline--line_height: var(--vkui--font_headline--line_height--regular);
1539
1551
  --vkui--font_headline--font_family: var(--vkui--font_headline--font_family--regular);
package/themes/workspaceAdmin/cssVars/declarations/noColors.css CHANGED
@@ -35,11 +35,11 @@
35
35
  --vkui--font_title1--font_weight--regular: 500;
36
36
  --vkui--font_title2--font_size--regular: 20px;
37
37
  --vkui--font_title2--line_height--regular: 24px;
38
- --vkui--font_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
38
+ --vkui--font_title2--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
39
39
  --vkui--font_title2--font_weight--regular: 500;
40
40
  --vkui--font_title3--font_size--regular: 17px;
41
41
  --vkui--font_title3--line_height--regular: 24px;
42
- --vkui--font_title3--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
42
+ --vkui--font_title3--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
43
43
  --vkui--font_title3--font_weight--regular: 500;
44
44
  --vkui--font_headline1--font_size--regular: 16px;
45
45
  --vkui--font_headline1--line_height--regular: 20px;
@@ -320,11 +320,11 @@
320
320
  --vkui--type_border_button: solid;
321
321
  --vkui--type_border_position: inset;
322
322
  --vkui--theme_name_base: 'workspaceAdmin';
323
- --vkui--font_headline3--font_size: 13px;
324
- --vkui--font_headline3--line_height: 16px;
325
- --vkui--font_headline3--font_style: normal;
326
- --vkui--font_headline3--font_family: MailSans, Helvetica, Arial, sans-serif;
327
- --vkui--font_headline3--font_weight: 500;
323
+ --vkui--font_headline3--font_size--regular: 15px;
324
+ --vkui--font_headline3--line_height--regular: 20px;
325
+ --vkui--font_headline3--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
326
+ --vkui--font_headline3--font_weight--regular: 500;
327
+ --vkui--font_headline3--font_style--regular: normal;
328
328
  --vkui--font_headline--font_size--regular: 16px;
329
329
  --vkui--font_headline--line_height--regular: 20px;
330
330
  --vkui--font_headline--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
@@ -398,8 +398,8 @@
398
398
  font-size: var(--vkui--font_title2--font_size--regular, 20px);
399
399
  line-height: 24px;
400
400
  line-height: var(--vkui--font_title2--line_height--regular, 24px);
401
- font-family: MailSans, Helvetica, Arial, sans-serif;
402
- font-family: var(--vkui--font_title2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
401
+ font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
402
+ font-family: var(--vkui--font_title2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
403
403
  font-weight: 500;
404
404
  font-weight: var(--vkui--font_title2--font_weight--regular, 500);
405
405
  }
@@ -408,8 +408,8 @@
408
408
  font-size: var(--vkui--font_title3--font_size--regular, 17px);
409
409
  line-height: 24px;
410
410
  line-height: var(--vkui--font_title3--line_height--regular, 24px);
411
- font-family: MailSans, Helvetica, Arial, sans-serif;
412
- font-family: var(--vkui--font_title3--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
411
+ font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
412
+ font-family: var(--vkui--font_title3--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
413
413
  font-weight: 500;
414
414
  font-weight: var(--vkui--font_title3--font_weight--regular, 500);
415
415
  }
@@ -659,17 +659,17 @@
659
659
  font-weight: 500;
660
660
  font-weight: var(--vkui--font_h2--font_weight--regular, 500);
661
661
  }
662
- .vkui--font_headline3 {
663
- font-size: 13px;
664
- font-size: var(--vkui--font_headline3--font_size, 13px);
665
- line-height: 16px;
666
- line-height: var(--vkui--font_headline3--line_height, 16px);
667
- font-style: normal;
668
- font-style: var(--vkui--font_headline3--font_style, normal);
669
- font-family: MailSans, Helvetica, Arial, sans-serif;
670
- font-family: var(--vkui--font_headline3--font_family, MailSans, Helvetica, Arial, sans-serif);
662
+ .vkui--font_headline3--regular {
663
+ font-size: 15px;
664
+ font-size: var(--vkui--font_headline3--font_size--regular, 15px);
665
+ line-height: 20px;
666
+ line-height: var(--vkui--font_headline3--line_height--regular, 20px);
667
+ font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
668
+ font-family: var(--vkui--font_headline3--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
671
669
  font-weight: 500;
672
- font-weight: var(--vkui--font_headline3--font_weight, 500);
670
+ font-weight: var(--vkui--font_headline3--font_weight--regular, 500);
671
+ font-style: normal;
672
+ font-style: var(--vkui--font_headline3--font_style--regular, normal);
673
673
  }
674
674
  .vkui--font_headline--regular {
675
675
  font-size: 16px;
package/themes/workspaceAdmin/cssVars/declarations/onlyAdaptiveGroups.css CHANGED
@@ -145,16 +145,11 @@
145
145
  font-weight: var(--vkui--font_h2--font_weight);
146
146
  }
147
147
  .vkui--font_headline3 {
148
- font-size: 13px;
149
- font-size: var(--vkui--font_headline3--font_size, 13px);
150
- line-height: 16px;
151
- line-height: var(--vkui--font_headline3--line_height, 16px);
152
- font-style: normal;
153
- font-style: var(--vkui--font_headline3--font_style, normal);
154
- font-family: MailSans, Helvetica, Arial, sans-serif;
155
- font-family: var(--vkui--font_headline3--font_family, MailSans, Helvetica, Arial, sans-serif);
156
- font-weight: 500;
157
- font-weight: var(--vkui--font_headline3--font_weight, 500);
148
+ font-size: var(--vkui--font_headline3--font_size);
149
+ line-height: var(--vkui--font_headline3--line_height);
150
+ font-family: var(--vkui--font_headline3--font_family);
151
+ font-weight: var(--vkui--font_headline3--font_weight);
152
+ font-style: var(--vkui--font_headline3--font_style);
158
153
  }
159
154
  .vkui--font_headline {
160
155
  font-size: var(--vkui--font_headline--font_size);
package/themes/workspaceAdmin/cssVars/declarations/onlyMedia.css CHANGED
@@ -21,11 +21,11 @@
21
21
  --vkui--font_title1--font_weight: 500;
22
22
  --vkui--font_title2--font_size: 20px;
23
23
  --vkui--font_title2--line_height: 24px;
24
- --vkui--font_title2--font_family: MailSans, Helvetica, Arial, sans-serif;
24
+ --vkui--font_title2--font_family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
25
25
  --vkui--font_title2--font_weight: 500;
26
26
  --vkui--font_title3--font_size: 17px;
27
27
  --vkui--font_title3--line_height: 24px;
28
- --vkui--font_title3--font_family: MailSans, Helvetica, Arial, sans-serif;
28
+ --vkui--font_title3--font_family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
29
29
  --vkui--font_title3--font_weight: 500;
30
30
  --vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--regular);
31
31
  --vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--regular);
@@ -219,6 +219,11 @@
219
219
  --vkui--size_illustration_m: 96px;
220
220
  --vkui--size_illustration_l: 144px;
221
221
  --vkui--size_illustration_x_x_l: 228px;
222
+ --vkui--font_headline3--font_size: 15px;
223
+ --vkui--font_headline3--line_height: 20px;
224
+ --vkui--font_headline3--font_family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
225
+ --vkui--font_headline3--font_weight: 500;
226
+ --vkui--font_headline3--font_style: normal;
222
227
  --vkui--font_headline--font_size: var(--vkui--font_headline--font_size--regular);
223
228
  --vkui--font_headline--line_height: var(--vkui--font_headline--line_height--regular);
224
229
  --vkui--font_headline--font_family: var(--vkui--font_headline--font_family--regular);
package/themes/workspaceAdmin/cssVars/declarations/onlyVariables.css CHANGED
@@ -35,11 +35,11 @@
35
35
  --vkui--font_title1--font_weight--regular: 500;
36
36
  --vkui--font_title2--font_size--regular: 20px;
37
37
  --vkui--font_title2--line_height--regular: 24px;
38
- --vkui--font_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
38
+ --vkui--font_title2--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
39
39
  --vkui--font_title2--font_weight--regular: 500;
40
40
  --vkui--font_title3--font_size--regular: 17px;
41
41
  --vkui--font_title3--line_height--regular: 24px;
42
- --vkui--font_title3--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
42
+ --vkui--font_title3--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
43
43
  --vkui--font_title3--font_weight--regular: 500;
44
44
  --vkui--font_headline1--font_size--regular: 16px;
45
45
  --vkui--font_headline1--line_height--regular: 20px;
@@ -320,11 +320,11 @@
320
320
  --vkui--type_border_button: solid;
321
321
  --vkui--type_border_position: inset;
322
322
  --vkui--theme_name_base: 'workspaceAdmin';
323
- --vkui--font_headline3--font_size: 13px;
324
- --vkui--font_headline3--line_height: 16px;
325
- --vkui--font_headline3--font_style: normal;
326
- --vkui--font_headline3--font_family: MailSans, Helvetica, Arial, sans-serif;
327
- --vkui--font_headline3--font_weight: 500;
323
+ --vkui--font_headline3--font_size--regular: 15px;
324
+ --vkui--font_headline3--line_height--regular: 20px;
325
+ --vkui--font_headline3--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
326
+ --vkui--font_headline3--font_weight--regular: 500;
327
+ --vkui--font_headline3--font_style--regular: normal;
328
328
  --vkui--font_headline--font_size--regular: 16px;
329
329
  --vkui--font_headline--line_height--regular: 20px;
330
330
  --vkui--font_headline--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;