@vkontakte/vkui-tokens 4.75.2 → 4.76.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 (104) hide show
  1. package/interfaces/themes/legoAndroid/index.d.ts +19 -1
  2. package/interfaces/themes/legoIOS/index.d.ts +17 -2
  3. package/package.json +1 -1
  4. package/themeDescriptions/base/paradigm.js +1 -1
  5. package/themes/legoAndroid/cssVars/declarations/index.css +8 -5
  6. package/themes/legoAndroid/cssVars/declarations/noColors.css +2 -2
  7. package/themes/legoAndroid/cssVars/declarations/noSizes.css +8 -5
  8. package/themes/legoAndroid/cssVars/declarations/onlyColors.css +6 -3
  9. package/themes/legoAndroid/cssVars/declarations/onlyColors.js +1 -1
  10. package/themes/legoAndroid/cssVars/declarations/onlyVariables.css +8 -5
  11. package/themes/legoAndroid/cssVars/declarations/onlyVariables.js +1 -1
  12. package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocal.css +8 -5
  13. package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -2
  14. package/themes/legoAndroid/cssVars/theme/fallbacks/index.css +8 -5
  15. package/themes/legoAndroid/cssVars/theme/fallbacks/index.less +8 -5
  16. package/themes/legoAndroid/cssVars/theme/fallbacks/index.pcss +8 -5
  17. package/themes/legoAndroid/cssVars/theme/fallbacks/index.scss +8 -5
  18. package/themes/legoAndroid/cssVars/theme/fallbacks/index.styl +8 -5
  19. package/themes/legoAndroid/cssVars/theme/index.js +1 -1
  20. package/themes/legoAndroid/cssVars/theme/index.json +19 -5
  21. package/themes/legoAndroid/docs.json +4 -328
  22. package/themes/legoAndroid/index.css +8 -5
  23. package/themes/legoAndroid/index.js +1 -1
  24. package/themes/legoAndroid/index.json +10 -5
  25. package/themes/legoAndroid/index.less +8 -5
  26. package/themes/legoAndroid/index.pcss +8 -5
  27. package/themes/legoAndroid/index.scss +8 -5
  28. package/themes/legoAndroid/index.styl +8 -5
  29. package/themes/legoAndroid/struct.json +10 -5
  30. package/themes/legoAndroidDark/cssVars/declarations/index.css +8 -5
  31. package/themes/legoAndroidDark/cssVars/declarations/noColors.css +2 -2
  32. package/themes/legoAndroidDark/cssVars/declarations/noSizes.css +8 -5
  33. package/themes/legoAndroidDark/cssVars/declarations/onlyColors.css +6 -3
  34. package/themes/legoAndroidDark/cssVars/declarations/onlyColors.js +1 -1
  35. package/themes/legoAndroidDark/cssVars/declarations/onlyVariables.css +8 -5
  36. package/themes/legoAndroidDark/cssVars/declarations/onlyVariables.js +1 -1
  37. package/themes/legoAndroidDark/cssVars/declarations/onlyVariablesLocal.css +8 -5
  38. package/themes/legoAndroidDark/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -2
  39. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.css +8 -5
  40. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.less +8 -5
  41. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.pcss +8 -5
  42. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.scss +8 -5
  43. package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.styl +8 -5
  44. package/themes/legoAndroidDark/cssVars/theme/index.js +1 -1
  45. package/themes/legoAndroidDark/cssVars/theme/index.json +19 -5
  46. package/themes/legoAndroidDark/docs.json +4 -328
  47. package/themes/legoAndroidDark/index.css +8 -5
  48. package/themes/legoAndroidDark/index.js +1 -1
  49. package/themes/legoAndroidDark/index.json +10 -5
  50. package/themes/legoAndroidDark/index.less +8 -5
  51. package/themes/legoAndroidDark/index.pcss +8 -5
  52. package/themes/legoAndroidDark/index.scss +8 -5
  53. package/themes/legoAndroidDark/index.styl +8 -5
  54. package/themes/legoAndroidDark/struct.json +10 -5
  55. package/themes/legoIOS/cssVars/declarations/index.css +8 -5
  56. package/themes/legoIOS/cssVars/declarations/noColors.css +2 -2
  57. package/themes/legoIOS/cssVars/declarations/noSizes.css +8 -5
  58. package/themes/legoIOS/cssVars/declarations/onlyColors.css +6 -3
  59. package/themes/legoIOS/cssVars/declarations/onlyColors.js +1 -1
  60. package/themes/legoIOS/cssVars/declarations/onlyVariables.css +8 -5
  61. package/themes/legoIOS/cssVars/declarations/onlyVariables.js +1 -1
  62. package/themes/legoIOS/cssVars/declarations/onlyVariablesLocal.css +8 -5
  63. package/themes/legoIOS/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -2
  64. package/themes/legoIOS/cssVars/theme/fallbacks/index.css +8 -5
  65. package/themes/legoIOS/cssVars/theme/fallbacks/index.less +8 -5
  66. package/themes/legoIOS/cssVars/theme/fallbacks/index.pcss +8 -5
  67. package/themes/legoIOS/cssVars/theme/fallbacks/index.scss +8 -5
  68. package/themes/legoIOS/cssVars/theme/fallbacks/index.styl +8 -5
  69. package/themes/legoIOS/cssVars/theme/index.js +1 -1
  70. package/themes/legoIOS/cssVars/theme/index.json +19 -5
  71. package/themes/legoIOS/docs.json +4 -0
  72. package/themes/legoIOS/index.css +8 -5
  73. package/themes/legoIOS/index.js +1 -1
  74. package/themes/legoIOS/index.json +10 -5
  75. package/themes/legoIOS/index.less +8 -5
  76. package/themes/legoIOS/index.pcss +8 -5
  77. package/themes/legoIOS/index.scss +8 -5
  78. package/themes/legoIOS/index.styl +8 -5
  79. package/themes/legoIOS/struct.json +10 -5
  80. package/themes/legoIOSDark/cssVars/declarations/index.css +8 -5
  81. package/themes/legoIOSDark/cssVars/declarations/noColors.css +2 -2
  82. package/themes/legoIOSDark/cssVars/declarations/noSizes.css +8 -5
  83. package/themes/legoIOSDark/cssVars/declarations/onlyColors.css +6 -3
  84. package/themes/legoIOSDark/cssVars/declarations/onlyColors.js +1 -1
  85. package/themes/legoIOSDark/cssVars/declarations/onlyVariables.css +8 -5
  86. package/themes/legoIOSDark/cssVars/declarations/onlyVariables.js +1 -1
  87. package/themes/legoIOSDark/cssVars/declarations/onlyVariablesLocal.css +8 -5
  88. package/themes/legoIOSDark/cssVars/declarations/onlyVariablesLocalIncremental.css +6 -2
  89. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.css +8 -5
  90. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.less +8 -5
  91. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.pcss +8 -5
  92. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.scss +8 -5
  93. package/themes/legoIOSDark/cssVars/theme/fallbacks/index.styl +8 -5
  94. package/themes/legoIOSDark/cssVars/theme/index.js +1 -1
  95. package/themes/legoIOSDark/cssVars/theme/index.json +19 -5
  96. package/themes/legoIOSDark/docs.json +4 -0
  97. package/themes/legoIOSDark/index.css +8 -5
  98. package/themes/legoIOSDark/index.js +1 -1
  99. package/themes/legoIOSDark/index.json +10 -5
  100. package/themes/legoIOSDark/index.less +8 -5
  101. package/themes/legoIOSDark/index.pcss +8 -5
  102. package/themes/legoIOSDark/index.scss +8 -5
  103. package/themes/legoIOSDark/index.styl +8 -5
  104. package/themes/legoIOSDark/struct.json +10 -5
@@ -219,8 +219,8 @@
219
219
  --vkui--animation_duration_s: 0.1s;
220
220
  --vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
221
221
  --vkui--animation_easing_platform: cubic-bezier(0.4, 0, 0.2, 1);
222
- --vkui--opacity_disable: 0.5;
223
- --vkui--opacity_disable_accessibility: 0.5;
222
+ --vkui--opacity_disable: 0.52;
223
+ --vkui--opacity_disable_accessibility: 0.52;
224
224
  --vkui--opacity_active: 0.72;
225
225
  --vkui--z_index_modal: 99;
226
226
  --vkui--z_index_popout: 100;
@@ -598,9 +598,9 @@
598
598
  --vkui--color_write_bar_input_border: #e1e3e6;
599
599
  --vkui--color_write_bar_input_border--hover: #D8DBDF;
600
600
  --vkui--color_write_bar_input_border--active: #CFD2D8;
601
- --vkui--color_write_bar_input_border_alpha: rgba(0, 0, 0, 0.08);
602
- --vkui--color_write_bar_input_border_alpha--hover: rgba(0, 0, 0, 0.12);
603
- --vkui--color_write_bar_input_border_alpha--active: rgba(0, 0, 0, 0.16);
601
+ --vkui--color_write_bar_input_border_alpha: #ddff00;
602
+ --vkui--color_write_bar_input_border_alpha--hover: #D4F502;
603
+ --vkui--color_write_bar_input_border_alpha--active: #CBEC05;
604
604
  --vkui--color_track_background: #e1e3e6;
605
605
  --vkui--color_track_background--hover: #D8DBDF;
606
606
  --vkui--color_track_background--active: #CFD2D8;
@@ -868,4 +868,7 @@
868
868
  --vkui--vkontakte_palette_black: #000000;
869
869
  --vkui--vkontakte_palette_black--hover: #000102;
870
870
  --vkui--vkontakte_palette_black--active: #000105;
871
+ --vkui--color_background_inverse: #262626;
872
+ --vkui--color_background_inverse--hover: #242527;
873
+ --vkui--color_background_inverse--active: #232428;
871
874
  }
@@ -111,8 +111,6 @@
111
111
  --vkui--size_button_large_height--compact: 44px;
112
112
  --vkui--size_base_padding_horizontal--regular: 16px;
113
113
  --vkui--size_base_padding_horizontal--compact: 16px;
114
- --vkui--opacity_disable: 0.5;
115
- --vkui--opacity_disable_accessibility: 0.5;
116
114
  --vkui--theme_inherits_from: 'vkontakteAndroid';
117
115
  --vkui--font_label1--font_size--regular: 19px;
118
116
  --vkui--font_label1--line_height--regular: 20px;
@@ -296,7 +294,13 @@
296
294
  --vkui--color_skeleton_to: #ebebeb;
297
295
  --vkui--color_skeleton_to--hover: #E2E2E4;
298
296
  --vkui--color_skeleton_to--active: #D8D9DD;
297
+ --vkui--color_write_bar_input_border_alpha: #ddff00;
298
+ --vkui--color_write_bar_input_border_alpha--hover: #D4F502;
299
+ --vkui--color_write_bar_input_border_alpha--active: #CBEC05;
299
300
  --vkui--color_transparent: #00000000;
300
301
  --vkui--color_transparent--hover: rgba(0, 0, 0, 0.04);
301
302
  --vkui--color_transparent--active: rgba(0, 0, 0, 0.08);
303
+ --vkui--color_background_inverse: #262626;
304
+ --vkui--color_background_inverse--hover: #242527;
305
+ --vkui--color_background_inverse--active: #232428;
302
306
  }
@@ -219,8 +219,8 @@
219
219
  --vkui--animation_duration_s: var(--vkui--animation_duration_s, 0.1s);
220
220
  --vkui--animation_easing_default: var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
221
221
  --vkui--animation_easing_platform: var(--vkui--animation_easing_platform, cubic-bezier(0.4, 0, 0.2, 1));
222
- --vkui--opacity_disable: var(--vkui--opacity_disable, 0.5);
223
- --vkui--opacity_disable_accessibility: var(--vkui--opacity_disable_accessibility, 0.5);
222
+ --vkui--opacity_disable: var(--vkui--opacity_disable, 0.52);
223
+ --vkui--opacity_disable_accessibility: var(--vkui--opacity_disable_accessibility, 0.52);
224
224
  --vkui--opacity_active: var(--vkui--opacity_active, 0.72);
225
225
  --vkui--z_index_modal: var(--vkui--z_index_modal, 99);
226
226
  --vkui--z_index_popout: var(--vkui--z_index_popout, 100);
@@ -598,9 +598,9 @@
598
598
  --vkui--color_write_bar_input_border: var(--vkui--color_write_bar_input_border, #e1e3e6);
599
599
  --vkui--color_write_bar_input_border--hover: var(--vkui--color_write_bar_input_border--hover, #D8DBDF);
600
600
  --vkui--color_write_bar_input_border--active: var(--vkui--color_write_bar_input_border--active, #CFD2D8);
601
- --vkui--color_write_bar_input_border_alpha: var(--vkui--color_write_bar_input_border_alpha, rgba(0, 0, 0, 0.08));
602
- --vkui--color_write_bar_input_border_alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, rgba(0, 0, 0, 0.12));
603
- --vkui--color_write_bar_input_border_alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, rgba(0, 0, 0, 0.16));
601
+ --vkui--color_write_bar_input_border_alpha: var(--vkui--color_write_bar_input_border_alpha, #ddff00);
602
+ --vkui--color_write_bar_input_border_alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, #D4F502);
603
+ --vkui--color_write_bar_input_border_alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, #CBEC05);
604
604
  --vkui--color_track_background: var(--vkui--color_track_background, #e1e3e6);
605
605
  --vkui--color_track_background--hover: var(--vkui--color_track_background--hover, #D8DBDF);
606
606
  --vkui--color_track_background--active: var(--vkui--color_track_background--active, #CFD2D8);
@@ -868,6 +868,9 @@
868
868
  --vkui--vkontakte_palette_black: var(--vkui--vkontakte_palette_black, #000000);
869
869
  --vkui--vkontakte_palette_black--hover: var(--vkui--vkontakte_palette_black--hover, #000102);
870
870
  --vkui--vkontakte_palette_black--active: var(--vkui--vkontakte_palette_black--active, #000105);
871
+ --vkui--color_background_inverse: var(--vkui--color_background_inverse, #262626);
872
+ --vkui--color_background_inverse--hover: var(--vkui--color_background_inverse--hover, #242527);
873
+ --vkui--color_background_inverse--active: var(--vkui--color_background_inverse--active, #232428);
871
874
  }
872
875
 
873
876
  .vkui--font_display_title1--regular {
@@ -115,8 +115,8 @@
115
115
  @animation-duration-s: var(--vkui--animation_duration_s, 0.1s);
116
116
  @animation-easing-default: var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
117
117
  @animation-easing-platform: var(--vkui--animation_easing_platform, cubic-bezier(0.4, 0, 0.2, 1));
118
- @opacity-disable: var(--vkui--opacity_disable, 0.5);
119
- @opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.5);
118
+ @opacity-disable: var(--vkui--opacity_disable, 0.52);
119
+ @opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.52);
120
120
  @opacity-active: var(--vkui--opacity_active, 0.72);
121
121
  @z-index-modal: var(--vkui--z_index_modal, 99);
122
122
  @z-index-popout: var(--vkui--z_index_popout, 100);
@@ -475,9 +475,9 @@
475
475
  @color-write-bar-input-border: var(--vkui--color_write_bar_input_border, #e1e3e6);
476
476
  @color-write-bar-input-border--hover: var(--vkui--color_write_bar_input_border--hover, #D8DBDF);
477
477
  @color-write-bar-input-border--active: var(--vkui--color_write_bar_input_border--active, #CFD2D8);
478
- @color-write-bar-input-border-alpha: var(--vkui--color_write_bar_input_border_alpha, rgba(0, 0, 0, 0.08));
479
- @color-write-bar-input-border-alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, rgba(0, 0, 0, 0.12));
480
- @color-write-bar-input-border-alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, rgba(0, 0, 0, 0.16));
478
+ @color-write-bar-input-border-alpha: var(--vkui--color_write_bar_input_border_alpha, #ddff00);
479
+ @color-write-bar-input-border-alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, #D4F502);
480
+ @color-write-bar-input-border-alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, #CBEC05);
481
481
  @color-track-background: var(--vkui--color_track_background, #e1e3e6);
482
482
  @color-track-background--hover: var(--vkui--color_track_background--hover, #D8DBDF);
483
483
  @color-track-background--active: var(--vkui--color_track_background--active, #CFD2D8);
@@ -745,6 +745,9 @@
745
745
  @vkontakte-palette-black: var(--vkui--vkontakte_palette_black, #000000);
746
746
  @vkontakte-palette-black--hover: var(--vkui--vkontakte_palette_black--hover, #000102);
747
747
  @vkontakte-palette-black--active: var(--vkui--vkontakte_palette_black--active, #000105);
748
+ @color-background-inverse: var(--vkui--color_background_inverse, #262626);
749
+ @color-background-inverse--hover: var(--vkui--color_background_inverse--hover, #242527);
750
+ @color-background-inverse--active: var(--vkui--color_background_inverse--active, #232428);
748
751
 
749
752
 
750
753
  .font-display-title1--regular {
@@ -116,8 +116,8 @@
116
116
  --animation-duration-s: var(--vkui--animation_duration_s, 0.1s);
117
117
  --animation-easing-default: var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
118
118
  --animation-easing-platform: var(--vkui--animation_easing_platform, cubic-bezier(0.4, 0, 0.2, 1));
119
- --opacity-disable: var(--vkui--opacity_disable, 0.5);
120
- --opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.5);
119
+ --opacity-disable: var(--vkui--opacity_disable, 0.52);
120
+ --opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.52);
121
121
  --opacity-active: var(--vkui--opacity_active, 0.72);
122
122
  --z-index-modal: var(--vkui--z_index_modal, 99);
123
123
  --z-index-popout: var(--vkui--z_index_popout, 100);
@@ -476,9 +476,9 @@
476
476
  --color-write-bar-input-border: var(--vkui--color_write_bar_input_border, #e1e3e6);
477
477
  --color-write-bar-input-border--hover: var(--vkui--color_write_bar_input_border--hover, #D8DBDF);
478
478
  --color-write-bar-input-border--active: var(--vkui--color_write_bar_input_border--active, #CFD2D8);
479
- --color-write-bar-input-border-alpha: var(--vkui--color_write_bar_input_border_alpha, rgba(0, 0, 0, 0.08));
480
- --color-write-bar-input-border-alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, rgba(0, 0, 0, 0.12));
481
- --color-write-bar-input-border-alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, rgba(0, 0, 0, 0.16));
479
+ --color-write-bar-input-border-alpha: var(--vkui--color_write_bar_input_border_alpha, #ddff00);
480
+ --color-write-bar-input-border-alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, #D4F502);
481
+ --color-write-bar-input-border-alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, #CBEC05);
482
482
  --color-track-background: var(--vkui--color_track_background, #e1e3e6);
483
483
  --color-track-background--hover: var(--vkui--color_track_background--hover, #D8DBDF);
484
484
  --color-track-background--active: var(--vkui--color_track_background--active, #CFD2D8);
@@ -746,6 +746,9 @@
746
746
  --vkontakte-palette-black: var(--vkui--vkontakte_palette_black, #000000);
747
747
  --vkontakte-palette-black--hover: var(--vkui--vkontakte_palette_black--hover, #000102);
748
748
  --vkontakte-palette-black--active: var(--vkui--vkontakte_palette_black--active, #000105);
749
+ --color-background-inverse: var(--vkui--color_background_inverse, #262626);
750
+ --color-background-inverse--hover: var(--vkui--color_background_inverse--hover, #242527);
751
+ --color-background-inverse--active: var(--vkui--color_background_inverse--active, #232428);
749
752
  }
750
753
 
751
754
  %font-display-title1--regular {
@@ -115,8 +115,8 @@ $animation-duration-m: var(--vkui--animation_duration_m, 0.2s);
115
115
  $animation-duration-s: var(--vkui--animation_duration_s, 0.1s);
116
116
  $animation-easing-default: var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
117
117
  $animation-easing-platform: var(--vkui--animation_easing_platform, cubic-bezier(0.4, 0, 0.2, 1));
118
- $opacity-disable: var(--vkui--opacity_disable, 0.5);
119
- $opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.5);
118
+ $opacity-disable: var(--vkui--opacity_disable, 0.52);
119
+ $opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.52);
120
120
  $opacity-active: var(--vkui--opacity_active, 0.72);
121
121
  $z-index-modal: var(--vkui--z_index_modal, 99);
122
122
  $z-index-popout: var(--vkui--z_index_popout, 100);
@@ -475,9 +475,9 @@ $color-write-bar-input-background--active: var(--vkui--color_write_bar_input_bac
475
475
  $color-write-bar-input-border: var(--vkui--color_write_bar_input_border, #e1e3e6);
476
476
  $color-write-bar-input-border--hover: var(--vkui--color_write_bar_input_border--hover, #D8DBDF);
477
477
  $color-write-bar-input-border--active: var(--vkui--color_write_bar_input_border--active, #CFD2D8);
478
- $color-write-bar-input-border-alpha: var(--vkui--color_write_bar_input_border_alpha, rgba(0, 0, 0, 0.08));
479
- $color-write-bar-input-border-alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, rgba(0, 0, 0, 0.12));
480
- $color-write-bar-input-border-alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, rgba(0, 0, 0, 0.16));
478
+ $color-write-bar-input-border-alpha: var(--vkui--color_write_bar_input_border_alpha, #ddff00);
479
+ $color-write-bar-input-border-alpha--hover: var(--vkui--color_write_bar_input_border_alpha--hover, #D4F502);
480
+ $color-write-bar-input-border-alpha--active: var(--vkui--color_write_bar_input_border_alpha--active, #CBEC05);
481
481
  $color-track-background: var(--vkui--color_track_background, #e1e3e6);
482
482
  $color-track-background--hover: var(--vkui--color_track_background--hover, #D8DBDF);
483
483
  $color-track-background--active: var(--vkui--color_track_background--active, #CFD2D8);
@@ -745,6 +745,9 @@ $vkontakte-stories-skeleton-loader-background--active: var(--vkui--vkontakte_sto
745
745
  $vkontakte-palette-black: var(--vkui--vkontakte_palette_black, #000000);
746
746
  $vkontakte-palette-black--hover: var(--vkui--vkontakte_palette_black--hover, #000102);
747
747
  $vkontakte-palette-black--active: var(--vkui--vkontakte_palette_black--active, #000105);
748
+ $color-background-inverse: var(--vkui--color_background_inverse, #262626);
749
+ $color-background-inverse--hover: var(--vkui--color_background_inverse--hover, #242527);
750
+ $color-background-inverse--active: var(--vkui--color_background_inverse--active, #232428);
748
751
 
749
752
 
750
753
  @mixin font-display-title1--regular() {
@@ -115,8 +115,8 @@ $animation-duration-m = var(--vkui--animation_duration_m, 0.2s);
115
115
  $animation-duration-s = var(--vkui--animation_duration_s, 0.1s);
116
116
  $animation-easing-default = var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
117
117
  $animation-easing-platform = var(--vkui--animation_easing_platform, cubic-bezier(0.4, 0, 0.2, 1));
118
- $opacity-disable = var(--vkui--opacity_disable, 0.5);
119
- $opacity-disable-accessibility = var(--vkui--opacity_disable_accessibility, 0.5);
118
+ $opacity-disable = var(--vkui--opacity_disable, 0.52);
119
+ $opacity-disable-accessibility = var(--vkui--opacity_disable_accessibility, 0.52);
120
120
  $opacity-active = var(--vkui--opacity_active, 0.72);
121
121
  $z-index-modal = var(--vkui--z_index_modal, 99);
122
122
  $z-index-popout = var(--vkui--z_index_popout, 100);
@@ -475,9 +475,9 @@ $color-write-bar-input-background--active = var(--vkui--color_write_bar_input_ba
475
475
  $color-write-bar-input-border = var(--vkui--color_write_bar_input_border, #e1e3e6);
476
476
  $color-write-bar-input-border--hover = var(--vkui--color_write_bar_input_border--hover, #D8DBDF);
477
477
  $color-write-bar-input-border--active = var(--vkui--color_write_bar_input_border--active, #CFD2D8);
478
- $color-write-bar-input-border-alpha = var(--vkui--color_write_bar_input_border_alpha, rgba(0, 0, 0, 0.08));
479
- $color-write-bar-input-border-alpha--hover = var(--vkui--color_write_bar_input_border_alpha--hover, rgba(0, 0, 0, 0.12));
480
- $color-write-bar-input-border-alpha--active = var(--vkui--color_write_bar_input_border_alpha--active, rgba(0, 0, 0, 0.16));
478
+ $color-write-bar-input-border-alpha = var(--vkui--color_write_bar_input_border_alpha, #ddff00);
479
+ $color-write-bar-input-border-alpha--hover = var(--vkui--color_write_bar_input_border_alpha--hover, #D4F502);
480
+ $color-write-bar-input-border-alpha--active = var(--vkui--color_write_bar_input_border_alpha--active, #CBEC05);
481
481
  $color-track-background = var(--vkui--color_track_background, #e1e3e6);
482
482
  $color-track-background--hover = var(--vkui--color_track_background--hover, #D8DBDF);
483
483
  $color-track-background--active = var(--vkui--color_track_background--active, #CFD2D8);
@@ -745,6 +745,9 @@ $vkontakte-stories-skeleton-loader-background--active = var(--vkui--vkontakte_st
745
745
  $vkontakte-palette-black = var(--vkui--vkontakte_palette_black, #000000);
746
746
  $vkontakte-palette-black--hover = var(--vkui--vkontakte_palette_black--hover, #000102);
747
747
  $vkontakte-palette-black--active = var(--vkui--vkontakte_palette_black--active, #000105);
748
+ $color-background-inverse = var(--vkui--color_background_inverse, #262626);
749
+ $color-background-inverse--hover = var(--vkui--color_background_inverse--hover, #242527);
750
+ $color-background-inverse--active = var(--vkui--color_background_inverse--active, #232428);
748
751
 
749
752
 
750
753
  font-display-title1--regular() {