@taiga-ui/design-tokens 0.224.0 → 0.226.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 (20) hide show
  1. package/angular/desktop.less +22 -13
  2. package/angular/fonts/desktop.less +2 -1
  3. package/angular/mobile.less +13 -5
  4. package/esm2022/icons.mjs +8 -1
  5. package/fesm2022/taiga-ui-design-tokens.mjs +7 -0
  6. package/fesm2022/taiga-ui-design-tokens.mjs.map +1 -1
  7. package/fonts/desktop.css +2 -1
  8. package/icons.d.ts +1 -1
  9. package/package.json +1 -1
  10. package/palette/animation.css +2 -1
  11. package/palette/dark.css +11 -6
  12. package/palette/gradient.css +2 -1
  13. package/palette/light.css +14 -9
  14. package/palette/mobile/dark.css +8 -3
  15. package/palette/mobile/light.css +9 -4
  16. package/palette/scss/dark.scss +9 -5
  17. package/palette/scss/light.scss +12 -8
  18. package/palette/scss/mobile/dark.scss +6 -2
  19. package/palette/scss/mobile/light.scss +7 -3
  20. 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
@@ -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
@@ -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); // Подчеркивание для монохромных ссылок