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