@taiga-ui/design-tokens 0.140.0 → 0.141.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 (7) hide show
  1. package/angular/desktop.less +32 -0
  2. package/angular/mobile.less +32 -0
  3. package/package.json +1 -1
  4. package/palette/dark.css +16 -0
  5. package/palette/light.css +16 -0
  6. package/palette/mobile/dark.css +16 -0
  7. package/palette/mobile/light.css +16 -0
package/angular/desktop.less CHANGED
@@ -184,13 +184,16 @@
184
184
  --tui-const-yellow-darker-88: #FFF5C2;
185
185
  --tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
186
186
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
187
+ --tui-const-yellow-darker-50: #FAA805; // hsL=50
187
188
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
188
189
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
189
190
  --tui-const-yellow-darker-32: #806925; // hsL=32
190
191
  --tui-const-yellow-darker-26: #614F23; // hsL=26
191
192
  --tui-const-yellow-alpha-14: #FFDD2D24; // 14% opacity
192
193
  --tui-const-yellow-alpha-24: #FFDD2D3D; // 24% opacity
194
+ --tui-const-yellow-alpha-28: #FFDD2D47; // 28% opacity
193
195
  --tui-const-yellow-alpha-30: #FFDD2D4D; // 30% opacity
196
+ --tui-const-yellow-alpha-32: #FFDD2D52; // 32% opacity
194
197
  --tui-const-yellow-alpha-40: #FFDD2D66; // 40% opacity
195
198
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
196
199
  --tui-const-green-lighter-64: #94D274; // hsL=64
@@ -208,6 +211,8 @@
208
211
  --tui-const-green-alpha-44: #00B92D70; // 44% opacity
209
212
  --tui-const-blue: #428BF9; // N8
210
213
  --tui-const-blue-lighter-70: #6BA4FA; // @Deprecated: Заменён на цвет blue-darker-70
214
+ --tui-const-blue-darker-74: #7FB0FB; // hsL=74
215
+ --tui-const-blue-darker-72: #75AAFA; // hsL=72
211
216
  --tui-const-blue-darker-70: #6BA4FA; // hsL=70
212
217
  --tui-const-blue-darker-52: #126DF7; // hsL=52
213
218
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
@@ -220,6 +225,9 @@
220
225
  --tui-const-blue-alpha-16: #428BF929; // 16% opacity
221
226
  --tui-const-blue-alpha-20: #428BF933; // 16% opacity
222
227
  --tui-const-blue-alpha-24: #428BF93D; // 24% opacity
228
+ --tui-const-blue-alpha-32: #428BF952; // 32% opacity
229
+ --tui-const-blue-alpha-38: #428BF961; // 38% opacity
230
+ --tui-const-blue-alpha-44: #428BF970; // 44% opacity
223
231
  --tui-const-blue-alpha-64: #428BF9A3; // 64% opacity
224
232
  --tui-const-dark-blue-alpha-6: #244A7F0F; // 6% opacity
225
233
  --tui-const-dark-blue-alpha-8: #244A7F14; // 8% opacity
@@ -419,6 +427,9 @@
419
427
  --tui-status-warning-pale: var(--tui-const-yellow-alpha-14); // Контейнеры предупреждающих блоков
420
428
  --tui-status-warning-pale-hover: var(--tui-const-yellow-alpha-40); // Только для веба. Контейнеры предупреждающих блоков при наведении
421
429
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-alpha-48); // Нажатое состояние контейнера предупреждающих блоков
430
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); // Контейнеры предупреждающих блоков на тёмных фонах
431
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); // Контейнеры предупреждающих блоков на тёмных фонах
432
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); // Контейнеры предупреждающих блоков на тёмных фонах
422
433
  --tui-status-positive-pale: var(--tui-const-green-alpha-16); // Контейнеры позитивных блоков
423
434
  --tui-status-positive-pale-hover: var(--tui-const-green-alpha-24); // Только для веба. Контейнеры позитивных блоков при наведении
424
435
  --tui-status-positive-pale-pressed: var(--tui-const-green-alpha-32); // Нажатое состояние positive в iOS
@@ -434,6 +445,9 @@
434
445
  --tui-status-info-pale: var(--tui-const-blue-alpha-16); // Контейнеры информационных блоков
435
446
  --tui-status-info-pale-hover: var(--tui-const-blue-alpha-24); // Только для веба. Контейнеры информационных блоков при наведении
436
447
  --tui-status-info-pale-pressed: var(--tui-const-blue-alpha-24); // Контейнеры информационных блоков при нажатии
448
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); // Контейнеры информационных блоков на тёмных фонах
449
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); // Контейнеры информационных блоков на тёмных фонах
450
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); // Контейнеры информационных блоков на тёмных фонах
437
451
  --tui-status-neutral: var(--tui-const-cool-gray-lighter-51); // Акцентный цвет для нейтральных фонах
438
452
  --tui-status-neutral-pale: var(--tui-const-cool-gray-alpha-8); // Фоновый контейнер нейтральных статусных блоков
439
453
  --tui-status-neutral-pale-hover: var(--tui-const-cool-gray-alpha-12); // Фоновый контейнер нейтральных статусных блоков при наведении
@@ -486,6 +500,7 @@
486
500
  --tui-text-action: var(--tui-const-blue-darker-52); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
487
501
  --tui-text-action-hover: var(--tui-const-blue-darker-46); // Только для веба. Состояние текста при наведении
488
502
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
503
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-74); // Текст и иконки интерактивного текста на тёмных фонах
489
504
  --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
490
505
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
491
506
  --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
@@ -498,6 +513,7 @@
498
513
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
499
514
  --tui-text-warning: var(--tui-const-yellow-darker-48); // Предупреждающие текст и иконки
500
515
  --tui-text-warning-hover: var(--tui-const-yellow-darker-26); // Предупреждающие текст и иконки при наведении на вебе
516
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки на тёмных фонах
501
517
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
502
518
  --tui-shadow-small: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); // Тень для мелких элементов интерфейса, например Chips
503
519
  --tui-shadow-small-hover: 0px 14px 42px 0px rgba(0, 0, 0, 0.14);
@@ -691,13 +707,16 @@
691
707
  --tui-const-yellow-darker-88: #FFF5C2;
692
708
  --tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
693
709
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
710
+ --tui-const-yellow-darker-50: #FAA805; // hsL=50
694
711
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
695
712
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
696
713
  --tui-const-yellow-darker-32: #806925; // hsL=32
697
714
  --tui-const-yellow-darker-26: #614F23; // hsL=26
698
715
  --tui-const-yellow-alpha-14: #FFDD2D24; // 14% opacity
699
716
  --tui-const-yellow-alpha-24: #FFDD2D3D; // 24% opacity
717
+ --tui-const-yellow-alpha-28: #FFDD2D47; // 28% opacity
700
718
  --tui-const-yellow-alpha-30: #FFDD2D4D; // 30% opacity
719
+ --tui-const-yellow-alpha-32: #FFDD2D52; // 32% opacity
701
720
  --tui-const-yellow-alpha-40: #FFDD2D66; // 40% opacity
702
721
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
703
722
  --tui-const-green-lighter-64: #94D274; // hsL=64
@@ -715,6 +734,8 @@
715
734
  --tui-const-green-alpha-44: #00B92D70; // 44% opacity
716
735
  --tui-const-blue: #428BF9; // N8
717
736
  --tui-const-blue-lighter-70: #6BA4FA; // @Deprecated: Заменён на цвет blue-darker-70
737
+ --tui-const-blue-darker-74: #7FB0FB; // hsL=74
738
+ --tui-const-blue-darker-72: #75AAFA; // hsL=72
718
739
  --tui-const-blue-darker-70: #6BA4FA; // hsL=70
719
740
  --tui-const-blue-darker-52: #126DF7; // hsL=52
720
741
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
@@ -727,6 +748,9 @@
727
748
  --tui-const-blue-alpha-16: #428BF929; // 16% opacity
728
749
  --tui-const-blue-alpha-20: #428BF933; // 16% opacity
729
750
  --tui-const-blue-alpha-24: #428BF93D; // 24% opacity
751
+ --tui-const-blue-alpha-32: #428BF952; // 32% opacity
752
+ --tui-const-blue-alpha-38: #428BF961; // 38% opacity
753
+ --tui-const-blue-alpha-44: #428BF970; // 44% opacity
730
754
  --tui-const-blue-alpha-64: #428BF9A3; // 64% opacity
731
755
  --tui-const-dark-blue-alpha-6: #244A7F0F; // 6% opacity
732
756
  --tui-const-dark-blue-alpha-8: #244A7F14; // 8% opacity
@@ -926,6 +950,9 @@
926
950
  --tui-status-warning-pale: var(--tui-const-yellow-darker-26); // Контейнеры предупреждающих блоков
927
951
  --tui-status-warning-pale-hover: var(--tui-const-yellow-darker-32); // Только для веба. Контейнеры предупреждающих блоков при наведении
928
952
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-darker-32); // Нажатое состояние контейнера предупреждающих блоков
953
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); // Контейнеры предупреждающих блоков на тёмных фонах
954
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); // Контейнеры предупреждающих блоков на тёмных фонах
955
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); // Контейнеры предупреждающих блоков на тёмных фонах
929
956
  --tui-status-positive-pale: var(--tui-const-green-darker-18); // Контейнеры позитивных блоков
930
957
  --tui-status-positive-pale-hover: var(--tui-const-green-darker-21); // Только для веба. Контейнеры позитивных блоков при наведении
931
958
  --tui-status-positive-pale-pressed: var(--tui-const-green-darker-21); // Нажатое состояние positive в iOS
@@ -941,6 +968,9 @@
941
968
  --tui-status-info-pale: var(--tui-const-blue-darker-25); // Контейнеры информационных блоков
942
969
  --tui-status-info-pale-hover: var(--tui-const-blue-darker-32); // Только для веба. Контейнеры информационных блоков при наведении
943
970
  --tui-status-info-pale-pressed: var(--tui-const-blue-darker-32); // Контейнеры информационных блоков при нажатии
971
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); // Контейнеры информационных блоков на тёмных фонах
972
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); // Контейнеры информационных блоков на тёмных фонах
973
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); // Контейнеры информационных блоков на тёмных фонах
944
974
  --tui-status-neutral: var(--tui-const-cool-gray-lighter-61); // Акцентный цвет для нейтральных фонах
945
975
  --tui-status-neutral-pale: var(--tui-const-white-alpha-15); // Фоновый контейнер нейтральных статусных блоков
946
976
  --tui-status-neutral-pale-hover: var(--tui-const-white-alpha-25); // Фоновый контейнер нейтральных статусных блоков при наведении
@@ -993,6 +1023,7 @@
993
1023
  --tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
994
1024
  --tui-text-action-hover: var(--tui-const-blue-darker-52); // Только для веба. Состояние текста при наведении
995
1025
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
1026
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-74); // Текст и иконки интерактивного текста на тёмных фонах
996
1027
  --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
997
1028
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
998
1029
  --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
@@ -1005,5 +1036,6 @@
1005
1036
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
1006
1037
  --tui-text-warning: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки
1007
1038
  --tui-text-warning-hover: var(--tui-const-yellow-darker-38); // Предупреждающие текст и иконки при наведении на вебе
1039
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки на тёмных фонах
1008
1040
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
1009
1041
  }
package/angular/mobile.less CHANGED
@@ -167,13 +167,16 @@
167
167
  --tui-const-yellow-darker-88: #FFF5C2;
168
168
  --tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
169
169
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
170
+ --tui-const-yellow-darker-50: #FAA805; // hsL=50
170
171
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
171
172
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
172
173
  --tui-const-yellow-darker-32: #806925; // hsL=32
173
174
  --tui-const-yellow-darker-26: #614F23; // hsL=26
174
175
  --tui-const-yellow-alpha-14: #FFDD2D24; // 14% opacity
175
176
  --tui-const-yellow-alpha-24: #FFDD2D3D; // 24% opacity
177
+ --tui-const-yellow-alpha-28: #FFDD2D47; // 28% opacity
176
178
  --tui-const-yellow-alpha-30: #FFDD2D4D; // 30% opacity
179
+ --tui-const-yellow-alpha-32: #FFDD2D52; // 32% opacity
177
180
  --tui-const-yellow-alpha-40: #FFDD2D66; // 40% opacity
178
181
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
179
182
  --tui-const-green-lighter-64: #94D274; // hsL=64
@@ -191,6 +194,8 @@
191
194
  --tui-const-green-alpha-44: #00B92D70; // 44% opacity
192
195
  --tui-const-blue: #428BF9; // N8
193
196
  --tui-const-blue-lighter-70: #6BA4FA; // @Deprecated: Заменён на цвет blue-darker-70
197
+ --tui-const-blue-darker-74: #7FB0FB; // hsL=74
198
+ --tui-const-blue-darker-72: #75AAFA; // hsL=72
194
199
  --tui-const-blue-darker-70: #6BA4FA; // hsL=70
195
200
  --tui-const-blue-darker-52: #126DF7; // hsL=52
196
201
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
@@ -203,6 +208,9 @@
203
208
  --tui-const-blue-alpha-16: #428BF929; // 16% opacity
204
209
  --tui-const-blue-alpha-20: #428BF933; // 16% opacity
205
210
  --tui-const-blue-alpha-24: #428BF93D; // 24% opacity
211
+ --tui-const-blue-alpha-32: #428BF952; // 32% opacity
212
+ --tui-const-blue-alpha-38: #428BF961; // 38% opacity
213
+ --tui-const-blue-alpha-44: #428BF970; // 44% opacity
206
214
  --tui-const-blue-alpha-64: #428BF9A3; // 64% opacity
207
215
  --tui-const-dark-blue-alpha-6: #244A7F0F; // 6% opacity
208
216
  --tui-const-dark-blue-alpha-8: #244A7F14; // 8% opacity
@@ -399,6 +407,9 @@
399
407
  --tui-service-underline-on-dark: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы
400
408
  --tui-status-warning-pale: var(--tui-const-yellow-darker-26); // Контейнеры предупреждающих блоков
401
409
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-darker-32); // Нажатое состояние контейнера предупреждающих блоков
410
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); // Контейнеры предупреждающих блоков на тёмных фонах
411
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); // Контейнеры предупреждающих блоков на тёмных фонах
412
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); // Контейнеры предупреждающих блоков на тёмных фонах
402
413
  --tui-status-positive-pale: var(--tui-const-green-darker-18); // Контейнеры позитивных блоков
403
414
  --tui-status-positive-pale-pressed: var(--tui-const-green-darker-21); // Нажатое состояние positive в iOS
404
415
  --tui-status-positive-pale-on-dark: var(--tui-const-green-alpha-32); // Контейнеры позитивных блоков на тёмных фонах, не меняются от темы
@@ -409,6 +420,9 @@
409
420
  --tui-status-negative-pale-on-dark-pressed: var(--tui-const-red-alpha-44); // Нажатое состояние negative-pale-on-dark
410
421
  --tui-status-info-pale: var(--tui-const-blue-darker-25); // Контейнеры информационных блоков
411
422
  --tui-status-info-pale-pressed: var(--tui-const-blue-darker-32); // Контейнеры информационных блоков при нажатии
423
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); // Контейнеры информационных блоков на тёмных фонах
424
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); // Контейнеры информационных блоков на тёмных фонах
425
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); // Контейнеры информационных блоков на тёмных фонах
412
426
  --tui-status-neutral: var(--tui-const-white-alpha-50); // Акцентный цвет для нейтральных фонах
413
427
  --tui-status-neutral-pale: var(--tui-const-white-alpha-15); // Фоновый контейнер нейтральных статусных блоков
414
428
  --tui-status-neutral-pale-pressed: var(--tui-const-white-alpha-30); // Фоновый контейнер нейтральных статусных блоков при нажатии
@@ -456,6 +470,7 @@
456
470
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-30); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
457
471
  --tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
458
472
  --tui-text-action-pressed: var(--tui-const-blue-darker-46); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
473
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-72); // Текст и иконки интерактивного текста на тёмных фонах
459
474
  --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
460
475
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
461
476
  --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
@@ -465,6 +480,7 @@
465
480
  --tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
466
481
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-65); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
467
482
  --tui-text-warning: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки
483
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки на тёмных фонах
468
484
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
469
485
  }
470
486
 
@@ -639,13 +655,16 @@
639
655
  --tui-const-yellow-darker-88: #FFF5C2;
640
656
  --tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
641
657
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
658
+ --tui-const-yellow-darker-50: #FAA805; // hsL=50
642
659
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
643
660
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
644
661
  --tui-const-yellow-darker-32: #806925; // hsL=32
645
662
  --tui-const-yellow-darker-26: #614F23; // hsL=26
646
663
  --tui-const-yellow-alpha-14: #FFDD2D24; // 14% opacity
647
664
  --tui-const-yellow-alpha-24: #FFDD2D3D; // 24% opacity
665
+ --tui-const-yellow-alpha-28: #FFDD2D47; // 28% opacity
648
666
  --tui-const-yellow-alpha-30: #FFDD2D4D; // 30% opacity
667
+ --tui-const-yellow-alpha-32: #FFDD2D52; // 32% opacity
649
668
  --tui-const-yellow-alpha-40: #FFDD2D66; // 40% opacity
650
669
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
651
670
  --tui-const-green-lighter-64: #94D274; // hsL=64
@@ -663,6 +682,8 @@
663
682
  --tui-const-green-alpha-44: #00B92D70; // 44% opacity
664
683
  --tui-const-blue: #428BF9; // N8
665
684
  --tui-const-blue-lighter-70: #6BA4FA; // @Deprecated: Заменён на цвет blue-darker-70
685
+ --tui-const-blue-darker-74: #7FB0FB; // hsL=74
686
+ --tui-const-blue-darker-72: #75AAFA; // hsL=72
666
687
  --tui-const-blue-darker-70: #6BA4FA; // hsL=70
667
688
  --tui-const-blue-darker-52: #126DF7; // hsL=52
668
689
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
@@ -675,6 +696,9 @@
675
696
  --tui-const-blue-alpha-16: #428BF929; // 16% opacity
676
697
  --tui-const-blue-alpha-20: #428BF933; // 16% opacity
677
698
  --tui-const-blue-alpha-24: #428BF93D; // 24% opacity
699
+ --tui-const-blue-alpha-32: #428BF952; // 32% opacity
700
+ --tui-const-blue-alpha-38: #428BF961; // 38% opacity
701
+ --tui-const-blue-alpha-44: #428BF970; // 44% opacity
678
702
  --tui-const-blue-alpha-64: #428BF9A3; // 64% opacity
679
703
  --tui-const-dark-blue-alpha-6: #244A7F0F; // 6% opacity
680
704
  --tui-const-dark-blue-alpha-8: #244A7F14; // 8% opacity
@@ -871,6 +895,9 @@
871
895
  --tui-service-underline-on-dark: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы
872
896
  --tui-status-warning-pale: var(--tui-const-yellow-alpha-30); // Контейнеры предупреждающих блоков
873
897
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-alpha-48); // Нажатое состояние контейнера предупреждающих блоков
898
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); // Контейнеры предупреждающих блоков на тёмных фонах
899
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); // Контейнеры предупреждающих блоков на тёмных фонах
900
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); // Контейнеры предупреждающих блоков на тёмных фонах
874
901
  --tui-status-positive-pale: var(--tui-const-green-alpha-16); // Контейнеры позитивных блоков
875
902
  --tui-status-positive-pale-pressed: var(--tui-const-green-alpha-32); // Нажатое состояние positive в iOS
876
903
  --tui-status-positive-pale-on-dark: var(--tui-const-green-alpha-32); // Контейнеры позитивных блоков на тёмных фонах, не меняются от темы
@@ -881,6 +908,9 @@
881
908
  --tui-status-negative-pale-on-dark-pressed: var(--tui-const-red-alpha-44); // Нажатое состояние negative-pale-on-dark
882
909
  --tui-status-info-pale: var(--tui-const-blue-alpha-16); // Контейнеры информационных блоков
883
910
  --tui-status-info-pale-pressed: var(--tui-const-blue-alpha-24); // Контейнеры информационных блоков при нажатии
911
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); // Контейнеры информационных блоков на тёмных фонах
912
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); // Контейнеры информационных блоков на тёмных фонах
913
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); // Контейнеры информационных блоков на тёмных фонах
884
914
  --tui-status-neutral: var(--tui-const-cool-gray-alpha-44); // Акцентный цвет для нейтральных фонах
885
915
  --tui-status-neutral-pale: var(--tui-const-cool-gray-alpha-8); // Фоновый контейнер нейтральных статусных блоков
886
916
  --tui-status-neutral-pale-pressed: var(--tui-const-cool-gray-alpha-18); // Фоновый контейнер нейтральных статусных блоков при нажатии
@@ -928,6 +958,7 @@
928
958
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-30); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
929
959
  --tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
930
960
  --tui-text-action-pressed: var(--tui-const-blue-darker-46); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
961
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-72); // Текст и иконки интерактивного текста на тёмных фонах
931
962
  --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
932
963
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
933
964
  --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
@@ -937,5 +968,6 @@
937
968
  --tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
938
969
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-65); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
939
970
  --tui-text-warning: var(--tui-const-yellow-darker-48); // Предупреждающие текст и иконки
971
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки на тёмных фонах
940
972
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
941
973
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/design-tokens",
3
- "version": "0.140.0",
3
+ "version": "0.141.0",
4
4
  "description": "Taiga UI palette",
5
5
  "keywords": [
6
6
  "angular",
package/palette/dark.css CHANGED
@@ -183,13 +183,16 @@
183
183
  --tui-const-yellow-darker-88: #FFF5C2;
184
184
  --tui-const-yellow-darker-60: #FFCD33; /* N9 pressed, hsL=60 */
185
185
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
186
+ --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
186
187
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
187
188
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
188
189
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
189
190
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
190
191
  --tui-const-yellow-alpha-14: #FFDD2D24; /* 14% opacity */
191
192
  --tui-const-yellow-alpha-24: #FFDD2D3D; /* 24% opacity */
193
+ --tui-const-yellow-alpha-28: #FFDD2D47; /* 28% opacity */
192
194
  --tui-const-yellow-alpha-30: #FFDD2D4D; /* 30% opacity */
195
+ --tui-const-yellow-alpha-32: #FFDD2D52; /* 32% opacity */
193
196
  --tui-const-yellow-alpha-40: #FFDD2D66; /* 40% opacity */
194
197
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
195
198
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
@@ -207,6 +210,8 @@
207
210
  --tui-const-green-alpha-44: #00B92D70; /* 44% opacity */
208
211
  --tui-const-blue: #428BF9; /* N8 */
209
212
  --tui-const-blue-lighter-70: #6BA4FA; /* @Deprecated: Заменён на цвет blue-darker-70 */
213
+ --tui-const-blue-darker-74: #7FB0FB; /* hsL=74 */
214
+ --tui-const-blue-darker-72: #75AAFA; /* hsL=72 */
210
215
  --tui-const-blue-darker-70: #6BA4FA; /* hsL=70 */
211
216
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
212
217
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
@@ -219,6 +224,9 @@
219
224
  --tui-const-blue-alpha-16: #428BF929; /* 16% opacity */
220
225
  --tui-const-blue-alpha-20: #428BF933; /* 16% opacity */
221
226
  --tui-const-blue-alpha-24: #428BF93D; /* 24% opacity */
227
+ --tui-const-blue-alpha-32: #428BF952; /* 32% opacity */
228
+ --tui-const-blue-alpha-38: #428BF961; /* 38% opacity */
229
+ --tui-const-blue-alpha-44: #428BF970; /* 44% opacity */
222
230
  --tui-const-blue-alpha-64: #428BF9A3; /* 64% opacity */
223
231
  --tui-const-dark-blue-alpha-6: #244A7F0F; /* 6% opacity */
224
232
  --tui-const-dark-blue-alpha-8: #244A7F14; /* 8% opacity */
@@ -418,6 +426,9 @@
418
426
  --tui-status-warning-pale: var(--tui-const-yellow-darker-26); /* Контейнеры предупреждающих блоков */
419
427
  --tui-status-warning-pale-hover: var(--tui-const-yellow-darker-32); /* Только для веба. Контейнеры предупреждающих блоков при наведении */
420
428
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-darker-32); /* Нажатое состояние контейнера предупреждающих блоков */
429
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); /* Контейнеры предупреждающих блоков на тёмных фонах */
430
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); /* Контейнеры предупреждающих блоков на тёмных фонах */
431
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); /* Контейнеры предупреждающих блоков на тёмных фонах */
421
432
  --tui-status-positive-pale: var(--tui-const-green-darker-18); /* Контейнеры позитивных блоков */
422
433
  --tui-status-positive-pale-hover: var(--tui-const-green-darker-21); /* Только для веба. Контейнеры позитивных блоков при наведении */
423
434
  --tui-status-positive-pale-pressed: var(--tui-const-green-darker-21); /* Нажатое состояние positive в iOS */
@@ -433,6 +444,9 @@
433
444
  --tui-status-info-pale: var(--tui-const-blue-darker-25); /* Контейнеры информационных блоков */
434
445
  --tui-status-info-pale-hover: var(--tui-const-blue-darker-32); /* Только для веба. Контейнеры информационных блоков при наведении */
435
446
  --tui-status-info-pale-pressed: var(--tui-const-blue-darker-32); /* Контейнеры информационных блоков при нажатии */
447
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); /* Контейнеры информационных блоков на тёмных фонах */
448
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); /* Контейнеры информационных блоков на тёмных фонах */
449
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); /* Контейнеры информационных блоков на тёмных фонах */
436
450
  --tui-status-neutral: var(--tui-const-cool-gray-lighter-61); /* Акцентный цвет для нейтральных фонах */
437
451
  --tui-status-neutral-pale: var(--tui-const-white-alpha-15); /* Фоновый контейнер нейтральных статусных блоков */
438
452
  --tui-status-neutral-pale-hover: var(--tui-const-white-alpha-25); /* Фоновый контейнер нейтральных статусных блоков при наведении */
@@ -485,6 +499,7 @@
485
499
  --tui-text-action: var(--tui-const-blue); /* Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent */
486
500
  --tui-text-action-hover: var(--tui-const-blue-darker-52); /* Только для веба. Состояние текста при наведении */
487
501
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); /* Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed */
502
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-74); /* Текст и иконки интерактивного текста на тёмных фонах */
488
503
  --tui-text-accent: var(--tui-const-blue); /* @Deprecated: Заменён на цвет action */
489
504
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет action-pressed */
490
505
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
@@ -497,5 +512,6 @@
497
512
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
498
513
  --tui-text-warning: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки */
499
514
  --tui-text-warning-hover: var(--tui-const-yellow-darker-38); /* Предупреждающие текст и иконки при наведении на вебе */
515
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
500
516
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
501
517
  }
package/palette/light.css CHANGED
@@ -183,13 +183,16 @@
183
183
  --tui-const-yellow-darker-88: #FFF5C2;
184
184
  --tui-const-yellow-darker-60: #FFCD33; /* N9 pressed, hsL=60 */
185
185
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
186
+ --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
186
187
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
187
188
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
188
189
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
189
190
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
190
191
  --tui-const-yellow-alpha-14: #FFDD2D24; /* 14% opacity */
191
192
  --tui-const-yellow-alpha-24: #FFDD2D3D; /* 24% opacity */
193
+ --tui-const-yellow-alpha-28: #FFDD2D47; /* 28% opacity */
192
194
  --tui-const-yellow-alpha-30: #FFDD2D4D; /* 30% opacity */
195
+ --tui-const-yellow-alpha-32: #FFDD2D52; /* 32% opacity */
193
196
  --tui-const-yellow-alpha-40: #FFDD2D66; /* 40% opacity */
194
197
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
195
198
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
@@ -207,6 +210,8 @@
207
210
  --tui-const-green-alpha-44: #00B92D70; /* 44% opacity */
208
211
  --tui-const-blue: #428BF9; /* N8 */
209
212
  --tui-const-blue-lighter-70: #6BA4FA; /* @Deprecated: Заменён на цвет blue-darker-70 */
213
+ --tui-const-blue-darker-74: #7FB0FB; /* hsL=74 */
214
+ --tui-const-blue-darker-72: #75AAFA; /* hsL=72 */
210
215
  --tui-const-blue-darker-70: #6BA4FA; /* hsL=70 */
211
216
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
212
217
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
@@ -219,6 +224,9 @@
219
224
  --tui-const-blue-alpha-16: #428BF929; /* 16% opacity */
220
225
  --tui-const-blue-alpha-20: #428BF933; /* 16% opacity */
221
226
  --tui-const-blue-alpha-24: #428BF93D; /* 24% opacity */
227
+ --tui-const-blue-alpha-32: #428BF952; /* 32% opacity */
228
+ --tui-const-blue-alpha-38: #428BF961; /* 38% opacity */
229
+ --tui-const-blue-alpha-44: #428BF970; /* 44% opacity */
222
230
  --tui-const-blue-alpha-64: #428BF9A3; /* 64% opacity */
223
231
  --tui-const-dark-blue-alpha-6: #244A7F0F; /* 6% opacity */
224
232
  --tui-const-dark-blue-alpha-8: #244A7F14; /* 8% opacity */
@@ -418,6 +426,9 @@
418
426
  --tui-status-warning-pale: var(--tui-const-yellow-alpha-14); /* Контейнеры предупреждающих блоков */
419
427
  --tui-status-warning-pale-hover: var(--tui-const-yellow-alpha-40); /* Только для веба. Контейнеры предупреждающих блоков при наведении */
420
428
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-alpha-48); /* Нажатое состояние контейнера предупреждающих блоков */
429
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); /* Контейнеры предупреждающих блоков на тёмных фонах */
430
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); /* Контейнеры предупреждающих блоков на тёмных фонах */
431
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); /* Контейнеры предупреждающих блоков на тёмных фонах */
421
432
  --tui-status-positive-pale: var(--tui-const-green-alpha-16); /* Контейнеры позитивных блоков */
422
433
  --tui-status-positive-pale-hover: var(--tui-const-green-alpha-24); /* Только для веба. Контейнеры позитивных блоков при наведении */
423
434
  --tui-status-positive-pale-pressed: var(--tui-const-green-alpha-32); /* Нажатое состояние positive в iOS */
@@ -433,6 +444,9 @@
433
444
  --tui-status-info-pale: var(--tui-const-blue-alpha-16); /* Контейнеры информационных блоков */
434
445
  --tui-status-info-pale-hover: var(--tui-const-blue-alpha-24); /* Только для веба. Контейнеры информационных блоков при наведении */
435
446
  --tui-status-info-pale-pressed: var(--tui-const-blue-alpha-24); /* Контейнеры информационных блоков при нажатии */
447
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); /* Контейнеры информационных блоков на тёмных фонах */
448
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); /* Контейнеры информационных блоков на тёмных фонах */
449
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); /* Контейнеры информационных блоков на тёмных фонах */
436
450
  --tui-status-neutral: var(--tui-const-cool-gray-lighter-51); /* Акцентный цвет для нейтральных фонах */
437
451
  --tui-status-neutral-pale: var(--tui-const-cool-gray-alpha-8); /* Фоновый контейнер нейтральных статусных блоков */
438
452
  --tui-status-neutral-pale-hover: var(--tui-const-cool-gray-alpha-12); /* Фоновый контейнер нейтральных статусных блоков при наведении */
@@ -485,6 +499,7 @@
485
499
  --tui-text-action: var(--tui-const-blue-darker-52); /* Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent */
486
500
  --tui-text-action-hover: var(--tui-const-blue-darker-46); /* Только для веба. Состояние текста при наведении */
487
501
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); /* Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed */
502
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-74); /* Текст и иконки интерактивного текста на тёмных фонах */
488
503
  --tui-text-accent: var(--tui-const-blue); /* @Deprecated: Заменён на цвет action */
489
504
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет action-pressed */
490
505
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
@@ -497,5 +512,6 @@
497
512
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
498
513
  --tui-text-warning: var(--tui-const-yellow-darker-48); /* Предупреждающие текст и иконки */
499
514
  --tui-text-warning-hover: var(--tui-const-yellow-darker-26); /* Предупреждающие текст и иконки при наведении на вебе */
515
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
500
516
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
501
517
  }
package/palette/mobile/dark.css CHANGED
@@ -161,13 +161,16 @@
161
161
  --tui-const-yellow-darker-88: #FFF5C2;
162
162
  --tui-const-yellow-darker-60: #FFCD33; /* N9 pressed, hsL=60 */
163
163
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
164
+ --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
164
165
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
165
166
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
166
167
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
167
168
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
168
169
  --tui-const-yellow-alpha-14: #FFDD2D24; /* 14% opacity */
169
170
  --tui-const-yellow-alpha-24: #FFDD2D3D; /* 24% opacity */
171
+ --tui-const-yellow-alpha-28: #FFDD2D47; /* 28% opacity */
170
172
  --tui-const-yellow-alpha-30: #FFDD2D4D; /* 30% opacity */
173
+ --tui-const-yellow-alpha-32: #FFDD2D52; /* 32% opacity */
171
174
  --tui-const-yellow-alpha-40: #FFDD2D66; /* 40% opacity */
172
175
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
173
176
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
@@ -185,6 +188,8 @@
185
188
  --tui-const-green-alpha-44: #00B92D70; /* 44% opacity */
186
189
  --tui-const-blue: #428BF9; /* N8 */
187
190
  --tui-const-blue-lighter-70: #6BA4FA; /* @Deprecated: Заменён на цвет blue-darker-70 */
191
+ --tui-const-blue-darker-74: #7FB0FB; /* hsL=74 */
192
+ --tui-const-blue-darker-72: #75AAFA; /* hsL=72 */
188
193
  --tui-const-blue-darker-70: #6BA4FA; /* hsL=70 */
189
194
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
190
195
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
@@ -197,6 +202,9 @@
197
202
  --tui-const-blue-alpha-16: #428BF929; /* 16% opacity */
198
203
  --tui-const-blue-alpha-20: #428BF933; /* 16% opacity */
199
204
  --tui-const-blue-alpha-24: #428BF93D; /* 24% opacity */
205
+ --tui-const-blue-alpha-32: #428BF952; /* 32% opacity */
206
+ --tui-const-blue-alpha-38: #428BF961; /* 38% opacity */
207
+ --tui-const-blue-alpha-44: #428BF970; /* 44% opacity */
200
208
  --tui-const-blue-alpha-64: #428BF9A3; /* 64% opacity */
201
209
  --tui-const-dark-blue-alpha-6: #244A7F0F; /* 6% opacity */
202
210
  --tui-const-dark-blue-alpha-8: #244A7F14; /* 8% opacity */
@@ -393,6 +401,9 @@
393
401
  --tui-service-underline-on-dark: var(--tui-const-white-alpha-50); /* Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы */
394
402
  --tui-status-warning-pale: var(--tui-const-yellow-darker-26); /* Контейнеры предупреждающих блоков */
395
403
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-darker-32); /* Нажатое состояние контейнера предупреждающих блоков */
404
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); /* Контейнеры предупреждающих блоков на тёмных фонах */
405
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); /* Контейнеры предупреждающих блоков на тёмных фонах */
406
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); /* Контейнеры предупреждающих блоков на тёмных фонах */
396
407
  --tui-status-positive-pale: var(--tui-const-green-darker-18); /* Контейнеры позитивных блоков */
397
408
  --tui-status-positive-pale-pressed: var(--tui-const-green-darker-21); /* Нажатое состояние positive в iOS */
398
409
  --tui-status-positive-pale-on-dark: var(--tui-const-green-alpha-32); /* Контейнеры позитивных блоков на тёмных фонах, не меняются от темы */
@@ -403,6 +414,9 @@
403
414
  --tui-status-negative-pale-on-dark-pressed: var(--tui-const-red-alpha-44); /* Нажатое состояние negative-pale-on-dark */
404
415
  --tui-status-info-pale: var(--tui-const-blue-darker-25); /* Контейнеры информационных блоков */
405
416
  --tui-status-info-pale-pressed: var(--tui-const-blue-darker-32); /* Контейнеры информационных блоков при нажатии */
417
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); /* Контейнеры информационных блоков на тёмных фонах */
418
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); /* Контейнеры информационных блоков на тёмных фонах */
419
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); /* Контейнеры информационных блоков на тёмных фонах */
406
420
  --tui-status-neutral: var(--tui-const-white-alpha-50); /* Акцентный цвет для нейтральных фонах */
407
421
  --tui-status-neutral-pale: var(--tui-const-white-alpha-15); /* Фоновый контейнер нейтральных статусных блоков */
408
422
  --tui-status-neutral-pale-pressed: var(--tui-const-white-alpha-30); /* Фоновый контейнер нейтральных статусных блоков при нажатии */
@@ -450,6 +464,7 @@
450
464
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-30); /* Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы */
451
465
  --tui-text-action: var(--tui-const-blue); /* Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent */
452
466
  --tui-text-action-pressed: var(--tui-const-blue-darker-46); /* Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed */
467
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-72); /* Текст и иконки интерактивного текста на тёмных фонах */
453
468
  --tui-text-accent: var(--tui-const-blue); /* @Deprecated: Заменён на цвет action */
454
469
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет action-pressed */
455
470
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
@@ -459,5 +474,6 @@
459
474
  --tui-text-negative: var(--tui-const-red); /* Текст негативного лейбла, например падение цены акций или ошибка */
460
475
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-65); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
461
476
  --tui-text-warning: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки */
477
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
462
478
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
463
479
  }
package/palette/mobile/light.css CHANGED
@@ -161,13 +161,16 @@
161
161
  --tui-const-yellow-darker-88: #FFF5C2;
162
162
  --tui-const-yellow-darker-60: #FFCD33; /* N9 pressed, hsL=60 */
163
163
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
164
+ --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
164
165
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
165
166
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
166
167
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
167
168
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
168
169
  --tui-const-yellow-alpha-14: #FFDD2D24; /* 14% opacity */
169
170
  --tui-const-yellow-alpha-24: #FFDD2D3D; /* 24% opacity */
171
+ --tui-const-yellow-alpha-28: #FFDD2D47; /* 28% opacity */
170
172
  --tui-const-yellow-alpha-30: #FFDD2D4D; /* 30% opacity */
173
+ --tui-const-yellow-alpha-32: #FFDD2D52; /* 32% opacity */
171
174
  --tui-const-yellow-alpha-40: #FFDD2D66; /* 40% opacity */
172
175
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
173
176
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
@@ -185,6 +188,8 @@
185
188
  --tui-const-green-alpha-44: #00B92D70; /* 44% opacity */
186
189
  --tui-const-blue: #428BF9; /* N8 */
187
190
  --tui-const-blue-lighter-70: #6BA4FA; /* @Deprecated: Заменён на цвет blue-darker-70 */
191
+ --tui-const-blue-darker-74: #7FB0FB; /* hsL=74 */
192
+ --tui-const-blue-darker-72: #75AAFA; /* hsL=72 */
188
193
  --tui-const-blue-darker-70: #6BA4FA; /* hsL=70 */
189
194
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
190
195
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
@@ -197,6 +202,9 @@
197
202
  --tui-const-blue-alpha-16: #428BF929; /* 16% opacity */
198
203
  --tui-const-blue-alpha-20: #428BF933; /* 16% opacity */
199
204
  --tui-const-blue-alpha-24: #428BF93D; /* 24% opacity */
205
+ --tui-const-blue-alpha-32: #428BF952; /* 32% opacity */
206
+ --tui-const-blue-alpha-38: #428BF961; /* 38% opacity */
207
+ --tui-const-blue-alpha-44: #428BF970; /* 44% opacity */
200
208
  --tui-const-blue-alpha-64: #428BF9A3; /* 64% opacity */
201
209
  --tui-const-dark-blue-alpha-6: #244A7F0F; /* 6% opacity */
202
210
  --tui-const-dark-blue-alpha-8: #244A7F14; /* 8% opacity */
@@ -393,6 +401,9 @@
393
401
  --tui-service-underline-on-dark: var(--tui-const-white-alpha-50); /* Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы */
394
402
  --tui-status-warning-pale: var(--tui-const-yellow-alpha-30); /* Контейнеры предупреждающих блоков */
395
403
  --tui-status-warning-pale-pressed: var(--tui-const-yellow-alpha-48); /* Нажатое состояние контейнера предупреждающих блоков */
404
+ --tui-status-warning-pale-on-dark: var(--tui-const-yellow-alpha-24); /* Контейнеры предупреждающих блоков на тёмных фонах */
405
+ --tui-status-warning-pale-on-dark-hover: var(--tui-const-yellow-alpha-28); /* Контейнеры предупреждающих блоков на тёмных фонах */
406
+ --tui-status-warning-pale-on-dark-pressed: var(--tui-const-yellow-alpha-32); /* Контейнеры предупреждающих блоков на тёмных фонах */
396
407
  --tui-status-positive-pale: var(--tui-const-green-alpha-16); /* Контейнеры позитивных блоков */
397
408
  --tui-status-positive-pale-pressed: var(--tui-const-green-alpha-32); /* Нажатое состояние positive в iOS */
398
409
  --tui-status-positive-pale-on-dark: var(--tui-const-green-alpha-32); /* Контейнеры позитивных блоков на тёмных фонах, не меняются от темы */
@@ -403,6 +414,9 @@
403
414
  --tui-status-negative-pale-on-dark-pressed: var(--tui-const-red-alpha-44); /* Нажатое состояние negative-pale-on-dark */
404
415
  --tui-status-info-pale: var(--tui-const-blue-alpha-16); /* Контейнеры информационных блоков */
405
416
  --tui-status-info-pale-pressed: var(--tui-const-blue-alpha-24); /* Контейнеры информационных блоков при нажатии */
417
+ --tui-status-info-pale-on-dark: var(--tui-const-blue-alpha-32); /* Контейнеры информационных блоков на тёмных фонах */
418
+ --tui-status-info-pale-on-dark-hover: var(--tui-const-blue-alpha-38); /* Контейнеры информационных блоков на тёмных фонах */
419
+ --tui-status-info-pale-on-dark-pressed: var(--tui-const-blue-alpha-44); /* Контейнеры информационных блоков на тёмных фонах */
406
420
  --tui-status-neutral: var(--tui-const-cool-gray-alpha-44); /* Акцентный цвет для нейтральных фонах */
407
421
  --tui-status-neutral-pale: var(--tui-const-cool-gray-alpha-8); /* Фоновый контейнер нейтральных статусных блоков */
408
422
  --tui-status-neutral-pale-pressed: var(--tui-const-cool-gray-alpha-18); /* Фоновый контейнер нейтральных статусных блоков при нажатии */
@@ -450,6 +464,7 @@
450
464
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-30); /* Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы */
451
465
  --tui-text-action: var(--tui-const-blue); /* Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent */
452
466
  --tui-text-action-pressed: var(--tui-const-blue-darker-46); /* Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed */
467
+ --tui-text-action-on-dark: var(--tui-const-blue-darker-72); /* Текст и иконки интерактивного текста на тёмных фонах */
453
468
  --tui-text-accent: var(--tui-const-blue); /* @Deprecated: Заменён на цвет action */
454
469
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет action-pressed */
455
470
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
@@ -459,5 +474,6 @@
459
474
  --tui-text-negative: var(--tui-const-red); /* Текст негативного лейбла, например падение цены акций или ошибка */
460
475
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-65); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
461
476
  --tui-text-warning: var(--tui-const-yellow-darker-48); /* Предупреждающие текст и иконки */
477
+ --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
462
478
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
463
479
  }