@vkontakte/vkui-tokens 4.76.0 → 4.77.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 (117) 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/package.json +1 -1
  7. package/themes/cloud/cssVars/declarations/index.css +3 -3
  8. package/themes/cloud/cssVars/declarations/noSizes.css +3 -3
  9. package/themes/cloud/cssVars/declarations/onlyColors.css +3 -3
  10. package/themes/cloud/cssVars/declarations/onlyColors.js +1 -1
  11. package/themes/cloud/cssVars/declarations/onlyVariables.css +3 -3
  12. package/themes/cloud/cssVars/declarations/onlyVariables.js +1 -1
  13. package/themes/cloud/cssVars/declarations/onlyVariablesLocal.css +3 -3
  14. package/themes/cloud/cssVars/declarations/onlyVariablesLocalIncremental.css +3 -3
  15. package/themes/cloud/cssVars/theme/fallbacks/index.css +3 -3
  16. package/themes/cloud/cssVars/theme/fallbacks/index.less +3 -3
  17. package/themes/cloud/cssVars/theme/fallbacks/index.pcss +3 -3
  18. package/themes/cloud/cssVars/theme/fallbacks/index.scss +3 -3
  19. package/themes/cloud/cssVars/theme/fallbacks/index.styl +3 -3
  20. package/themes/cloud/cssVars/theme/index.js +1 -1
  21. package/themes/cloud/cssVars/theme/index.json +3 -3
  22. package/themes/cloud/index.css +3 -3
  23. package/themes/cloud/index.js +1 -1
  24. package/themes/cloud/index.json +3 -3
  25. package/themes/cloud/index.less +3 -3
  26. package/themes/cloud/index.pcss +3 -3
  27. package/themes/cloud/index.scss +3 -3
  28. package/themes/cloud/index.styl +3 -3
  29. package/themes/cloud/struct.json +3 -3
  30. package/themes/legoAndroid/cssVars/declarations/index.css +53 -79
  31. package/themes/legoAndroid/cssVars/declarations/noColors.css +43 -69
  32. package/themes/legoAndroid/cssVars/declarations/onlyAdaptiveGroups.css +10 -10
  33. package/themes/legoAndroid/cssVars/declarations/onlyVariables.css +21 -21
  34. package/themes/legoAndroid/cssVars/declarations/onlyVariables.js +1 -1
  35. package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocal.css +21 -21
  36. package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocalIncremental.css +21 -21
  37. package/themes/legoAndroid/cssVars/theme/fallbacks/index.css +43 -69
  38. package/themes/legoAndroid/cssVars/theme/fallbacks/index.less +11 -24
  39. package/themes/legoAndroid/cssVars/theme/fallbacks/index.pcss +11 -24
  40. package/themes/legoAndroid/cssVars/theme/fallbacks/index.scss +39 -52
  41. package/themes/legoAndroid/cssVars/theme/fallbacks/index.styl +11 -24
  42. package/themes/legoAndroid/cssVars/theme/index.js +1 -1
  43. package/themes/legoAndroid/cssVars/theme/index.json +111 -71
  44. package/themes/legoAndroid/index.css +43 -69
  45. package/themes/legoAndroid/index.js +1 -1
  46. package/themes/legoAndroid/index.json +41 -21
  47. package/themes/legoAndroid/index.less +11 -24
  48. package/themes/legoAndroid/index.pcss +11 -24
  49. package/themes/legoAndroid/index.scss +39 -52
  50. package/themes/legoAndroid/index.styl +11 -24
  51. package/themes/legoAndroid/struct.json +41 -21
  52. package/themes/legoAndroidDark/cssVars/declarations/index.css +53 -79
  53. package/themes/legoAndroidDark/cssVars/declarations/noColors.css +43 -69
  54. package/themes/legoAndroidDark/cssVars/declarations/onlyAdaptiveGroups.css +10 -10
  55. package/themes/legoAndroidDark/cssVars/declarations/onlyVariables.css +21 -21
  56. package/themes/legoAndroidDark/cssVars/declarations/onlyVariables.js +1 -1
  57. package/themes/legoAndroidDark/cssVars/declarations/onlyVariablesLocal.css +21 -21
  58. package/themes/legoAndroidDark/cssVars/declarations/onlyVariablesLocalIncremental.css +21 -21
  59. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.css +43 -69
  60. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.less +11 -24
  61. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.pcss +11 -24
  62. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.scss +39 -52
  63. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.styl +11 -24
  64. package/themes/legoAndroidDark/cssVars/theme/index.js +1 -1
  65. package/themes/legoAndroidDark/cssVars/theme/index.json +111 -71
  66. package/themes/legoAndroidDark/index.css +43 -69
  67. package/themes/legoAndroidDark/index.js +1 -1
  68. package/themes/legoAndroidDark/index.json +41 -21
  69. package/themes/legoAndroidDark/index.less +11 -24
  70. package/themes/legoAndroidDark/index.pcss +11 -24
  71. package/themes/legoAndroidDark/index.scss +39 -52
  72. package/themes/legoAndroidDark/index.styl +11 -24
  73. package/themes/legoAndroidDark/struct.json +41 -21
  74. package/themes/legoIOS/cssVars/declarations/index.css +68 -90
  75. package/themes/legoIOS/cssVars/declarations/noColors.css +58 -81
  76. package/themes/legoIOS/cssVars/declarations/onlyAdaptiveGroups.css +10 -9
  77. package/themes/legoIOS/cssVars/declarations/onlyVariables.css +26 -25
  78. package/themes/legoIOS/cssVars/declarations/onlyVariables.js +1 -1
  79. package/themes/legoIOS/cssVars/declarations/onlyVariablesLocal.css +26 -25
  80. package/themes/legoIOS/cssVars/declarations/onlyVariablesLocalIncremental.css +26 -25
  81. package/themes/legoIOS/cssVars/theme/fallbacks/index.css +58 -81
  82. package/themes/legoIOS/cssVars/theme/fallbacks/index.less +16 -28
  83. package/themes/legoIOS/cssVars/theme/fallbacks/index.pcss +16 -28
  84. package/themes/legoIOS/cssVars/theme/fallbacks/index.scss +51 -62
  85. package/themes/legoIOS/cssVars/theme/fallbacks/index.styl +16 -28
  86. package/themes/legoIOS/cssVars/theme/index.js +1 -1
  87. package/themes/legoIOS/cssVars/theme/index.json +118 -70
  88. package/themes/legoIOS/index.css +58 -81
  89. package/themes/legoIOS/index.js +1 -1
  90. package/themes/legoIOS/index.json +46 -25
  91. package/themes/legoIOS/index.less +16 -28
  92. package/themes/legoIOS/index.pcss +16 -28
  93. package/themes/legoIOS/index.scss +51 -62
  94. package/themes/legoIOS/index.styl +16 -28
  95. package/themes/legoIOS/struct.json +46 -25
  96. package/themes/legoIOSDark/cssVars/declarations/index.css +68 -90
  97. package/themes/legoIOSDark/cssVars/declarations/noColors.css +58 -81
  98. package/themes/legoIOSDark/cssVars/declarations/onlyAdaptiveGroups.css +10 -9
  99. package/themes/legoIOSDark/cssVars/declarations/onlyVariables.css +26 -25
  100. package/themes/legoIOSDark/cssVars/declarations/onlyVariables.js +1 -1
  101. package/themes/legoIOSDark/cssVars/declarations/onlyVariablesLocal.css +26 -25
  102. package/themes/legoIOSDark/cssVars/declarations/onlyVariablesLocalIncremental.css +26 -25
  103. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.css +58 -81
  104. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.less +16 -28
  105. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.pcss +16 -28
  106. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.scss +51 -62
  107. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.styl +16 -28
  108. package/themes/legoIOSDark/cssVars/theme/index.js +1 -1
  109. package/themes/legoIOSDark/cssVars/theme/index.json +118 -70
  110. package/themes/legoIOSDark/index.css +58 -81
  111. package/themes/legoIOSDark/index.js +1 -1
  112. package/themes/legoIOSDark/index.json +46 -25
  113. package/themes/legoIOSDark/index.less +16 -28
  114. package/themes/legoIOSDark/index.pcss +16 -28
  115. package/themes/legoIOSDark/index.scss +51 -62
  116. package/themes/legoIOSDark/index.styl +16 -28
  117. package/themes/legoIOSDark/struct.json +46 -25
package/themes/legoAndroid/cssVars/declarations/onlyAdaptiveGroups.css CHANGED
@@ -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
  }
package/themes/legoAndroid/cssVars/declarations/onlyVariables.css CHANGED
@@ -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;
@@ -65,17 +65,17 @@
65
65
  --vkui--font_headline2--font_size--compact: 14px;
66
66
  --vkui--font_headline2--line_height--compact: 20px;
67
67
  --vkui--font_text--font_size--regular: 16px;
68
- --vkui--font_text--line_height--regular: 18.5px;
68
+ --vkui--font_text--line_height--regular: 18.33px;
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%;