@taiga-ui/design-tokens 0.134.0 → 0.135.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 +206 -208
- package/angular/mobile.less +4 -6
- package/esm2022/icons.mjs +1 -6
- package/esm2022/index.mjs +1 -7
- package/fesm2022/taiga-ui-design-tokens.mjs +0 -12
- package/fesm2022/taiga-ui-design-tokens.mjs.map +1 -1
- package/icons.d.ts +0 -4
- package/index.d.ts +0 -4
- package/package.json +1 -1
- package/palette/dark.css +2 -6
- package/palette/gradient.css +0 -6
- package/palette/light.css +2 -6
- package/palette/mobile/dark.css +2 -6
- package/palette/mobile/light.css +2 -6
- package/palette/shadow.css +0 -6
package/angular/desktop.less
CHANGED
|
@@ -1,23 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--tui-background-
|
|
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. Второстепенные кнопки, карточки без тени, задизейбленные кнопки и т.д.
|
|
1
|
+
&:root,
|
|
2
|
+
[tuiTheme='light'] {
|
|
3
|
+
--tui-background-base: var(--tui-const-white); // Основной фон приложений. Отличается на iOS, Android и Desktop
|
|
4
|
+
--tui-background-base-alt: var(--tui-const-cool-gray-lighter-97); // Альтернативный основной фон
|
|
5
|
+
--tui-background-elevation-1: var(--tui-const-white); // Фон шторок, модальных экранов и карточек, лежащих на фонe base
|
|
6
|
+
--tui-background-elevation-2: var(--tui-const-white); // Фон карточек, лежащих на фонe elevation-1
|
|
7
|
+
--tui-background-elevation-3: var(--tui-const-white); // Фон элементов, возвышающихся над всем остальным контентом. Например, всплывающих подсказок
|
|
8
|
+
--tui-background-neutral-1: var(--tui-const-dark-blue-alpha-6); // Прозрачные контейнеры с минимальным контрастом на фонах base, elevation и neutral. Второстепенные кнопки, карточки без тени, задизейбленные кнопки и т.д.
|
|
14
9
|
--tui-background-neutral-1-on-light: var(--tui-const-black-alpha-3); // Прозрачные контейнеры с минимальным контрастом на светлых цветных фонах. Не меняется при переключении темы
|
|
15
10
|
--tui-background-neutral-1-on-dark: var(--tui-const-white-alpha-10); // Прозрачные контейнеры с минимальным контрастом на темных цветных фонах. Не меняется при переключении темы
|
|
16
|
-
--tui-background-neutral-1-opaque: var(--tui-const-
|
|
17
|
-
--tui-background-neutral-1-on-base: var(--tui-const-cool-gray-lighter-
|
|
18
|
-
--tui-background-neutral-1-on-elevation-1: var(--tui-const-cool-gray-lighter-
|
|
19
|
-
--tui-background-neutral-1-hover: var(--tui-const-
|
|
20
|
-
--tui-background-neutral-1-pressed: var(--tui-const-
|
|
11
|
+
--tui-background-neutral-1-opaque: var(--tui-const-cool-gray-lighter-97); // Непрозрачные контейнеры кнопок закрытия и удаления элементов
|
|
12
|
+
--tui-background-neutral-1-on-base: var(--tui-const-cool-gray-lighter-97); // Непрозрачные контейнеры с минимальным контрастом на фоне base, не имеющие тени в светлой теме
|
|
13
|
+
--tui-background-neutral-1-on-elevation-1: var(--tui-const-cool-gray-lighter-97); // Непрозрачные контейнеры с минимальным контрастом на фоне elevation-1, не имеющие тени в светлой теме
|
|
14
|
+
--tui-background-neutral-1-hover: var(--tui-const-dark-blue-alpha-9); // Только для веба. Cостояние элементов c фоном neutral-1 при наведении
|
|
15
|
+
--tui-background-neutral-1-pressed: var(--tui-const-dark-blue-alpha-11); // Нажатое состояние элементов с фоном neutral-1
|
|
21
16
|
--tui-background-neutral-1-hover-on-light: var(--tui-const-black-alpha-6); // @Deprecated: коррекция названия на neutral-1-on-light-hover
|
|
22
17
|
--tui-background-neutral-1-hover-on-dark: var(--tui-const-white-alpha-15); // @Deprecated: коррекция названия на neutral-1-on-dark-hover
|
|
23
18
|
--tui-background-neutral-1-on-light-hover: var(--tui-const-black-alpha-6); // Состояние при наведении элементов с фоном neutral-1-on-light, не меняется при переключении темы
|
|
@@ -26,42 +21,42 @@
|
|
|
26
21
|
--tui-background-neutral-1-pressed-on-dark: var(--tui-const-white-alpha-20); // @Deprecated: коррекция названия на neutral-1-on-dark-pressed
|
|
27
22
|
--tui-background-neutral-1-on-light-pressed: var(--tui-const-black-alpha-12); // Нажатое состояние элементов с фоном neutral-1-on-light, не меняется при переключении темы
|
|
28
23
|
--tui-background-neutral-1-on-dark-pressed: var(--tui-const-white-alpha-20); // Нажатое состояние элементов с фоном neutral-1-on-dark, не меняется при смене темы
|
|
29
|
-
--tui-background-neutral-2: var(--tui-const-
|
|
30
|
-
--tui-background-neutral-2-hover: var(--tui-const-
|
|
31
|
-
--tui-background-neutral-2-pressed: var(--tui-const-
|
|
24
|
+
--tui-background-neutral-2: var(--tui-const-dark-blue-alpha-8); // Прозрачные контейнеры маленьких размеров
|
|
25
|
+
--tui-background-neutral-2-hover: var(--tui-const-dark-blue-alpha-10); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
|
|
26
|
+
--tui-background-neutral-2-pressed: var(--tui-const-dark-blue-alpha-12); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
|
|
32
27
|
--tui-background-neutral-2-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Изменен на neutral-1-pressed-on-light
|
|
33
28
|
--tui-background-neutral-2-on-dark: var(--tui-const-white-alpha-15); // Прозрачные контейнеры со слабым контрастом на темных цветных фонах, не меняется при смене темы
|
|
34
29
|
--tui-background-neutral-2-on-dark-hover: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со слабым контрастом на темных цветных фонах, не меняется при смене темы
|
|
35
30
|
--tui-background-neutral-2-on-dark-pressed: var(--tui-const-white-alpha-25); // Прозрачные контейнеры со слабым контрастом на темных цветных фонах, не меняется при смене темы
|
|
36
|
-
--tui-background-neutral-3: var(--tui-const-
|
|
31
|
+
--tui-background-neutral-3: var(--tui-const-cool-gray-alpha-12); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
|
|
37
32
|
--tui-background-neutral-3-on-light: var(--tui-const-black-alpha-12); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
|
|
38
33
|
--tui-background-neutral-3-on-dark: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
|
|
39
|
-
--tui-background-neutral-4: var(--tui-const-
|
|
34
|
+
--tui-background-neutral-4: var(--tui-const-cool-gray-alpha-22); // Прозрачные контейнеры со средним контрастом. Контейнер аватара с иконкой или текстом
|
|
40
35
|
--tui-background-neutral-4-on-light: var(--tui-const-cool-gray-alpha-22); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Контейнер аватара с иконкой или текстом. Нажатое состояние элементов с цветом neutral-3
|
|
41
36
|
--tui-background-neutral-4-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark. Использовался для стеклянных поверхностей
|
|
42
|
-
--tui-background-neutral-6: var(--tui-const-
|
|
37
|
+
--tui-background-neutral-6: var(--tui-const-cool-gray-alpha-56); // Прозрачные контейнеры с сильным контрастом
|
|
43
38
|
--tui-background-neutral-6-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light. Использовался для стеклянных поверхностей.
|
|
44
39
|
--tui-background-neutral-6-on-dark: var(--tui-const-white-alpha-50); // Прозрачные контейнеры с большим контрастом на темных цветных фонах
|
|
45
|
-
--tui-background-opposite: var(--tui-const-
|
|
40
|
+
--tui-background-opposite: var(--tui-const-black); // @Deprecated: Заменен на accent-opposite
|
|
46
41
|
--tui-background-primary-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-light
|
|
47
42
|
--tui-background-primary-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
|
|
48
|
-
--tui-background-highlight: var(--tui-const-
|
|
43
|
+
--tui-background-highlight: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
|
|
49
44
|
--tui-background-highlight-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
|
|
50
45
|
--tui-background-highlight-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
|
|
51
|
-
--tui-background-highlight-on-opposite: var(--tui-const-
|
|
46
|
+
--tui-background-highlight-on-opposite: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
|
|
52
47
|
--tui-background-highlight-on-tinkoff: #FAB61966; // @Deprecated: Переехал в отдельную группу service
|
|
53
|
-
--tui-background-warning: var(--tui-const-yellow-
|
|
54
|
-
--tui-background-warning-pressed: var(--tui-const-yellow-
|
|
55
|
-
--tui-background-positive: var(--tui-const-green-
|
|
56
|
-
--tui-background-positive-pressed: var(--tui-const-green-
|
|
57
|
-
--tui-background-negative: var(--tui-const-red-
|
|
58
|
-
--tui-background-negative-pressed: var(--tui-const-red-
|
|
59
|
-
--tui-background-info: var(--tui-const-blue-
|
|
60
|
-
--tui-background-info-pressed: var(--tui-const-blue-
|
|
48
|
+
--tui-background-warning: var(--tui-const-yellow-alpha-30); // @Deprecated: Переехал в отдельную группу status
|
|
49
|
+
--tui-background-warning-pressed: var(--tui-const-yellow-alpha-48); // @Deprecated: Переехал в отдельную группу status
|
|
50
|
+
--tui-background-positive: var(--tui-const-green-alpha-16); // @Deprecated: Переехал в отдельную группу status
|
|
51
|
+
--tui-background-positive-pressed: var(--tui-const-green-alpha-32); // @Deprecated: Переехал в отдельную группу status
|
|
52
|
+
--tui-background-negative: var(--tui-const-red-alpha-14); // @Deprecated: Переехал в группу status
|
|
53
|
+
--tui-background-negative-pressed: var(--tui-const-red-alpha-24); // @Deprecated: Переехал в группу status
|
|
54
|
+
--tui-background-info: var(--tui-const-blue-alpha-16); // @Deprecated: Переехал в группу status
|
|
55
|
+
--tui-background-info-pressed: var(--tui-const-blue-alpha-24); // @Deprecated: Переехал в группу status
|
|
61
56
|
--tui-background-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent-2
|
|
62
57
|
--tui-background-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-2-pressed
|
|
63
|
-
--tui-background-accent-pale: var(--tui-const-blue-alpha-
|
|
64
|
-
--tui-background-accent-pale-pressed: var(--tui-const-blue-alpha-
|
|
58
|
+
--tui-background-accent-pale: var(--tui-const-blue-alpha-8); // @Deprecated: Заменён на компонентный токен
|
|
59
|
+
--tui-background-accent-pale-pressed: var(--tui-const-blue-alpha-16); // @Deprecated: Заменён на компонентный токен
|
|
65
60
|
--tui-background-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
|
|
66
61
|
--tui-background-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
|
|
67
62
|
--tui-background-brand-tinkoff: var(--tui-const-yellow); // @Deprecated: Переехал в отдельную группу brand
|
|
@@ -75,9 +70,9 @@
|
|
|
75
70
|
--tui-background-accent-2: var(--tui-const-blue); // Фоны акцентных кнопок, бейджей и т.д.
|
|
76
71
|
--tui-background-accent-2-hover: var(--tui-const-blue-darker-52); // Только для веба. Фоны акцентных кнопок, бейджей и т.д. при нажатии
|
|
77
72
|
--tui-background-accent-2-pressed: var(--tui-const-blue-darker-46); // Фоны акцентных кнопок, бейджей и т.д.
|
|
78
|
-
--tui-background-accent-opposite: var(--tui-const-
|
|
79
|
-
--tui-background-accent-opposite-hover: var(--tui-const-cool-gray-lighter-
|
|
80
|
-
--tui-background-accent-opposite-pressed: var(--tui-const-cool-gray-lighter-
|
|
73
|
+
--tui-background-accent-opposite: var(--tui-const-black); // Фон, противоположный base: в белой теме — черный, в темной теме — белый
|
|
74
|
+
--tui-background-accent-opposite-hover: var(--tui-const-cool-gray-lighter-18); // Только для веба. Фон, противоположный base при наведении: в белой теме — черный, в темной теме — белый
|
|
75
|
+
--tui-background-accent-opposite-pressed: var(--tui-const-cool-gray-lighter-36); // Фон, противоположный base при нажатии: в белой теме — черный, в темной теме — белый
|
|
81
76
|
--tui-background-accent-on-light: var(--tui-const-black); // Контрастные контейнеры на светлых фонах, не меняется при смене темы
|
|
82
77
|
--tui-background-accent-on-light-hover: var(--tui-const-black-lighter-16); // Контрастные контейнеры при наведении на светлых фонах, не меняется при смене темы.
|
|
83
78
|
--tui-background-accent-on-light-pressed: var(--tui-const-black-lighter-22); // Контрастные контейнеры при нажатии на светлых фонах, не меняется при смене темы.
|
|
@@ -87,14 +82,14 @@
|
|
|
87
82
|
--tui-background-button-close-on-light: var(--tui-const-black-alpha-40); // Фон кнопки закрытия на светлом фоне. не меняется при переключении темы. бывший цвет neutral-3-on-light. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
88
83
|
--tui-background-button-close-on-dark: var(--tui-const-white-alpha-50); // @Deprecated: Заменен на overlay-glass-on-dark
|
|
89
84
|
--tui-background-badge-notification: var(--tui-const-red); // Контейнеры нотификационных бейджей. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
90
|
-
--tui-background-toggle: var(--tui-const-
|
|
91
|
-
--tui-background-button-vertical: var(--tui-const-blue-alpha-
|
|
92
|
-
--tui-background-button-vertical-hover: var(--tui-const-blue-alpha-
|
|
93
|
-
--tui-background-button-vertical-pressed: var(--tui-const-blue-alpha-
|
|
85
|
+
--tui-background-toggle: var(--tui-const-cool-gray-alpha-12); // @Deprecated: Заменен на background.neutral-2
|
|
86
|
+
--tui-background-button-vertical: var(--tui-const-blue-alpha-8); // Фон tui-button [vertical]. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
87
|
+
--tui-background-button-vertical-hover: var(--tui-const-blue-alpha-12); // Фон tui-button [vertical]. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
88
|
+
--tui-background-button-vertical-pressed: var(--tui-const-blue-alpha-16); // Фон tui-button [vertical] при нажатии и наведении. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
94
89
|
--tui-background-button-glass-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark
|
|
95
90
|
--tui-background-button-glass-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light
|
|
96
|
-
--tui-background-progress-bar: var(--tui-const-
|
|
97
|
-
--tui-background-tooltip: var(--tui-const-
|
|
91
|
+
--tui-background-progress-bar: var(--tui-const-cool-gray-alpha-6); // Пустая полоска прогресс-баров. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
92
|
+
--tui-background-tooltip: var(--tui-const-cool-gray-lighter-36); // Фон для тултипов
|
|
98
93
|
--tui-background-thumbnail-card-badge: var(--tui-const-black-alpha-12); // Прозрачный контейнер бейджа на миниатюре карты. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
99
94
|
--tui-background-overlay-glass-on-dark: var(--tui-const-white-alpha-30); // Оверлей стеклянных поверхностей на темных фонах, не меняется при смене темы.
|
|
100
95
|
--tui-background-overlay-glass-on-dark-hover: var(--tui-const-white-alpha-40); // Оверлей стеклянных поверхностей при наведении на темных фонах, не меняется при смене темы.
|
|
@@ -102,16 +97,17 @@
|
|
|
102
97
|
--tui-background-overlay-glass-on-light: var(--tui-const-black-alpha-40); // Оверлей стеклянных поверхностей на cветлых фонах, не меняется при смене темы
|
|
103
98
|
--tui-background-overlay-glass-on-light-pressed: var(--tui-const-black-alpha-60); // Оверлей стеклянных поверхностей при нажатии на cветлых фонах, не меняется при смене темы.
|
|
104
99
|
--tui-background-overlay-glass-on-light-hover: var(--tui-const-black-alpha-48); // Оверлей стеклянных поверхностей при наведении на cветлых фонах, не меняется при смене темы.
|
|
105
|
-
--tui-
|
|
106
|
-
--tui-border-normal
|
|
107
|
-
--tui-border-
|
|
108
|
-
--tui-border-
|
|
109
|
-
--tui-border-normal-opaque
|
|
110
|
-
--tui-border-normal-
|
|
111
|
-
--tui-border-
|
|
100
|
+
--tui-background-overlay-glass-matte: var(--tui-const-white-alpha-80); // Оверлей матовых стеклянных поверхностей, не меняется при смене темы.
|
|
101
|
+
--tui-border-normal: var(--tui-const-cool-gray-alpha-12); // Бордеры и сепараторы на основных фонах
|
|
102
|
+
--tui-border-normal-pale: var(--tui-const-cool-gray-alpha-7); // Бледные бордеры и сепараторы на основных фонах
|
|
103
|
+
--tui-border-hover: var(--tui-const-cool-gray-alpha-22); // Только для веба. Бордеры при наведении
|
|
104
|
+
--tui-border-normal-opaque: var(--tui-const-cool-gray-lighter-90); // Бордеры и сепараторы на основных фонах без прозрачности
|
|
105
|
+
--tui-border-normal-opaque-hover: var(--tui-const-cool-gray-lighter-85); // Бордеры и сепараторы на основных фонах без прозрачности
|
|
106
|
+
--tui-border-normal-pale-opaque: var(--tui-const-cool-gray-lighter-94); // Бледные непрозрачные бордеры и сепараторы на основных фонах
|
|
107
|
+
--tui-border-focus: var(--tui-const-cool-gray-alpha-44); // Только для веба. Бордеры при фокусировании с клавиатуры
|
|
112
108
|
--tui-border-focus-on-dark: var(--tui-const-white-alpha-30); // Только для веба. Бордеры при фокусировании с клавиатуры темных элементов
|
|
113
109
|
--tui-border-selected: var(--tui-const-yellow); // Обводка выделенных элементов
|
|
114
|
-
--tui-border-darkmode-only: var(--tui-const-
|
|
110
|
+
--tui-border-darkmode-only: var(--tui-const-clear); // Обводка, отделяющая цветные элементы от фона в темной теме
|
|
115
111
|
--tui-border-on-light: var(--tui-const-cool-gray-alpha-12); // Обводка, отделяющая цветные элементы от светлого фонов
|
|
116
112
|
--tui-border-on-dark: var(--tui-const-white-alpha-10); // Обводка, отделяющая цветные элементы от темных фонов
|
|
117
113
|
--tui-brand-t-bank: #FFDD2D; // Фирменный цвет. Используется, например, в бейдже подписки Team
|
|
@@ -182,8 +178,8 @@
|
|
|
182
178
|
--tui-chart-categorical-25: var(--tui-const-green-lighter-64);
|
|
183
179
|
--tui-chart-categorical-26: var(--tui-const-sea-blue-lighter-66);
|
|
184
180
|
--tui-chart-categorical-27: var(--tui-const-green-lighter-57);
|
|
185
|
-
--tui-component-tab-bar-background-ios: #
|
|
186
|
-
--tui-component-input-background-autofill: var(--tui-const-yellow-darker-
|
|
181
|
+
--tui-component-tab-bar-background-ios: #F6F7F8CC; // Цвет фона для имитации системного таббара iOS
|
|
182
|
+
--tui-component-input-background-autofill: var(--tui-const-yellow-darker-88); // @Deprecated: Заменён на service.autofill-background
|
|
187
183
|
--tui-const-yellow: #FFDD2D; // N9
|
|
188
184
|
--tui-const-yellow-darker-88: #FFF5C2;
|
|
189
185
|
--tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
|
|
@@ -346,6 +342,7 @@
|
|
|
346
342
|
--tui-const-black-lighter-30: #4D4D4D;
|
|
347
343
|
--tui-const-black-lighter-79: #C9C9C9;
|
|
348
344
|
--tui-const-black-lighter-92: #ECECEC;
|
|
345
|
+
--tui-const-black-lighter-13-alpha-80: #202020CC;
|
|
349
346
|
--tui-const-cool-gray-lighter-36: #575B61;
|
|
350
347
|
--tui-const-cool-gray-lighter-60: #9299A2; // N3
|
|
351
348
|
--tui-const-cool-gray-lighter-79: #C7C9CC; // N4
|
|
@@ -389,8 +386,8 @@
|
|
|
389
386
|
--tui-const-turquoise-darker-40: #0AC2AF; // hsL=40
|
|
390
387
|
--tui-const-turquoise-darker-36: #09AE9E; // hsL=36
|
|
391
388
|
--tui-feed-category-neutral: #90ADBF; // Для ленты операций в МБ
|
|
392
|
-
--tui-feed-category-neutral-pale: #
|
|
393
|
-
--tui-foreground-neutral-accent: var(--tui-const-
|
|
389
|
+
--tui-feed-category-neutral-pale: #E5ECF4; // Для ленты операций в МБ
|
|
390
|
+
--tui-foreground-neutral-accent: var(--tui-const-cool-gray-alpha-44); // @Deprecated: Перенесен в группу status
|
|
394
391
|
--tui-foreground-positive-accent: var(--tui-const-green); // @Deprecated: Перенесен в группу status
|
|
395
392
|
--tui-foreground-warning-accent: var(--tui-const-yellow-darker-60); // @Deprecated: Перенесен в группу status
|
|
396
393
|
--tui-foreground-negative-accent: var(--tui-const-red); // @Deprecated: Перенесен в группу status
|
|
@@ -398,49 +395,49 @@
|
|
|
398
395
|
--tui-foreground-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-dark
|
|
399
396
|
--tui-foreground-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
|
|
400
397
|
--tui-foreground-brand-tinkoff-accent: var(--tui-const-yellow); // @Deprecated: Перенесен в отдельную группу
|
|
401
|
-
--tui-foreground-skeleton: var(--tui-const-
|
|
402
|
-
--tui-foreground-separator: var(--tui-const-
|
|
403
|
-
--tui-foreground-border-darkmode: var(--tui-const-
|
|
398
|
+
--tui-foreground-skeleton: var(--tui-const-black-alpha-3); // @Deprecated: Перенесен в отдельную группу
|
|
399
|
+
--tui-foreground-separator: var(--tui-const-black-alpha-21); // @Deprecated: Перенесен в отдельную группу
|
|
400
|
+
--tui-foreground-border-darkmode: var(--tui-const-clear); // @Deprecated: Перенесен в отдельную группу
|
|
404
401
|
--tui-foreground-border-on-light: var(--tui-const-black-alpha-3); // @Deprecated: Перенесен в отдельную группу
|
|
405
402
|
--tui-foreground-border-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
|
|
406
|
-
--tui-icon-pressed: var(--tui-const-
|
|
407
|
-
--tui-icon-hover: var(--tui-const-
|
|
408
|
-
--tui-icon-normal: var(--tui-const-
|
|
409
|
-
--tui-icon-action: var(--tui-const-blue-darker-
|
|
410
|
-
--tui-icon-action-hover: var(--tui-const-blue); // @Deprecated: Для иконок используем цвета из группы text
|
|
411
|
-
--tui-icon-action-pressed: var(--tui-const-blue-darker-
|
|
403
|
+
--tui-icon-pressed: var(--tui-const-black-alpha-80); // @Deprecated: Для иконок используем цвета из группы text
|
|
404
|
+
--tui-icon-hover: var(--tui-const-black-alpha-48); // @Deprecated: Для иконок используем цвета из группы text
|
|
405
|
+
--tui-icon-normal: var(--tui-const-cool-gray-lighter-60); // @Deprecated: Для иконок используем цвета из группы text
|
|
406
|
+
--tui-icon-action: var(--tui-const-blue-darker-52); // @Deprecated: Для иконок используем цвета из группы text
|
|
407
|
+
--tui-icon-action-hover: var(--tui-const-blue-darker-40); // @Deprecated: Для иконок используем цвета из группы text
|
|
408
|
+
--tui-icon-action-pressed: var(--tui-const-blue-darker-32); // @Deprecated: Для иконок используем цвета из группы text
|
|
412
409
|
--tui-icon-on-dark: var(--tui-const-white); // @Deprecated: Для иконок используем цвета из группы text
|
|
413
|
-
--tui-service-autofill-background: var(--tui-const-yellow-darker-
|
|
414
|
-
--tui-service-skeleton: var(--tui-const-
|
|
410
|
+
--tui-service-autofill-background: var(--tui-const-yellow-darker-88); // Цвет фона при автозаполнении форм
|
|
411
|
+
--tui-service-skeleton: var(--tui-const-black-alpha-6); // Цвет для шиммеров, отображаемых при загрузке экрана
|
|
415
412
|
--tui-service-skeleton-on-dark: var(--tui-const-white-alpha-15); // Скелетон на темном фоне, не меняется при переключении темы
|
|
416
413
|
--tui-service-selected-text: var(--tui-const-blue-alpha-24); // @Deprecated: Заменён на service.selection-background
|
|
417
414
|
--tui-service-selection-background: var(--tui-const-blue-alpha-24); // Фон при выделении текста и изображений
|
|
418
415
|
--tui-service-backdrop: var(--tui-const-black-alpha-70); // Затемнение на фоне модальных окон и шторок
|
|
419
416
|
--tui-service-underline: var(--tui-const-blue-alpha-64); // Подчеркивание для ссылок
|
|
420
|
-
--tui-service-underline-monochrome: var(--tui-const-
|
|
417
|
+
--tui-service-underline-monochrome: var(--tui-const-black-alpha-24); // Подчеркивание для монохромных ссылок
|
|
421
418
|
--tui-service-underline-on-dark: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы
|
|
422
|
-
--tui-status-warning-pale: var(--tui-const-yellow-
|
|
423
|
-
--tui-status-warning-pale-hover: var(--tui-const-yellow-
|
|
424
|
-
--tui-status-warning-pale-pressed: var(--tui-const-yellow-
|
|
425
|
-
--tui-status-positive-pale: var(--tui-const-green-
|
|
426
|
-
--tui-status-positive-pale-hover: var(--tui-const-green-
|
|
427
|
-
--tui-status-positive-pale-pressed: var(--tui-const-green-
|
|
419
|
+
--tui-status-warning-pale: var(--tui-const-yellow-alpha-14); // Контейнеры предупреждающих блоков
|
|
420
|
+
--tui-status-warning-pale-hover: var(--tui-const-yellow-alpha-40); // Только для веба. Контейнеры предупреждающих блоков при наведении
|
|
421
|
+
--tui-status-warning-pale-pressed: var(--tui-const-yellow-alpha-48); // Нажатое состояние контейнера предупреждающих блоков
|
|
422
|
+
--tui-status-positive-pale: var(--tui-const-green-alpha-16); // Контейнеры позитивных блоков
|
|
423
|
+
--tui-status-positive-pale-hover: var(--tui-const-green-alpha-24); // Только для веба. Контейнеры позитивных блоков при наведении
|
|
424
|
+
--tui-status-positive-pale-pressed: var(--tui-const-green-alpha-32); // Нажатое состояние positive в iOS
|
|
428
425
|
--tui-status-positive-pale-on-dark: var(--tui-const-green-alpha-32); // Контейнеры позитивных блоков на тёмных фонах, не меняются от темы
|
|
429
426
|
--tui-status-positive-pale-on-dark-hover: var(--tui-const-green-alpha-38); // Только для веба. Контейнеры позитивных блоков на тёмных фонах при наведении
|
|
430
427
|
--tui-status-positive-pale-on-dark-pressed: var(--tui-const-green-alpha-44); // Нажатое состояние positive-on-dark
|
|
431
|
-
--tui-status-negative-pale: var(--tui-const-red-
|
|
432
|
-
--tui-status-negative-pale-hover: var(--tui-const-red-
|
|
433
|
-
--tui-status-negative-pale-pressed: var(--tui-const-red-
|
|
428
|
+
--tui-status-negative-pale: var(--tui-const-red-alpha-14); // Контейнеры негативных блоков
|
|
429
|
+
--tui-status-negative-pale-hover: var(--tui-const-red-alpha-24); // Только для веба. Контейнеры негативных блоков при наведении
|
|
430
|
+
--tui-status-negative-pale-pressed: var(--tui-const-red-alpha-24); // Нажатое состояние negative в iOS
|
|
434
431
|
--tui-status-negative-pale-on-dark: var(--tui-const-red-alpha-32); // Контейнеры негативных блоков на тёмных фонах
|
|
435
432
|
--tui-status-negative-pale-on-dark-hover: var(--tui-const-red-alpha-38); // Только для веба. Контейнеры негативных блоков на тёмных фонах при наведении
|
|
436
433
|
--tui-status-negative-pale-on-dark-pressed: var(--tui-const-red-alpha-44); // Нажатое состояние negative-pale-on-dark
|
|
437
|
-
--tui-status-info-pale: var(--tui-const-blue-
|
|
438
|
-
--tui-status-info-pale-hover: var(--tui-const-blue-
|
|
439
|
-
--tui-status-info-pale-pressed: var(--tui-const-blue-
|
|
440
|
-
--tui-status-neutral: var(--tui-const-cool-gray-lighter-
|
|
441
|
-
--tui-status-neutral-pale: var(--tui-const-
|
|
442
|
-
--tui-status-neutral-pale-hover: var(--tui-const-
|
|
443
|
-
--tui-status-neutral-pale-pressed: var(--tui-const-
|
|
434
|
+
--tui-status-info-pale: var(--tui-const-blue-alpha-16); // Контейнеры информационных блоков
|
|
435
|
+
--tui-status-info-pale-hover: var(--tui-const-blue-alpha-24); // Только для веба. Контейнеры информационных блоков при наведении
|
|
436
|
+
--tui-status-info-pale-pressed: var(--tui-const-blue-alpha-24); // Контейнеры информационных блоков при нажатии
|
|
437
|
+
--tui-status-neutral: var(--tui-const-cool-gray-lighter-51); // Акцентный цвет для нейтральных фонах
|
|
438
|
+
--tui-status-neutral-pale: var(--tui-const-cool-gray-alpha-8); // Фоновый контейнер нейтральных статусных блоков
|
|
439
|
+
--tui-status-neutral-pale-hover: var(--tui-const-cool-gray-alpha-12); // Фоновый контейнер нейтральных статусных блоков при наведении
|
|
440
|
+
--tui-status-neutral-pale-pressed: var(--tui-const-cool-gray-alpha-18); // Фоновый контейнер нейтральных статусных блоков при нажатии
|
|
444
441
|
--tui-status-positive: var(--tui-const-green); // Акцентный цвет для позитивных блоков
|
|
445
442
|
--tui-status-warning: var(--tui-const-yellow-darker-60); // Акцентный цвет для предупреждающих блоков
|
|
446
443
|
--tui-status-negative: var(--tui-const-red); // Акцентный цвет для негативных блоков
|
|
@@ -467,58 +464,62 @@
|
|
|
467
464
|
--tui-support-support-20: #36C578; // @Deprecated: Замена на семантические цвета
|
|
468
465
|
--tui-support-support-21: #1DACA4; // @Deprecated: Замена на семантические цвета
|
|
469
466
|
--tui-support-support-22: #F14789; // @Deprecated: Замена на семантические цвета
|
|
470
|
-
--tui-text-primary: var(--tui-const-
|
|
471
|
-
--tui-text-primary-hover: var(--tui-const-
|
|
472
|
-
--tui-text-primary-pressed: var(--tui-const-
|
|
467
|
+
--tui-text-primary: var(--tui-const-black-alpha-80); // Основной текст и иконки фонах base, elevation, neutral
|
|
468
|
+
--tui-text-primary-hover: var(--tui-const-black-alpha-50); // Основной текст и иконки фонах base, elevation, neutral при наведении
|
|
469
|
+
--tui-text-primary-pressed: var(--tui-const-black-alpha-40); // Основной текст и иконки фонах base, elevation, neutral при нажатии
|
|
473
470
|
--tui-text-primary-on-light: var(--tui-const-black-alpha-80); // Основной текст и иконки светлых фонах, не меняется при смене темы
|
|
474
471
|
--tui-text-primary-on-dark: var(--tui-const-white); // Основной текст и иконки темных фонах. Не меняется при смене темы
|
|
475
472
|
--tui-text-primary-on-t-bank: var(--tui-const-black-lighter-20); // Текст и иконки на фонах t-bank
|
|
476
|
-
--tui-text-primary-on-opposite: var(--tui-const-
|
|
473
|
+
--tui-text-primary-on-opposite: var(--tui-const-white); // Текст и иконки фоне opposite
|
|
477
474
|
--tui-text-primary-on-accent-1: var(--tui-const-black-lighter-20); // Текст и иконки фоне accent-1
|
|
478
475
|
--tui-text-primary-on-accent-2: var(--tui-const-white); // Текст и иконки фоне accent-2
|
|
479
|
-
--tui-text-secondary: var(--tui-const-
|
|
480
|
-
--tui-text-secondary-hover: var(--tui-const-
|
|
481
|
-
--tui-text-secondary-pressed: var(--tui-const-
|
|
476
|
+
--tui-text-secondary: var(--tui-const-black-alpha-54); // Второстепенный текст на фонах base, elevation, neutral
|
|
477
|
+
--tui-text-secondary-hover: var(--tui-const-black-alpha-70); // Второстепенный текст на фонах base, elevation, neutral при наведении
|
|
478
|
+
--tui-text-secondary-pressed: var(--tui-const-black-alpha-90); // Второстепенный текст на фонах base, elevation, neutral при нажатии
|
|
482
479
|
--tui-text-secondary-on-light: var(--tui-const-black-alpha-48); // Второстепенный текст на светлых фонах, не меняется при смене темы
|
|
483
480
|
--tui-text-secondary-on-dark: var(--tui-const-white-alpha-70); // Второстепенный текст на темных фонах, не меняется при смене темы
|
|
484
|
-
--tui-text-tertiary: var(--tui-const-
|
|
485
|
-
--tui-text-tertiary-hover: var(--tui-const-
|
|
486
|
-
--tui-text-tertiary-pressed: var(--tui-const-
|
|
481
|
+
--tui-text-tertiary: var(--tui-const-black-alpha-40); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры
|
|
482
|
+
--tui-text-tertiary-hover: var(--tui-const-black-alpha-60); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры при наведении
|
|
483
|
+
--tui-text-tertiary-pressed: var(--tui-const-black-alpha-70); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры при нажатии
|
|
487
484
|
--tui-text-tertiary-on-light: var(--tui-const-black-alpha-40); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
|
|
488
485
|
--tui-text-tertiary-on-dark: var(--tui-const-white-alpha-50); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
|
|
489
|
-
--tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
|
|
490
|
-
--tui-text-action-hover: var(--tui-const-blue-darker-
|
|
486
|
+
--tui-text-action: var(--tui-const-blue-darker-52); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
|
|
487
|
+
--tui-text-action-hover: var(--tui-const-blue-darker-46); // Только для веба. Состояние текста при наведении
|
|
491
488
|
--tui-text-action-pressed: var(--tui-const-blue-darker-40); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
|
|
492
489
|
--tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
|
|
493
490
|
--tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
|
|
494
491
|
--tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
|
|
495
492
|
--tui-text-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
|
|
496
|
-
--tui-text-positive: var(--tui-const-green-
|
|
497
|
-
--tui-text-positive-hover: var(--tui-const-green); // Только для веба. Текст позитивного лейбла при нажатии
|
|
493
|
+
--tui-text-positive: var(--tui-const-green-darker-34); // Текст позитивного лейбла, например пополнение счета или рост цены акций
|
|
494
|
+
--tui-text-positive-hover: var(--tui-const-green-darker-21); // Только для веба. Текст позитивного лейбла при нажатии
|
|
498
495
|
--tui-text-positive-on-dark: var(--tui-const-green-lighter-44); // Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций
|
|
499
|
-
--tui-text-negative: var(--tui-const-red
|
|
500
|
-
--tui-text-negative-hover: var(--tui-const-red); // Только для веба. Текст негативного лейбла при наведении на вебе
|
|
496
|
+
--tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
|
|
497
|
+
--tui-text-negative-hover: var(--tui-const-red-darker-32); // Только для веба. Текст негативного лейбла при наведении на вебе
|
|
501
498
|
--tui-text-negative-on-dark: var(--tui-const-red-lighter-70); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
|
|
502
|
-
--tui-text-warning: var(--tui-const-yellow-darker-
|
|
503
|
-
--tui-text-warning-hover: var(--tui-const-yellow-darker-
|
|
499
|
+
--tui-text-warning: var(--tui-const-yellow-darker-48); // Предупреждающие текст и иконки
|
|
500
|
+
--tui-text-warning-hover: var(--tui-const-yellow-darker-26); // Предупреждающие текст и иконки при наведении на вебе
|
|
504
501
|
--tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
|
|
502
|
+
--tui-shadow-small: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); // Тень для мелких элементов интерфейса, например Chips
|
|
503
|
+
--tui-shadow-small-hover: 0px 14px 42px 0px rgba(0, 0, 0, 0.14);
|
|
504
|
+
--tui-shadow-medium: 0px 6px 34px 0px rgba(0, 0, 0, 0.12); // Тень для карточек и других больших объектов, например тултипов
|
|
505
|
+
--tui-shadow-medium-hover: 0px 18px 60px 0px rgba(0, 0, 0, 0.18);
|
|
506
|
+
--tui-shadow-popup: 0px 20px 50px 0px rgba(0, 0, 0, 0.2); // Тень для карточек, всплывающих поверх контента: например попап-онбординг
|
|
505
507
|
}
|
|
506
508
|
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
--tui-background-base: var(--tui-const-
|
|
510
|
-
--tui-background-
|
|
511
|
-
--tui-background-elevation-
|
|
512
|
-
--tui-background-elevation-
|
|
513
|
-
--tui-background-
|
|
514
|
-
--tui-background-neutral-1: var(--tui-const-dark-blue-alpha-6); // Прозрачные контейнеры с минимальным контрастом на фонах base, elevation и neutral. Второстепенные кнопки, карточки без тени, задизейбленные кнопки и т.д.
|
|
509
|
+
[tuiTheme='dark'] {
|
|
510
|
+
--tui-background-base: var(--tui-const-black-lighter-13); // Основной фон приложений. Отличается на iOS, Android и Desktop
|
|
511
|
+
--tui-background-base-alt: var(--tui-const-black-lighter-20); // Альтернативный основной фон
|
|
512
|
+
--tui-background-elevation-1: var(--tui-const-black-lighter-16); // Фон шторок, модальных экранов и карточек, лежащих на фонe base
|
|
513
|
+
--tui-background-elevation-2: var(--tui-const-black-lighter-20); // Фон карточек, лежащих на фонe elevation-1
|
|
514
|
+
--tui-background-elevation-3: var(--tui-const-black-lighter-22); // Фон элементов, возвышающихся над всем остальным контентом. Например, всплывающих подсказок
|
|
515
|
+
--tui-background-neutral-1: var(--tui-const-white-alpha-10); // Прозрачные контейнеры с минимальным контрастом на фонах base, elevation и neutral. Второстепенные кнопки, карточки без тени, задизейбленные кнопки и т.д.
|
|
515
516
|
--tui-background-neutral-1-on-light: var(--tui-const-black-alpha-3); // Прозрачные контейнеры с минимальным контрастом на светлых цветных фонах. Не меняется при переключении темы
|
|
516
517
|
--tui-background-neutral-1-on-dark: var(--tui-const-white-alpha-10); // Прозрачные контейнеры с минимальным контрастом на темных цветных фонах. Не меняется при переключении темы
|
|
517
|
-
--tui-background-neutral-1-opaque: var(--tui-const-
|
|
518
|
-
--tui-background-neutral-1-on-base: var(--tui-const-cool-gray-lighter-
|
|
519
|
-
--tui-background-neutral-1-on-elevation-1: var(--tui-const-cool-gray-lighter-
|
|
520
|
-
--tui-background-neutral-1-hover: var(--tui-const-
|
|
521
|
-
--tui-background-neutral-1-pressed: var(--tui-const-
|
|
518
|
+
--tui-background-neutral-1-opaque: var(--tui-const-black-lighter-20); // Непрозрачные контейнеры кнопок закрытия и удаления элементов
|
|
519
|
+
--tui-background-neutral-1-on-base: var(--tui-const-cool-gray-lighter-18); // Непрозрачные контейнеры с минимальным контрастом на фоне base, не имеющие тени в светлой теме
|
|
520
|
+
--tui-background-neutral-1-on-elevation-1: var(--tui-const-cool-gray-lighter-18); // Непрозрачные контейнеры с минимальным контрастом на фоне elevation-1, не имеющие тени в светлой теме
|
|
521
|
+
--tui-background-neutral-1-hover: var(--tui-const-white-alpha-15); // Только для веба. Cостояние элементов c фоном neutral-1 при наведении
|
|
522
|
+
--tui-background-neutral-1-pressed: var(--tui-const-white-alpha-20); // Нажатое состояние элементов с фоном neutral-1
|
|
522
523
|
--tui-background-neutral-1-hover-on-light: var(--tui-const-black-alpha-6); // @Deprecated: коррекция названия на neutral-1-on-light-hover
|
|
523
524
|
--tui-background-neutral-1-hover-on-dark: var(--tui-const-white-alpha-15); // @Deprecated: коррекция названия на neutral-1-on-dark-hover
|
|
524
525
|
--tui-background-neutral-1-on-light-hover: var(--tui-const-black-alpha-6); // Состояние при наведении элементов с фоном neutral-1-on-light, не меняется при переключении темы
|
|
@@ -527,42 +528,42 @@
|
|
|
527
528
|
--tui-background-neutral-1-pressed-on-dark: var(--tui-const-white-alpha-20); // @Deprecated: коррекция названия на neutral-1-on-dark-pressed
|
|
528
529
|
--tui-background-neutral-1-on-light-pressed: var(--tui-const-black-alpha-12); // Нажатое состояние элементов с фоном neutral-1-on-light, не меняется при переключении темы
|
|
529
530
|
--tui-background-neutral-1-on-dark-pressed: var(--tui-const-white-alpha-20); // Нажатое состояние элементов с фоном neutral-1-on-dark, не меняется при смене темы
|
|
530
|
-
--tui-background-neutral-2: var(--tui-const-
|
|
531
|
-
--tui-background-neutral-2-hover: var(--tui-const-
|
|
532
|
-
--tui-background-neutral-2-pressed: var(--tui-const-
|
|
531
|
+
--tui-background-neutral-2: var(--tui-const-white-alpha-15); // Прозрачные контейнеры маленьких размеров
|
|
532
|
+
--tui-background-neutral-2-hover: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
|
|
533
|
+
--tui-background-neutral-2-pressed: var(--tui-const-white-alpha-25); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
|
|
533
534
|
--tui-background-neutral-2-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Изменен на neutral-1-pressed-on-light
|
|
534
535
|
--tui-background-neutral-2-on-dark: var(--tui-const-white-alpha-15); // Прозрачные контейнеры со слабым контрастом на темных цветных фонах, не меняется при смене темы
|
|
535
536
|
--tui-background-neutral-2-on-dark-hover: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со слабым контрастом на темных цветных фонах, не меняется при смене темы
|
|
536
537
|
--tui-background-neutral-2-on-dark-pressed: var(--tui-const-white-alpha-25); // Прозрачные контейнеры со слабым контрастом на темных цветных фонах, не меняется при смене темы
|
|
537
|
-
--tui-background-neutral-3: var(--tui-const-
|
|
538
|
+
--tui-background-neutral-3: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом. Нажатое состояние элементов с цветом neutral-2
|
|
538
539
|
--tui-background-neutral-3-on-light: var(--tui-const-black-alpha-12); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
|
|
539
540
|
--tui-background-neutral-3-on-dark: var(--tui-const-white-alpha-20); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Нажатое состояние элементов с цветом neutral-2
|
|
540
|
-
--tui-background-neutral-4: var(--tui-const-
|
|
541
|
+
--tui-background-neutral-4: var(--tui-const-white-alpha-30); // Прозрачные контейнеры со средним контрастом. Контейнер аватара с иконкой или текстом
|
|
541
542
|
--tui-background-neutral-4-on-light: var(--tui-const-cool-gray-alpha-22); // Прозрачные контейнеры со средним контрастом на светлых цветных фонах. Контейнер аватара с иконкой или текстом. Нажатое состояние элементов с цветом neutral-3
|
|
542
543
|
--tui-background-neutral-4-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark. Использовался для стеклянных поверхностей
|
|
543
|
-
--tui-background-neutral-6: var(--tui-const-
|
|
544
|
+
--tui-background-neutral-6: var(--tui-const-white-alpha-50); // Прозрачные контейнеры с сильным контрастом
|
|
544
545
|
--tui-background-neutral-6-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light. Использовался для стеклянных поверхностей.
|
|
545
546
|
--tui-background-neutral-6-on-dark: var(--tui-const-white-alpha-50); // Прозрачные контейнеры с большим контрастом на темных цветных фонах
|
|
546
|
-
--tui-background-opposite: var(--tui-const-
|
|
547
|
+
--tui-background-opposite: var(--tui-const-white); // @Deprecated: Заменен на accent-opposite
|
|
547
548
|
--tui-background-primary-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-light
|
|
548
549
|
--tui-background-primary-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
|
|
549
|
-
--tui-background-highlight: var(--tui-const-
|
|
550
|
+
--tui-background-highlight: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
|
|
550
551
|
--tui-background-highlight-on-light: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
|
|
551
552
|
--tui-background-highlight-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Переехал в отдельную группу service
|
|
552
|
-
--tui-background-highlight-on-opposite: var(--tui-const-
|
|
553
|
+
--tui-background-highlight-on-opposite: var(--tui-const-black-alpha-6); // @Deprecated: Переехал в отдельную группу service
|
|
553
554
|
--tui-background-highlight-on-tinkoff: #FAB61966; // @Deprecated: Переехал в отдельную группу service
|
|
554
|
-
--tui-background-warning: var(--tui-const-yellow-
|
|
555
|
-
--tui-background-warning-pressed: var(--tui-const-yellow-
|
|
556
|
-
--tui-background-positive: var(--tui-const-green-
|
|
557
|
-
--tui-background-positive-pressed: var(--tui-const-green-
|
|
558
|
-
--tui-background-negative: var(--tui-const-red-
|
|
559
|
-
--tui-background-negative-pressed: var(--tui-const-red-
|
|
560
|
-
--tui-background-info: var(--tui-const-blue-
|
|
561
|
-
--tui-background-info-pressed: var(--tui-const-blue-
|
|
555
|
+
--tui-background-warning: var(--tui-const-yellow-darker-26); // @Deprecated: Переехал в отдельную группу status
|
|
556
|
+
--tui-background-warning-pressed: var(--tui-const-yellow-darker-32); // @Deprecated: Переехал в отдельную группу status
|
|
557
|
+
--tui-background-positive: var(--tui-const-green-darker-18); // @Deprecated: Переехал в отдельную группу status
|
|
558
|
+
--tui-background-positive-pressed: var(--tui-const-green-darker-21); // @Deprecated: Переехал в отдельную группу status
|
|
559
|
+
--tui-background-negative: var(--tui-const-red-darker-23); // @Deprecated: Переехал в группу status
|
|
560
|
+
--tui-background-negative-pressed: var(--tui-const-red-darker-29); // @Deprecated: Переехал в группу status
|
|
561
|
+
--tui-background-info: var(--tui-const-blue-darker-25); // @Deprecated: Переехал в группу status
|
|
562
|
+
--tui-background-info-pressed: var(--tui-const-blue-darker-32); // @Deprecated: Переехал в группу status
|
|
562
563
|
--tui-background-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent-2
|
|
563
564
|
--tui-background-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-2-pressed
|
|
564
|
-
--tui-background-accent-pale: var(--tui-const-blue-alpha-
|
|
565
|
-
--tui-background-accent-pale-pressed: var(--tui-const-blue-alpha-
|
|
565
|
+
--tui-background-accent-pale: var(--tui-const-blue-alpha-16); // @Deprecated: Заменён на компонентный токен
|
|
566
|
+
--tui-background-accent-pale-pressed: var(--tui-const-blue-alpha-24); // @Deprecated: Заменён на компонентный токен
|
|
566
567
|
--tui-background-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
|
|
567
568
|
--tui-background-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
|
|
568
569
|
--tui-background-brand-tinkoff: var(--tui-const-yellow); // @Deprecated: Переехал в отдельную группу brand
|
|
@@ -576,9 +577,9 @@
|
|
|
576
577
|
--tui-background-accent-2: var(--tui-const-blue); // Фоны акцентных кнопок, бейджей и т.д.
|
|
577
578
|
--tui-background-accent-2-hover: var(--tui-const-blue-darker-52); // Только для веба. Фоны акцентных кнопок, бейджей и т.д. при нажатии
|
|
578
579
|
--tui-background-accent-2-pressed: var(--tui-const-blue-darker-46); // Фоны акцентных кнопок, бейджей и т.д.
|
|
579
|
-
--tui-background-accent-opposite: var(--tui-const-
|
|
580
|
-
--tui-background-accent-opposite-hover: var(--tui-const-cool-gray-lighter-
|
|
581
|
-
--tui-background-accent-opposite-pressed: var(--tui-const-cool-gray-lighter-
|
|
580
|
+
--tui-background-accent-opposite: var(--tui-const-white); // Фон, противоположный base: в белой теме — черный, в темной теме — белый
|
|
581
|
+
--tui-background-accent-opposite-hover: var(--tui-const-cool-gray-lighter-97); // Только для веба. Фон, противоположный base при наведении: в белой теме — черный, в темной теме — белый
|
|
582
|
+
--tui-background-accent-opposite-pressed: var(--tui-const-cool-gray-lighter-93); // Фон, противоположный base при нажатии: в белой теме — черный, в темной теме — белый
|
|
582
583
|
--tui-background-accent-on-light: var(--tui-const-black); // Контрастные контейнеры на светлых фонах, не меняется при смене темы
|
|
583
584
|
--tui-background-accent-on-light-hover: var(--tui-const-black-lighter-16); // Контрастные контейнеры при наведении на светлых фонах, не меняется при смене темы.
|
|
584
585
|
--tui-background-accent-on-light-pressed: var(--tui-const-black-lighter-22); // Контрастные контейнеры при нажатии на светлых фонах, не меняется при смене темы.
|
|
@@ -588,14 +589,14 @@
|
|
|
588
589
|
--tui-background-button-close-on-light: var(--tui-const-black-alpha-40); // Фон кнопки закрытия на светлом фоне. не меняется при переключении темы. бывший цвет neutral-3-on-light. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
589
590
|
--tui-background-button-close-on-dark: var(--tui-const-white-alpha-50); // @Deprecated: Заменен на overlay-glass-on-dark
|
|
590
591
|
--tui-background-badge-notification: var(--tui-const-red); // Контейнеры нотификационных бейджей. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
591
|
-
--tui-background-toggle: var(--tui-const-
|
|
592
|
-
--tui-background-button-vertical: var(--tui-const-blue-alpha-
|
|
593
|
-
--tui-background-button-vertical-hover: var(--tui-const-blue-alpha-
|
|
594
|
-
--tui-background-button-vertical-pressed: var(--tui-const-blue-alpha-
|
|
592
|
+
--tui-background-toggle: var(--tui-const-white-alpha-20); // @Deprecated: Заменен на background.neutral-2
|
|
593
|
+
--tui-background-button-vertical: var(--tui-const-blue-alpha-16); // Фон tui-button [vertical]. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
594
|
+
--tui-background-button-vertical-hover: var(--tui-const-blue-alpha-20); // Фон tui-button [vertical]. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
595
|
+
--tui-background-button-vertical-pressed: var(--tui-const-blue-alpha-24); // Фон tui-button [vertical] при нажатии и наведении. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
595
596
|
--tui-background-button-glass-on-dark: var(--tui-const-white-alpha-30); // @Deprecated: Заменен на overlay-glass-on-dark
|
|
596
597
|
--tui-background-button-glass-on-light: var(--tui-const-black-alpha-40); // @Deprecated: Заменен на overlay-glass-on-light
|
|
597
|
-
--tui-background-progress-bar: var(--tui-const-
|
|
598
|
-
--tui-background-tooltip: var(--tui-const-
|
|
598
|
+
--tui-background-progress-bar: var(--tui-const-white-alpha-15); // Пустая полоска прогресс-баров. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
599
|
+
--tui-background-tooltip: var(--tui-const-white); // Фон для тултипов
|
|
599
600
|
--tui-background-thumbnail-card-badge: var(--tui-const-black-alpha-12); // Прозрачный контейнер бейджа на миниатюре карты. Временный компонентный токен, существует пока не зарелизятся токены 2.0.
|
|
600
601
|
--tui-background-overlay-glass-on-dark: var(--tui-const-white-alpha-30); // Оверлей стеклянных поверхностей на темных фонах, не меняется при смене темы.
|
|
601
602
|
--tui-background-overlay-glass-on-dark-hover: var(--tui-const-white-alpha-40); // Оверлей стеклянных поверхностей при наведении на темных фонах, не меняется при смене темы.
|
|
@@ -603,16 +604,17 @@
|
|
|
603
604
|
--tui-background-overlay-glass-on-light: var(--tui-const-black-alpha-40); // Оверлей стеклянных поверхностей на cветлых фонах, не меняется при смене темы
|
|
604
605
|
--tui-background-overlay-glass-on-light-pressed: var(--tui-const-black-alpha-60); // Оверлей стеклянных поверхностей при нажатии на cветлых фонах, не меняется при смене темы.
|
|
605
606
|
--tui-background-overlay-glass-on-light-hover: var(--tui-const-black-alpha-48); // Оверлей стеклянных поверхностей при наведении на cветлых фонах, не меняется при смене темы.
|
|
606
|
-
--tui-
|
|
607
|
-
--tui-border-normal
|
|
608
|
-
--tui-border-
|
|
609
|
-
--tui-border-
|
|
610
|
-
--tui-border-normal-opaque
|
|
611
|
-
--tui-border-normal-
|
|
612
|
-
--tui-border-
|
|
607
|
+
--tui-background-overlay-glass-matte: var(--tui-const-black-lighter-13-alpha-80); // Оверлей матовых стеклянных поверхностей, не меняется при смене темы.
|
|
608
|
+
--tui-border-normal: var(--tui-const-white-alpha-15); // Бордеры и сепараторы на основных фонах
|
|
609
|
+
--tui-border-normal-pale: var(--tui-const-white-alpha-9); // Бледные бордеры и сепараторы на основных фонах
|
|
610
|
+
--tui-border-hover: var(--tui-const-white-alpha-20); // Только для веба. Бордеры при наведении
|
|
611
|
+
--tui-border-normal-opaque: var(--tui-const-black-lighter-25); // Бордеры и сепараторы на основных фонах без прозрачности
|
|
612
|
+
--tui-border-normal-opaque-hover: var(--tui-const-black-lighter-30); // Бордеры и сепараторы на основных фонах без прозрачности
|
|
613
|
+
--tui-border-normal-pale-opaque: var(--tui-const-black-lighter-20); // Бледные непрозрачные бордеры и сепараторы на основных фонах
|
|
614
|
+
--tui-border-focus: var(--tui-const-white); // Только для веба. Бордеры при фокусировании с клавиатуры
|
|
613
615
|
--tui-border-focus-on-dark: var(--tui-const-white-alpha-30); // Только для веба. Бордеры при фокусировании с клавиатуры темных элементов
|
|
614
616
|
--tui-border-selected: var(--tui-const-yellow); // Обводка выделенных элементов
|
|
615
|
-
--tui-border-darkmode-only: var(--tui-const-
|
|
617
|
+
--tui-border-darkmode-only: var(--tui-const-white-alpha-10); // Обводка, отделяющая цветные элементы от фона в темной теме
|
|
616
618
|
--tui-border-on-light: var(--tui-const-cool-gray-alpha-12); // Обводка, отделяющая цветные элементы от светлого фонов
|
|
617
619
|
--tui-border-on-dark: var(--tui-const-white-alpha-10); // Обводка, отделяющая цветные элементы от темных фонов
|
|
618
620
|
--tui-brand-t-bank: #FFDD2D; // Фирменный цвет. Используется, например, в бейдже подписки Team
|
|
@@ -683,8 +685,8 @@
|
|
|
683
685
|
--tui-chart-categorical-25: var(--tui-const-green-lighter-64);
|
|
684
686
|
--tui-chart-categorical-26: var(--tui-const-sea-blue-lighter-66);
|
|
685
687
|
--tui-chart-categorical-27: var(--tui-const-green-lighter-57);
|
|
686
|
-
--tui-component-tab-bar-background-ios: #
|
|
687
|
-
--tui-component-input-background-autofill: var(--tui-const-yellow-darker-
|
|
688
|
+
--tui-component-tab-bar-background-ios: #1A1A1DB3; // Цвет фона для имитации системного таббара iOS
|
|
689
|
+
--tui-component-input-background-autofill: var(--tui-const-yellow-darker-26); // @Deprecated: Заменён на service.autofill-background
|
|
688
690
|
--tui-const-yellow: #FFDD2D; // N9
|
|
689
691
|
--tui-const-yellow-darker-88: #FFF5C2;
|
|
690
692
|
--tui-const-yellow-darker-60: #FFCD33; // N9 pressed, hsL=60
|
|
@@ -847,6 +849,7 @@
|
|
|
847
849
|
--tui-const-black-lighter-30: #4D4D4D;
|
|
848
850
|
--tui-const-black-lighter-79: #C9C9C9;
|
|
849
851
|
--tui-const-black-lighter-92: #ECECEC;
|
|
852
|
+
--tui-const-black-lighter-13-alpha-80: #202020CC;
|
|
850
853
|
--tui-const-cool-gray-lighter-36: #575B61;
|
|
851
854
|
--tui-const-cool-gray-lighter-60: #9299A2; // N3
|
|
852
855
|
--tui-const-cool-gray-lighter-79: #C7C9CC; // N4
|
|
@@ -890,8 +893,8 @@
|
|
|
890
893
|
--tui-const-turquoise-darker-40: #0AC2AF; // hsL=40
|
|
891
894
|
--tui-const-turquoise-darker-36: #09AE9E; // hsL=36
|
|
892
895
|
--tui-feed-category-neutral: #90ADBF; // Для ленты операций в МБ
|
|
893
|
-
--tui-feed-category-neutral-pale: #
|
|
894
|
-
--tui-foreground-neutral-accent: var(--tui-const-
|
|
896
|
+
--tui-feed-category-neutral-pale: #2E3036; // Для ленты операций в МБ
|
|
897
|
+
--tui-foreground-neutral-accent: var(--tui-const-white-alpha-50); // @Deprecated: Перенесен в группу status
|
|
895
898
|
--tui-foreground-positive-accent: var(--tui-const-green); // @Deprecated: Перенесен в группу status
|
|
896
899
|
--tui-foreground-warning-accent: var(--tui-const-yellow-darker-60); // @Deprecated: Перенесен в группу status
|
|
897
900
|
--tui-foreground-negative-accent: var(--tui-const-red); // @Deprecated: Перенесен в группу status
|
|
@@ -899,49 +902,49 @@
|
|
|
899
902
|
--tui-foreground-on-light: var(--tui-const-black); // @Deprecated: Заменен на accent-on-dark
|
|
900
903
|
--tui-foreground-on-dark: var(--tui-const-white); // @Deprecated: Заменен на accent-on-dark
|
|
901
904
|
--tui-foreground-brand-tinkoff-accent: var(--tui-const-yellow); // @Deprecated: Перенесен в отдельную группу
|
|
902
|
-
--tui-foreground-skeleton: var(--tui-const-
|
|
903
|
-
--tui-foreground-separator: var(--tui-const-
|
|
904
|
-
--tui-foreground-border-darkmode: var(--tui-const-
|
|
905
|
+
--tui-foreground-skeleton: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
|
|
906
|
+
--tui-foreground-separator: var(--tui-const-white-alpha-20); // @Deprecated: Перенесен в отдельную группу
|
|
907
|
+
--tui-foreground-border-darkmode: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
|
|
905
908
|
--tui-foreground-border-on-light: var(--tui-const-black-alpha-3); // @Deprecated: Перенесен в отдельную группу
|
|
906
909
|
--tui-foreground-border-on-dark: var(--tui-const-white-alpha-10); // @Deprecated: Перенесен в отдельную группу
|
|
907
|
-
--tui-icon-pressed: var(--tui-const-
|
|
908
|
-
--tui-icon-hover: var(--tui-const-
|
|
909
|
-
--tui-icon-normal: var(--tui-const-
|
|
910
|
-
--tui-icon-action: var(--tui-const-blue-darker-
|
|
911
|
-
--tui-icon-action-hover: var(--tui-const-blue
|
|
912
|
-
--tui-icon-action-pressed: var(--tui-const-blue-darker-
|
|
910
|
+
--tui-icon-pressed: var(--tui-const-white-alpha-90); // @Deprecated: Для иконок используем цвета из группы text
|
|
911
|
+
--tui-icon-hover: var(--tui-const-white-alpha-70); // @Deprecated: Для иконок используем цвета из группы text
|
|
912
|
+
--tui-icon-normal: var(--tui-const-white-alpha-50); // @Deprecated: Для иконок используем цвета из группы text
|
|
913
|
+
--tui-icon-action: var(--tui-const-blue-darker-70); // @Deprecated: Для иконок используем цвета из группы text
|
|
914
|
+
--tui-icon-action-hover: var(--tui-const-blue); // @Deprecated: Для иконок используем цвета из группы text
|
|
915
|
+
--tui-icon-action-pressed: var(--tui-const-blue-darker-52); // @Deprecated: Для иконок используем цвета из группы text
|
|
913
916
|
--tui-icon-on-dark: var(--tui-const-white); // @Deprecated: Для иконок используем цвета из группы text
|
|
914
|
-
--tui-service-autofill-background: var(--tui-const-yellow-darker-
|
|
915
|
-
--tui-service-skeleton: var(--tui-const-
|
|
917
|
+
--tui-service-autofill-background: var(--tui-const-yellow-darker-26); // Цвет фона при автозаполнении форм
|
|
918
|
+
--tui-service-skeleton: var(--tui-const-white-alpha-10); // Цвет для шиммеров, отображаемых при загрузке экрана
|
|
916
919
|
--tui-service-skeleton-on-dark: var(--tui-const-white-alpha-15); // Скелетон на темном фоне, не меняется при переключении темы
|
|
917
920
|
--tui-service-selected-text: var(--tui-const-blue-alpha-24); // @Deprecated: Заменён на service.selection-background
|
|
918
921
|
--tui-service-selection-background: var(--tui-const-blue-alpha-24); // Фон при выделении текста и изображений
|
|
919
922
|
--tui-service-backdrop: var(--tui-const-black-alpha-70); // Затемнение на фоне модальных окон и шторок
|
|
920
923
|
--tui-service-underline: var(--tui-const-blue-alpha-64); // Подчеркивание для ссылок
|
|
921
|
-
--tui-service-underline-monochrome: var(--tui-const-
|
|
924
|
+
--tui-service-underline-monochrome: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок
|
|
922
925
|
--tui-service-underline-on-dark: var(--tui-const-white-alpha-50); // Подчеркивание для монохромных ссылок на темном фоне. Не меняется при смене темы
|
|
923
|
-
--tui-status-warning-pale: var(--tui-const-yellow-
|
|
924
|
-
--tui-status-warning-pale-hover: var(--tui-const-yellow-
|
|
925
|
-
--tui-status-warning-pale-pressed: var(--tui-const-yellow-
|
|
926
|
-
--tui-status-positive-pale: var(--tui-const-green-
|
|
927
|
-
--tui-status-positive-pale-hover: var(--tui-const-green-
|
|
928
|
-
--tui-status-positive-pale-pressed: var(--tui-const-green-
|
|
926
|
+
--tui-status-warning-pale: var(--tui-const-yellow-darker-26); // Контейнеры предупреждающих блоков
|
|
927
|
+
--tui-status-warning-pale-hover: var(--tui-const-yellow-darker-32); // Только для веба. Контейнеры предупреждающих блоков при наведении
|
|
928
|
+
--tui-status-warning-pale-pressed: var(--tui-const-yellow-darker-32); // Нажатое состояние контейнера предупреждающих блоков
|
|
929
|
+
--tui-status-positive-pale: var(--tui-const-green-darker-18); // Контейнеры позитивных блоков
|
|
930
|
+
--tui-status-positive-pale-hover: var(--tui-const-green-darker-21); // Только для веба. Контейнеры позитивных блоков при наведении
|
|
931
|
+
--tui-status-positive-pale-pressed: var(--tui-const-green-darker-21); // Нажатое состояние positive в iOS
|
|
929
932
|
--tui-status-positive-pale-on-dark: var(--tui-const-green-alpha-32); // Контейнеры позитивных блоков на тёмных фонах, не меняются от темы
|
|
930
933
|
--tui-status-positive-pale-on-dark-hover: var(--tui-const-green-alpha-38); // Только для веба. Контейнеры позитивных блоков на тёмных фонах при наведении
|
|
931
934
|
--tui-status-positive-pale-on-dark-pressed: var(--tui-const-green-alpha-44); // Нажатое состояние positive-on-dark
|
|
932
|
-
--tui-status-negative-pale: var(--tui-const-red-
|
|
933
|
-
--tui-status-negative-pale-hover: var(--tui-const-red-
|
|
934
|
-
--tui-status-negative-pale-pressed: var(--tui-const-red-
|
|
935
|
+
--tui-status-negative-pale: var(--tui-const-red-darker-23); // Контейнеры негативных блоков
|
|
936
|
+
--tui-status-negative-pale-hover: var(--tui-const-red-darker-29); // Только для веба. Контейнеры негативных блоков при наведении
|
|
937
|
+
--tui-status-negative-pale-pressed: var(--tui-const-red-darker-29); // Нажатое состояние negative в iOS
|
|
935
938
|
--tui-status-negative-pale-on-dark: var(--tui-const-red-alpha-32); // Контейнеры негативных блоков на тёмных фонах
|
|
936
939
|
--tui-status-negative-pale-on-dark-hover: var(--tui-const-red-alpha-38); // Только для веба. Контейнеры негативных блоков на тёмных фонах при наведении
|
|
937
940
|
--tui-status-negative-pale-on-dark-pressed: var(--tui-const-red-alpha-44); // Нажатое состояние negative-pale-on-dark
|
|
938
|
-
--tui-status-info-pale: var(--tui-const-blue-
|
|
939
|
-
--tui-status-info-pale-hover: var(--tui-const-blue-
|
|
940
|
-
--tui-status-info-pale-pressed: var(--tui-const-blue-
|
|
941
|
-
--tui-status-neutral: var(--tui-const-cool-gray-lighter-
|
|
942
|
-
--tui-status-neutral-pale: var(--tui-const-
|
|
943
|
-
--tui-status-neutral-pale-hover: var(--tui-const-
|
|
944
|
-
--tui-status-neutral-pale-pressed: var(--tui-const-
|
|
941
|
+
--tui-status-info-pale: var(--tui-const-blue-darker-25); // Контейнеры информационных блоков
|
|
942
|
+
--tui-status-info-pale-hover: var(--tui-const-blue-darker-32); // Только для веба. Контейнеры информационных блоков при наведении
|
|
943
|
+
--tui-status-info-pale-pressed: var(--tui-const-blue-darker-32); // Контейнеры информационных блоков при нажатии
|
|
944
|
+
--tui-status-neutral: var(--tui-const-cool-gray-lighter-61); // Акцентный цвет для нейтральных фонах
|
|
945
|
+
--tui-status-neutral-pale: var(--tui-const-white-alpha-15); // Фоновый контейнер нейтральных статусных блоков
|
|
946
|
+
--tui-status-neutral-pale-hover: var(--tui-const-white-alpha-25); // Фоновый контейнер нейтральных статусных блоков при наведении
|
|
947
|
+
--tui-status-neutral-pale-pressed: var(--tui-const-white-alpha-30); // Фоновый контейнер нейтральных статусных блоков при нажатии
|
|
945
948
|
--tui-status-positive: var(--tui-const-green); // Акцентный цвет для позитивных блоков
|
|
946
949
|
--tui-status-warning: var(--tui-const-yellow-darker-60); // Акцентный цвет для предупреждающих блоков
|
|
947
950
|
--tui-status-negative: var(--tui-const-red); // Акцентный цвет для негативных блоков
|
|
@@ -968,44 +971,39 @@
|
|
|
968
971
|
--tui-support-support-20: #36C578; // @Deprecated: Замена на семантические цвета
|
|
969
972
|
--tui-support-support-21: #1DACA4; // @Deprecated: Замена на семантические цвета
|
|
970
973
|
--tui-support-support-22: #F14789; // @Deprecated: Замена на семантические цвета
|
|
971
|
-
--tui-text-primary: var(--tui-const-
|
|
972
|
-
--tui-text-primary-hover: var(--tui-const-
|
|
973
|
-
--tui-text-primary-pressed: var(--tui-const-
|
|
974
|
+
--tui-text-primary: var(--tui-const-white-alpha-90); // Основной текст и иконки фонах base, elevation, neutral
|
|
975
|
+
--tui-text-primary-hover: var(--tui-const-white-alpha-50); // Основной текст и иконки фонах base, elevation, neutral при наведении
|
|
976
|
+
--tui-text-primary-pressed: var(--tui-const-white-alpha-50); // Основной текст и иконки фонах base, elevation, neutral при нажатии
|
|
974
977
|
--tui-text-primary-on-light: var(--tui-const-black-alpha-80); // Основной текст и иконки светлых фонах, не меняется при смене темы
|
|
975
978
|
--tui-text-primary-on-dark: var(--tui-const-white); // Основной текст и иконки темных фонах. Не меняется при смене темы
|
|
976
979
|
--tui-text-primary-on-t-bank: var(--tui-const-black-lighter-20); // Текст и иконки на фонах t-bank
|
|
977
|
-
--tui-text-primary-on-opposite: var(--tui-const-
|
|
980
|
+
--tui-text-primary-on-opposite: var(--tui-const-black); // Текст и иконки фоне opposite
|
|
978
981
|
--tui-text-primary-on-accent-1: var(--tui-const-black-lighter-20); // Текст и иконки фоне accent-1
|
|
979
982
|
--tui-text-primary-on-accent-2: var(--tui-const-white); // Текст и иконки фоне accent-2
|
|
980
|
-
--tui-text-secondary: var(--tui-const-
|
|
981
|
-
--tui-text-secondary-hover: var(--tui-const-
|
|
982
|
-
--tui-text-secondary-pressed: var(--tui-const-
|
|
983
|
+
--tui-text-secondary: var(--tui-const-white-alpha-70); // Второстепенный текст на фонах base, elevation, neutral
|
|
984
|
+
--tui-text-secondary-hover: var(--tui-const-white-alpha-80); // Второстепенный текст на фонах base, elevation, neutral при наведении
|
|
985
|
+
--tui-text-secondary-pressed: var(--tui-const-white-alpha-96); // Второстепенный текст на фонах base, elevation, neutral при нажатии
|
|
983
986
|
--tui-text-secondary-on-light: var(--tui-const-black-alpha-48); // Второстепенный текст на светлых фонах, не меняется при смене темы
|
|
984
987
|
--tui-text-secondary-on-dark: var(--tui-const-white-alpha-70); // Второстепенный текст на темных фонах, не меняется при смене темы
|
|
985
|
-
--tui-text-tertiary: var(--tui-const-
|
|
986
|
-
--tui-text-tertiary-hover: var(--tui-const-
|
|
987
|
-
--tui-text-tertiary-pressed: var(--tui-const-
|
|
988
|
+
--tui-text-tertiary: var(--tui-const-white-alpha-50); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры
|
|
989
|
+
--tui-text-tertiary-hover: var(--tui-const-white-alpha-70); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры при наведении
|
|
990
|
+
--tui-text-tertiary-pressed: var(--tui-const-white-alpha-80); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры при нажатии
|
|
988
991
|
--tui-text-tertiary-on-light: var(--tui-const-black-alpha-40); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
|
|
989
992
|
--tui-text-tertiary-on-dark: var(--tui-const-white-alpha-50); // Лейблы задизейбленных кнопок, плейсхолдер в текстовых полях, дисклеймеры на светлых фонах, не меняется при смене темы
|
|
990
|
-
--tui-text-action: var(--tui-const-blue
|
|
991
|
-
--tui-text-action-hover: var(--tui-const-blue-darker-
|
|
993
|
+
--tui-text-action: var(--tui-const-blue); // Текст и иконки интерактивного текста на фонах base, elevation и neutral. Заменяет цвет engaging и accent
|
|
994
|
+
--tui-text-action-hover: var(--tui-const-blue-darker-52); // Только для веба. Состояние текста при наведении
|
|
992
995
|
--tui-text-action-pressed: var(--tui-const-blue-darker-40); // Нажатое состояние интерактивного текста. Заменяет цвет engaging-pressed и accent-pressed
|
|
993
996
|
--tui-text-accent: var(--tui-const-blue); // @Deprecated: Заменён на цвет action
|
|
994
997
|
--tui-text-accent-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет action-pressed
|
|
995
998
|
--tui-text-engaging: var(--tui-const-blue); // @Deprecated: Заменён на цвет accent
|
|
996
999
|
--tui-text-engaging-pressed: var(--tui-const-blue-darker-46); // @Deprecated: Заменён на цвет accent-pressed
|
|
997
|
-
--tui-text-positive: var(--tui-const-green-
|
|
998
|
-
--tui-text-positive-hover: var(--tui-const-green
|
|
1000
|
+
--tui-text-positive: var(--tui-const-green-lighter-44); // Текст позитивного лейбла, например пополнение счета или рост цены акций
|
|
1001
|
+
--tui-text-positive-hover: var(--tui-const-green); // Только для веба. Текст позитивного лейбла при нажатии
|
|
999
1002
|
--tui-text-positive-on-dark: var(--tui-const-green-lighter-44); // Текст позитивного лейбла на тёмном фоне, например пополнение счета или рост цены акций
|
|
1000
|
-
--tui-text-negative: var(--tui-const-red); // Текст негативного лейбла, например падение цены акций или ошибка
|
|
1001
|
-
--tui-text-negative-hover: var(--tui-const-red
|
|
1003
|
+
--tui-text-negative: var(--tui-const-red-lighter-62); // Текст негативного лейбла, например падение цены акций или ошибка
|
|
1004
|
+
--tui-text-negative-hover: var(--tui-const-red); // Только для веба. Текст негативного лейбла при наведении на вебе
|
|
1002
1005
|
--tui-text-negative-on-dark: var(--tui-const-red-lighter-70); // Текст негативного лейбла на тёмном фоне, например падение цены акций или ошибка
|
|
1003
|
-
--tui-text-warning: var(--tui-const-yellow-darker-
|
|
1004
|
-
--tui-text-warning-hover: var(--tui-const-yellow-darker-
|
|
1006
|
+
--tui-text-warning: var(--tui-const-yellow-darker-54); // Предупреждающие текст и иконки
|
|
1007
|
+
--tui-text-warning-hover: var(--tui-const-yellow-darker-38); // Предупреждающие текст и иконки при наведении на вебе
|
|
1005
1008
|
--tui-text-primary-on-tinkoff: var(--tui-const-black-lighter-20); // @Deprecated: Заменён на цвет primary-on-t-bank
|
|
1006
|
-
--tui-shadow-small: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); // Тень для мелких элементов интерфейса, например Chips
|
|
1007
|
-
--tui-shadow-small-hover: 0px 14px 42px 0px rgba(0, 0, 0, 0.14);
|
|
1008
|
-
--tui-shadow-medium: 0px 6px 34px 0px rgba(0, 0, 0, 0.12); // Тень для карточек и других больших объектов, например тултипов
|
|
1009
|
-
--tui-shadow-medium-hover: 0px 18px 60px 0px rgba(0, 0, 0, 0.18);
|
|
1010
|
-
--tui-shadow-popup: 0px 20px 50px 0px rgba(0, 0, 0, 0.2); // Тень для карточек, всплывающих поверх контента: например попап-онбординг
|
|
1011
1009
|
}
|