@taiga-ui/design-tokens 0.80.0 → 0.82.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 +909 -0
  2. package/angular/mobile.less +853 -0
  3. package/package.json +5 -4
  4. package/palette/dark.css +34 -17
  5. package/palette/light.css +34 -17
  6. package/palette/mobile/dark.css +34 -17
  7. package/palette/mobile/light.css +34 -17
package/angular/mobile.less ADDED
@@ -0,0 +1,853 @@
1
+ /* stylelint-disable */
2
+ /* prettier-ignore */
3
+ /**
4
+ * @description:
5
+ * DO NOT CHANGE THIS FILE. AUTOGENERATED.
6
+ */
7
+
8
+ [tuiPlatform='ios'][tuiTheme='dark'],
9
+ [tuiPlatform='android'][tuiTheme='dark'],
10
+ [tuiPlatform='ios'] [tuiTheme='dark'],
11
+ [tuiPlatform='android'] [tuiTheme='dark'],
12
+ [tuiTheme='dark'] [tuiPlatform='ios'],
13
+ [tuiTheme='dark'] [tuiPlatform='android'] {
14
+ --tui-background-base: var(--tui-const-black); // Основной фон приложений. Отличается на iOS, Android и Desktop
15
+ --tui-background-base-alt: var(--tui-const-black-lighter-20); // Альтернативный основной фон
16
+ --tui-background-elevation-1: var(--tui-const-cool-gray-lighter-11); // Фон шторок, модальных экранов и карточек, лежащих на фонe base
17
+ --tui-background-elevation-2: var(--tui-const-cool-gray-lighter-18); // Фон карточек, лежащих на фонe elevation-1
18
+ --tui-background-elevation-3: var(--tui-const-black-lighter-20); // Фон элементов, возвышающихся над всем остальным контентом. Например, всплывающих подсказок
19
+ --tui-background-neutral-1: var(--tui-const-white-alpha-10); // Прозрачные контейнеры с минимальным контрастом на фонах base, elevation и neutral. Второстепенные кнопки, карточки без тени, задизейбленные кнопки и т.д.
20
+ --tui-background-neutral-1-on-light: var(--tui-const-black-alpha-3); // Прозрачные контейнеры с минимальным контрастом на светлых цветных фонах. Не меняется при переключении темы
21
+ --tui-background-neutral-1-on-dark: var(--tui-const-white-alpha-10); // Прозрачные контейнеры с минимальным контрастом на темных цветных фонах. Не меняется при переключении темы
22
+ --tui-background-neutral-1-opaque: var(--tui-const-black-lighter-20); // Непрозрачные контейнеры кнопок закрытия и удаления элементов
23
+ --tui-background-neutral-1-on-base: var(--tui-const-cool-gray-lighter-11); // Непрозрачные контейнеры с минимальным контрастом на фоне base, не имеющие тени в светлой теме
24
+ --tui-background-neutral-1-on-elevation-1: var(--tui-const-cool-gray-lighter-18); // Непрозрачные контейнеры с минимальным контрастом на фоне elevation-1, не имеющие тени в светлой теме
25
+ --tui-background-neutral-1-pressed: var(--tui-const-white-alpha-15); // Нажатое состояние элементов с фоном neutral-1
26
+ --tui-background-neutral-1-pressed-on-light: var(--tui-const-black-alpha-6); // Нажатое состояние элементов с фоном neutral-1-on-light, не меняется при переключении темы
27
+ --tui-background-neutral-1-pressed-on-dark: var(--tui-const-white-alpha-15); // Нажатое состояние элементов с фоном neutral-1-on-dark, не меняется при смене темы
28
+ --tui-background-neutral-2: var(--tui-const-white-alpha-15); // Прозрачные контейнеры маленьких размеров
29
+ --tui-background-neutral-2-pressed: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
30
+ --tui-background-neutral-2-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Изменен на neutral-1-pressed-on-light
31
+ --tui-background-neutral-2-on-dark: var(--tui-const-white-alpha-15); // @Deprecated: Изменен на neutral-1-pressed-on-dark
32
+ --tui-background-neutral-3: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
33
+ --tui-background-neutral-3-on-light: var(--tui-const-black-alpha-12); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
34
+ --tui-background-neutral-3-on-dark: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
35
+ --tui-background-neutral-4: var(--tui-const-white-alpha-30); // Прозрачные контейнеры со средним контрастом. Контейнер аватара с иконкой или текстом
36
+ --tui-background-neutral-4-on-light: var(--tui-const-cool-gray-alpha-22); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Контейнер аватара с иконкой или текстом. Нажатое состояние элементов с цветом neutral-3
37
+ --tui-background-neutral-4-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark. Использовался для стеклянных поверхностей
38
+ --tui-background-neutral-6: var(--tui-const-white-alpha-50); // Прозрачные контейнеры с сильным контрастом
39
+ --tui-background-neutral-6-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light. Использовался для стеклянных поверхностей.
40
+ --tui-background-neutral-6-on-dark: var(--tui-const-white-alpha-50); // Прозрачные контейнеры с большим контрастом на темных цветных фонах
41
+ --tui-background-opposite: var(--tui-const-white); // @Deprecated: Заменен на accent-opposite
42
+ --tui-background-primary-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-light
43
+ --tui-background-primary-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
44
+ --tui-background-highlight: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
45
+ --tui-background-highlight-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
46
+ --tui-background-highlight-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
47
+ --tui-background-highlight-on-opposite: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
48
+ --tui-background-highlight-on-tinkoff: #FAB61966; // @Deprecated: Переехал в отдельную группу service
49
+ --tui-background-warning: var(--tui-const-yellow-darker-26); // @Deprecated: Переехал в отдельную группу status
50
+ --tui-background-warning-pressed: var(--tui-const-yellow-darker-32); // @Deprecated: Переехал в отдельную группу status
51
+ --tui-background-positive: var(--tui-const-green-darker-18); // @Deprecated: Переехал в отдельную группу status
52
+ --tui-background-positive-pressed: var(--tui-const-green-darker-21); // @Deprecated: Переехал в отдельную группу status
53
+ --tui-background-negative: var(--tui-const-red-darker-23); // @Deprecated: Переехал в группу status
54
+ --tui-background-negative-pressed: var(--tui-const-red-darker-29); // @Deprecated: Переехал в группу status
55
+ --tui-background-info: var(--tui-const-blue-darker-28); // @Deprecated: Переехал в группу status
56
+ --tui-background-info-pressed: var(--tui-const-blue-darker-32); // @Deprecated: Переехал в группу status
57
+ --tui-background-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent-2
58
+ --tui-background-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-2-pressed
59
+ --tui-background-accent-pale: var(--tui-const-blue-alpha-16); // @Deprecated: Заменён на компонентный токен
60
+ --tui-background-accent-pale-pressed: var(--tui-const-blue-alpha-24); // @Deprecated: Заменён на компонентный токен
61
+ --tui-background-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
62
+ --tui-background-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
63
+ --tui-background-brand-tinkoff: var(--tui-const-yellow); // @Deprecated: Переехал в отдельную группу brand
64
+ --tui-background-brand-pro: #AFF218; // @Deprecated: Переехал в отдельную группу brand
65
+ --tui-background-brand-premium: #4972CF; // @Deprecated: Переехал в отдельную группу brand
66
+ --tui-background-notification: var(--tui-const-red); // @Deprecated: Переехал в компонентные токены
67
+ --tui-background-selected-text: var(--tui-const-blue-alpha-24); // @Deprecated: Переехал в отдельную группу service
68
+ --tui-background-accent-1: var(--tui-const-yellow); // Фоны акцентных кнопок, бейджей и т.д.
69
+ --tui-background-accent-1-pressed: var(--tui-const-yellow-darker-60); // Фоны акцентных кнопок, бейджей и т.д. при нажатии
70
+ --tui-background-accent-2: var(--tui-const-blue); // Фоны акцентных кнопок, бейджей и т.д.
71
+ --tui-background-accent-2-pressed: var(--tui-const-blue-darker-52); // Фоны акцентных кнопок, бейджей и т.д.
72
+ --tui-background-accent-opposite: var(--tui-const-white); // Фон, противоположный base: в белой теме — черный, в темной теме — белый
73
+ --tui-background-accent-opposite-pressed: var(--tui-const-cool-gray-lighter-97); // Фон, противоположный base при нажатии: в белой теме — черный, в темной теме — белый
74
+ --tui-background-accent-on-light: var(--tui-const-black); // Контрастные контейнеры на светлых фонах, не меняется при смене темы
75
+ --tui-background-accent-on-light-pressed: var(--tui-const-black-lighter-16); // Контрастные контейнеры при нажатии на светлых фонах, не меняется при смене темы.
76
+ --tui-background-accent-on-dark: var(--tui-const-white); // Контрастные контейнеры на темных фонах, не меняется при смене темы
77
+ --tui-background-accent-on-dark-pressed: var(--tui-const-cool-gray-lighter-97); // Контрастные контейнеры при нажатии на темных фонах, не меняется при смене темы.
78
+ --tui-background-button-close-on-light: var(--tui-const-black-alpha-40); // Фон кнопки закрытия на светлом фоне. не меняется при переключении темы. бывший цвет neutral-3-on-light. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
79
+ --tui-background-button-close-on-dark: var(--tui-const-white-alpha-50); // @Deprecated: Заменен на overlay-glass-on-dark
80
+ --tui-background-badge-notification: var(--tui-const-red); // Контейнеры нотификационных бейджей. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
81
+ --tui-background-toggle: var(--tui-const-white-alpha-20); // @Deprecated: Заменен на background.neutral-2
82
+ --tui-background-button-vertical: var(--tui-const-blue-alpha-16); // Фон tui-button [vertical]. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
83
+ --tui-background-button-vertical-pressed: var(--tui-const-blue-alpha-24); // Фон tui-button [vertical] при нажатии и наведении. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
84
+ --tui-background-button-glass-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark
85
+ --tui-background-button-glass-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light
86
+ --tui-background-progress-bar: var(--tui-const-white-alpha-15); // Пустая полоска прогресс-баров. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
87
+ --tui-background-tooltip: var(--tui-const-cool-gray-lighter-51); // Фон для тултипов
88
+ --tui-background-thumbnail-card-badge: var(--tui-const-black-alpha-12); // Прозрачный контейнер бейджа на миниатюре карты. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
89
+ --tui-background-overlay-glass-on-dark: var(--tui-const-white-alpha-30); // Оверлей стеклянных поверхностей на темных фонах, не меняется при смене темы.
90
+ --tui-background-overlay-glass-on-light: var(--tui-const-black-alpha-40); // Оверлей стеклянных поверхностей на cветлых фонах, не меняется при смене темы
91
+ --tui-border-normal: var(--tui-const-white-alpha-20); // Бордеры и сепараторы на основных фонах
92
+ --tui-border-normal-pale: var(--tui-const-white-alpha-16); // Бледные бордеры и сепараторы на основных фонах
93
+ --tui-border-normal-opaque: var(--tui-const-black-lighter-20); // Бордеры и сепараторы на основных фонах без прозрачности
94
+ --tui-border-normal-pale-opaque: var(--tui-const-black-lighter-16); // Бледные непрозрачные бордеры и сепараторы на основных фонах
95
+ --tui-border-selected: var(--tui-const-blue); // Обводка выделенных элементов
96
+ --tui-border-darkmode-only: var(--tui-const-white-alpha-10); // Обводка, отделяющая цветные элементы от фона в темной теме
97
+ --tui-border-on-light: var(--tui-const-black-alpha-3); // Обводка, отделяющая цветные элементы от светлого фонов
98
+ --tui-border-on-dark: var(--tui-const-white-alpha-10); // Обводка, отделяющая цветные элементы от темных фонов
99
+ --tui-brand-t-bank: #FFDD2D; // Фирменный цвет. Используется, например, в бейдже подписки Team
100
+ --tui-brand-t-pro: #AFF218; // Цвет подписки Tinkoff PRO. для фонов кнопок, бейджей и т.д.
101
+ --tui-brand-t-premium: #4972CF; // Цвет подписки Tinkoff Premium. для фонов кнопок, бейджей и т.д.
102
+ --tui-brand-t-black: #333333; // Фирменный цвет Tinkoff Black
103
+ --tui-brand-t-platinum: #747B8F; // Фирменный цвет Tinkoff Platinum
104
+ --tui-brand-t-mobile: #5848C3; // Фирменный цвет Tinkoff Mobile
105
+ --tui-brand-t-mobile-alt-1: #BAB3EC; // Фирменный цвет Tinkoff Mobile
106
+ --tui-brand-t-all-airlines: #27BEFF; // Фирменный цвет Tinkoff Mobile
107
+ --tui-brand-t-all-airlines-alt-1: #CBEFFF; // Бледный оттенок фирменного цвета Tinkoff All Airlines
108
+ --tui-brand-t-ai-assistant: #9A6BFF; // Фирменный цвет Tinkoff Ai Assistant
109
+ --tui-brand-t-insurance: #27AFA5; // Фирменный цвет Страхования
110
+ --tui-brand-t-business: #B58B60; // Фирменный цвет Бизнеса
111
+ --tui-brand-t-business-alt-1: #E4D7C1; // Фирменный цвет Бизнеса
112
+ --tui-brand-t-invest: #41414D; // Фирменный цвет Инвестиций
113
+ --tui-brand-t-private: #212121; // Фирменный цвет Private
114
+ --tui-brand-mir-pay: #006848; // Цвет для кнопок Mir Pay
115
+ --tui-brand-t-insurance-alt-1: #E1F9F7; // Бледный оттенок фирменного цвета Страхования
116
+ --tui-brand-tinkoff: #FFDD2D; // @Deprecated: Заменён на t-bank
117
+ --tui-brand-tinkoff-pro: #AFF218; // @Deprecated: Заменён на t-pro
118
+ --tui-brand-tinkoff-premium: #4972CF; // @Deprecated: Заменён на t-premium
119
+ --tui-brand-tinkoff-black: #333333; // @Deprecated: Заменён на t-black
120
+ --tui-brand-tinkoff-platinum: #747B8F; // @Deprecated: Заменён на t-platinum
121
+ --tui-brand-tinkoff-mobile: #5848C3; // @Deprecated: Заменён на t-mobile
122
+ --tui-brand-tinkoff-mobile-alt-1: #BAB3EC; // @Deprecated: Заменён на t-mobile-alt-1
123
+ --tui-brand-tinkoff-all-airlines: #27BEFF; // @Deprecated: Заменён на t-all-airlines
124
+ --tui-brand-tinkoff-all-airlines-alt-1: #CBEFFF; // @Deprecated: Заменён на t-all-airlines-alt-1
125
+ --tui-brand-tinkoff-ai-assistant: #9A6BFF; // @Deprecated: Заменён на t-ai-assistant
126
+ --tui-brand-tinkoff-insurance: #27AFA5; // @Deprecated: Заменён на t-insurance
127
+ --tui-brand-tinkoff-business: #B58B60; // @Deprecated: Заменён на t-business
128
+ --tui-brand-tinkoff-business-alt-1: #E4D7C1; // @Deprecated: Заменён на t-business-alt-1
129
+ --tui-brand-tinkoff-invest: #41414D; // @Deprecated: Заменён на t-invest
130
+ --tui-brand-tinkoff-private: #212121; // @Deprecated: Заменён на t-private
131
+ --tui-brand-tinkoff-insurance-pale: #D0F4F2; // @Deprecated: Заменён на t-insurance-alt-1
132
+ --tui-brand-tinkoff-insurance-alt-1: #E1F9F7; // @Deprecated: Заменён на t-insurance-alt-1
133
+ --tui-chart-categorical-01: var(--tui-const-sea-blue);
134
+ --tui-chart-categorical-02: var(--tui-const-purple-darker-72);
135
+ --tui-chart-categorical-03: var(--tui-const-coral-darker-60);
136
+ --tui-chart-categorical-04: var(--tui-const-turquoise);
137
+ --tui-chart-categorical-05: var(--tui-const-orange);
138
+ --tui-chart-categorical-06: var(--tui-const-purple);
139
+ --tui-chart-categorical-07: var(--tui-const-green-darker-34);
140
+ --tui-chart-categorical-08: var(--tui-const-blue-lighter-70);
141
+ --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
142
+ --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
143
+ --tui-chart-categorical-11: var(--tui-const-pink);
144
+ --tui-chart-categorical-12: var(--tui-const-sea-blue-darker-48);
145
+ --tui-chart-categorical-13: var(--tui-const-orange-darker-56);
146
+ --tui-chart-categorical-14: var(--tui-const-purple-darker-60);
147
+ --tui-chart-categorical-15: var(--tui-const-pink-darker-64);
148
+ --tui-chart-categorical-16: var(--tui-const-emerald-darker-42);
149
+ --tui-chart-categorical-17: var(--tui-const-coral);
150
+ --tui-chart-categorical-18: var(--tui-const-purple-darker-48);
151
+ --tui-chart-categorical-19: var(--tui-const-coral-darker-52);
152
+ --tui-chart-categorical-20: var(--tui-const-emerald);
153
+ --tui-chart-categorical-21: var(--tui-const-turquoise-darker-36);
154
+ --tui-chart-categorical-22: var(--tui-const-pink-darker-60);
155
+ --tui-chart-categorical-23: var(--tui-const-yellow-darker-60);
156
+ --tui-chart-categorical-24: var(--tui-const-turquoise-darker-40);
157
+ --tui-chart-categorical-25: var(--tui-const-green-lighter-64);
158
+ --tui-chart-categorical-26: var(--tui-const-sea-blue-lighter-66);
159
+ --tui-chart-categorical-27: var(--tui-const-green-lighter-57);
160
+ --tui-const-yellow: #FFDD2D; // N9
161
+ --tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
162
+ --tui-const-yellow-darker-54: #FAB619; // hsL=54
163
+ --tui-const-yellow-darker-32: #806925; // hsL=32
164
+ --tui-const-yellow-darker-26: #614F23; // hsL=26
165
+ --tui-const-yellow-alpha-14: #FFDD2D24; // 14% opacity
166
+ --tui-const-yellow-alpha-24: #FFDD2D3D; // 24% opacity
167
+ --tui-const-yellow-alpha-30: #FFDD2D4D; // 30% opacity
168
+ --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
169
+ --tui-const-green-lighter-64: #94D274; // hsL=64
170
+ --tui-const-green-lighter-57: #60C366; // hsL=57
171
+ --tui-const-green-lighter-44: #00E037; // hsL=44
172
+ --tui-const-green: #00B92D; // N11
173
+ --tui-const-green-darker-34: #00A328; // hsL=34
174
+ --tui-const-green-darker-21: #115B24; // hsL=21
175
+ --tui-const-green-darker-18: #144823;
176
+ --tui-const-green-alpha-16: #00B92D29; // 16% opacity
177
+ --tui-const-green-alpha-24: #00B92D3D; // 24% opacity
178
+ --tui-const-green-alpha-32: #00B92D52; // 32% opacity
179
+ --tui-const-blue: #428BF9; // N8
180
+ --tui-const-blue-lighter-70: #6BA4FA; // hsL=52
181
+ --tui-const-blue-darker-52: #126DF7; // hsL=52
182
+ --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
183
+ --tui-const-blue-darker-40: #1455B8; // hsL=40
184
+ --tui-const-blue-darker-32: #2B4976; // hsL=32
185
+ --tui-const-blue-darker-28: #263B5C; // hsL=28
186
+ --tui-const-blue-alpha-8: #428BF914; // 8% opacity
187
+ --tui-const-blue-alpha-12: #428BF91F; // 12% opacity
188
+ --tui-const-blue-alpha-16: #428BF929; // 16% opacity
189
+ --tui-const-blue-alpha-20: #428BF933; // 16% opacity
190
+ --tui-const-blue-alpha-24: #428BF93D; // 24% opacity
191
+ --tui-const-blue-alpha-64: #428BF9A3; // 64% opacity
192
+ --tui-const-dark-blue-alpha-6: #244A7F0F; // 6% opacity
193
+ --tui-const-dark-blue-alpha-8: #244A7F14; // 8% opacity
194
+ --tui-const-dark-blue-alpha-10: #244A7F1A; // 10% opacity
195
+ --tui-const-dark-blue-alpha-12: #244A7F1F; // 12% opacity
196
+ --tui-const-red-alpha-14: #F5222224; // 12% opacity
197
+ --tui-const-red-alpha-24: #F522223D; // 24% opacity
198
+ --tui-const-red-lighter-62: #F74646; // hsL=62
199
+ --tui-const-red: #F52222; // N10
200
+ --tui-const-red-darker-32: #9C0707; // hsL=32
201
+ --tui-const-red-darker-29: #731F20; // hsL=29
202
+ --tui-const-red-darker-23: #591E20; // hsL=23
203
+ --tui-const-white: #FFFFFF; // N14
204
+ --tui-const-white-96: #FFFFFFF2; // @Deprecated: Заменён на цвет white-alpha-96
205
+ --tui-const-white-90: #FFFFFFE6; // @Deprecated: Заменён на цвет white-alpha-90
206
+ --tui-const-white-80: #FFFFFFCC; // @Deprecated: Заменён на цвет white-alpha-90
207
+ --tui-const-white-70: #FFFFFFB3; // @Deprecated: Заменён на цвет white-alpha-70
208
+ --tui-const-white-60: #FFFFFF99; // @Deprecated: Заменён на цвет white-alpha-60
209
+ --tui-const-white-50: #FFFFFF80; // @Deprecated: Заменён на цвет white-alpha-50
210
+ --tui-const-white-40: #FFFFFF66; // @Deprecated: Заменён на цвет white-alpha-40
211
+ --tui-const-white-30: #FFFFFF4D; // @Deprecated: Заменён на цвет white-alpha-30
212
+ --tui-const-white-20: #FFFFFF33; // @Deprecated: Заменён на цвет white-alpha-20
213
+ --tui-const-white-15: #FFFFFF26; // @Deprecated: Заменён на цвет white-alpha-15
214
+ --tui-const-white-10: #FFFFFF1A; // @Deprecated: Заменён на цвет white-alpha-10
215
+ --tui-const-black: #000000; // Бывший N15
216
+ --tui-const-black-90: #000000E6; // @Deprecated: Заменён на цвет black-alpha-90
217
+ --tui-const-black-80: #000000CC; // @Deprecated: Заменён на цвет black-alpha-80
218
+ --tui-const-black-70: #000000B3; // @Deprecated: Заменён на цвет black-alpha-70
219
+ --tui-const-black-60: #00000099; // @Deprecated: Заменён на цвет black-alpha-60
220
+ --tui-const-black-48: #0000007A; // @Deprecated: Заменён на цвет black-alpha-48
221
+ --tui-const-black-40: #00000066; // @Deprecated: Заменён на цвет black-alpha-40
222
+ --tui-const-black-30: #0000004D; // @Deprecated: Заменён на цвет black-alpha-30
223
+ --tui-const-black-21: #00000036; // @Deprecated: Заменён на цвет black-alpha-21
224
+ --tui-const-black-12: #0000001F; // @Deprecated: Заменён на цвет black-alpha-12
225
+ --tui-const-black-6: #00000014; // @Deprecated: Заменён на цвет black-alpha-6
226
+ --tui-const-black-3: #00000008; // @Deprecated: Заменён на цвет black-alpha-3
227
+ --tui-const-gray-93: #121212; // @Deprecated: Заменён на цвет color.const.black-lighter-7
228
+ --tui-const-gray-89: #1C1C1E; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-11
229
+ --tui-const-gray-83: #2C2C2E; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-18
230
+ --tui-const-gray-80: #333333; // @Deprecated: Заменён на цвет color.const.black-lighter-20
231
+ --tui-const-gray-64: #575B61; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-36
232
+ --tui-const-gray-40: #9299A2; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-60
233
+ --tui-const-gray-21: #C7C9CC; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-79
234
+ --tui-const-gray-13: #DDDFE0; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-87
235
+ --tui-const-gray-8: #EAECEE; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-93
236
+ --tui-const-gray-3: #F6F7F8; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-97
237
+ --tui-const-cool-gray-56: #0010248F; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-56
238
+ --tui-const-cool-gray-44: #00102470; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-44
239
+ --tui-const-cool-gray-22: #00102438; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-22
240
+ --tui-const-cool-gray-12: #0010241F; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-12
241
+ --tui-const-cool-gray-6: #0010240F; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-6
242
+ --tui-const-cool-gray-3: #00102408; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-3
243
+ --tui-const-clear: #00000000;
244
+ --tui-const-red-clear: #F522223D; // @Deprecated: Заменён на цвет red-alpha-24
245
+ --tui-const-red-clear-light: #F522221F; // @Deprecated: Заменён на цвет red-alpha-14
246
+ --tui-const-blue-dark: #156ED4; // @Deprecated: Заменён на цвет blue-darker-46
247
+ --tui-const-blue-clear: #428BF93D; // @Deprecated: Заменён на цвет blue-alpha-24
248
+ --tui-const-blue-clear-light: #428BF91F; // @Deprecated: Заменён на цвет blue-alpha-12
249
+ --tui-const-green-clear: #00B92D3D; // @Deprecated: Заменён на цвет green-alpha-24
250
+ --tui-const-green-clear-light: #00B92D1F; // @Deprecated: Заменён на цвет green-alpha-16
251
+ --tui-const-yellow-darker: #FAB619; // @Deprecated: Заменён на цвет yellow-darker-54
252
+ --tui-const-yellow-dark: #FFCD33; // @Deprecated: Заменён на цвет yellow-darker-60
253
+ --tui-const-yellow-clear-light: #FFDD2D24; // @Deprecated: Заменён на цвет yellow-alpha-14
254
+ --tui-const-yellow-clear: #FFDD2D3D; // @Deprecated: Заменён на цвет yellow-alpha-24
255
+ --tui-const-black-alpha-90: #000000E6; // 90% opacity
256
+ --tui-const-black-alpha-80: #000000CC; // 80% opacity
257
+ --tui-const-black-alpha-70: #000000B3; // 70% opacity
258
+ --tui-const-black-alpha-60: #00000099; // 60% opacity
259
+ --tui-const-black-alpha-54: #0000008A; // 54% opacity
260
+ --tui-const-black-alpha-50: #00000080; // 50% opacity
261
+ --tui-const-black-alpha-48: #0000007A; // 48% opacity
262
+ --tui-const-black-alpha-40: #00000066; // 40% opacity
263
+ --tui-const-black-alpha-30: #0000004D; // 30% opacity
264
+ --tui-const-black-alpha-24: #0000003D; // 24% opacity
265
+ --tui-const-black-alpha-21: #00000036; // 21% opacity
266
+ --tui-const-black-alpha-12: #0000001F; // 12% opacity
267
+ --tui-const-black-alpha-10: #0000001A; // 10% opacity
268
+ --tui-const-black-alpha-7: #00000012; // 7% opacity
269
+ --tui-const-black-alpha-6: #0000000f; // 6% opacity
270
+ --tui-const-black-alpha-4: #0000000A; // 4% opacity
271
+ --tui-const-black-alpha-3: #00000008; // 3% opacity
272
+ --tui-const-white-alpha-96: #FFFFFFF5; // 96% opacity
273
+ --tui-const-white-alpha-90: #FFFFFFE6; // 90% opacity
274
+ --tui-const-white-alpha-80: #FFFFFFCC; // 80% opacity
275
+ --tui-const-white-alpha-70: #FFFFFFB3; // 70% opacity
276
+ --tui-const-white-alpha-60: #FFFFFF99; // 60% opacity
277
+ --tui-const-white-alpha-50: #FFFFFF80; // 50% opacity
278
+ --tui-const-white-alpha-40: #FFFFFF66; // 40% opacity
279
+ --tui-const-white-alpha-30: #FFFFFF4D; // 30% opacity
280
+ --tui-const-white-alpha-25: #FFFFFF40; // 25% opacity
281
+ --tui-const-white-alpha-20: #FFFFFF33; // 20% opacity
282
+ --tui-const-white-alpha-16: #FFFFFF29; // 16% opacity
283
+ --tui-const-white-alpha-15: #FFFFFF26; // 15% opacity
284
+ --tui-const-white-alpha-13: #ffffff21; // 13% opacity
285
+ --tui-const-white-alpha-11: #FFFFFF1C; // 11% opacity
286
+ --tui-const-white-alpha-10: #FFFFFF1A; // 10% opacity
287
+ --tui-const-white-alpha-6: #ffffff0F; // 6% opacity
288
+ --tui-const-black-lighter-7: #121212; // N17
289
+ --tui-const-black-lighter-13: #202020;
290
+ --tui-const-cool-gray-lighter-11: #1C1C1E; // N16
291
+ --tui-const-cool-gray-lighter-15: #252527;
292
+ --tui-const-cool-gray-lighter-18: #2C2C2E; // N18
293
+ --tui-const-cool-gray-lighter-51: #79818C;
294
+ --tui-const-cool-gray-lighter-61: #959BA4;
295
+ --tui-const-black-lighter-16: #292929;
296
+ --tui-const-black-lighter-20: #333333; // N1
297
+ --tui-const-black-lighter-22: #383838;
298
+ --tui-const-black-lighter-25: #414141;
299
+ --tui-const-black-lighter-30: #4D4D4D;
300
+ --tui-const-black-lighter-79: #C9C9C9;
301
+ --tui-const-black-lighter-92: #ECECEC;
302
+ --tui-const-cool-gray-lighter-36: #575B61;
303
+ --tui-const-cool-gray-lighter-60: #9299A2; // N3
304
+ --tui-const-cool-gray-lighter-79: #C7C9CC; // N4
305
+ --tui-const-cool-gray-lighter-85: #C7CBCF;
306
+ --tui-const-cool-gray-lighter-87: #DDDFE0; // N5
307
+ --tui-const-cool-gray-lighter-90: #E1E3E4;
308
+ --tui-const-cool-gray-lighter-93: #EAECEE; // N6
309
+ --tui-const-cool-gray-lighter-96: #F2F4F7; // N7
310
+ --tui-const-cool-gray-lighter-97: #F6F7F8; // N7
311
+ --tui-const-cool-gray-alpha-56: #0010248F; // 56% opacity
312
+ --tui-const-cool-gray-alpha-44: #00102470; // 44% opacity
313
+ --tui-const-cool-gray-alpha-22: #00102438; // 22% opacity
314
+ --tui-const-cool-gray-alpha-12: #0010241F; // 12% opacity
315
+ --tui-const-cool-gray-alpha-6: #0010240F; // 6% opacity
316
+ --tui-const-cool-gray-alpha-5: #0010240D; // 5% opacity
317
+ --tui-const-cool-gray-alpha-3: #00102408; // 3% opacity
318
+ --tui-const-purple: #D08FFF;
319
+ --tui-const-purple-darker-72: #C277F8; // hsL=72
320
+ --tui-const-purple-darker-60: #AB6AC8; // hsL=60
321
+ --tui-const-purple-darker-56: #A25BC3; // hsL=56
322
+ --tui-const-purple-darker-48: #8B4EA6; // hsL=48
323
+ --tui-const-pink: #FF7A91;
324
+ --tui-const-pink-darker-64: #F6516C; // hsL=64
325
+ --tui-const-pink-darker-60: #F53D5C; // hsL=60
326
+ --tui-const-orange: #FFB74C;
327
+ --tui-const-orange-darker-56: #FFA51F; // hsL=56
328
+ --tui-const-orange-darker-48: #F59200; // hsL=48
329
+ --tui-const-coral: #FF6347;
330
+ --tui-const-coral-darker-60: #F5593D; // hsL=60
331
+ --tui-const-coral-darker-52: #E74023; // hsL=52
332
+ --tui-const-emerald: #36C578;
333
+ --tui-const-emerald-darker-42: #2EA866; // hsL=42
334
+ --tui-const-sea-blue: #2ABBF4;
335
+ --tui-const-sea-blue-darker-48: #0B9CD5; // hsL=42
336
+ --tui-const-sea-blue-lighter-66: #5ACAF6;
337
+ --tui-const-turquoise: #0BD5C1;
338
+ --tui-const-turquoise-darker-40: #0AC2AF; // hsL=40
339
+ --tui-const-turquoise-darker-36: #09AE9E; // hsL=36
340
+ --tui-feed-category-neutral: #90ADBF; // Для ленты операций в МБ
341
+ --tui-feed-category-neutral-pale: #2E3036; // Для ленты операций в МБ
342
+ --tui-foreground-neutral-accent: var(--tui-const-white-alpha-50); // @Deprecated: Перенесен в группу status
343
+ --tui-foreground-positive-accent: var(--tui-const-green); // @Deprecated: Перенесен в группу status
344
+ --tui-foreground-warning-accent: var(--tui-const-yellow-darker-60); // @Deprecated: Перенесен в группу status
345
+ --tui-foreground-negative-accent: var(--tui-const-red); // @Deprecated: Перенесен в группу status
346
+ --tui-foreground-info-accent: var(--tui-const-blue); // @Deprecated: Перенесен в группу status
347
+ --tui-foreground-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-dark
348
+ --tui-foreground-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
349
+ --tui-foreground-brand-tinkoff-accent: var(--tui-const-yellow); // @Deprecated: Перенесен в отдельную группу
350
+ --tui-foreground-skeleton: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
351
+ --tui-foreground-separator: var(--tui-const-white-alpha-20); // @Deprecated: Перенесен в отдельную группу
352
+ --tui-foreground-border-darkmode: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
353
+ --tui-foreground-border-on-light: var(--tui-const-black-alpha-3); // @Deprecated: Перенесен в отдельную группу
354
+ --tui-foreground-border-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
355
+ --tui-icon-pressed: var(--tui-const-cool-gray-lighter-97); // @Deprecated: Для иконок используем цвета из группы text
356
+ --tui-icon-normal: var(--tui-const-white-alpha-30); // @Deprecated: Для иконок используем цвета из группы text
357
+ --tui-icon-action: var(--tui-const-blue); // @Deprecated: Для иконок используем цвета из группы text
358
+ --tui-icon-action-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Для иконок используем цвета из группы text
359
+ --tui-icon-on-dark: var(--tui-const-white); // @Deprecated: Для иконок используем цвета из группы text
360
+ --tui-service-skeleton: var(--tui-const-white-alpha-10); // Цвет для шиммеров, отображаемых при загрузке экрана
361
+ --tui-service-skeleton-on-dark: var(--tui-const-white-alpha-10); // Скелетон на темном фоне, не меняется при переключении темы
362
+ --tui-service-selected-text: var(--tui-const-blue-alpha-24); // Фон под выделенным пользователем текстом
363
+ --tui-service-backdrop: var(--tui-const-black-alpha-50); // Затемнение на фоне модальных окон и шторок
364
+ --tui-service-underline: var(--tui-const-blue-alpha-64); // Подчеркивание для ссылок
365
+ --tui-service-underline-monochrome: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок
366
+ --tui-service-underline-on-dark: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы
367
+ --tui-status-warning-pale: var(--tui-const-yellow-darker-26); // Контейнеры предупреждающих блоков
368
+ --tui-status-warning-pale-pressed: var(--tui-const-yellow-darker-32); // Нажатое состояние контейнера предупреждающих блоков
369
+ --tui-status-positive-pale: var(--tui-const-green-darker-18); // Контейнеры позитивных блоков
370
+ --tui-status-positive-pale-pressed: var(--tui-const-green-darker-21); // Нажатое состояние positive в iOS
371
+ --tui-status-negative-pale: var(--tui-const-red-darker-23); // Контейнеры негативных блоков
372
+ --tui-status-negative-pale-pressed: var(--tui-const-red-darker-29); // Нажатое состояние negative в iOS
373
+ --tui-status-info-pale: var(--tui-const-blue-darker-28); // Контейнеры информационных блоков
374
+ --tui-status-info-pale-pressed: var(--tui-const-blue-darker-32); // Контейнеры информационных блоков при нажатии
375
+ --tui-status-neutral: var(--tui-const-white-alpha-50); // Акцентный цвет для нейтральных фонах
376
+ --tui-status-neutral-pale: var(--tui-const-white-alpha-20); // Фоновый контейнер нейтральных статусных блоков
377
+ --tui-status-neutral-pale-pressed: var(--tui-const-white-alpha-20); // Фоновый контейнер нейтральных статусных блоков при нажатии
378
+ --tui-status-positive: var(--tui-const-green); // Акцентный цвет для позитивных блоков
379
+ --tui-status-warning: var(--tui-const-yellow-darker-60); // Акцентный цвет для предупреждающих блоков
380
+ --tui-status-negative: var(--tui-const-red); // Акцентный цвет для негативных блоков
381
+ --tui-status-info: var(--tui-const-blue); // Акцентный цвет для информационных блоков
382
+ --tui-support-support-01: #00BEE0; // @Deprecated: Замена на семантические цвета
383
+ --tui-support-support-02: #9887F1; // @Deprecated: Замена на семантические цвета
384
+ --tui-support-support-03: #F94D4D; // @Deprecated: Замена на семантические цвета
385
+ --tui-support-support-04: #34BFB1; // @Deprecated: Замена на семантические цвета
386
+ --tui-support-support-05: #FFAD5C; // @Deprecated: Замена на семантические цвета
387
+ --tui-support-support-06: #929DED; // @Deprecated: Замена на семантические цвета
388
+ --tui-support-support-07: #45AD2D; // @Deprecated: Замена на семантические цвета
389
+ --tui-support-support-08: #3392DB; // @Deprecated: Замена на семантические цвета
390
+ --tui-support-support-09: #DF8400; // @Deprecated: Замена на семантические цвета
391
+ --tui-support-support-10: #AE59D4; // @Deprecated: Замена на семантические цвета
392
+ --tui-support-support-11: #FD7171; // @Deprecated: Замена на семантические цвета
393
+ --tui-support-support-12: #52BBE1; // @Deprecated: Замена на семантические цвета
394
+ --tui-support-support-13: #FE9B4B; // @Deprecated: Замена на семантические цвета
395
+ --tui-support-support-14: #BF69F1; // @Deprecated: Замена на семантические цвета
396
+ --tui-support-support-15: #EC4D6B; // @Deprecated: Замена на семантические цвета
397
+ --tui-support-support-16: #3DAF69; // @Deprecated: Замена на семантические цвета
398
+ --tui-support-support-17: #FF7047; // @Deprecated: Замена на семантические цвета
399
+ --tui-support-support-18: #994ABD; // @Deprecated: Замена на семантические цвета
400
+ --tui-support-support-19: #DD4444; // @Deprecated: Замена на семантические цвета
401
+ --tui-support-support-20: #36C578; // @Deprecated: Замена на семантические цвета
402
+ --tui-support-support-21: #1DACA4; // @Deprecated: Замена на семантические цвета
403
+ --tui-support-support-22: #F14789; // @Deprecated: Замена на семантические цвета
404
+ --tui-text-primary: var(--tui-const-cool-gray-lighter-97); // Основной текст и иконки фонах base, elevation, neutral
405
+ --tui-text-primary-pressed: var(--tui-const-cool-gray-lighter-60); // Основной текст и иконки фонах base, elevation, neutral при нажатии
406
+ --tui-text-primary-on-light: var(--tui-const-black-alpha-90); // Основной текст и иконки светлых фонах, не меняется при смене темы
407
+ --tui-text-primary-on-dark: var(--tui-const-white); // Основной текст и иконки темных фонах. Не меняется при смене темы
408
+ --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // Текст и иконки фонах tinkoff
409
+ --tui-text-primary-on-opposite: var(--tui-const-black); // Текст и иконки фоне opposite
410
+ --tui-text-primary-on-accent-1: var(--tui-const-black-lighter-20); // Текст и иконки фоне accent-1
411
+ --tui-text-primary-on-accent-2: var(--tui-const-white); // Текст и иконки фоне accent-2
412
+ --tui-text-secondary: var(--tui-const-cool-gray-lighter-60); // Второстепенный текст на фонах base, elevation, neutral
413
+ --tui-text-secondary-pressed: var(--tui-const-cool-gray-lighter-79); // Второстепенный текст на фонах base, elevation, neutral при нажатии
414
+ --tui-text-secondary-on-light: var(--tui-const-black-alpha-48); // Второстепенный текст на светлых фонах, не меняется при смене темы
415
+ --tui-text-secondary-on-dark: var(--tui-const-white-alpha-70); // Второстепенный текст на темных фонах, не меняется при смене темы
416
+ --tui-text-tertiary: var(--tui-const-white-alpha-30); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры
417
+ --tui-text-tertiary-pressed: var(--tui-const-white-alpha-60); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры при нажатии
418
+ --tui-text-tertiary-on-light: var(--tui-const-cool-gray-alpha-22); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
419
+ --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-30); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
420
+ --tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
421
+ --tui-text-action-pressed: var(--tui-const-blue-darker-46); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
422
+ --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
423
+ --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
424
+ --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
425
+ --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
426
+ --tui-text-positive: var(--tui-const-green); // Текст позитивного лейбла, например пополнение счета или рост цены акций
427
+ --tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
428
+ }
429
+
430
+
431
+ [tuiPlatform='ios'],
432
+ [tuiPlatform='android'],
433
+ [tuiPlatform='ios'][tuiTheme='light'],
434
+ [tuiPlatform='android'][tuiTheme='light'],
435
+ [tuiPlatform='ios'] [tuiTheme='light'],
436
+ [tuiPlatform='android'] [tuiTheme='light'],
437
+ [tuiTheme='light'] [tuiPlatform='ios'],
438
+ [tuiTheme='light'] [tuiPlatform='android'] {
439
+ --tui-background-base: var(--tui-const-white); // Основной фон приложений. Отличается на iOS, Android и Desktop
440
+ --tui-background-base-alt: var(--tui-const-cool-gray-lighter-97); // Альтернативный основной фон
441
+ --tui-background-elevation-1: var(--tui-const-white); // Фон шторок, модальных экранов и карточек, лежащих на фонe base
442
+ --tui-background-elevation-2: var(--tui-const-white); // Фон карточек, лежащих на фонe elevation-1
443
+ --tui-background-elevation-3: var(--tui-const-white); // Фон элементов, возвышающихся над всем остальным контентом. Например, всплывающих подсказок
444
+ --tui-background-neutral-1: var(--tui-const-cool-gray-alpha-3); // Прозрачные контейнеры с минимальным контрастом на фонах base, elevation и neutral. Второстепенные кнопки, карточки без тени, задизейбленные кнопки и т.д.
445
+ --tui-background-neutral-1-on-light: var(--tui-const-black-alpha-3); // Прозрачные контейнеры с минимальным контрастом на светлых цветных фонах. Не меняется при переключении темы
446
+ --tui-background-neutral-1-on-dark: var(--tui-const-white-alpha-10); // Прозрачные контейнеры с минимальным контрастом на темных цветных фонах. Не меняется при переключении темы
447
+ --tui-background-neutral-1-opaque: var(--tui-const-cool-gray-lighter-97); // Непрозрачные контейнеры кнопок закрытия и удаления элементов
448
+ --tui-background-neutral-1-on-base: var(--tui-const-cool-gray-lighter-97); // Непрозрачные контейнеры с минимальным контрастом на фоне base, не имеющие тени в светлой теме
449
+ --tui-background-neutral-1-on-elevation-1: var(--tui-const-cool-gray-lighter-97); // Непрозрачные контейнеры с минимальным контрастом на фоне elevation-1, не имеющие тени в светлой теме
450
+ --tui-background-neutral-1-pressed: var(--tui-const-cool-gray-alpha-6); // Нажатое состояние элементов с фоном neutral-1
451
+ --tui-background-neutral-1-pressed-on-light: var(--tui-const-black-alpha-6); // Нажатое состояние элементов с фоном neutral-1-on-light, не меняется при переключении темы
452
+ --tui-background-neutral-1-pressed-on-dark: var(--tui-const-white-alpha-15); // Нажатое состояние элементов с фоном neutral-1-on-dark, не меняется при смене темы
453
+ --tui-background-neutral-2: var(--tui-const-cool-gray-alpha-6); // Прозрачные контейнеры маленьких размеров
454
+ --tui-background-neutral-2-pressed: var(--tui-const-cool-gray-alpha-12); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
455
+ --tui-background-neutral-2-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Изменен на neutral-1-pressed-on-light
456
+ --tui-background-neutral-2-on-dark: var(--tui-const-white-alpha-15); // @Deprecated: Изменен на neutral-1-pressed-on-dark
457
+ --tui-background-neutral-3: var(--tui-const-cool-gray-alpha-12); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
458
+ --tui-background-neutral-3-on-light: var(--tui-const-black-alpha-12); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
459
+ --tui-background-neutral-3-on-dark: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
460
+ --tui-background-neutral-4: var(--tui-const-cool-gray-alpha-22); // Прозрачные контейнеры со средним контрастом. Контейнер аватара с иконкой или текстом
461
+ --tui-background-neutral-4-on-light: var(--tui-const-cool-gray-alpha-22); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Контейнер аватара с иконкой или текстом. Нажатое состояние элементов с цветом neutral-3
462
+ --tui-background-neutral-4-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark. Использовался для стеклянных поверхностей
463
+ --tui-background-neutral-6: var(--tui-const-cool-gray-alpha-56); // Прозрачные контейнеры с сильным контрастом
464
+ --tui-background-neutral-6-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light. Использовался для стеклянных поверхностей.
465
+ --tui-background-neutral-6-on-dark: var(--tui-const-white-alpha-50); // Прозрачные контейнеры с большим контрастом на темных цветных фонах
466
+ --tui-background-opposite: var(--tui-const-black); // @Deprecated: Заменен на accent-opposite
467
+ --tui-background-primary-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-light
468
+ --tui-background-primary-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
469
+ --tui-background-highlight: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
470
+ --tui-background-highlight-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
471
+ --tui-background-highlight-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
472
+ --tui-background-highlight-on-opposite: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
473
+ --tui-background-highlight-on-tinkoff: #FAB61966; // @Deprecated: Переехал в отдельную группу service
474
+ --tui-background-warning: var(--tui-const-yellow-alpha-30); // @Deprecated: Переехал в отдельную группу status
475
+ --tui-background-warning-pressed: var(--tui-const-yellow-alpha-48); // @Deprecated: Переехал в отдельную группу status
476
+ --tui-background-positive: var(--tui-const-green-alpha-16); // @Deprecated: Переехал в отдельную группу status
477
+ --tui-background-positive-pressed: var(--tui-const-green-alpha-32); // @Deprecated: Переехал в отдельную группу status
478
+ --tui-background-negative: var(--tui-const-red-alpha-14); // @Deprecated: Переехал в группу status
479
+ --tui-background-negative-pressed: var(--tui-const-red-alpha-24); // @Deprecated: Переехал в группу status
480
+ --tui-background-info: var(--tui-const-blue-alpha-16); // @Deprecated: Переехал в группу status
481
+ --tui-background-info-pressed: var(--tui-const-blue-alpha-24); // @Deprecated: Переехал в группу status
482
+ --tui-background-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent-2
483
+ --tui-background-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-2-pressed
484
+ --tui-background-accent-pale: var(--tui-const-blue-alpha-8); // @Deprecated: Заменён на компонентный токен
485
+ --tui-background-accent-pale-pressed: var(--tui-const-blue-alpha-16); // @Deprecated: Заменён на компонентный токен
486
+ --tui-background-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
487
+ --tui-background-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
488
+ --tui-background-brand-tinkoff: var(--tui-const-yellow); // @Deprecated: Переехал в отдельную группу brand
489
+ --tui-background-brand-pro: #AFF218; // @Deprecated: Переехал в отдельную группу brand
490
+ --tui-background-brand-premium: #4972CF; // @Deprecated: Переехал в отдельную группу brand
491
+ --tui-background-notification: var(--tui-const-red); // @Deprecated: Переехал в компонентные токены
492
+ --tui-background-selected-text: var(--tui-const-blue-alpha-24); // @Deprecated: Переехал в отдельную группу service
493
+ --tui-background-accent-1: var(--tui-const-yellow); // Фоны акцентных кнопок, бейджей и т.д.
494
+ --tui-background-accent-1-pressed: var(--tui-const-yellow-darker-60); // Фоны акцентных кнопок, бейджей и т.д. при нажатии
495
+ --tui-background-accent-2: var(--tui-const-blue); // Фоны акцентных кнопок, бейджей и т.д.
496
+ --tui-background-accent-2-pressed: var(--tui-const-blue-darker-52); // Фоны акцентных кнопок, бейджей и т.д.
497
+ --tui-background-accent-opposite: var(--tui-const-black); // Фон, противоположный base: в белой теме — черный, в темной теме — белый
498
+ --tui-background-accent-opposite-pressed: var(--tui-const-cool-gray-lighter-18); // Фон, противоположный base при нажатии: в белой теме — черный, в темной теме — белый
499
+ --tui-background-accent-on-light: var(--tui-const-black); // Контрастные контейнеры на светлых фонах, не меняется при смене темы
500
+ --tui-background-accent-on-light-pressed: var(--tui-const-black-lighter-16); // Контрастные контейнеры при нажатии на светлых фонах, не меняется при смене темы.
501
+ --tui-background-accent-on-dark: var(--tui-const-white); // Контрастные контейнеры на темных фонах, не меняется при смене темы
502
+ --tui-background-accent-on-dark-pressed: var(--tui-const-cool-gray-lighter-97); // Контрастные контейнеры при нажатии на темных фонах, не меняется при смене темы.
503
+ --tui-background-button-close-on-light: var(--tui-const-black-alpha-40); // Фон кнопки закрытия на светлом фоне. не меняется при переключении темы. бывший цвет neutral-3-on-light. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
504
+ --tui-background-button-close-on-dark: var(--tui-const-white-alpha-50); // @Deprecated: Заменен на overlay-glass-on-dark
505
+ --tui-background-badge-notification: var(--tui-const-red); // Контейнеры нотификационных бейджей. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
506
+ --tui-background-toggle: var(--tui-const-cool-gray-alpha-12); // @Deprecated: Заменен на background.neutral-2
507
+ --tui-background-button-vertical: var(--tui-const-blue-alpha-8); // Фон tui-button [vertical]. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
508
+ --tui-background-button-vertical-pressed: var(--tui-const-blue-alpha-16); // Фон tui-button [vertical] при нажатии и наведении. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
509
+ --tui-background-button-glass-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark
510
+ --tui-background-button-glass-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light
511
+ --tui-background-progress-bar: var(--tui-const-cool-gray-alpha-6); // Пустая полоска прогресс-баров. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
512
+ --tui-background-tooltip: var(--tui-const-cool-gray-lighter-36); // Фон для тултипов
513
+ --tui-background-thumbnail-card-badge: var(--tui-const-black-alpha-12); // Прозрачный контейнер бейджа на миниатюре карты. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
514
+ --tui-background-overlay-glass-on-dark: var(--tui-const-white-alpha-30); // Оверлей стеклянных поверхностей на темных фонах, не меняется при смене темы.
515
+ --tui-background-overlay-glass-on-light: var(--tui-const-black-alpha-40); // Оверлей стеклянных поверхностей на cветлых фонах, не меняется при смене темы
516
+ --tui-border-normal: var(--tui-const-black-alpha-21); // Бордеры и сепараторы на основных фонах
517
+ --tui-border-normal-pale: var(--tui-const-black-alpha-7); // Бледные бордеры и сепараторы на основных фонах
518
+ --tui-border-normal-opaque: var(--tui-const-black-lighter-79); // Бордеры и сепараторы на основных фонах без прозрачности
519
+ --tui-border-normal-pale-opaque: var(--tui-const-black-lighter-92); // Бледные непрозрачные бордеры и сепараторы на основных фонах
520
+ --tui-border-selected: var(--tui-const-blue); // Обводка выделенных элементов
521
+ --tui-border-darkmode-only: var(--tui-const-clear); // Обводка, отделяющая цветные элементы от фона в темной теме
522
+ --tui-border-on-light: var(--tui-const-black-alpha-3); // Обводка, отделяющая цветные элементы от светлого фонов
523
+ --tui-border-on-dark: var(--tui-const-white-alpha-10); // Обводка, отделяющая цветные элементы от темных фонов
524
+ --tui-brand-t-bank: #FFDD2D; // Фирменный цвет. Используется, например, в бейдже подписки Team
525
+ --tui-brand-t-pro: #AFF218; // Цвет подписки Tinkoff PRO. для фонов кнопок, бейджей и т.д.
526
+ --tui-brand-t-premium: #4972CF; // Цвет подписки Tinkoff Premium. для фонов кнопок, бейджей и т.д.
527
+ --tui-brand-t-black: #333333; // Фирменный цвет Tinkoff Black
528
+ --tui-brand-t-platinum: #747B8F; // Фирменный цвет Tinkoff Platinum
529
+ --tui-brand-t-mobile: #5848C3; // Фирменный цвет Tinkoff Mobile
530
+ --tui-brand-t-mobile-alt-1: #BAB3EC; // Фирменный цвет Tinkoff Mobile
531
+ --tui-brand-t-all-airlines: #27BEFF; // Фирменный цвет Tinkoff Mobile
532
+ --tui-brand-t-all-airlines-alt-1: #CBEFFF; // Бледный оттенок фирменного цвета Tinkoff All Airlines
533
+ --tui-brand-t-ai-assistant: #9A6BFF; // Фирменный цвет Tinkoff Ai Assistant
534
+ --tui-brand-t-insurance: #27AFA5; // Фирменный цвет Страхования
535
+ --tui-brand-t-business: #B58B60; // Фирменный цвет Бизнеса
536
+ --tui-brand-t-business-alt-1: #E4D7C1; // Фирменный цвет Бизнеса
537
+ --tui-brand-t-invest: #41414D; // Фирменный цвет Инвестиций
538
+ --tui-brand-t-private: #212121; // Фирменный цвет Private
539
+ --tui-brand-mir-pay: #006848; // Цвет для кнопок Mir Pay
540
+ --tui-brand-t-insurance-alt-1: #E1F9F7; // Бледный оттенок фирменного цвета Страхования
541
+ --tui-brand-tinkoff: #FFDD2D; // @Deprecated: Заменён на t-bank
542
+ --tui-brand-tinkoff-pro: #AFF218; // @Deprecated: Заменён на t-pro
543
+ --tui-brand-tinkoff-premium: #4972CF; // @Deprecated: Заменён на t-premium
544
+ --tui-brand-tinkoff-black: #333333; // @Deprecated: Заменён на t-black
545
+ --tui-brand-tinkoff-platinum: #747B8F; // @Deprecated: Заменён на t-platinum
546
+ --tui-brand-tinkoff-mobile: #5848C3; // @Deprecated: Заменён на t-mobile
547
+ --tui-brand-tinkoff-mobile-alt-1: #BAB3EC; // @Deprecated: Заменён на t-mobile-alt-1
548
+ --tui-brand-tinkoff-all-airlines: #27BEFF; // @Deprecated: Заменён на t-all-airlines
549
+ --tui-brand-tinkoff-all-airlines-alt-1: #CBEFFF; // @Deprecated: Заменён на t-all-airlines-alt-1
550
+ --tui-brand-tinkoff-ai-assistant: #9A6BFF; // @Deprecated: Заменён на t-ai-assistant
551
+ --tui-brand-tinkoff-insurance: #27AFA5; // @Deprecated: Заменён на t-insurance
552
+ --tui-brand-tinkoff-business: #B58B60; // @Deprecated: Заменён на t-business
553
+ --tui-brand-tinkoff-business-alt-1: #E4D7C1; // @Deprecated: Заменён на t-business-alt-1
554
+ --tui-brand-tinkoff-invest: #41414D; // @Deprecated: Заменён на t-invest
555
+ --tui-brand-tinkoff-private: #212121; // @Deprecated: Заменён на t-private
556
+ --tui-brand-tinkoff-insurance-pale: #D0F4F2; // @Deprecated: Заменён на t-insurance-alt-1
557
+ --tui-brand-tinkoff-insurance-alt-1: #E1F9F7; // @Deprecated: Заменён на t-insurance-alt-1
558
+ --tui-chart-categorical-01: var(--tui-const-sea-blue);
559
+ --tui-chart-categorical-02: var(--tui-const-purple-darker-72);
560
+ --tui-chart-categorical-03: var(--tui-const-coral-darker-60);
561
+ --tui-chart-categorical-04: var(--tui-const-turquoise);
562
+ --tui-chart-categorical-05: var(--tui-const-orange);
563
+ --tui-chart-categorical-06: var(--tui-const-purple);
564
+ --tui-chart-categorical-07: var(--tui-const-green-darker-34);
565
+ --tui-chart-categorical-08: var(--tui-const-blue-lighter-70);
566
+ --tui-chart-categorical-09: var(--tui-const-orange-darker-48);
567
+ --tui-chart-categorical-10: var(--tui-const-purple-darker-56);
568
+ --tui-chart-categorical-11: var(--tui-const-pink);
569
+ --tui-chart-categorical-12: var(--tui-const-sea-blue-darker-48);
570
+ --tui-chart-categorical-13: var(--tui-const-orange-darker-56);
571
+ --tui-chart-categorical-14: var(--tui-const-purple-darker-60);
572
+ --tui-chart-categorical-15: var(--tui-const-pink-darker-64);
573
+ --tui-chart-categorical-16: var(--tui-const-emerald-darker-42);
574
+ --tui-chart-categorical-17: var(--tui-const-coral);
575
+ --tui-chart-categorical-18: var(--tui-const-purple-darker-48);
576
+ --tui-chart-categorical-19: var(--tui-const-coral-darker-52);
577
+ --tui-chart-categorical-20: var(--tui-const-emerald);
578
+ --tui-chart-categorical-21: var(--tui-const-turquoise-darker-36);
579
+ --tui-chart-categorical-22: var(--tui-const-pink-darker-60);
580
+ --tui-chart-categorical-23: var(--tui-const-yellow-darker-60);
581
+ --tui-chart-categorical-24: var(--tui-const-turquoise-darker-40);
582
+ --tui-chart-categorical-25: var(--tui-const-green-lighter-64);
583
+ --tui-chart-categorical-26: var(--tui-const-sea-blue-lighter-66);
584
+ --tui-chart-categorical-27: var(--tui-const-green-lighter-57);
585
+ --tui-const-yellow: #FFDD2D; // N9
586
+ --tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
587
+ --tui-const-yellow-darker-54: #FAB619; // hsL=54
588
+ --tui-const-yellow-darker-32: #806925; // hsL=32
589
+ --tui-const-yellow-darker-26: #614F23; // hsL=26
590
+ --tui-const-yellow-alpha-14: #FFDD2D24; // 14% opacity
591
+ --tui-const-yellow-alpha-24: #FFDD2D3D; // 24% opacity
592
+ --tui-const-yellow-alpha-30: #FFDD2D4D; // 30% opacity
593
+ --tui-const-yellow-alpha-48: #FFDD2D7A; // 48% opacity
594
+ --tui-const-green-lighter-64: #94D274; // hsL=64
595
+ --tui-const-green-lighter-57: #60C366; // hsL=57
596
+ --tui-const-green-lighter-44: #00E037; // hsL=44
597
+ --tui-const-green: #00B92D; // N11
598
+ --tui-const-green-darker-34: #00A328; // hsL=34
599
+ --tui-const-green-darker-21: #115B24; // hsL=21
600
+ --tui-const-green-darker-18: #144823;
601
+ --tui-const-green-alpha-16: #00B92D29; // 16% opacity
602
+ --tui-const-green-alpha-24: #00B92D3D; // 24% opacity
603
+ --tui-const-green-alpha-32: #00B92D52; // 32% opacity
604
+ --tui-const-blue: #428BF9; // N8
605
+ --tui-const-blue-lighter-70: #6BA4FA; // hsL=52
606
+ --tui-const-blue-darker-52: #126DF7; // hsL=52
607
+ --tui-const-blue-darker-46: #156ED4; // N8 pressed, hsL=46
608
+ --tui-const-blue-darker-40: #1455B8; // hsL=40
609
+ --tui-const-blue-darker-32: #2B4976; // hsL=32
610
+ --tui-const-blue-darker-28: #263B5C; // hsL=28
611
+ --tui-const-blue-alpha-8: #428BF914; // 8% opacity
612
+ --tui-const-blue-alpha-12: #428BF91F; // 12% opacity
613
+ --tui-const-blue-alpha-16: #428BF929; // 16% opacity
614
+ --tui-const-blue-alpha-20: #428BF933; // 16% opacity
615
+ --tui-const-blue-alpha-24: #428BF93D; // 24% opacity
616
+ --tui-const-blue-alpha-64: #428BF9A3; // 64% opacity
617
+ --tui-const-dark-blue-alpha-6: #244A7F0F; // 6% opacity
618
+ --tui-const-dark-blue-alpha-8: #244A7F14; // 8% opacity
619
+ --tui-const-dark-blue-alpha-10: #244A7F1A; // 10% opacity
620
+ --tui-const-dark-blue-alpha-12: #244A7F1F; // 12% opacity
621
+ --tui-const-red-alpha-14: #F5222224; // 12% opacity
622
+ --tui-const-red-alpha-24: #F522223D; // 24% opacity
623
+ --tui-const-red-lighter-62: #F74646; // hsL=62
624
+ --tui-const-red: #F52222; // N10
625
+ --tui-const-red-darker-32: #9C0707; // hsL=32
626
+ --tui-const-red-darker-29: #731F20; // hsL=29
627
+ --tui-const-red-darker-23: #591E20; // hsL=23
628
+ --tui-const-white: #FFFFFF; // N14
629
+ --tui-const-white-96: #FFFFFFF2; // @Deprecated: Заменён на цвет white-alpha-96
630
+ --tui-const-white-90: #FFFFFFE6; // @Deprecated: Заменён на цвет white-alpha-90
631
+ --tui-const-white-80: #FFFFFFCC; // @Deprecated: Заменён на цвет white-alpha-90
632
+ --tui-const-white-70: #FFFFFFB3; // @Deprecated: Заменён на цвет white-alpha-70
633
+ --tui-const-white-60: #FFFFFF99; // @Deprecated: Заменён на цвет white-alpha-60
634
+ --tui-const-white-50: #FFFFFF80; // @Deprecated: Заменён на цвет white-alpha-50
635
+ --tui-const-white-40: #FFFFFF66; // @Deprecated: Заменён на цвет white-alpha-40
636
+ --tui-const-white-30: #FFFFFF4D; // @Deprecated: Заменён на цвет white-alpha-30
637
+ --tui-const-white-20: #FFFFFF33; // @Deprecated: Заменён на цвет white-alpha-20
638
+ --tui-const-white-15: #FFFFFF26; // @Deprecated: Заменён на цвет white-alpha-15
639
+ --tui-const-white-10: #FFFFFF1A; // @Deprecated: Заменён на цвет white-alpha-10
640
+ --tui-const-black: #000000; // Бывший N15
641
+ --tui-const-black-90: #000000E6; // @Deprecated: Заменён на цвет black-alpha-90
642
+ --tui-const-black-80: #000000CC; // @Deprecated: Заменён на цвет black-alpha-80
643
+ --tui-const-black-70: #000000B3; // @Deprecated: Заменён на цвет black-alpha-70
644
+ --tui-const-black-60: #00000099; // @Deprecated: Заменён на цвет black-alpha-60
645
+ --tui-const-black-48: #0000007A; // @Deprecated: Заменён на цвет black-alpha-48
646
+ --tui-const-black-40: #00000066; // @Deprecated: Заменён на цвет black-alpha-40
647
+ --tui-const-black-30: #0000004D; // @Deprecated: Заменён на цвет black-alpha-30
648
+ --tui-const-black-21: #00000036; // @Deprecated: Заменён на цвет black-alpha-21
649
+ --tui-const-black-12: #0000001F; // @Deprecated: Заменён на цвет black-alpha-12
650
+ --tui-const-black-6: #00000014; // @Deprecated: Заменён на цвет black-alpha-6
651
+ --tui-const-black-3: #00000008; // @Deprecated: Заменён на цвет black-alpha-3
652
+ --tui-const-gray-93: #121212; // @Deprecated: Заменён на цвет color.const.black-lighter-7
653
+ --tui-const-gray-89: #1C1C1E; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-11
654
+ --tui-const-gray-83: #2C2C2E; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-18
655
+ --tui-const-gray-80: #333333; // @Deprecated: Заменён на цвет color.const.black-lighter-20
656
+ --tui-const-gray-64: #575B61; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-36
657
+ --tui-const-gray-40: #9299A2; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-60
658
+ --tui-const-gray-21: #C7C9CC; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-79
659
+ --tui-const-gray-13: #DDDFE0; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-87
660
+ --tui-const-gray-8: #EAECEE; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-93
661
+ --tui-const-gray-3: #F6F7F8; // @Deprecated: Заменён на цвет color.const.cool-gray-lighter-97
662
+ --tui-const-cool-gray-56: #0010248F; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-56
663
+ --tui-const-cool-gray-44: #00102470; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-44
664
+ --tui-const-cool-gray-22: #00102438; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-22
665
+ --tui-const-cool-gray-12: #0010241F; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-12
666
+ --tui-const-cool-gray-6: #0010240F; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-6
667
+ --tui-const-cool-gray-3: #00102408; // @Deprecated: Заменён на цвет color.const.cool-gray-alpha-3
668
+ --tui-const-clear: #00000000;
669
+ --tui-const-red-clear: #F522223D; // @Deprecated: Заменён на цвет red-alpha-24
670
+ --tui-const-red-clear-light: #F522221F; // @Deprecated: Заменён на цвет red-alpha-14
671
+ --tui-const-blue-dark: #156ED4; // @Deprecated: Заменён на цвет blue-darker-46
672
+ --tui-const-blue-clear: #428BF93D; // @Deprecated: Заменён на цвет blue-alpha-24
673
+ --tui-const-blue-clear-light: #428BF91F; // @Deprecated: Заменён на цвет blue-alpha-12
674
+ --tui-const-green-clear: #00B92D3D; // @Deprecated: Заменён на цвет green-alpha-24
675
+ --tui-const-green-clear-light: #00B92D1F; // @Deprecated: Заменён на цвет green-alpha-16
676
+ --tui-const-yellow-darker: #FAB619; // @Deprecated: Заменён на цвет yellow-darker-54
677
+ --tui-const-yellow-dark: #FFCD33; // @Deprecated: Заменён на цвет yellow-darker-60
678
+ --tui-const-yellow-clear-light: #FFDD2D24; // @Deprecated: Заменён на цвет yellow-alpha-14
679
+ --tui-const-yellow-clear: #FFDD2D3D; // @Deprecated: Заменён на цвет yellow-alpha-24
680
+ --tui-const-black-alpha-90: #000000E6; // 90% opacity
681
+ --tui-const-black-alpha-80: #000000CC; // 80% opacity
682
+ --tui-const-black-alpha-70: #000000B3; // 70% opacity
683
+ --tui-const-black-alpha-60: #00000099; // 60% opacity
684
+ --tui-const-black-alpha-54: #0000008A; // 54% opacity
685
+ --tui-const-black-alpha-50: #00000080; // 50% opacity
686
+ --tui-const-black-alpha-48: #0000007A; // 48% opacity
687
+ --tui-const-black-alpha-40: #00000066; // 40% opacity
688
+ --tui-const-black-alpha-30: #0000004D; // 30% opacity
689
+ --tui-const-black-alpha-24: #0000003D; // 24% opacity
690
+ --tui-const-black-alpha-21: #00000036; // 21% opacity
691
+ --tui-const-black-alpha-12: #0000001F; // 12% opacity
692
+ --tui-const-black-alpha-10: #0000001A; // 10% opacity
693
+ --tui-const-black-alpha-7: #00000012; // 7% opacity
694
+ --tui-const-black-alpha-6: #0000000f; // 6% opacity
695
+ --tui-const-black-alpha-4: #0000000A; // 4% opacity
696
+ --tui-const-black-alpha-3: #00000008; // 3% opacity
697
+ --tui-const-white-alpha-96: #FFFFFFF5; // 96% opacity
698
+ --tui-const-white-alpha-90: #FFFFFFE6; // 90% opacity
699
+ --tui-const-white-alpha-80: #FFFFFFCC; // 80% opacity
700
+ --tui-const-white-alpha-70: #FFFFFFB3; // 70% opacity
701
+ --tui-const-white-alpha-60: #FFFFFF99; // 60% opacity
702
+ --tui-const-white-alpha-50: #FFFFFF80; // 50% opacity
703
+ --tui-const-white-alpha-40: #FFFFFF66; // 40% opacity
704
+ --tui-const-white-alpha-30: #FFFFFF4D; // 30% opacity
705
+ --tui-const-white-alpha-25: #FFFFFF40; // 25% opacity
706
+ --tui-const-white-alpha-20: #FFFFFF33; // 20% opacity
707
+ --tui-const-white-alpha-16: #FFFFFF29; // 16% opacity
708
+ --tui-const-white-alpha-15: #FFFFFF26; // 15% opacity
709
+ --tui-const-white-alpha-13: #ffffff21; // 13% opacity
710
+ --tui-const-white-alpha-11: #FFFFFF1C; // 11% opacity
711
+ --tui-const-white-alpha-10: #FFFFFF1A; // 10% opacity
712
+ --tui-const-white-alpha-6: #ffffff0F; // 6% opacity
713
+ --tui-const-black-lighter-7: #121212; // N17
714
+ --tui-const-black-lighter-13: #202020;
715
+ --tui-const-cool-gray-lighter-11: #1C1C1E; // N16
716
+ --tui-const-cool-gray-lighter-15: #252527;
717
+ --tui-const-cool-gray-lighter-18: #2C2C2E; // N18
718
+ --tui-const-cool-gray-lighter-51: #79818C;
719
+ --tui-const-cool-gray-lighter-61: #959BA4;
720
+ --tui-const-black-lighter-16: #292929;
721
+ --tui-const-black-lighter-20: #333333; // N1
722
+ --tui-const-black-lighter-22: #383838;
723
+ --tui-const-black-lighter-25: #414141;
724
+ --tui-const-black-lighter-30: #4D4D4D;
725
+ --tui-const-black-lighter-79: #C9C9C9;
726
+ --tui-const-black-lighter-92: #ECECEC;
727
+ --tui-const-cool-gray-lighter-36: #575B61;
728
+ --tui-const-cool-gray-lighter-60: #9299A2; // N3
729
+ --tui-const-cool-gray-lighter-79: #C7C9CC; // N4
730
+ --tui-const-cool-gray-lighter-85: #C7CBCF;
731
+ --tui-const-cool-gray-lighter-87: #DDDFE0; // N5
732
+ --tui-const-cool-gray-lighter-90: #E1E3E4;
733
+ --tui-const-cool-gray-lighter-93: #EAECEE; // N6
734
+ --tui-const-cool-gray-lighter-96: #F2F4F7; // N7
735
+ --tui-const-cool-gray-lighter-97: #F6F7F8; // N7
736
+ --tui-const-cool-gray-alpha-56: #0010248F; // 56% opacity
737
+ --tui-const-cool-gray-alpha-44: #00102470; // 44% opacity
738
+ --tui-const-cool-gray-alpha-22: #00102438; // 22% opacity
739
+ --tui-const-cool-gray-alpha-12: #0010241F; // 12% opacity
740
+ --tui-const-cool-gray-alpha-6: #0010240F; // 6% opacity
741
+ --tui-const-cool-gray-alpha-5: #0010240D; // 5% opacity
742
+ --tui-const-cool-gray-alpha-3: #00102408; // 3% opacity
743
+ --tui-const-purple: #D08FFF;
744
+ --tui-const-purple-darker-72: #C277F8; // hsL=72
745
+ --tui-const-purple-darker-60: #AB6AC8; // hsL=60
746
+ --tui-const-purple-darker-56: #A25BC3; // hsL=56
747
+ --tui-const-purple-darker-48: #8B4EA6; // hsL=48
748
+ --tui-const-pink: #FF7A91;
749
+ --tui-const-pink-darker-64: #F6516C; // hsL=64
750
+ --tui-const-pink-darker-60: #F53D5C; // hsL=60
751
+ --tui-const-orange: #FFB74C;
752
+ --tui-const-orange-darker-56: #FFA51F; // hsL=56
753
+ --tui-const-orange-darker-48: #F59200; // hsL=48
754
+ --tui-const-coral: #FF6347;
755
+ --tui-const-coral-darker-60: #F5593D; // hsL=60
756
+ --tui-const-coral-darker-52: #E74023; // hsL=52
757
+ --tui-const-emerald: #36C578;
758
+ --tui-const-emerald-darker-42: #2EA866; // hsL=42
759
+ --tui-const-sea-blue: #2ABBF4;
760
+ --tui-const-sea-blue-darker-48: #0B9CD5; // hsL=42
761
+ --tui-const-sea-blue-lighter-66: #5ACAF6;
762
+ --tui-const-turquoise: #0BD5C1;
763
+ --tui-const-turquoise-darker-40: #0AC2AF; // hsL=40
764
+ --tui-const-turquoise-darker-36: #09AE9E; // hsL=36
765
+ --tui-feed-category-neutral: #90ADBF; // Для ленты операций в МБ
766
+ --tui-feed-category-neutral-pale: #E5ECF4; // Для ленты операций в МБ
767
+ --tui-foreground-neutral-accent: var(--tui-const-cool-gray-alpha-44); // @Deprecated: Перенесен в группу status
768
+ --tui-foreground-positive-accent: var(--tui-const-green); // @Deprecated: Перенесен в группу status
769
+ --tui-foreground-warning-accent: var(--tui-const-yellow-darker-60); // @Deprecated: Перенесен в группу status
770
+ --tui-foreground-negative-accent: var(--tui-const-red); // @Deprecated: Перенесен в группу status
771
+ --tui-foreground-info-accent: var(--tui-const-blue); // @Deprecated: Перенесен в группу status
772
+ --tui-foreground-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-dark
773
+ --tui-foreground-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
774
+ --tui-foreground-brand-tinkoff-accent: var(--tui-const-yellow); // @Deprecated: Перенесен в отдельную группу
775
+ --tui-foreground-skeleton: var(--tui-const-black-alpha-3); // @Deprecated: Перенесен в отдельную группу
776
+ --tui-foreground-separator: var(--tui-const-black-alpha-21); // @Deprecated: Перенесен в отдельную группу
777
+ --tui-foreground-border-darkmode: var(--tui-const-clear); // @Deprecated: Перенесен в отдельную группу
778
+ --tui-foreground-border-on-light: var(--tui-const-black-alpha-3); // @Deprecated: Перенесен в отдельную группу
779
+ --tui-foreground-border-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
780
+ --tui-icon-pressed: var(--tui-const-black-lighter-20); // @Deprecated: Для иконок используем цвета из группы text
781
+ --tui-icon-normal: var(--tui-const-cool-gray-alpha-22); // @Deprecated: Для иконок используем цвета из группы text
782
+ --tui-icon-action: var(--tui-const-blue); // @Deprecated: Для иконок используем цвета из группы text
783
+ --tui-icon-action-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Для иконок используем цвета из группы text
784
+ --tui-icon-on-dark: var(--tui-const-white); // @Deprecated: Для иконок используем цвета из группы text
785
+ --tui-service-skeleton: var(--tui-const-black-alpha-3); // Цвет для шиммеров, отображаемых при загрузке экрана
786
+ --tui-service-skeleton-on-dark: var(--tui-const-white-alpha-10); // Скелетон на темном фоне, не меняется при переключении темы
787
+ --tui-service-selected-text: var(--tui-const-blue-alpha-24); // Фон под выделенным пользователем текстом
788
+ --tui-service-backdrop: var(--tui-const-black-alpha-50); // Затемнение на фоне модальных окон и шторок
789
+ --tui-service-underline: var(--tui-const-blue-alpha-64); // Подчеркивание для ссылок
790
+ --tui-service-underline-monochrome: var(--tui-const-black-alpha-24); // Подчеркивание для монохромных ссылок
791
+ --tui-service-underline-on-dark: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы
792
+ --tui-status-warning-pale: var(--tui-const-yellow-alpha-30); // Контейнеры предупреждающих блоков
793
+ --tui-status-warning-pale-pressed: var(--tui-const-yellow-alpha-48); // Нажатое состояние контейнера предупреждающих блоков
794
+ --tui-status-positive-pale: var(--tui-const-green-alpha-16); // Контейнеры позитивных блоков
795
+ --tui-status-positive-pale-pressed: var(--tui-const-green-alpha-32); // Нажатое состояние positive в iOS
796
+ --tui-status-negative-pale: var(--tui-const-red-alpha-14); // Контейнеры негативных блоков
797
+ --tui-status-negative-pale-pressed: var(--tui-const-red-alpha-24); // Нажатое состояние negative в iOS
798
+ --tui-status-info-pale: var(--tui-const-blue-alpha-16); // Контейнеры информационных блоков
799
+ --tui-status-info-pale-pressed: var(--tui-const-blue-alpha-24); // Контейнеры информационных блоков при нажатии
800
+ --tui-status-neutral: var(--tui-const-cool-gray-alpha-44); // Акцентный цвет для нейтральных фонах
801
+ --tui-status-neutral-pale: var(--tui-const-cool-gray-alpha-12); // Фоновый контейнер нейтральных статусных блоков
802
+ --tui-status-neutral-pale-pressed: var(--tui-const-cool-gray-alpha-12); // Фоновый контейнер нейтральных статусных блоков при нажатии
803
+ --tui-status-positive: var(--tui-const-green); // Акцентный цвет для позитивных блоков
804
+ --tui-status-warning: var(--tui-const-yellow-darker-60); // Акцентный цвет для предупреждающих блоков
805
+ --tui-status-negative: var(--tui-const-red); // Акцентный цвет для негативных блоков
806
+ --tui-status-info: var(--tui-const-blue); // Акцентный цвет для информационных блоков
807
+ --tui-support-support-01: #00BEE0; // @Deprecated: Замена на семантические цвета
808
+ --tui-support-support-02: #9887F1; // @Deprecated: Замена на семантические цвета
809
+ --tui-support-support-03: #F94D4D; // @Deprecated: Замена на семантические цвета
810
+ --tui-support-support-04: #34BFB1; // @Deprecated: Замена на семантические цвета
811
+ --tui-support-support-05: #FFAD5C; // @Deprecated: Замена на семантические цвета
812
+ --tui-support-support-06: #929DED; // @Deprecated: Замена на семантические цвета
813
+ --tui-support-support-07: #45AD2D; // @Deprecated: Замена на семантические цвета
814
+ --tui-support-support-08: #3392DB; // @Deprecated: Замена на семантические цвета
815
+ --tui-support-support-09: #DF8400; // @Deprecated: Замена на семантические цвета
816
+ --tui-support-support-10: #AE59D4; // @Deprecated: Замена на семантические цвета
817
+ --tui-support-support-11: #FD7171; // @Deprecated: Замена на семантические цвета
818
+ --tui-support-support-12: #52BBE1; // @Deprecated: Замена на семантические цвета
819
+ --tui-support-support-13: #FE9B4B; // @Deprecated: Замена на семантические цвета
820
+ --tui-support-support-14: #BF69F1; // @Deprecated: Замена на семантические цвета
821
+ --tui-support-support-15: #EC4D6B; // @Deprecated: Замена на семантические цвета
822
+ --tui-support-support-16: #3DAF69; // @Deprecated: Замена на семантические цвета
823
+ --tui-support-support-17: #FF7047; // @Deprecated: Замена на семантические цвета
824
+ --tui-support-support-18: #994ABD; // @Deprecated: Замена на семантические цвета
825
+ --tui-support-support-19: #DD4444; // @Deprecated: Замена на семантические цвета
826
+ --tui-support-support-20: #36C578; // @Deprecated: Замена на семантические цвета
827
+ --tui-support-support-21: #1DACA4; // @Deprecated: Замена на семантические цвета
828
+ --tui-support-support-22: #F14789; // @Deprecated: Замена на семантические цвета
829
+ --tui-text-primary: var(--tui-const-black-lighter-20); // Основной текст и иконки фонах base, elevation, neutral
830
+ --tui-text-primary-pressed: var(--tui-const-cool-gray-lighter-36); // Основной текст и иконки фонах base, elevation, neutral при нажатии
831
+ --tui-text-primary-on-light: var(--tui-const-black-alpha-90); // Основной текст и иконки светлых фонах, не меняется при смене темы
832
+ --tui-text-primary-on-dark: var(--tui-const-white); // Основной текст и иконки темных фонах. Не меняется при смене темы
833
+ --tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // Текст и иконки фонах tinkoff
834
+ --tui-text-primary-on-opposite: var(--tui-const-white); // Текст и иконки фоне opposite
835
+ --tui-text-primary-on-accent-1: var(--tui-const-black-lighter-20); // Текст и иконки фоне accent-1
836
+ --tui-text-primary-on-accent-2: var(--tui-const-white); // Текст и иконки фоне accent-2
837
+ --tui-text-secondary: var(--tui-const-cool-gray-lighter-60); // Второстепенный текст на фонах base, elevation, neutral
838
+ --tui-text-secondary-pressed: var(--tui-const-cool-gray-lighter-36); // Второстепенный текст на фонах base, elevation, neutral при нажатии
839
+ --tui-text-secondary-on-light: var(--tui-const-black-alpha-48); // Второстепенный текст на светлых фонах, не меняется при смене темы
840
+ --tui-text-secondary-on-dark: var(--tui-const-white-alpha-70); // Второстепенный текст на темных фонах, не меняется при смене темы
841
+ --tui-text-tertiary: var(--tui-const-cool-gray-alpha-22); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры
842
+ --tui-text-tertiary-pressed: var(--tui-const-cool-gray-alpha-56); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры при нажатии
843
+ --tui-text-tertiary-on-light: var(--tui-const-cool-gray-alpha-22); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
844
+ --tui-text-tertiary-on-dark: var(--tui-const-white-alpha-30); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
845
+ --tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
846
+ --tui-text-action-pressed: var(--tui-const-blue-darker-46); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
847
+ --tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
848
+ --tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
849
+ --tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
850
+ --tui-text-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
851
+ --tui-text-positive: var(--tui-const-green); // Текст позитивного лейбла, например пополнение счета или рост цены акций
852
+ --tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
853
+ }