@vkontakte/vkui-tokens 4.76.1 → 4.78.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 (212) hide show
  1. package/build/compilers/styles/helpers/tokenProcessors.d.ts +1 -1
  2. package/build/compilers/styles/helpers/tokenProcessors.js +8 -4
  3. package/build/themeProcessors/pixelifyValues/pixelifyValues.d.ts +1 -1
  4. package/build/themeProcessors/pixelifyValues/pixelifyValues.js +4 -2
  5. package/interfaces/general/typography/index.d.ts +8 -0
  6. package/interfaces/themes/legoAndroid/index.d.ts +5 -19
  7. package/interfaces/themes/legoIOS/index.d.ts +4 -2
  8. package/interfaces/themes/vkontakteAndroid/index.d.ts +2 -0
  9. package/package.json +1 -1
  10. package/themeDescriptions/base/paradigm.js +1 -1
  11. package/themes/legoAndroid/cssVars/declarations/index.css +68 -91
  12. package/themes/legoAndroid/cssVars/declarations/noColors.css +40 -66
  13. package/themes/legoAndroid/cssVars/declarations/noSizes.css +18 -15
  14. package/themes/legoAndroid/cssVars/declarations/onlyAdaptiveGroups.css +10 -10
  15. package/themes/legoAndroid/cssVars/declarations/onlyColors.css +18 -15
  16. package/themes/legoAndroid/cssVars/declarations/onlyColors.js +1 -1
  17. package/themes/legoAndroid/cssVars/declarations/onlyVariables.css +38 -35
  18. package/themes/legoAndroid/cssVars/declarations/onlyVariables.js +1 -1
  19. package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocal.css +38 -35
  20. package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocalIncremental.css +35 -32
  21. package/themes/legoAndroid/cssVars/theme/fallbacks/index.css +58 -81
  22. package/themes/legoAndroid/cssVars/theme/fallbacks/index.less +28 -38
  23. package/themes/legoAndroid/cssVars/theme/fallbacks/index.pcss +28 -38
  24. package/themes/legoAndroid/cssVars/theme/fallbacks/index.scss +54 -64
  25. package/themes/legoAndroid/cssVars/theme/fallbacks/index.styl +28 -38
  26. package/themes/legoAndroid/cssVars/theme/index.js +1 -1
  27. package/themes/legoAndroid/cssVars/theme/index.json +150 -96
  28. package/themes/legoAndroid/docs.json +332 -0
  29. package/themes/legoAndroid/index.css +58 -81
  30. package/themes/legoAndroid/index.js +1 -1
  31. package/themes/legoAndroid/index.json +62 -37
  32. package/themes/legoAndroid/index.less +28 -38
  33. package/themes/legoAndroid/index.pcss +28 -38
  34. package/themes/legoAndroid/index.scss +54 -64
  35. package/themes/legoAndroid/index.styl +28 -38
  36. package/themes/legoAndroid/struct.json +57 -32
  37. package/themes/legoAndroidDark/cssVars/declarations/index.css +68 -91
  38. package/themes/legoAndroidDark/cssVars/declarations/noColors.css +40 -66
  39. package/themes/legoAndroidDark/cssVars/declarations/noSizes.css +18 -15
  40. package/themes/legoAndroidDark/cssVars/declarations/onlyAdaptiveGroups.css +10 -10
  41. package/themes/legoAndroidDark/cssVars/declarations/onlyColors.css +18 -15
  42. package/themes/legoAndroidDark/cssVars/declarations/onlyColors.js +1 -1
  43. package/themes/legoAndroidDark/cssVars/declarations/onlyVariables.css +38 -35
  44. package/themes/legoAndroidDark/cssVars/declarations/onlyVariables.js +1 -1
  45. package/themes/legoAndroidDark/cssVars/declarations/onlyVariablesLocal.css +38 -35
  46. package/themes/legoAndroidDark/cssVars/declarations/onlyVariablesLocalIncremental.css +35 -32
  47. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.css +58 -81
  48. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.less +28 -38
  49. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.pcss +28 -38
  50. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.scss +54 -64
  51. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.styl +28 -38
  52. package/themes/legoAndroidDark/cssVars/theme/index.js +1 -1
  53. package/themes/legoAndroidDark/cssVars/theme/index.json +150 -96
  54. package/themes/legoAndroidDark/docs.json +332 -0
  55. package/themes/legoAndroidDark/index.css +58 -81
  56. package/themes/legoAndroidDark/index.js +1 -1
  57. package/themes/legoAndroidDark/index.json +62 -37
  58. package/themes/legoAndroidDark/index.less +28 -38
  59. package/themes/legoAndroidDark/index.pcss +28 -38
  60. package/themes/legoAndroidDark/index.scss +54 -64
  61. package/themes/legoAndroidDark/index.styl +28 -38
  62. package/themes/legoAndroidDark/struct.json +57 -32
  63. package/themes/legoIOS/cssVars/declarations/index.css +62 -81
  64. package/themes/legoIOS/cssVars/declarations/noColors.css +34 -57
  65. package/themes/legoIOS/cssVars/declarations/noSizes.css +18 -15
  66. package/themes/legoIOS/cssVars/declarations/onlyAdaptiveGroups.css +10 -9
  67. package/themes/legoIOS/cssVars/declarations/onlyColors.css +18 -15
  68. package/themes/legoIOS/cssVars/declarations/onlyColors.js +1 -1
  69. package/themes/legoIOS/cssVars/declarations/onlyVariables.css +36 -32
  70. package/themes/legoIOS/cssVars/declarations/onlyVariables.js +1 -1
  71. package/themes/legoIOS/cssVars/declarations/onlyVariablesLocal.css +36 -32
  72. package/themes/legoIOS/cssVars/declarations/onlyVariablesLocalIncremental.css +36 -32
  73. package/themes/legoIOS/cssVars/theme/fallbacks/index.css +52 -72
  74. package/themes/legoIOS/cssVars/theme/fallbacks/index.less +26 -35
  75. package/themes/legoIOS/cssVars/theme/fallbacks/index.pcss +26 -35
  76. package/themes/legoIOS/cssVars/theme/fallbacks/index.scss +50 -58
  77. package/themes/legoIOS/cssVars/theme/fallbacks/index.styl +26 -35
  78. package/themes/legoIOS/cssVars/theme/index.js +1 -1
  79. package/themes/legoIOS/cssVars/theme/index.json +139 -77
  80. package/themes/legoIOS/docs.json +4 -0
  81. package/themes/legoIOS/index.css +52 -72
  82. package/themes/legoIOS/index.js +1 -1
  83. package/themes/legoIOS/index.json +58 -32
  84. package/themes/legoIOS/index.less +26 -35
  85. package/themes/legoIOS/index.pcss +26 -35
  86. package/themes/legoIOS/index.scss +50 -58
  87. package/themes/legoIOS/index.styl +26 -35
  88. package/themes/legoIOS/struct.json +58 -32
  89. package/themes/legoIOSDark/cssVars/declarations/index.css +62 -81
  90. package/themes/legoIOSDark/cssVars/declarations/noColors.css +34 -57
  91. package/themes/legoIOSDark/cssVars/declarations/noSizes.css +18 -15
  92. package/themes/legoIOSDark/cssVars/declarations/onlyAdaptiveGroups.css +10 -9
  93. package/themes/legoIOSDark/cssVars/declarations/onlyColors.css +18 -15
  94. package/themes/legoIOSDark/cssVars/declarations/onlyColors.js +1 -1
  95. package/themes/legoIOSDark/cssVars/declarations/onlyVariables.css +36 -32
  96. package/themes/legoIOSDark/cssVars/declarations/onlyVariables.js +1 -1
  97. package/themes/legoIOSDark/cssVars/declarations/onlyVariablesLocal.css +36 -32
  98. package/themes/legoIOSDark/cssVars/declarations/onlyVariablesLocalIncremental.css +36 -32
  99. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.css +52 -72
  100. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.less +26 -35
  101. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.pcss +26 -35
  102. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.scss +50 -58
  103. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.styl +26 -35
  104. package/themes/legoIOSDark/cssVars/theme/index.js +1 -1
  105. package/themes/legoIOSDark/cssVars/theme/index.json +139 -77
  106. package/themes/legoIOSDark/docs.json +4 -0
  107. package/themes/legoIOSDark/index.css +52 -72
  108. package/themes/legoIOSDark/index.js +1 -1
  109. package/themes/legoIOSDark/index.json +58 -32
  110. package/themes/legoIOSDark/index.less +26 -35
  111. package/themes/legoIOSDark/index.pcss +26 -35
  112. package/themes/legoIOSDark/index.scss +50 -58
  113. package/themes/legoIOSDark/index.styl +26 -35
  114. package/themes/legoIOSDark/struct.json +58 -32
  115. package/themes/vkontakteAndroid/cssVars/declarations/index.css +6 -0
  116. package/themes/vkontakteAndroid/cssVars/declarations/noSizes.css +6 -0
  117. package/themes/vkontakteAndroid/cssVars/declarations/onlyColors.css +6 -0
  118. package/themes/vkontakteAndroid/cssVars/declarations/onlyColors.js +1 -1
  119. package/themes/vkontakteAndroid/cssVars/declarations/onlyVariables.css +6 -0
  120. package/themes/vkontakteAndroid/cssVars/declarations/onlyVariables.js +1 -1
  121. package/themes/vkontakteAndroid/cssVars/declarations/onlyVariablesLocal.css +6 -0
  122. package/themes/vkontakteAndroid/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -0
  123. package/themes/vkontakteAndroid/cssVars/theme/fallbacks/index.css +6 -0
  124. package/themes/vkontakteAndroid/cssVars/theme/fallbacks/index.less +6 -0
  125. package/themes/vkontakteAndroid/cssVars/theme/fallbacks/index.pcss +6 -0
  126. package/themes/vkontakteAndroid/cssVars/theme/fallbacks/index.scss +6 -0
  127. package/themes/vkontakteAndroid/cssVars/theme/fallbacks/index.styl +6 -0
  128. package/themes/vkontakteAndroid/cssVars/theme/index.js +1 -1
  129. package/themes/vkontakteAndroid/cssVars/theme/index.json +28 -0
  130. package/themes/vkontakteAndroid/docs.json +8 -0
  131. package/themes/vkontakteAndroid/index.css +6 -0
  132. package/themes/vkontakteAndroid/index.js +1 -1
  133. package/themes/vkontakteAndroid/index.json +10 -0
  134. package/themes/vkontakteAndroid/index.less +6 -0
  135. package/themes/vkontakteAndroid/index.pcss +6 -0
  136. package/themes/vkontakteAndroid/index.scss +6 -0
  137. package/themes/vkontakteAndroid/index.styl +6 -0
  138. package/themes/vkontakteAndroid/struct.json +10 -0
  139. package/themes/vkontakteAndroidDark/cssVars/declarations/index.css +6 -0
  140. package/themes/vkontakteAndroidDark/cssVars/declarations/noSizes.css +6 -0
  141. package/themes/vkontakteAndroidDark/cssVars/declarations/onlyColors.css +6 -0
  142. package/themes/vkontakteAndroidDark/cssVars/declarations/onlyColors.js +1 -1
  143. package/themes/vkontakteAndroidDark/cssVars/declarations/onlyVariables.css +6 -0
  144. package/themes/vkontakteAndroidDark/cssVars/declarations/onlyVariables.js +1 -1
  145. package/themes/vkontakteAndroidDark/cssVars/declarations/onlyVariablesLocal.css +6 -0
  146. package/themes/vkontakteAndroidDark/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -0
  147. package/themes/vkontakteAndroidDark/cssVars/theme/fallbacks/index.css +6 -0
  148. package/themes/vkontakteAndroidDark/cssVars/theme/fallbacks/index.less +6 -0
  149. package/themes/vkontakteAndroidDark/cssVars/theme/fallbacks/index.pcss +6 -0
  150. package/themes/vkontakteAndroidDark/cssVars/theme/fallbacks/index.scss +6 -0
  151. package/themes/vkontakteAndroidDark/cssVars/theme/fallbacks/index.styl +6 -0
  152. package/themes/vkontakteAndroidDark/cssVars/theme/index.js +1 -1
  153. package/themes/vkontakteAndroidDark/cssVars/theme/index.json +28 -0
  154. package/themes/vkontakteAndroidDark/docs.json +8 -0
  155. package/themes/vkontakteAndroidDark/index.css +6 -0
  156. package/themes/vkontakteAndroidDark/index.js +1 -1
  157. package/themes/vkontakteAndroidDark/index.json +10 -0
  158. package/themes/vkontakteAndroidDark/index.less +6 -0
  159. package/themes/vkontakteAndroidDark/index.pcss +6 -0
  160. package/themes/vkontakteAndroidDark/index.scss +6 -0
  161. package/themes/vkontakteAndroidDark/index.styl +6 -0
  162. package/themes/vkontakteAndroidDark/struct.json +10 -0
  163. package/themes/vkontakteCom/docs.json +8 -0
  164. package/themes/vkontakteComDark/docs.json +8 -0
  165. package/themes/vkontakteIOS/cssVars/declarations/index.css +6 -0
  166. package/themes/vkontakteIOS/cssVars/declarations/noSizes.css +6 -0
  167. package/themes/vkontakteIOS/cssVars/declarations/onlyColors.css +6 -0
  168. package/themes/vkontakteIOS/cssVars/declarations/onlyColors.js +1 -1
  169. package/themes/vkontakteIOS/cssVars/declarations/onlyVariables.css +6 -0
  170. package/themes/vkontakteIOS/cssVars/declarations/onlyVariables.js +1 -1
  171. package/themes/vkontakteIOS/cssVars/declarations/onlyVariablesLocal.css +6 -0
  172. package/themes/vkontakteIOS/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -0
  173. package/themes/vkontakteIOS/cssVars/theme/fallbacks/index.css +6 -0
  174. package/themes/vkontakteIOS/cssVars/theme/fallbacks/index.less +6 -0
  175. package/themes/vkontakteIOS/cssVars/theme/fallbacks/index.pcss +6 -0
  176. package/themes/vkontakteIOS/cssVars/theme/fallbacks/index.scss +6 -0
  177. package/themes/vkontakteIOS/cssVars/theme/fallbacks/index.styl +6 -0
  178. package/themes/vkontakteIOS/cssVars/theme/index.js +1 -1
  179. package/themes/vkontakteIOS/cssVars/theme/index.json +28 -0
  180. package/themes/vkontakteIOS/docs.json +8 -0
  181. package/themes/vkontakteIOS/index.css +6 -0
  182. package/themes/vkontakteIOS/index.js +1 -1
  183. package/themes/vkontakteIOS/index.json +10 -0
  184. package/themes/vkontakteIOS/index.less +6 -0
  185. package/themes/vkontakteIOS/index.pcss +6 -0
  186. package/themes/vkontakteIOS/index.scss +6 -0
  187. package/themes/vkontakteIOS/index.styl +6 -0
  188. package/themes/vkontakteIOS/struct.json +10 -0
  189. package/themes/vkontakteIOSDark/cssVars/declarations/index.css +6 -0
  190. package/themes/vkontakteIOSDark/cssVars/declarations/noSizes.css +6 -0
  191. package/themes/vkontakteIOSDark/cssVars/declarations/onlyColors.css +6 -0
  192. package/themes/vkontakteIOSDark/cssVars/declarations/onlyColors.js +1 -1
  193. package/themes/vkontakteIOSDark/cssVars/declarations/onlyVariables.css +6 -0
  194. package/themes/vkontakteIOSDark/cssVars/declarations/onlyVariables.js +1 -1
  195. package/themes/vkontakteIOSDark/cssVars/declarations/onlyVariablesLocal.css +6 -0
  196. package/themes/vkontakteIOSDark/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -0
  197. package/themes/vkontakteIOSDark/cssVars/theme/fallbacks/index.css +6 -0
  198. package/themes/vkontakteIOSDark/cssVars/theme/fallbacks/index.less +6 -0
  199. package/themes/vkontakteIOSDark/cssVars/theme/fallbacks/index.pcss +6 -0
  200. package/themes/vkontakteIOSDark/cssVars/theme/fallbacks/index.scss +6 -0
  201. package/themes/vkontakteIOSDark/cssVars/theme/fallbacks/index.styl +6 -0
  202. package/themes/vkontakteIOSDark/cssVars/theme/index.js +1 -1
  203. package/themes/vkontakteIOSDark/cssVars/theme/index.json +28 -0
  204. package/themes/vkontakteIOSDark/docs.json +8 -0
  205. package/themes/vkontakteIOSDark/index.css +6 -0
  206. package/themes/vkontakteIOSDark/index.js +1 -1
  207. package/themes/vkontakteIOSDark/index.json +10 -0
  208. package/themes/vkontakteIOSDark/index.less +6 -0
  209. package/themes/vkontakteIOSDark/index.pcss +6 -0
  210. package/themes/vkontakteIOSDark/index.scss +6 -0
  211. package/themes/vkontakteIOSDark/index.styl +6 -0
  212. package/themes/vkontakteIOSDark/struct.json +10 -0
@@ -40,22 +40,22 @@
40
40
  --vkui--font_title1--line_height--regular: 31px;
41
41
  --vkui--font_title1--font_family--regular: "VK Sans Display", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
42
42
  --vkui--font_title1--font_weight--regular: 700;
43
- --vkui--font_title1--letter_spacing--regular: -0.72px;
43
+ --vkui--font_title1--letter_spacing--regular: -0.5px;
44
44
  --vkui--font_title2--font_size--regular: 24px;
45
45
  --vkui--font_title2--line_height--regular: 26px;
46
46
  --vkui--font_title2--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
47
- --vkui--font_title2--font_weight--regular: 700;
48
- --vkui--font_title2--letter_spacing--regular: -0.58px;
49
- --vkui--font_title3--font_size--regular: 20px;
47
+ --vkui--font_title2--font_weight--regular: 670;
48
+ --vkui--font_title2--font_variation_settings--optical_size--regular: 27.2;
49
+ --vkui--font_title3--font_size--regular: 21.5px;
50
50
  --vkui--font_title3--line_height--regular: 23px;
51
51
  --vkui--font_title3--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
52
- --vkui--font_title3--font_weight--regular: 700;
53
- --vkui--font_title3--letter_spacing--regular: -0.78px;
52
+ --vkui--font_title3--font_weight--regular: 670;
53
+ --vkui--font_title3--font_variation_settings--optical_size--regular: 23;
54
54
  --vkui--font_headline1--font_size--regular: 17px;
55
55
  --vkui--font_headline1--line_height--regular: 20px;
56
56
  --vkui--font_headline1--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
57
57
  --vkui--font_headline1--font_weight--regular: 600;
58
- --vkui--font_headline1--letter_spacing--regular: -0.72px;
58
+ --vkui--font_headline1--font_variation_settings--optical_size--regular: 24;
59
59
  --vkui--font_headline1--font_size--compact: 15px;
60
60
  --vkui--font_headline1--line_height--compact: 20px;
61
61
  --vkui--font_headline2--font_size--regular: 15px;
@@ -68,14 +68,14 @@
68
68
  --vkui--font_text--line_height--regular: 18.5px;
69
69
  --vkui--font_text--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
70
70
  --vkui--font_text--font_weight--regular: 600;
71
- --vkui--font_text--letter_spacing--regular: -0.68px;
71
+ --vkui--font_text--font_variation_settings--optical_size--regular: 24;
72
72
  --vkui--font_text--font_size--compact: 15px;
73
73
  --vkui--font_text--line_height--compact: 20px;
74
74
  --vkui--font_paragraph--font_size--regular: 15px;
75
- --vkui--font_paragraph--line_height--regular: 18px;
75
+ --vkui--font_paragraph--line_height--regular: 18.5px;
76
76
  --vkui--font_paragraph--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
77
- --vkui--font_paragraph--font_weight--regular: 600;
78
- --vkui--font_paragraph--letter_spacing--regular: -0.46px;
77
+ --vkui--font_paragraph--font_weight--regular: 580;
78
+ --vkui--font_paragraph--font_variation_settings--optical_size--regular: 26;
79
79
  --vkui--font_subhead--font_size--regular: 14px;
80
80
  --vkui--font_subhead--line_height--regular: 18px;
81
81
  --vkui--font_subhead--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -86,7 +86,7 @@
86
86
  --vkui--font_footnote--line_height--regular: 15px;
87
87
  --vkui--font_footnote--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
88
88
  --vkui--font_footnote--font_weight--regular: 600;
89
- --vkui--font_footnote--letter_spacing--regular: -0.58px;
89
+ --vkui--font_footnote--font_variation_settings--optical_size--regular: 20;
90
90
  --vkui--font_footnote_caps--font_size--regular: 13px;
91
91
  --vkui--font_footnote_caps--line_height--regular: 16px;
92
92
  --vkui--font_footnote_caps--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -227,16 +227,16 @@
227
227
  --vkui--theme_inherits_from: 'vkontakteAndroid';
228
228
  --vkui--font_label1--font_size--regular: 19px;
229
229
  --vkui--font_label1--line_height--regular: 20px;
230
- --vkui--font_label1--font_weight--regular: 700;
231
- --vkui--font_label1--letter_spacing--regular: -0.58px;
230
+ --vkui--font_label1--font_weight--regular: 670;
231
+ --vkui--font_label1--font_variation_settings--optical_size--regular: 24;
232
232
  --vkui--font_label2--font_size--regular: 18px;
233
233
  --vkui--font_label2--line_height--regular: 21px;
234
234
  --vkui--font_label2--font_weight--regular: 600;
235
- --vkui--font_label2--letter_spacing--regular: -0.68px;
236
- --vkui--font_body--font_size--regular: 17.5px;
237
- --vkui--font_body--line_height--regular: 23px;
238
- --vkui--font_body--font_weight--regular: 500;
239
- --vkui--font_body--letter_spacing--regular: -0.72px;
235
+ --vkui--font_label2--font_variation_settings--optical_size--regular: 26;
236
+ --vkui--font_body--font_size--regular: 16.5px;
237
+ --vkui--font_body--line_height--regular: 21px;
238
+ --vkui--font_body--font_weight--regular: 520;
239
+ --vkui--font_body--font_variation_settings--optical_size--regular: 22;
240
240
  --vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%;
241
241
  --vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%;
242
242
  --vkui--gradient_tint: rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.05) 15%, rgba(247, 247, 247, 0.2) 30%, rgba(247, 247, 247, 0.8) 70%, rgba(247, 247, 247, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(247, 247, 247, 1)) 100%;
@@ -245,7 +245,7 @@
245
245
  --vkui--font_headline--line_height--regular: 20px;
246
246
  --vkui--font_headline--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
247
247
  --vkui--font_headline--font_weight--regular: 600;
248
- --vkui--font_headline--letter_spacing--regular: -0.72px;
248
+ --vkui--font_headline--font_variation_settings--optical_size--regular: 24;
249
249
  --vkui--font_headline--font_size--compact: 15px;
250
250
  --vkui--font_headline--line_height--compact: 20px;
251
251
  --vkui--vkontakte_gradient_aquamarine_blue: rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%;
@@ -589,8 +589,8 @@
589
589
  font-family: var(--vkui--font_title1--font_family--regular, "VK Sans Display", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
590
590
  font-weight: 700;
591
591
  font-weight: var(--vkui--font_title1--font_weight--regular, 700);
592
- letter-spacing: -0.72px;
593
- letter-spacing: var(--vkui--font_title1--letter_spacing--regular, -0.72px);
592
+ letter-spacing: -0.5px;
593
+ letter-spacing: var(--vkui--font_title1--letter_spacing--regular, -0.5px);
594
594
  }
595
595
  .vkui--font_title2--regular {
596
596
  font-size: 24px;
@@ -599,22 +599,18 @@
599
599
  line-height: var(--vkui--font_title2--line_height--regular, 26px);
600
600
  font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
601
601
  font-family: var(--vkui--font_title2--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
602
- font-weight: 700;
603
- font-weight: var(--vkui--font_title2--font_weight--regular, 700);
604
- letter-spacing: -0.58px;
605
- letter-spacing: var(--vkui--font_title2--letter_spacing--regular, -0.58px);
602
+ font-weight: 670;
603
+ font-weight: var(--vkui--font_title2--font_weight--regular, 670);
606
604
  }
607
605
  .vkui--font_title3--regular {
608
- font-size: 20px;
609
- font-size: var(--vkui--font_title3--font_size--regular, 20px);
606
+ font-size: 21.5px;
607
+ font-size: var(--vkui--font_title3--font_size--regular, 21.5px);
610
608
  line-height: 23px;
611
609
  line-height: var(--vkui--font_title3--line_height--regular, 23px);
612
610
  font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
613
611
  font-family: var(--vkui--font_title3--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
614
- font-weight: 700;
615
- font-weight: var(--vkui--font_title3--font_weight--regular, 700);
616
- letter-spacing: -0.78px;
617
- letter-spacing: var(--vkui--font_title3--letter_spacing--regular, -0.78px);
612
+ font-weight: 670;
613
+ font-weight: var(--vkui--font_title3--font_weight--regular, 670);
618
614
  }
619
615
  .vkui--font_headline1--regular {
620
616
  font-size: 17px;
@@ -625,8 +621,6 @@
625
621
  font-family: var(--vkui--font_headline1--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
626
622
  font-weight: 600;
627
623
  font-weight: var(--vkui--font_headline1--font_weight--regular, 600);
628
- letter-spacing: -0.72px;
629
- letter-spacing: var(--vkui--font_headline1--letter_spacing--regular, -0.72px);
630
624
  }
631
625
  .vkui--font_headline1--compact {
632
626
  font-size: 15px;
@@ -637,8 +631,6 @@
637
631
  font-family: var(--vkui--font_headline1--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
638
632
  font-weight: 600;
639
633
  font-weight: var(--vkui--font_headline1--font_weight--regular, 600);
640
- letter-spacing: -0.72px;
641
- letter-spacing: var(--vkui--font_headline1--letter_spacing--regular, -0.72px);
642
634
  }
643
635
  .vkui--font_headline2--regular {
644
636
  font-size: 15px;
@@ -669,8 +661,6 @@
669
661
  font-family: var(--vkui--font_text--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
670
662
  font-weight: 600;
671
663
  font-weight: var(--vkui--font_text--font_weight--regular, 600);
672
- letter-spacing: -0.68px;
673
- letter-spacing: var(--vkui--font_text--letter_spacing--regular, -0.68px);
674
664
  }
675
665
  .vkui--font_text--compact {
676
666
  font-size: 15px;
@@ -681,20 +671,16 @@
681
671
  font-family: var(--vkui--font_text--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
682
672
  font-weight: 600;
683
673
  font-weight: var(--vkui--font_text--font_weight--regular, 600);
684
- letter-spacing: -0.68px;
685
- letter-spacing: var(--vkui--font_text--letter_spacing--regular, -0.68px);
686
674
  }
687
675
  .vkui--font_paragraph--regular {
688
676
  font-size: 15px;
689
677
  font-size: var(--vkui--font_paragraph--font_size--regular, 15px);
690
- line-height: 18px;
691
- line-height: var(--vkui--font_paragraph--line_height--regular, 18px);
678
+ line-height: 18.5px;
679
+ line-height: var(--vkui--font_paragraph--line_height--regular, 18.5px);
692
680
  font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
693
681
  font-family: var(--vkui--font_paragraph--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
694
- font-weight: 600;
695
- font-weight: var(--vkui--font_paragraph--font_weight--regular, 600);
696
- letter-spacing: -0.46px;
697
- letter-spacing: var(--vkui--font_paragraph--letter_spacing--regular, -0.46px);
682
+ font-weight: 580;
683
+ font-weight: var(--vkui--font_paragraph--font_weight--regular, 580);
698
684
  }
699
685
  .vkui--font_subhead--regular {
700
686
  font-size: 14px;
@@ -725,8 +711,6 @@
725
711
  font-family: var(--vkui--font_footnote--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
726
712
  font-weight: 600;
727
713
  font-weight: var(--vkui--font_footnote--font_weight--regular, 600);
728
- letter-spacing: -0.58px;
729
- letter-spacing: var(--vkui--font_footnote--letter_spacing--regular, -0.58px);
730
714
  }
731
715
  .vkui--font_footnote_caps--regular {
732
716
  font-size: 13px;
@@ -811,10 +795,8 @@
811
795
  font-size: var(--vkui--font_label1--font_size--regular, 19px);
812
796
  line-height: 20px;
813
797
  line-height: var(--vkui--font_label1--line_height--regular, 20px);
814
- font-weight: 700;
815
- font-weight: var(--vkui--font_label1--font_weight--regular, 700);
816
- letter-spacing: -0.58px;
817
- letter-spacing: var(--vkui--font_label1--letter_spacing--regular, -0.58px);
798
+ font-weight: 670;
799
+ font-weight: var(--vkui--font_label1--font_weight--regular, 670);
818
800
  }
819
801
  .vkui--font_label2--regular {
820
802
  font-size: 18px;
@@ -823,18 +805,14 @@
823
805
  line-height: var(--vkui--font_label2--line_height--regular, 21px);
824
806
  font-weight: 600;
825
807
  font-weight: var(--vkui--font_label2--font_weight--regular, 600);
826
- letter-spacing: -0.68px;
827
- letter-spacing: var(--vkui--font_label2--letter_spacing--regular, -0.68px);
828
808
  }
829
809
  .vkui--font_body--regular {
830
- font-size: 17.5px;
831
- font-size: var(--vkui--font_body--font_size--regular, 17.5px);
832
- line-height: 23px;
833
- line-height: var(--vkui--font_body--line_height--regular, 23px);
834
- font-weight: 500;
835
- font-weight: var(--vkui--font_body--font_weight--regular, 500);
836
- letter-spacing: -0.72px;
837
- letter-spacing: var(--vkui--font_body--letter_spacing--regular, -0.72px);
810
+ font-size: 16.5px;
811
+ font-size: var(--vkui--font_body--font_size--regular, 16.5px);
812
+ line-height: 21px;
813
+ line-height: var(--vkui--font_body--line_height--regular, 21px);
814
+ font-weight: 520;
815
+ font-weight: var(--vkui--font_body--font_weight--regular, 520);
838
816
  }
839
817
  .vkui--font_headline--regular {
840
818
  font-size: 17px;
@@ -845,8 +823,6 @@
845
823
  font-family: var(--vkui--font_headline--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
846
824
  font-weight: 600;
847
825
  font-weight: var(--vkui--font_headline--font_weight--regular, 600);
848
- letter-spacing: -0.72px;
849
- letter-spacing: var(--vkui--font_headline--letter_spacing--regular, -0.72px);
850
826
  }
851
827
  .vkui--font_headline--compact {
852
828
  font-size: 15px;
@@ -857,6 +833,4 @@
857
833
  font-family: var(--vkui--font_headline--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
858
834
  font-weight: 600;
859
835
  font-weight: var(--vkui--font_headline--font_weight--regular, 600);
860
- letter-spacing: -0.72px;
861
- letter-spacing: var(--vkui--font_headline--letter_spacing--regular, -0.72px);
862
836
  }
@@ -133,9 +133,9 @@
133
133
  --vkui--color_background_warning: #fff2d6;
134
134
  --vkui--color_background_warning--hover: #F5E9D0;
135
135
  --vkui--color_background_warning--active: #EBE0CA;
136
- --vkui--color_background_negative: #fe3c60;
137
- --vkui--color_background_negative--hover: #F43A5F;
138
- --vkui--color_background_negative--active: #EA385D;
136
+ --vkui--color_background_negative: #F65460;
137
+ --vkui--color_background_negative--hover: #EC515F;
138
+ --vkui--color_background_negative--active: #E24F5D;
139
139
  --vkui--color_background_negative_tint: #ffe9e9;
140
140
  --vkui--color_background_negative_tint--hover: #F5E0E2;
141
141
  --vkui--color_background_negative_tint--active: #EBD8DB;
@@ -184,9 +184,9 @@
184
184
  --vkui--color_text_positive: #34c759;
185
185
  --vkui--color_text_positive--hover: #32C058;
186
186
  --vkui--color_text_positive--active: #30B857;
187
- --vkui--color_text_negative: #fe3c60;
188
- --vkui--color_text_negative--hover: #F43A5F;
189
- --vkui--color_text_negative--active: #EA385D;
187
+ --vkui--color_text_negative: #F65460;
188
+ --vkui--color_text_negative--hover: #EC515F;
189
+ --vkui--color_text_negative--active: #E24F5D;
190
190
  --vkui--color_text_link: #2e90ff;
191
191
  --vkui--color_text_link--hover: #2C8BF7;
192
192
  --vkui--color_text_link--active: #2A86EF;
@@ -250,9 +250,9 @@
250
250
  --vkui--color_icon_warning: #ff6900;
251
251
  --vkui--color_icon_warning--hover: #F56502;
252
252
  --vkui--color_icon_warning--active: #EB6205;
253
- --vkui--color_icon_negative: #fe3c60;
254
- --vkui--color_icon_negative--hover: #F43A5F;
255
- --vkui--color_icon_negative--active: #EA385D;
253
+ --vkui--color_icon_negative: #F65460;
254
+ --vkui--color_icon_negative--hover: #EC515F;
255
+ --vkui--color_icon_negative--active: #E24F5D;
256
256
  --vkui--color_stroke_accent: #2e90ff;
257
257
  --vkui--color_stroke_accent--hover: #2C8BF7;
258
258
  --vkui--color_stroke_accent--active: #2A86EF;
@@ -277,9 +277,9 @@
277
277
  --vkui--color_stroke_positive: #34c759;
278
278
  --vkui--color_stroke_positive--hover: #32C058;
279
279
  --vkui--color_stroke_positive--active: #30B857;
280
- --vkui--color_stroke_negative: #fe3c60;
281
- --vkui--color_stroke_negative--hover: #F43A5F;
282
- --vkui--color_stroke_negative--active: #EA385D;
280
+ --vkui--color_stroke_negative: #F65460;
281
+ --vkui--color_stroke_negative--hover: #EC515F;
282
+ --vkui--color_stroke_negative--active: #E24F5D;
283
283
  --vkui--color_stroke_contrast: #ffffff;
284
284
  --vkui--color_stroke_contrast--hover: #F5F5F7;
285
285
  --vkui--color_stroke_contrast--active: #EBECEF;
@@ -406,6 +406,12 @@
406
406
  --vkui--color_transparent: #00000000;
407
407
  --vkui--color_transparent--hover: rgba(0, 0, 0, 0.04);
408
408
  --vkui--color_transparent--active: rgba(0, 0, 0, 0.08);
409
+ --vkui--color_background_inverse: #262626;
410
+ --vkui--color_background_inverse--hover: #242527;
411
+ --vkui--color_background_inverse--active: #232428;
412
+ --vkui--color_stroke_contrast_secondary_alpha: #ffffff1f;
413
+ --vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
414
+ --vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
409
415
  --vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
410
416
  --vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
411
417
  --vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
@@ -652,7 +658,4 @@
652
658
  --vkui--vkontakte_palette_black: #000000;
653
659
  --vkui--vkontakte_palette_black--hover: #000102;
654
660
  --vkui--vkontakte_palette_black--active: #000105;
655
- --vkui--color_background_inverse: #262626;
656
- --vkui--color_background_inverse--hover: #242527;
657
- --vkui--color_background_inverse--active: #232428;
658
661
  }
@@ -34,21 +34,21 @@
34
34
  line-height: var(--vkui--font_title2--line_height);
35
35
  font-family: var(--vkui--font_title2--font_family);
36
36
  font-weight: var(--vkui--font_title2--font_weight);
37
- letter-spacing: var(--vkui--font_title2--letter_spacing);
37
+ font-variation-settings--optical-size: var(--vkui--font_title2--font_variation_settings--optical_size);
38
38
  }
39
39
  .vkui--font_title3 {
40
40
  font-size: var(--vkui--font_title3--font_size);
41
41
  line-height: var(--vkui--font_title3--line_height);
42
42
  font-family: var(--vkui--font_title3--font_family);
43
43
  font-weight: var(--vkui--font_title3--font_weight);
44
- letter-spacing: var(--vkui--font_title3--letter_spacing);
44
+ font-variation-settings--optical-size: var(--vkui--font_title3--font_variation_settings--optical_size);
45
45
  }
46
46
  .vkui--font_headline1 {
47
47
  font-size: var(--vkui--font_headline1--font_size);
48
48
  line-height: var(--vkui--font_headline1--line_height);
49
49
  font-family: var(--vkui--font_headline1--font_family);
50
50
  font-weight: var(--vkui--font_headline1--font_weight);
51
- letter-spacing: var(--vkui--font_headline1--letter_spacing);
51
+ font-variation-settings--optical-size: var(--vkui--font_headline1--font_variation_settings--optical_size);
52
52
  }
53
53
  .vkui--font_headline2 {
54
54
  font-size: var(--vkui--font_headline2--font_size);
@@ -61,14 +61,14 @@
61
61
  line-height: var(--vkui--font_text--line_height);
62
62
  font-family: var(--vkui--font_text--font_family);
63
63
  font-weight: var(--vkui--font_text--font_weight);
64
- letter-spacing: var(--vkui--font_text--letter_spacing);
64
+ font-variation-settings--optical-size: var(--vkui--font_text--font_variation_settings--optical_size);
65
65
  }
66
66
  .vkui--font_paragraph {
67
67
  font-size: var(--vkui--font_paragraph--font_size);
68
68
  line-height: var(--vkui--font_paragraph--line_height);
69
69
  font-family: var(--vkui--font_paragraph--font_family);
70
70
  font-weight: var(--vkui--font_paragraph--font_weight);
71
- letter-spacing: var(--vkui--font_paragraph--letter_spacing);
71
+ font-variation-settings--optical-size: var(--vkui--font_paragraph--font_variation_settings--optical_size);
72
72
  }
73
73
  .vkui--font_subhead {
74
74
  font-size: var(--vkui--font_subhead--font_size);
@@ -81,7 +81,7 @@
81
81
  line-height: var(--vkui--font_footnote--line_height);
82
82
  font-family: var(--vkui--font_footnote--font_family);
83
83
  font-weight: var(--vkui--font_footnote--font_weight);
84
- letter-spacing: var(--vkui--font_footnote--letter_spacing);
84
+ font-variation-settings--optical-size: var(--vkui--font_footnote--font_variation_settings--optical_size);
85
85
  }
86
86
  .vkui--font_footnote_caps {
87
87
  font-size: var(--vkui--font_footnote_caps--font_size);
@@ -133,24 +133,24 @@
133
133
  font-size: var(--vkui--font_label1--font_size);
134
134
  line-height: var(--vkui--font_label1--line_height);
135
135
  font-weight: var(--vkui--font_label1--font_weight);
136
- letter-spacing: var(--vkui--font_label1--letter_spacing);
136
+ font-variation-settings--optical-size: var(--vkui--font_label1--font_variation_settings--optical_size);
137
137
  }
138
138
  .vkui--font_label2 {
139
139
  font-size: var(--vkui--font_label2--font_size);
140
140
  line-height: var(--vkui--font_label2--line_height);
141
141
  font-weight: var(--vkui--font_label2--font_weight);
142
- letter-spacing: var(--vkui--font_label2--letter_spacing);
142
+ font-variation-settings--optical-size: var(--vkui--font_label2--font_variation_settings--optical_size);
143
143
  }
144
144
  .vkui--font_body {
145
145
  font-size: var(--vkui--font_body--font_size);
146
146
  line-height: var(--vkui--font_body--line_height);
147
147
  font-weight: var(--vkui--font_body--font_weight);
148
- letter-spacing: var(--vkui--font_body--letter_spacing);
148
+ font-variation-settings--optical-size: var(--vkui--font_body--font_variation_settings--optical_size);
149
149
  }
150
150
  .vkui--font_headline {
151
151
  font-size: var(--vkui--font_headline--font_size);
152
152
  line-height: var(--vkui--font_headline--line_height);
153
153
  font-family: var(--vkui--font_headline--font_family);
154
154
  font-weight: var(--vkui--font_headline--font_weight);
155
- letter-spacing: var(--vkui--font_headline--letter_spacing);
155
+ font-variation-settings--optical-size: var(--vkui--font_headline--font_variation_settings--optical_size);
156
156
  }
@@ -65,9 +65,9 @@
65
65
  --vkui--color_background_warning: #fff2d6;
66
66
  --vkui--color_background_warning--hover: #F5E9D0;
67
67
  --vkui--color_background_warning--active: #EBE0CA;
68
- --vkui--color_background_negative: #fe3c60;
69
- --vkui--color_background_negative--hover: #F43A5F;
70
- --vkui--color_background_negative--active: #EA385D;
68
+ --vkui--color_background_negative: #F65460;
69
+ --vkui--color_background_negative--hover: #EC515F;
70
+ --vkui--color_background_negative--active: #E24F5D;
71
71
  --vkui--color_background_negative_tint: #ffe9e9;
72
72
  --vkui--color_background_negative_tint--hover: #F5E0E2;
73
73
  --vkui--color_background_negative_tint--active: #EBD8DB;
@@ -116,9 +116,9 @@
116
116
  --vkui--color_text_positive: #34c759;
117
117
  --vkui--color_text_positive--hover: #32C058;
118
118
  --vkui--color_text_positive--active: #30B857;
119
- --vkui--color_text_negative: #fe3c60;
120
- --vkui--color_text_negative--hover: #F43A5F;
121
- --vkui--color_text_negative--active: #EA385D;
119
+ --vkui--color_text_negative: #F65460;
120
+ --vkui--color_text_negative--hover: #EC515F;
121
+ --vkui--color_text_negative--active: #E24F5D;
122
122
  --vkui--color_text_link: #2e90ff;
123
123
  --vkui--color_text_link--hover: #2C8BF7;
124
124
  --vkui--color_text_link--active: #2A86EF;
@@ -182,9 +182,9 @@
182
182
  --vkui--color_icon_warning: #ff6900;
183
183
  --vkui--color_icon_warning--hover: #F56502;
184
184
  --vkui--color_icon_warning--active: #EB6205;
185
- --vkui--color_icon_negative: #fe3c60;
186
- --vkui--color_icon_negative--hover: #F43A5F;
187
- --vkui--color_icon_negative--active: #EA385D;
185
+ --vkui--color_icon_negative: #F65460;
186
+ --vkui--color_icon_negative--hover: #EC515F;
187
+ --vkui--color_icon_negative--active: #E24F5D;
188
188
  --vkui--color_stroke_accent: #2e90ff;
189
189
  --vkui--color_stroke_accent--hover: #2C8BF7;
190
190
  --vkui--color_stroke_accent--active: #2A86EF;
@@ -209,9 +209,9 @@
209
209
  --vkui--color_stroke_positive: #34c759;
210
210
  --vkui--color_stroke_positive--hover: #32C058;
211
211
  --vkui--color_stroke_positive--active: #30B857;
212
- --vkui--color_stroke_negative: #fe3c60;
213
- --vkui--color_stroke_negative--hover: #F43A5F;
214
- --vkui--color_stroke_negative--active: #EA385D;
212
+ --vkui--color_stroke_negative: #F65460;
213
+ --vkui--color_stroke_negative--hover: #EC515F;
214
+ --vkui--color_stroke_negative--active: #E24F5D;
215
215
  --vkui--color_stroke_contrast: #ffffff;
216
216
  --vkui--color_stroke_contrast--hover: #F5F5F7;
217
217
  --vkui--color_stroke_contrast--active: #EBECEF;
@@ -338,6 +338,12 @@
338
338
  --vkui--color_transparent: #00000000;
339
339
  --vkui--color_transparent--hover: rgba(0, 0, 0, 0.04);
340
340
  --vkui--color_transparent--active: rgba(0, 0, 0, 0.08);
341
+ --vkui--color_background_inverse: #262626;
342
+ --vkui--color_background_inverse--hover: #242527;
343
+ --vkui--color_background_inverse--active: #232428;
344
+ --vkui--color_stroke_contrast_secondary_alpha: #ffffff1f;
345
+ --vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
346
+ --vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
341
347
  --vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
342
348
  --vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
343
349
  --vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
@@ -584,7 +590,4 @@
584
590
  --vkui--vkontakte_palette_black: #000000;
585
591
  --vkui--vkontakte_palette_black--hover: #000102;
586
592
  --vkui--vkontakte_palette_black--active: #000105;
587
- --vkui--color_background_inverse: #262626;
588
- --vkui--color_background_inverse--hover: #242527;
589
- --vkui--color_background_inverse--active: #232428;
590
593
  }