@taiga-ui/design-tokens 0.223.0 → 0.225.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 (16) hide show
  1. package/angular/desktop.less +23 -14
  2. package/angular/fonts/desktop.less +2 -1
  3. package/angular/mobile.less +14 -6
  4. package/fonts/desktop.css +2 -1
  5. package/package.json +1 -1
  6. package/palette/animation.css +2 -1
  7. package/palette/dark.css +12 -7
  8. package/palette/gradient.css +2 -1
  9. package/palette/light.css +14 -9
  10. package/palette/mobile/dark.css +9 -4
  11. package/palette/mobile/light.css +9 -4
  12. package/palette/scss/dark.scss +10 -6
  13. package/palette/scss/light.scss +12 -8
  14. package/palette/scss/mobile/dark.scss +7 -3
  15. package/palette/scss/mobile/light.scss +7 -3
  16. package/palette/shadow.css +2 -1
package/angular/desktop.less CHANGED
@@ -1,4 +1,5 @@
1
1
  &:root,
2
+ &:host,
2
3
  [tuiTheme='light'] {
3
4
  --tui-background-base: var(--tui-const-white); // Основной фон приложений. Отличается на iOS, Android и Desktop
4
5
  --tui-background-base-alt: var(--tui-const-cool-gray-lighter-97); // Альтернативный основной фон, в тёмной теме в вебе равен base
@@ -167,7 +168,7 @@
167
168
  --tui-chart-categorical-04: var(--tui-const-turquoise);
168
169
  --tui-chart-categorical-05: var(--tui-const-orange);
169
170
  --tui-chart-categorical-06: var(--tui-const-purple);
170
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
171
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
171
172
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
172
173
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
173
174
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -203,6 +204,7 @@
203
204
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
204
205
  --tui-const-yellow-darker-50: #FAA805; // hsL=50
205
206
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
207
+ --tui-const-yellow-darker-44: #DD9403; // hsL=44
206
208
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
207
209
  --tui-const-yellow-darker-32: #806925; // hsL=32
208
210
  --tui-const-yellow-darker-26: #614F23; // hsL=26
@@ -216,10 +218,11 @@
216
218
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
217
219
  --tui-const-green-lighter-64: #94D274; // hsL=64
218
220
  --tui-const-green-lighter-57: #60C366; // hsL=57
221
+ --tui-const-green-lighter-48: #00F53C; // hsL=48
219
222
  --tui-const-green-lighter-44: #00E037; // hsL=44
220
223
  --tui-const-green-lighter-42: #00D635; // hsL=42
221
224
  --tui-const-green: #00B92D; // N11
222
- --tui-const-green-darker-34: #00A328; // hsL=34
225
+ --tui-const-green-darker-32: #00A328; // hsL=32
223
226
  --tui-const-green-darker-28: #038C24; // hsL=28
224
227
  --tui-const-green-darker-21: #115B24; // hsL=21
225
228
  --tui-const-green-darker-18: #144823;
@@ -237,6 +240,7 @@
237
240
  --tui-const-blue-darker-66: #5798FA; // hsL=66
238
241
  --tui-const-blue-darker-52: #126DF7; // hsL=52
239
242
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
243
+ --tui-const-blue-darker-44: #165ECA; // hsL=44
240
244
  --tui-const-blue-darker-40: #1455B8; // hsL=40
241
245
  --tui-const-blue-darker-32: #2B4976; // hsL=32
242
246
  --tui-const-blue-darker-28: #2A4165; // hsL=28
@@ -263,6 +267,7 @@
263
267
  --tui-const-red-alpha-44: #F5222270; // 44% opacity
264
268
  --tui-const-red-lighter-62: #F74646; // hsL=62
265
269
  --tui-const-red-lighter-65: #FF4D4D; // hsL=65
270
+ --tui-const-red-lighter-68: #FF5C5C; // hsL=68
266
271
  --tui-const-red-lighter-70: #FF6666; // hsL=70
267
272
  --tui-const-red: #F52222; // N10
268
273
  --tui-const-red-darker-53: #DC3233; // hsL=53
@@ -454,7 +459,7 @@
454
459
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); // Фон под выделенным текстом
455
460
  --tui-service-backdrop: var(--tui-const-black-alpha-70); // Затемнение на фоне модальных окон и шторок
456
461
  --tui-service-underline: var(--tui-const-blue-darker-79); // Подчеркивание для ссылок
457
- --tui-service-underline-hover: var(--tui-const-blue-darker-46); // Подчеркивание для ссылок
462
+ --tui-service-underline-hover: var(--tui-const-blue-darker-44); // Подчеркивание для ссылок
458
463
  --tui-service-underline-pressed: var(--tui-const-blue-darker-46); // Подчеркивание для ссылок
459
464
  --tui-service-underline-grayscale: var(--tui-const-black-alpha-32); // Подчеркивание для монохромных ссылок
460
465
  --tui-service-underline-grayscale-hover: var(--tui-const-black-alpha-80); // Подчеркивание для монохромных ссылок
@@ -550,21 +555,21 @@
550
555
  --tui-text-tertiary-on-light: var(--tui-const-black-alpha-40); // Лейблы задизейбленных кнопок, дисклеймеры на светлых фонах, не меняется при смене темы
551
556
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-50); // Лейблы задизейбленных кнопок, дисклеймеры на светлых фонах, не меняется при смене темы
552
557
  --tui-text-action: var(--tui-const-blue-darker-52); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
553
- --tui-text-action-hover: var(--tui-const-blue-darker-46); // Только для веба. Состояние текста при наведении
558
+ --tui-text-action-hover: var(--tui-const-blue-darker-44); // Только для веба. Состояние текста при наведении
554
559
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
555
560
  --tui-text-action-on-dark: var(--tui-const-blue-darker-72); // Текст и иконки интерактивного текста на тёмных фонах
556
561
  --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
557
562
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
558
563
  --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
559
564
  --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
560
- --tui-text-positive: var(--tui-const-green-darker-34); // Текст позитивного лейбла, например пополнение счета или рост цены акций
561
- --tui-text-positive-hover: var(--tui-const-green-darker-21); // Только для веба. Текст позитивного лейбла при нажатии
565
+ --tui-text-positive: var(--tui-const-green-darker-32); // Текст позитивного лейбла, например пополнение счета или рост цены акций
566
+ --tui-text-positive-hover: var(--tui-const-green-darker-28); // Только для веба. Текст позитивного лейбла при нажатии
562
567
  --tui-text-positive-on-dark: var(--tui-const-green-lighter-44); // Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций
563
568
  --tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
564
- --tui-text-negative-hover: var(--tui-const-red-darker-32); // Только для веба. Текст негативного лейбла при наведении на вебе
569
+ --tui-text-negative-hover: var(--tui-const-red-darker-47); // Только для веба. Текст негативного лейбла при наведении на вебе
565
570
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
566
571
  --tui-text-warning: var(--tui-const-yellow-darker-48); // Предупреждающие текст и иконки
567
- --tui-text-warning-hover: var(--tui-const-yellow-darker-26); // Предупреждающие текст и иконки при наведении на вебе
572
+ --tui-text-warning-hover: var(--tui-const-yellow-darker-44); // Предупреждающие текст и иконки при наведении на вебе
568
573
  --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки на тёмных фонах
569
574
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
570
575
  --tui-shadow-small: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); // Тень для мелких элементов интерфейса, например Chips
@@ -742,7 +747,7 @@
742
747
  --tui-chart-categorical-04: var(--tui-const-turquoise);
743
748
  --tui-chart-categorical-05: var(--tui-const-orange);
744
749
  --tui-chart-categorical-06: var(--tui-const-purple);
745
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
750
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
746
751
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
747
752
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
748
753
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -778,6 +783,7 @@
778
783
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
779
784
  --tui-const-yellow-darker-50: #FAA805; // hsL=50
780
785
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
786
+ --tui-const-yellow-darker-44: #DD9403; // hsL=44
781
787
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
782
788
  --tui-const-yellow-darker-32: #806925; // hsL=32
783
789
  --tui-const-yellow-darker-26: #614F23; // hsL=26
@@ -791,10 +797,11 @@
791
797
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
792
798
  --tui-const-green-lighter-64: #94D274; // hsL=64
793
799
  --tui-const-green-lighter-57: #60C366; // hsL=57
800
+ --tui-const-green-lighter-48: #00F53C; // hsL=48
794
801
  --tui-const-green-lighter-44: #00E037; // hsL=44
795
802
  --tui-const-green-lighter-42: #00D635; // hsL=42
796
803
  --tui-const-green: #00B92D; // N11
797
- --tui-const-green-darker-34: #00A328; // hsL=34
804
+ --tui-const-green-darker-32: #00A328; // hsL=32
798
805
  --tui-const-green-darker-28: #038C24; // hsL=28
799
806
  --tui-const-green-darker-21: #115B24; // hsL=21
800
807
  --tui-const-green-darker-18: #144823;
@@ -812,6 +819,7 @@
812
819
  --tui-const-blue-darker-66: #5798FA; // hsL=66
813
820
  --tui-const-blue-darker-52: #126DF7; // hsL=52
814
821
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
822
+ --tui-const-blue-darker-44: #165ECA; // hsL=44
815
823
  --tui-const-blue-darker-40: #1455B8; // hsL=40
816
824
  --tui-const-blue-darker-32: #2B4976; // hsL=32
817
825
  --tui-const-blue-darker-28: #2A4165; // hsL=28
@@ -838,6 +846,7 @@
838
846
  --tui-const-red-alpha-44: #F5222270; // 44% opacity
839
847
  --tui-const-red-lighter-62: #F74646; // hsL=62
840
848
  --tui-const-red-lighter-65: #FF4D4D; // hsL=65
849
+ --tui-const-red-lighter-68: #FF5C5C; // hsL=68
841
850
  --tui-const-red-lighter-70: #FF6666; // hsL=70
842
851
  --tui-const-red: #F52222; // N10
843
852
  --tui-const-red-darker-53: #DC3233; // hsL=53
@@ -1029,7 +1038,7 @@
1029
1038
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); // Фон под выделенным текстом
1030
1039
  --tui-service-backdrop: var(--tui-const-black-alpha-70); // Затемнение на фоне модальных окон и шторок
1031
1040
  --tui-service-underline: var(--tui-const-blue-darker-66); // Подчеркивание для ссылок
1032
- --tui-service-underline-hover: var(--tui-const-blue-darker-52); // Подчеркивание для ссылок
1041
+ --tui-service-underline-hover: var(--tui-const-blue-darker-74); // Подчеркивание для ссылок
1033
1042
  --tui-service-underline-pressed: var(--tui-const-blue-darker-46); // Подчеркивание для ссылок
1034
1043
  --tui-service-underline-grayscale: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок
1035
1044
  --tui-service-underline-grayscale-hover: var(--tui-const-white-alpha-90); // Подчеркивание для монохромных ссылок
@@ -1133,13 +1142,13 @@
1133
1142
  --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
1134
1143
  --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
1135
1144
  --tui-text-positive: var(--tui-const-green-lighter-44); // Текст позитивного лейбла, например пополнение счета или рост цены акций
1136
- --tui-text-positive-hover: var(--tui-const-green); // Только для веба. Текст позитивного лейбла при нажатии
1145
+ --tui-text-positive-hover: var(--tui-const-green-lighter-48); // Только для веба. Текст позитивного лейбла при нажатии
1137
1146
  --tui-text-positive-on-dark: var(--tui-const-green-lighter-44); // Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций
1138
1147
  --tui-text-negative: var(--tui-const-red-lighter-62); // Текст негативного лейбла, например падение цены акций или ошибка
1139
- --tui-text-negative-hover: var(--tui-const-red); // Только для веба. Текст негативного лейбла при наведении на вебе
1148
+ --tui-text-negative-hover: var(--tui-const-red-lighter-68); // Только для веба. Текст негативного лейбла при наведении на вебе
1140
1149
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
1141
1150
  --tui-text-warning: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки
1142
- --tui-text-warning-hover: var(--tui-const-yellow-darker-38); // Предупреждающие текст и иконки при наведении на вебе
1151
+ --tui-text-warning-hover: var(--tui-const-yellow-darker-60); // Предупреждающие текст и иконки при наведении на вебе
1143
1152
  --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки на тёмных фонах
1144
1153
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
1145
1154
  }
package/angular/fonts/desktop.less CHANGED
@@ -1,4 +1,5 @@
1
- &:root {
1
+ &:root,
2
+ :host {
2
3
  --tui-font-offset: 0rem;
3
4
  --tui-font-family-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
4
5
  --tui-font-family-text: 'Neue Haas Unica W1G';
package/angular/mobile.less CHANGED
@@ -148,7 +148,7 @@
148
148
  --tui-chart-categorical-04: var(--tui-const-turquoise);
149
149
  --tui-chart-categorical-05: var(--tui-const-orange);
150
150
  --tui-chart-categorical-06: var(--tui-const-purple);
151
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
151
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
152
152
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
153
153
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
154
154
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -182,6 +182,7 @@
182
182
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
183
183
  --tui-const-yellow-darker-50: #FAA805; // hsL=50
184
184
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
185
+ --tui-const-yellow-darker-44: #DD9403; // hsL=44
185
186
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
186
187
  --tui-const-yellow-darker-32: #806925; // hsL=32
187
188
  --tui-const-yellow-darker-26: #614F23; // hsL=26
@@ -195,10 +196,11 @@
195
196
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
196
197
  --tui-const-green-lighter-64: #94D274; // hsL=64
197
198
  --tui-const-green-lighter-57: #60C366; // hsL=57
199
+ --tui-const-green-lighter-48: #00F53C; // hsL=48
198
200
  --tui-const-green-lighter-44: #00E037; // hsL=44
199
201
  --tui-const-green-lighter-42: #00D635; // hsL=42
200
202
  --tui-const-green: #00B92D; // N11
201
- --tui-const-green-darker-34: #00A328; // hsL=34
203
+ --tui-const-green-darker-32: #00A328; // hsL=32
202
204
  --tui-const-green-darker-28: #038C24; // hsL=28
203
205
  --tui-const-green-darker-21: #115B24; // hsL=21
204
206
  --tui-const-green-darker-18: #144823;
@@ -216,6 +218,7 @@
216
218
  --tui-const-blue-darker-66: #5798FA; // hsL=66
217
219
  --tui-const-blue-darker-52: #126DF7; // hsL=52
218
220
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
221
+ --tui-const-blue-darker-44: #165ECA; // hsL=44
219
222
  --tui-const-blue-darker-40: #1455B8; // hsL=40
220
223
  --tui-const-blue-darker-32: #2B4976; // hsL=32
221
224
  --tui-const-blue-darker-28: #2A4165; // hsL=28
@@ -242,6 +245,7 @@
242
245
  --tui-const-red-alpha-44: #F5222270; // 44% opacity
243
246
  --tui-const-red-lighter-62: #F74646; // hsL=62
244
247
  --tui-const-red-lighter-65: #FF4D4D; // hsL=65
248
+ --tui-const-red-lighter-68: #FF5C5C; // hsL=68
245
249
  --tui-const-red-lighter-70: #FF6666; // hsL=70
246
250
  --tui-const-red: #F52222; // N10
247
251
  --tui-const-red-darker-53: #DC3233; // hsL=53
@@ -431,7 +435,7 @@
431
435
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); // Фон под выделенным текстом
432
436
  --tui-service-backdrop: var(--tui-const-black-alpha-50); // Затемнение на фоне модальных окон и шторок
433
437
  --tui-service-underline: var(--tui-const-blue-darker-66); // Подчеркивание для ссылок
434
- --tui-service-underline-hover: var(--tui-const-blue-darker-52); // Подчеркивание для ссылок
438
+ --tui-service-underline-hover: var(--tui-const-blue-darker-74); // Подчеркивание для ссылок
435
439
  --tui-service-underline-pressed: var(--tui-const-blue-darker-74); // Подчеркивание для ссылок
436
440
  --tui-service-underline-grayscale: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок
437
441
  --tui-service-underline-grayscale-hover: var(--tui-const-white-alpha-90); // Подчеркивание для монохромных ссылок
@@ -681,7 +685,7 @@
681
685
  --tui-chart-categorical-04: var(--tui-const-turquoise);
682
686
  --tui-chart-categorical-05: var(--tui-const-orange);
683
687
  --tui-chart-categorical-06: var(--tui-const-purple);
684
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
688
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
685
689
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
686
690
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
687
691
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -715,6 +719,7 @@
715
719
  --tui-const-yellow-darker-54: #FAB619; // hsL=54
716
720
  --tui-const-yellow-darker-50: #FAA805; // hsL=50
717
721
  --tui-const-yellow-darker-48: #F49C01; // hsL=48
722
+ --tui-const-yellow-darker-44: #DD9403; // hsL=44
718
723
  --tui-const-yellow-darker-38: #BF8003; // hsL=38
719
724
  --tui-const-yellow-darker-32: #806925; // hsL=32
720
725
  --tui-const-yellow-darker-26: #614F23; // hsL=26
@@ -728,10 +733,11 @@
728
733
  --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
729
734
  --tui-const-green-lighter-64: #94D274; // hsL=64
730
735
  --tui-const-green-lighter-57: #60C366; // hsL=57
736
+ --tui-const-green-lighter-48: #00F53C; // hsL=48
731
737
  --tui-const-green-lighter-44: #00E037; // hsL=44
732
738
  --tui-const-green-lighter-42: #00D635; // hsL=42
733
739
  --tui-const-green: #00B92D; // N11
734
- --tui-const-green-darker-34: #00A328; // hsL=34
740
+ --tui-const-green-darker-32: #00A328; // hsL=32
735
741
  --tui-const-green-darker-28: #038C24; // hsL=28
736
742
  --tui-const-green-darker-21: #115B24; // hsL=21
737
743
  --tui-const-green-darker-18: #144823;
@@ -749,6 +755,7 @@
749
755
  --tui-const-blue-darker-66: #5798FA; // hsL=66
750
756
  --tui-const-blue-darker-52: #126DF7; // hsL=52
751
757
  --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
758
+ --tui-const-blue-darker-44: #165ECA; // hsL=44
752
759
  --tui-const-blue-darker-40: #1455B8; // hsL=40
753
760
  --tui-const-blue-darker-32: #2B4976; // hsL=32
754
761
  --tui-const-blue-darker-28: #2A4165; // hsL=28
@@ -775,6 +782,7 @@
775
782
  --tui-const-red-alpha-44: #F5222270; // 44% opacity
776
783
  --tui-const-red-lighter-62: #F74646; // hsL=62
777
784
  --tui-const-red-lighter-65: #FF4D4D; // hsL=65
785
+ --tui-const-red-lighter-68: #FF5C5C; // hsL=68
778
786
  --tui-const-red-lighter-70: #FF6666; // hsL=70
779
787
  --tui-const-red: #F52222; // N10
780
788
  --tui-const-red-darker-53: #DC3233; // hsL=53
@@ -964,7 +972,7 @@
964
972
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); // Фон под выделенным текстом
965
973
  --tui-service-backdrop: var(--tui-const-black-alpha-50); // Затемнение на фоне модальных окон и шторок
966
974
  --tui-service-underline: var(--tui-const-blue-darker-79); // Подчеркивание для ссылок
967
- --tui-service-underline-hover: var(--tui-const-blue-darker-46); // Подчеркивание для ссылок
975
+ --tui-service-underline-hover: var(--tui-const-blue-darker-44); // Подчеркивание для ссылок
968
976
  --tui-service-underline-pressed: var(--tui-const-blue-darker-74); // Подчеркивание для ссылок
969
977
  --tui-service-underline-grayscale: var(--tui-const-cool-gray-lighter-60); // Подчеркивание для монохромных ссылок
970
978
  --tui-service-underline-grayscale-hover: var(--tui-const-black-alpha-80); // Подчеркивание для монохромных ссылок
package/fonts/desktop.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-font-offset: 0rem;
3
4
  --tui-font-family-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
4
5
  --tui-font-family-text: 'Neue Haas Unica W1G';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/design-tokens",
3
- "version": "0.223.0",
3
+ "version": "0.225.0",
4
4
  "description": "Taiga UI palette",
5
5
  "keywords": [
6
6
  "angular",
package/palette/animation.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-curve-expressive-standard: cubic-bezier(0.4, 0.1, 0.2, 1);
3
4
  --tui-curve-expressive-entrance: cubic-bezier(0.35, 1.3, 0.25, 1);
4
5
  --tui-curve-expressive-exit: cubic-bezier(0.4, 0, 1, 1);
package/palette/dark.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-background-base: var(--tui-const-black-lighter-13); /* Основной фон приложений. Отличается на iOS, Android и Desktop */
3
4
  --tui-background-base-alt: var(--tui-const-black-lighter-13); /* Альтернативный основной фон, в тёмной теме в вебе равен base */
4
5
  --tui-background-elevation-1: var(--tui-const-black-lighter-16); /* Фон шторок, модальных экранов и карточек, лежащих на фоне base */
@@ -166,7 +167,7 @@
166
167
  --tui-chart-categorical-04: var(--tui-const-turquoise);
167
168
  --tui-chart-categorical-05: var(--tui-const-orange);
168
169
  --tui-chart-categorical-06: var(--tui-const-purple);
169
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
170
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
170
171
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
171
172
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
172
173
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -202,6 +203,7 @@
202
203
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
203
204
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
204
205
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
206
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
205
207
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
206
208
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
207
209
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -215,10 +217,11 @@
215
217
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
216
218
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
217
219
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
220
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
218
221
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
219
222
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
220
223
  --tui-const-green: #00B92D; /* N11 */
221
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
224
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
222
225
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
223
226
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
224
227
  --tui-const-green-darker-18: #144823;
@@ -236,6 +239,7 @@
236
239
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
237
240
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
238
241
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
242
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
239
243
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
240
244
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
241
245
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -262,6 +266,7 @@
262
266
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
263
267
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
264
268
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
269
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
265
270
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
266
271
  --tui-const-red: #F52222; /* N10 */
267
272
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -453,7 +458,7 @@
453
458
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
454
459
  --tui-service-backdrop: var(--tui-const-black-alpha-70); /* Затемнение на фоне модальных окон и шторок */
455
460
  --tui-service-underline: var(--tui-const-blue-darker-66); /* Подчеркивание для ссылок */
456
- --tui-service-underline-hover: var(--tui-const-blue-darker-52); /* Подчеркивание для ссылок */
461
+ --tui-service-underline-hover: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
457
462
  --tui-service-underline-pressed: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
458
463
  --tui-service-underline-grayscale: var(--tui-const-white-alpha-50); /* Подчеркивание для монохромных ссылок */
459
464
  --tui-service-underline-grayscale-hover: var(--tui-const-white-alpha-90); /* Подчеркивание для монохромных ссылок */
@@ -557,13 +562,13 @@
557
562
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
558
563
  --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет accent-pressed */
559
564
  --tui-text-positive: var(--tui-const-green-lighter-44); /* Текст позитивного лейбла, например пополнение счета или рост цены акций */
560
- --tui-text-positive-hover: var(--tui-const-green); /* Только для веба. Текст позитивного лейбла при нажатии */
565
+ --tui-text-positive-hover: var(--tui-const-green-lighter-48); /* Только для веба. Текст позитивного лейбла при нажатии */
561
566
  --tui-text-positive-on-dark: var(--tui-const-green-lighter-44); /* Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций */
562
567
  --tui-text-negative: var(--tui-const-red-lighter-62); /* Текст негативного лейбла, например падение цены акций или ошибка */
563
- --tui-text-negative-hover: var(--tui-const-red); /* Только для веба. Текст негативного лейбла при наведении на вебе */
568
+ --tui-text-negative-hover: var(--tui-const-red-lighter-68); /* Только для веба. Текст негативного лейбла при наведении на вебе */
564
569
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
565
570
  --tui-text-warning: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки */
566
- --tui-text-warning-hover: var(--tui-const-yellow-darker-38); /* Предупреждающие текст и иконки при наведении на вебе */
571
+ --tui-text-warning-hover: var(--tui-const-yellow-darker-60); /* Предупреждающие текст и иконки при наведении на вебе */
567
572
  --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
568
573
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
569
574
  }
package/palette/gradient.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-gradient-brand-all-airlines: linear-gradient(90deg, rgb(0, 158, 220) 0%, rgb(87, 208, 255) 100%);
3
4
  --tui-gradient-brand-all-airlines-debit: linear-gradient(241deg, rgb(81, 127, 195) 0%, rgb(50, 89, 145) 100%);
4
5
  --tui-gradient-brand-all-games-credit: linear-gradient(90deg, rgb(54, 33, 52) 0%, rgb(104, 64, 101) 100%);
package/palette/light.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-background-base: var(--tui-const-white); /* Основной фон приложений. Отличается на iOS, Android и Desktop */
3
4
  --tui-background-base-alt: var(--tui-const-cool-gray-lighter-97); /* Альтернативный основной фон, в тёмной теме в вебе равен base */
4
5
  --tui-background-elevation-1: var(--tui-const-white); /* Фон шторок, модальных экранов и карточек, лежащих на фоне base */
@@ -166,7 +167,7 @@
166
167
  --tui-chart-categorical-04: var(--tui-const-turquoise);
167
168
  --tui-chart-categorical-05: var(--tui-const-orange);
168
169
  --tui-chart-categorical-06: var(--tui-const-purple);
169
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
170
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
170
171
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
171
172
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
172
173
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -202,6 +203,7 @@
202
203
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
203
204
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
204
205
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
206
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
205
207
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
206
208
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
207
209
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -215,10 +217,11 @@
215
217
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
216
218
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
217
219
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
220
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
218
221
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
219
222
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
220
223
  --tui-const-green: #00B92D; /* N11 */
221
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
224
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
222
225
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
223
226
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
224
227
  --tui-const-green-darker-18: #144823;
@@ -236,6 +239,7 @@
236
239
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
237
240
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
238
241
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
242
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
239
243
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
240
244
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
241
245
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -262,6 +266,7 @@
262
266
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
263
267
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
264
268
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
269
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
265
270
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
266
271
  --tui-const-red: #F52222; /* N10 */
267
272
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -453,7 +458,7 @@
453
458
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
454
459
  --tui-service-backdrop: var(--tui-const-black-alpha-70); /* Затемнение на фоне модальных окон и шторок */
455
460
  --tui-service-underline: var(--tui-const-blue-darker-79); /* Подчеркивание для ссылок */
456
- --tui-service-underline-hover: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
461
+ --tui-service-underline-hover: var(--tui-const-blue-darker-44); /* Подчеркивание для ссылок */
457
462
  --tui-service-underline-pressed: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
458
463
  --tui-service-underline-grayscale: var(--tui-const-black-alpha-32); /* Подчеркивание для монохромных ссылок */
459
464
  --tui-service-underline-grayscale-hover: var(--tui-const-black-alpha-80); /* Подчеркивание для монохромных ссылок */
@@ -549,21 +554,21 @@
549
554
  --tui-text-tertiary-on-light: var(--tui-const-black-alpha-40); /* Лейблы задизейбленных кнопок, дисклеймеры на светлых фонах, не меняется при смене темы */
550
555
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-50); /* Лейблы задизейбленных кнопок, дисклеймеры на светлых фонах, не меняется при смене темы */
551
556
  --tui-text-action: var(--tui-const-blue-darker-52); /* Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent */
552
- --tui-text-action-hover: var(--tui-const-blue-darker-46); /* Только для веба. Состояние текста при наведении */
557
+ --tui-text-action-hover: var(--tui-const-blue-darker-44); /* Только для веба. Состояние текста при наведении */
553
558
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); /* Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed */
554
559
  --tui-text-action-on-dark: var(--tui-const-blue-darker-72); /* Текст и иконки интерактивного текста на тёмных фонах */
555
560
  --tui-text-accent: var(--tui-const-blue); /* @Deprecated: Заменён на цвет action */
556
561
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет action-pressed */
557
562
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
558
563
  --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет accent-pressed */
559
- --tui-text-positive: var(--tui-const-green-darker-34); /* Текст позитивного лейбла, например пополнение счета или рост цены акций */
560
- --tui-text-positive-hover: var(--tui-const-green-darker-21); /* Только для веба. Текст позитивного лейбла при нажатии */
564
+ --tui-text-positive: var(--tui-const-green-darker-32); /* Текст позитивного лейбла, например пополнение счета или рост цены акций */
565
+ --tui-text-positive-hover: var(--tui-const-green-darker-28); /* Только для веба. Текст позитивного лейбла при нажатии */
561
566
  --tui-text-positive-on-dark: var(--tui-const-green-lighter-44); /* Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций */
562
567
  --tui-text-negative: var(--tui-const-red); /* Текст негативного лейбла, например падение цены акций или ошибка */
563
- --tui-text-negative-hover: var(--tui-const-red-darker-32); /* Только для веба. Текст негативного лейбла при наведении на вебе */
568
+ --tui-text-negative-hover: var(--tui-const-red-darker-47); /* Только для веба. Текст негативного лейбла при наведении на вебе */
564
569
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
565
570
  --tui-text-warning: var(--tui-const-yellow-darker-48); /* Предупреждающие текст и иконки */
566
- --tui-text-warning-hover: var(--tui-const-yellow-darker-26); /* Предупреждающие текст и иконки при наведении на вебе */
571
+ --tui-text-warning-hover: var(--tui-const-yellow-darker-44); /* Предупреждающие текст и иконки при наведении на вебе */
567
572
  --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
568
573
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
569
574
  }
package/palette/mobile/dark.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-background-base: var(--tui-const-black); /* Основной фон приложений. Отличается на iOS, Android и Desktop */
3
4
  --tui-background-base-alt: var(--tui-const-black-lighter-20); /* Альтернативный основной фон, в тёмной теме в вебе равен base */
4
5
  --tui-background-elevation-1: var(--tui-const-cool-gray-lighter-11); /* Фон шторок, модальных экранов и карточек, лежащих на фоне base */
@@ -142,7 +143,7 @@
142
143
  --tui-chart-categorical-04: var(--tui-const-turquoise);
143
144
  --tui-chart-categorical-05: var(--tui-const-orange);
144
145
  --tui-chart-categorical-06: var(--tui-const-purple);
145
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
146
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
146
147
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
147
148
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
148
149
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -176,6 +177,7 @@
176
177
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
177
178
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
178
179
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
180
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
179
181
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
180
182
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
181
183
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -189,10 +191,11 @@
189
191
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
190
192
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
191
193
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
194
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
192
195
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
193
196
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
194
197
  --tui-const-green: #00B92D; /* N11 */
195
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
198
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
196
199
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
197
200
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
198
201
  --tui-const-green-darker-18: #144823;
@@ -210,6 +213,7 @@
210
213
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
211
214
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
212
215
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
216
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
213
217
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
214
218
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
215
219
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -236,6 +240,7 @@
236
240
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
237
241
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
238
242
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
243
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
239
244
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
240
245
  --tui-const-red: #F52222; /* N10 */
241
246
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -425,7 +430,7 @@
425
430
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
426
431
  --tui-service-backdrop: var(--tui-const-black-alpha-50); /* Затемнение на фоне модальных окон и шторок */
427
432
  --tui-service-underline: var(--tui-const-blue-darker-66); /* Подчеркивание для ссылок */
428
- --tui-service-underline-hover: var(--tui-const-blue-darker-52); /* Подчеркивание для ссылок */
433
+ --tui-service-underline-hover: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
429
434
  --tui-service-underline-pressed: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
430
435
  --tui-service-underline-grayscale: var(--tui-const-white-alpha-50); /* Подчеркивание для монохромных ссылок */
431
436
  --tui-service-underline-grayscale-hover: var(--tui-const-white-alpha-90); /* Подчеркивание для монохромных ссылок */
package/palette/mobile/light.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-background-base: var(--tui-const-white); /* Основной фон приложений. Отличается на iOS, Android и Desktop */
3
4
  --tui-background-base-alt: var(--tui-const-cool-gray-lighter-97); /* Альтернативный основной фон, в тёмной теме в вебе равен base */
4
5
  --tui-background-elevation-1: var(--tui-const-white); /* Фон шторок, модальных экранов и карточек, лежащих на фоне base */
@@ -142,7 +143,7 @@
142
143
  --tui-chart-categorical-04: var(--tui-const-turquoise);
143
144
  --tui-chart-categorical-05: var(--tui-const-orange);
144
145
  --tui-chart-categorical-06: var(--tui-const-purple);
145
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
146
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
146
147
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
147
148
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
148
149
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -176,6 +177,7 @@
176
177
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
177
178
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
178
179
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
180
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
179
181
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
180
182
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
181
183
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -189,10 +191,11 @@
189
191
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
190
192
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
191
193
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
194
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
192
195
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
193
196
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
194
197
  --tui-const-green: #00B92D; /* N11 */
195
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
198
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
196
199
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
197
200
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
198
201
  --tui-const-green-darker-18: #144823;
@@ -210,6 +213,7 @@
210
213
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
211
214
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
212
215
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
216
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
213
217
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
214
218
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
215
219
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -236,6 +240,7 @@
236
240
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
237
241
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
238
242
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
243
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
239
244
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
240
245
  --tui-const-red: #F52222; /* N10 */
241
246
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -425,7 +430,7 @@
425
430
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
426
431
  --tui-service-backdrop: var(--tui-const-black-alpha-50); /* Затемнение на фоне модальных окон и шторок */
427
432
  --tui-service-underline: var(--tui-const-blue-darker-79); /* Подчеркивание для ссылок */
428
- --tui-service-underline-hover: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
433
+ --tui-service-underline-hover: var(--tui-const-blue-darker-44); /* Подчеркивание для ссылок */
429
434
  --tui-service-underline-pressed: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
430
435
  --tui-service-underline-grayscale: var(--tui-const-cool-gray-lighter-60); /* Подчеркивание для монохромных ссылок */
431
436
  --tui-service-underline-grayscale-hover: var(--tui-const-black-alpha-80); /* Подчеркивание для монохромных ссылок */
package/palette/scss/dark.scss CHANGED
@@ -166,7 +166,7 @@
166
166
  --tui-chart-categorical-04: var(--tui-const-turquoise);
167
167
  --tui-chart-categorical-05: var(--tui-const-orange);
168
168
  --tui-chart-categorical-06: var(--tui-const-purple);
169
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
169
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
170
170
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
171
171
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
172
172
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -202,6 +202,7 @@
202
202
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
203
203
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
204
204
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
205
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
205
206
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
206
207
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
207
208
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -215,10 +216,11 @@
215
216
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
216
217
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
217
218
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
219
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
218
220
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
219
221
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
220
222
  --tui-const-green: #00B92D; /* N11 */
221
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
223
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
222
224
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
223
225
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
224
226
  --tui-const-green-darker-18: #144823;
@@ -236,6 +238,7 @@
236
238
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
237
239
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
238
240
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
241
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
239
242
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
240
243
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
241
244
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -262,6 +265,7 @@
262
265
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
263
266
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
264
267
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
268
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
265
269
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
266
270
  --tui-const-red: #F52222; /* N10 */
267
271
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -453,7 +457,7 @@
453
457
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
454
458
  --tui-service-backdrop: var(--tui-const-black-alpha-70); /* Затемнение на фоне модальных окон и шторок */
455
459
  --tui-service-underline: var(--tui-const-blue-darker-66); /* Подчеркивание для ссылок */
456
- --tui-service-underline-hover: var(--tui-const-blue-darker-52); /* Подчеркивание для ссылок */
460
+ --tui-service-underline-hover: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
457
461
  --tui-service-underline-pressed: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
458
462
  --tui-service-underline-grayscale: var(--tui-const-white-alpha-50); /* Подчеркивание для монохромных ссылок */
459
463
  --tui-service-underline-grayscale-hover: var(--tui-const-white-alpha-90); /* Подчеркивание для монохромных ссылок */
@@ -557,13 +561,13 @@
557
561
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
558
562
  --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет accent-pressed */
559
563
  --tui-text-positive: var(--tui-const-green-lighter-44); /* Текст позитивного лейбла, например пополнение счета или рост цены акций */
560
- --tui-text-positive-hover: var(--tui-const-green); /* Только для веба. Текст позитивного лейбла при нажатии */
564
+ --tui-text-positive-hover: var(--tui-const-green-lighter-48); /* Только для веба. Текст позитивного лейбла при нажатии */
561
565
  --tui-text-positive-on-dark: var(--tui-const-green-lighter-44); /* Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций */
562
566
  --tui-text-negative: var(--tui-const-red-lighter-62); /* Текст негативного лейбла, например падение цены акций или ошибка */
563
- --tui-text-negative-hover: var(--tui-const-red); /* Только для веба. Текст негативного лейбла при наведении на вебе */
567
+ --tui-text-negative-hover: var(--tui-const-red-lighter-68); /* Только для веба. Текст негативного лейбла при наведении на вебе */
564
568
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
565
569
  --tui-text-warning: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки */
566
- --tui-text-warning-hover: var(--tui-const-yellow-darker-38); /* Предупреждающие текст и иконки при наведении на вебе */
570
+ --tui-text-warning-hover: var(--tui-const-yellow-darker-60); /* Предупреждающие текст и иконки при наведении на вебе */
567
571
  --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
568
572
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
569
573
  }
package/palette/scss/light.scss CHANGED
@@ -166,7 +166,7 @@
166
166
  --tui-chart-categorical-04: var(--tui-const-turquoise);
167
167
  --tui-chart-categorical-05: var(--tui-const-orange);
168
168
  --tui-chart-categorical-06: var(--tui-const-purple);
169
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
169
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
170
170
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
171
171
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
172
172
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -202,6 +202,7 @@
202
202
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
203
203
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
204
204
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
205
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
205
206
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
206
207
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
207
208
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -215,10 +216,11 @@
215
216
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
216
217
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
217
218
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
219
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
218
220
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
219
221
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
220
222
  --tui-const-green: #00B92D; /* N11 */
221
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
223
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
222
224
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
223
225
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
224
226
  --tui-const-green-darker-18: #144823;
@@ -236,6 +238,7 @@
236
238
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
237
239
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
238
240
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
241
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
239
242
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
240
243
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
241
244
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -262,6 +265,7 @@
262
265
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
263
266
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
264
267
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
268
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
265
269
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
266
270
  --tui-const-red: #F52222; /* N10 */
267
271
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -453,7 +457,7 @@
453
457
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
454
458
  --tui-service-backdrop: var(--tui-const-black-alpha-70); /* Затемнение на фоне модальных окон и шторок */
455
459
  --tui-service-underline: var(--tui-const-blue-darker-79); /* Подчеркивание для ссылок */
456
- --tui-service-underline-hover: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
460
+ --tui-service-underline-hover: var(--tui-const-blue-darker-44); /* Подчеркивание для ссылок */
457
461
  --tui-service-underline-pressed: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
458
462
  --tui-service-underline-grayscale: var(--tui-const-black-alpha-32); /* Подчеркивание для монохромных ссылок */
459
463
  --tui-service-underline-grayscale-hover: var(--tui-const-black-alpha-80); /* Подчеркивание для монохромных ссылок */
@@ -549,21 +553,21 @@
549
553
  --tui-text-tertiary-on-light: var(--tui-const-black-alpha-40); /* Лейблы задизейбленных кнопок, дисклеймеры на светлых фонах, не меняется при смене темы */
550
554
  --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-50); /* Лейблы задизейбленных кнопок, дисклеймеры на светлых фонах, не меняется при смене темы */
551
555
  --tui-text-action: var(--tui-const-blue-darker-52); /* Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent */
552
- --tui-text-action-hover: var(--tui-const-blue-darker-46); /* Только для веба. Состояние текста при наведении */
556
+ --tui-text-action-hover: var(--tui-const-blue-darker-44); /* Только для веба. Состояние текста при наведении */
553
557
  --tui-text-action-pressed: var(--tui-const-blue-darker-40); /* Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed */
554
558
  --tui-text-action-on-dark: var(--tui-const-blue-darker-72); /* Текст и иконки интерактивного текста на тёмных фонах */
555
559
  --tui-text-accent: var(--tui-const-blue); /* @Deprecated: Заменён на цвет action */
556
560
  --tui-text-accent-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет action-pressed */
557
561
  --tui-text-engaging: var(--tui-const-blue); /* @Deprecated: Заменён на цвет accent */
558
562
  --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); /* @Deprecated: Заменён на цвет accent-pressed */
559
- --tui-text-positive: var(--tui-const-green-darker-34); /* Текст позитивного лейбла, например пополнение счета или рост цены акций */
560
- --tui-text-positive-hover: var(--tui-const-green-darker-21); /* Только для веба. Текст позитивного лейбла при нажатии */
563
+ --tui-text-positive: var(--tui-const-green-darker-32); /* Текст позитивного лейбла, например пополнение счета или рост цены акций */
564
+ --tui-text-positive-hover: var(--tui-const-green-darker-28); /* Только для веба. Текст позитивного лейбла при нажатии */
561
565
  --tui-text-positive-on-dark: var(--tui-const-green-lighter-44); /* Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций */
562
566
  --tui-text-negative: var(--tui-const-red); /* Текст негативного лейбла, например падение цены акций или ошибка */
563
- --tui-text-negative-hover: var(--tui-const-red-darker-32); /* Только для веба. Текст негативного лейбла при наведении на вебе */
567
+ --tui-text-negative-hover: var(--tui-const-red-darker-47); /* Только для веба. Текст негативного лейбла при наведении на вебе */
564
568
  --tui-text-negative-on-dark: var(--tui-const-red-lighter-70); /* Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка */
565
569
  --tui-text-warning: var(--tui-const-yellow-darker-48); /* Предупреждающие текст и иконки */
566
- --tui-text-warning-hover: var(--tui-const-yellow-darker-26); /* Предупреждающие текст и иконки при наведении на вебе */
570
+ --tui-text-warning-hover: var(--tui-const-yellow-darker-44); /* Предупреждающие текст и иконки при наведении на вебе */
567
571
  --tui-text-warning-on-dark: var(--tui-const-yellow-darker-54); /* Предупреждающие текст и иконки на тёмных фонах */
568
572
  --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); /* @Deprecated: Заменён на цвет primary-on-t-bank */
569
573
  }
package/palette/scss/mobile/dark.scss CHANGED
@@ -142,7 +142,7 @@
142
142
  --tui-chart-categorical-04: var(--tui-const-turquoise);
143
143
  --tui-chart-categorical-05: var(--tui-const-orange);
144
144
  --tui-chart-categorical-06: var(--tui-const-purple);
145
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
145
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
146
146
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
147
147
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
148
148
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -176,6 +176,7 @@
176
176
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
177
177
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
178
178
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
179
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
179
180
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
180
181
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
181
182
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -189,10 +190,11 @@
189
190
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
190
191
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
191
192
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
193
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
192
194
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
193
195
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
194
196
  --tui-const-green: #00B92D; /* N11 */
195
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
197
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
196
198
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
197
199
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
198
200
  --tui-const-green-darker-18: #144823;
@@ -210,6 +212,7 @@
210
212
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
211
213
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
212
214
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
215
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
213
216
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
214
217
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
215
218
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -236,6 +239,7 @@
236
239
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
237
240
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
238
241
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
242
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
239
243
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
240
244
  --tui-const-red: #F52222; /* N10 */
241
245
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -425,7 +429,7 @@
425
429
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
426
430
  --tui-service-backdrop: var(--tui-const-black-alpha-50); /* Затемнение на фоне модальных окон и шторок */
427
431
  --tui-service-underline: var(--tui-const-blue-darker-66); /* Подчеркивание для ссылок */
428
- --tui-service-underline-hover: var(--tui-const-blue-darker-52); /* Подчеркивание для ссылок */
432
+ --tui-service-underline-hover: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
429
433
  --tui-service-underline-pressed: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
430
434
  --tui-service-underline-grayscale: var(--tui-const-white-alpha-50); /* Подчеркивание для монохромных ссылок */
431
435
  --tui-service-underline-grayscale-hover: var(--tui-const-white-alpha-90); /* Подчеркивание для монохромных ссылок */
package/palette/scss/mobile/light.scss CHANGED
@@ -142,7 +142,7 @@
142
142
  --tui-chart-categorical-04: var(--tui-const-turquoise);
143
143
  --tui-chart-categorical-05: var(--tui-const-orange);
144
144
  --tui-chart-categorical-06: var(--tui-const-purple);
145
- --tui-chart-categorical-07: var(--tui-const-green-darker-34);
145
+ --tui-chart-categorical-07: var(--tui-const-green-darker-32);
146
146
  --tui-chart-categorical-08: var(--tui-const-blue-darker-70);
147
147
  --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
148
148
  --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
@@ -176,6 +176,7 @@
176
176
  --tui-const-yellow-darker-54: #FAB619; /* hsL=54 */
177
177
  --tui-const-yellow-darker-50: #FAA805; /* hsL=50 */
178
178
  --tui-const-yellow-darker-48: #F49C01; /* hsL=48 */
179
+ --tui-const-yellow-darker-44: #DD9403; /* hsL=44 */
179
180
  --tui-const-yellow-darker-38: #BF8003; /* hsL=38 */
180
181
  --tui-const-yellow-darker-32: #806925; /* hsL=32 */
181
182
  --tui-const-yellow-darker-26: #614F23; /* hsL=26 */
@@ -189,10 +190,11 @@
189
190
  --tui-const-yellow-alpha-48: #FFDD2D7A; /* 48% opacity */
190
191
  --tui-const-green-lighter-64: #94D274; /* hsL=64 */
191
192
  --tui-const-green-lighter-57: #60C366; /* hsL=57 */
193
+ --tui-const-green-lighter-48: #00F53C; /* hsL=48 */
192
194
  --tui-const-green-lighter-44: #00E037; /* hsL=44 */
193
195
  --tui-const-green-lighter-42: #00D635; /* hsL=42 */
194
196
  --tui-const-green: #00B92D; /* N11 */
195
- --tui-const-green-darker-34: #00A328; /* hsL=34 */
197
+ --tui-const-green-darker-32: #00A328; /* hsL=32 */
196
198
  --tui-const-green-darker-28: #038C24; /* hsL=28 */
197
199
  --tui-const-green-darker-21: #115B24; /* hsL=21 */
198
200
  --tui-const-green-darker-18: #144823;
@@ -210,6 +212,7 @@
210
212
  --tui-const-blue-darker-66: #5798FA; /* hsL=66 */
211
213
  --tui-const-blue-darker-52: #126DF7; /* hsL=52 */
212
214
  --tui-const-blue-darker-46: #156ED4; /* N8 pressed, hsL=46 */
215
+ --tui-const-blue-darker-44: #165ECA; /* hsL=44 */
213
216
  --tui-const-blue-darker-40: #1455B8; /* hsL=40 */
214
217
  --tui-const-blue-darker-32: #2B4976; /* hsL=32 */
215
218
  --tui-const-blue-darker-28: #2A4165; /* hsL=28 */
@@ -236,6 +239,7 @@
236
239
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
237
240
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
238
241
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
242
+ --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
239
243
  --tui-const-red-lighter-70: #FF6666; /* hsL=70 */
240
244
  --tui-const-red: #F52222; /* N10 */
241
245
  --tui-const-red-darker-53: #DC3233; /* hsL=53 */
@@ -425,7 +429,7 @@
425
429
  --tui-service-highlight-background: var(--tui-const-yellow-alpha-32); /* Фон под выделенным текстом */
426
430
  --tui-service-backdrop: var(--tui-const-black-alpha-50); /* Затемнение на фоне модальных окон и шторок */
427
431
  --tui-service-underline: var(--tui-const-blue-darker-79); /* Подчеркивание для ссылок */
428
- --tui-service-underline-hover: var(--tui-const-blue-darker-46); /* Подчеркивание для ссылок */
432
+ --tui-service-underline-hover: var(--tui-const-blue-darker-44); /* Подчеркивание для ссылок */
429
433
  --tui-service-underline-pressed: var(--tui-const-blue-darker-74); /* Подчеркивание для ссылок */
430
434
  --tui-service-underline-grayscale: var(--tui-const-cool-gray-lighter-60); /* Подчеркивание для монохромных ссылок */
431
435
  --tui-service-underline-grayscale-hover: var(--tui-const-black-alpha-80); /* Подчеркивание для монохромных ссылок */
package/palette/shadow.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
1
+ :root,
2
+ :host {
2
3
  --tui-shadow-small: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); /* Тень для мелких элементов интерфейса, например Chips */
3
4
  --tui-shadow-small-hover: 0px 14px 42px 0px rgba(0, 0, 0, 0.12);
4
5
  --tui-shadow-medium: 0px 6px 34px 0px rgba(0, 0, 0, 0.12); /* Тень для карточек и других больших объектов, например тултипов */