@taiga-ui/design-tokens 0.294.0 → 0.295.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/angular/desktop.less +84 -0
  2. package/angular/mobile.less +84 -0
  3. package/package.json +1 -1
  4. package/palette/dark.css +42 -0
  5. package/palette/light.css +42 -0
  6. package/palette/mobile/dark.css +42 -0
  7. package/palette/mobile/light.css +42 -0
  8. package/palette/scss/dark.scss +42 -0
  9. package/palette/scss/light.scss +42 -0
  10. package/palette/scss/mobile/dark.scss +42 -0
  11. package/palette/scss/mobile/light.scss +42 -0
package/palette/scss/mobile/dark.scss CHANGED
@@ -156,6 +156,28 @@
156
156
  --tui-brand-t-premium: var(--tui-brand-premium); /* @Deprecated: Заменён на premium */
157
157
  --tui-brand-t-pro: var(--tui-brand-pro); /* @Deprecated: Заменён на pro */
158
158
  --tui-brand-t-private: var(--tui-brand-private); /* @Deprecated: Заменён на private */
159
+ --tui-chart-state-positive-accent: var(--tui-const-green-lighter-42); /* Основной цвет графиков с позитивным контекстом */
160
+ --tui-chart-state-positive-pale: var(--tui-const-green-lighter-42-alpha-25); /* Цвет графиков с позитивным контекстом когда данных недостаточно */
161
+ --tui-chart-state-positive-prognosis: var(--tui-const-green-lighter-42-alpha-50); /* Цвет графиков с позитивным контекстом для прогноза */
162
+ --tui-chart-state-negative-accent: var(--tui-const-red-lighter-65); /* Основной цвет графиков с негативным контекстом */
163
+ --tui-chart-state-negative-pale: var(--tui-const-red-lighter-65-alpha-25); /* Цвет графиков с негативным контекстом когда данных недостаточно */
164
+ --tui-chart-state-negative-prognosis: var(--tui-const-red-lighter-65-alpha-50); /* Цвет графиков с негативным контекстом для прогноза */
165
+ --tui-chart-state-warning-accent: var(--tui-const-yellow-darker-54); /* Основной цвет графиков с негативным контекстом */
166
+ --tui-chart-state-warning-pale: var(--tui-const-yellow-darker-54-alpha-25); /* Цвет графиков с негативным контекстом когда данных недостаточно */
167
+ --tui-chart-state-warning-prognosis: var(--tui-const-yellow-darker-54-alpha-50); /* Цвет графиков с негативным контекстом для прогноза */
168
+ --tui-chart-series-primary-accent: var(--tui-const-blue-darker-70); /* Основной акцентный цвет для графиков без контекста */
169
+ --tui-chart-series-primary-accent-pale: var(--tui-const-blue-darker-70-alpha-25); /* Основной акцентный цвет для графиков без контекста когда данных недостаточно */
170
+ --tui-chart-series-primary-accent-prognosis: var(--tui-const-blue-darker-70-alpha-50); /* Основной акцентный цвет для графиков без контекста для прогноза */
171
+ --tui-chart-series-additional1-accent: var(--tui-const-turquoise-darker-40); /* Первый дополнительный акцентный цвет для графиков без контекста */
172
+ --tui-chart-series-additional1-accent-pale: var(--tui-const-turquoise-darker-40-alpha-25); /* Первый дополнительный акцентный цвет для графиков без контекста когда данных недостаточно */
173
+ --tui-chart-series-additional1-accent-prognosis: var(--tui-const-turquoise-darker-40-alpha-50); /* Первый дополнительный акцентный цвет для графиков без контекста для прогноза */
174
+ --tui-chart-series-additional2-accent: #B078FF; /* Второй дополнительный акцентный цвет для графиков без контекста */
175
+ --tui-chart-series-additional2-accent-pale: #B078FF40; /* Второй дополнительный акцентный цвет для графиков без контекста когда данных недостаточно */
176
+ --tui-chart-series-additional2-accent-prognosis: #B078FF80; /* Второй дополнительный акцентный цвет для графиков без контекста для прогноза */
177
+ --tui-chart-gray-primary: var(--tui-const-cool-gray-lighter-97); /* Основной серый цвет для графиков без контекста */
178
+ --tui-chart-gray-no-data: var(--tui-const-cool-gray-lighter-60); /* Cерый цвет для графиков без контекста когда нет данных */
179
+ --tui-chart-gray-prognosis: var(--tui-const-cool-gray-lighter-36); /* Cерый цвет для графиков без контекста для прогноза */
180
+ --tui-chart-gray-inactive: var(--tui-const-cool-gray-lighter-18); /* Cерый цвет для графиков без контекста для прогноза */
159
181
  --tui-chart-categorical-01: var(--tui-const-sea-blue);
160
182
  --tui-chart-categorical-02: var(--tui-const-purple-darker-72);
161
183
  --tui-chart-categorical-03: var(--tui-const-coral-darker-60);
@@ -204,6 +226,8 @@
204
226
  --tui-const-yellow-darker-20: #503C18; /* hsL=20 */
205
227
  --tui-const-yellow-darker-54-alpha-30: #FAB6194D; /* hsL=54, 30% opacity */
206
228
  --tui-const-yellow-darker-54-alpha-40: #FAB61966; /* hsL=54, 40% opacity */
229
+ --tui-const-yellow-darker-54-alpha-25: #F5970040; /* hsL=54, 25% opacity */
230
+ --tui-const-yellow-darker-54-alpha-50: #F5970080; /* hsL=54, 50% opacity */
207
231
  --tui-const-yellow-alpha-14: #FFDD2D24; /* 14% opacity */
208
232
  --tui-const-yellow-alpha-24: #FFDD2D3D; /* 24% opacity */
209
233
  --tui-const-yellow-alpha-28: #FFDD2D47; /* 28% opacity */
@@ -223,11 +247,15 @@
223
247
  --tui-const-green-darker-18: #144823;
224
248
  --tui-const-green-alpha-16: #00B92D29; /* 16% opacity */
225
249
  --tui-const-green-alpha-24: #00B92D3D; /* 24% opacity */
250
+ --tui-const-green-alpha-25: #00B92D40; /* 25% opacity */
226
251
  --tui-const-green-alpha-32: #00B92D52; /* 32% opacity */
227
252
  --tui-const-green-alpha-38: #00B92D61; /* 38% opacity */
228
253
  --tui-const-green-alpha-44: #00B92D70; /* 44% opacity */
254
+ --tui-const-green-alpha-50: #00B92D80; /* 50% opacity */
255
+ --tui-const-green-lighter-42-alpha-25: #00D63540; /* hsL=42, 25% opacity */
229
256
  --tui-const-green-lighter-42-alpha-30: #00D6354D; /* hsL=42, 30% opacity */
230
257
  --tui-const-green-lighter-42-alpha-40: #00D63566; /* hsL=42, 40% opacity */
258
+ --tui-const-green-lighter-42-alpha-50: #00D63580; /* hsL=42, 50% opacity */
231
259
  --tui-const-blue: #428BF9; /* N8 */
232
260
  --tui-const-blue-lighter-70: #6BA4FA; /* @Deprecated: Заменён на цвет blue-darker-70 */
233
261
  --tui-const-blue-darker-79: #97BFFC; /* hsL=79 */
@@ -244,14 +272,18 @@
244
272
  --tui-const-blue-darker-25: #263B5C; /* hsL=25 */
245
273
  --tui-const-blue-darker-70-alpha-30: #66A3FF4D; /* hsL=70, 30% opacity */
246
274
  --tui-const-blue-darker-70-alpha-40: #66A3FF66; /* hsL=70, 40% opacity */
275
+ --tui-const-blue-darker-70-alpha-25: #66A3FF40; /* hsL=70, 25% opacity */
276
+ --tui-const-blue-darker-70-alpha-50: #66A3FF80; /* hsL=70, 50% opacity */
247
277
  --tui-const-blue-alpha-8: #428BF914; /* 8% opacity */
248
278
  --tui-const-blue-alpha-12: #428BF91F; /* 12% opacity */
249
279
  --tui-const-blue-alpha-16: #428BF929; /* 16% opacity */
250
280
  --tui-const-blue-alpha-20: #428BF933; /* 16% opacity */
251
281
  --tui-const-blue-alpha-24: #428BF93D; /* 24% opacity */
282
+ --tui-const-blue-alpha-25: #428BF940; /* 25% opacity */
252
283
  --tui-const-blue-alpha-32: #428BF952; /* 32% opacity */
253
284
  --tui-const-blue-alpha-38: #428BF961; /* 38% opacity */
254
285
  --tui-const-blue-alpha-44: #428BF970; /* 44% opacity */
286
+ --tui-const-blue-alpha-50: #428BF980; /* 50% opacity */
255
287
  --tui-const-blue-alpha-64: #428BF9A3; /* 64% opacity */
256
288
  --tui-const-dark-blue-alpha-6: #244A7F0F; /* 6% opacity */
257
289
  --tui-const-dark-blue-alpha-8: #244A7F14; /* 8% opacity */
@@ -261,9 +293,11 @@
261
293
  --tui-const-dark-blue-alpha-12: #244A7F1F; /* 12% opacity */
262
294
  --tui-const-red-alpha-14: #F5222224; /* 12% opacity */
263
295
  --tui-const-red-alpha-24: #F522223D; /* 24% opacity */
296
+ --tui-const-red-alpha-25: #F5222240; /* 25% opacity */
264
297
  --tui-const-red-alpha-32: #F5222252; /* 32% opacity */
265
298
  --tui-const-red-alpha-38: #F5222261; /* 38% opacity */
266
299
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
300
+ --tui-const-red-alpha-50: #F5222280; /* 50% opacity */
267
301
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
268
302
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
269
303
  --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
@@ -278,6 +312,8 @@
278
312
  --tui-const-red-dim-27: #5D2C2D; /* hsL=27 */
279
313
  --tui-const-red-lighter-65-alpha-30: #FF4D4D4D; /* hsL=65, 30% opacity */
280
314
  --tui-const-red-lighter-65-alpha-40: #FF4D4D66; /* hsL=65, 40% opacity */
315
+ --tui-const-red-lighter-65-alpha-25: #F5222240; /* hsL=65, 25% opacity */
316
+ --tui-const-red-lighter-65-alpha-50: #F5222280; /* hsL=65, 50% opacity */
281
317
  --tui-const-white: #FFFFFF; /* N14 */
282
318
  --tui-const-white-96: #FFFFFFF2; /* @Deprecated: Заменён на цвет white-alpha-96 */
283
319
  --tui-const-white-90: #FFFFFFE6; /* @Deprecated: Заменён на цвет white-alpha-90 */
@@ -421,6 +457,8 @@
421
457
  --tui-const-orange: #FFB74C;
422
458
  --tui-const-orange-darker-56: #FFA51F; /* hsL=56 */
423
459
  --tui-const-orange-darker-48: #F59200; /* hsL=48 */
460
+ --tui-const-orange-darker-48-alpha-25: #F5920040; /* hsL=48, 25% opacity */
461
+ --tui-const-orange-darker-48-alpha-50: #F5920080; /* hsL=48, 50% opacity */
424
462
  --tui-const-coral: #FF6347;
425
463
  --tui-const-coral-darker-60: #F5593D; /* hsL=60 */
426
464
  --tui-const-coral-darker-52: #E74023; /* hsL=52 */
@@ -431,7 +469,11 @@
431
469
  --tui-const-sea-blue-lighter-66: #5ACAF6;
432
470
  --tui-const-turquoise: #0BD5C1;
433
471
  --tui-const-turquoise-darker-40: #0AC2AF; /* hsL=40 */
472
+ --tui-const-turquoise-darker-40-alpha-25: #0AC2AF40; /* hsL=40, 25% opacity */
473
+ --tui-const-turquoise-darker-40-alpha-50: #0AC2AF40; /* hsL=40, 50% opacity */
434
474
  --tui-const-turquoise-darker-36: #09AE9E; /* hsL=36 */
475
+ --tui-const-turquoise-darker-36-alpha-25: #09AE9E40; /* hsL=36, 25% opacity */
476
+ --tui-const-turquoise-darker-36-alpha-50: #09AE9E80; /* hsL=36, 50% opacity */
435
477
  --tui-feed-category-neutral: #90ADBF; /* Для ленты операций в МБ */
436
478
  --tui-feed-category-neutral-pale: #2E3036; /* Для ленты операций в МБ */
437
479
  --tui-foreground-neutral-accent: var(--tui-const-white-alpha-50); /* @Deprecated: Перенесен в группу status */
package/palette/scss/mobile/light.scss CHANGED
@@ -156,6 +156,28 @@
156
156
  --tui-brand-t-premium: var(--tui-brand-premium); /* @Deprecated: Заменён на premium */
157
157
  --tui-brand-t-pro: var(--tui-brand-pro); /* @Deprecated: Заменён на pro */
158
158
  --tui-brand-t-private: var(--tui-brand-private); /* @Deprecated: Заменён на private */
159
+ --tui-chart-state-positive-accent: var(--tui-const-green); /* Основной цвет графиков с позитивным контекстом */
160
+ --tui-chart-state-positive-pale: var(--tui-const-green-alpha-25); /* Цвет графиков с позитивным контекстом когда данных недостаточно */
161
+ --tui-chart-state-positive-prognosis: var(--tui-const-green-alpha-50); /* Цвет графиков с позитивным контекстом для прогноза */
162
+ --tui-chart-state-negative-accent: var(--tui-const-red); /* Основной цвет графиков с негативным контекстом */
163
+ --tui-chart-state-negative-pale: var(--tui-const-red-alpha-25); /* Цвет графиков с негативным контекстом когда данных недостаточно */
164
+ --tui-chart-state-negative-prognosis: var(--tui-const-red-alpha-50); /* Цвет графиков с негативным контекстом для прогноза */
165
+ --tui-chart-state-warning-accent: var(--tui-const-orange-darker-48); /* Основной цвет графиков с негативным контекстом */
166
+ --tui-chart-state-warning-pale: var(--tui-const-orange-darker-48-alpha-25); /* Цвет графиков с негативным контекстом когда данных недостаточно */
167
+ --tui-chart-state-warning-prognosis: var(--tui-const-orange-darker-48-alpha-50); /* Цвет графиков с негативным контекстом для прогноза */
168
+ --tui-chart-series-primary-accent: var(--tui-const-blue); /* Основной акцентный цвет для графиков без контекста */
169
+ --tui-chart-series-primary-accent-pale: var(--tui-const-blue-alpha-25); /* Основной акцентный цвет для графиков без контекста когда данных недостаточно */
170
+ --tui-chart-series-primary-accent-prognosis: var(--tui-const-blue-alpha-50); /* Основной акцентный цвет для графиков без контекста для прогноза */
171
+ --tui-chart-series-additional1-accent: var(--tui-const-turquoise-darker-36); /* Первый дополнительный акцентный цвет для графиков без контекста */
172
+ --tui-chart-series-additional1-accent-pale: var(--tui-const-turquoise-darker-36-alpha-25); /* Первый дополнительный акцентный цвет для графиков без контекста когда данных недостаточно */
173
+ --tui-chart-series-additional1-accent-prognosis: var(--tui-const-turquoise-darker-36-alpha-50); /* Первый дополнительный акцентный цвет для графиков без контекста для прогноза */
174
+ --tui-chart-series-additional2-accent: #986DD4; /* Второй дополнительный акцентный цвет для графиков без контекста */
175
+ --tui-chart-series-additional2-accent-pale: #986DD440; /* Второй дополнительный акцентный цвет для графиков без контекста когда данных недостаточно */
176
+ --tui-chart-series-additional2-accent-prognosis: #986DD480; /* Второй дополнительный акцентный цвет для графиков без контекста для прогноза */
177
+ --tui-chart-gray-primary: var(--tui-const-black-lighter-20); /* Основной серый цвет для графиков без контекста */
178
+ --tui-chart-gray-no-data: var(--tui-const-cool-gray-lighter-60); /* Cерый цвет для графиков без контекста когда нет данных */
179
+ --tui-chart-gray-prognosis: var(--tui-const-cool-gray-lighter-85); /* Cерый цвет для графиков без контекста для прогноза */
180
+ --tui-chart-gray-inactive: var(--tui-const-cool-gray-lighter-93); /* Cерый цвет для графиков без контекста для прогноза */
159
181
  --tui-chart-categorical-01: var(--tui-const-sea-blue);
160
182
  --tui-chart-categorical-02: var(--tui-const-purple-darker-72);
161
183
  --tui-chart-categorical-03: var(--tui-const-coral-darker-60);
@@ -204,6 +226,8 @@
204
226
  --tui-const-yellow-darker-20: #503C18; /* hsL=20 */
205
227
  --tui-const-yellow-darker-54-alpha-30: #FAB6194D; /* hsL=54, 30% opacity */
206
228
  --tui-const-yellow-darker-54-alpha-40: #FAB61966; /* hsL=54, 40% opacity */
229
+ --tui-const-yellow-darker-54-alpha-25: #F5970040; /* hsL=54, 25% opacity */
230
+ --tui-const-yellow-darker-54-alpha-50: #F5970080; /* hsL=54, 50% opacity */
207
231
  --tui-const-yellow-alpha-14: #FFDD2D24; /* 14% opacity */
208
232
  --tui-const-yellow-alpha-24: #FFDD2D3D; /* 24% opacity */
209
233
  --tui-const-yellow-alpha-28: #FFDD2D47; /* 28% opacity */
@@ -223,11 +247,15 @@
223
247
  --tui-const-green-darker-18: #144823;
224
248
  --tui-const-green-alpha-16: #00B92D29; /* 16% opacity */
225
249
  --tui-const-green-alpha-24: #00B92D3D; /* 24% opacity */
250
+ --tui-const-green-alpha-25: #00B92D40; /* 25% opacity */
226
251
  --tui-const-green-alpha-32: #00B92D52; /* 32% opacity */
227
252
  --tui-const-green-alpha-38: #00B92D61; /* 38% opacity */
228
253
  --tui-const-green-alpha-44: #00B92D70; /* 44% opacity */
254
+ --tui-const-green-alpha-50: #00B92D80; /* 50% opacity */
255
+ --tui-const-green-lighter-42-alpha-25: #00D63540; /* hsL=42, 25% opacity */
229
256
  --tui-const-green-lighter-42-alpha-30: #00D6354D; /* hsL=42, 30% opacity */
230
257
  --tui-const-green-lighter-42-alpha-40: #00D63566; /* hsL=42, 40% opacity */
258
+ --tui-const-green-lighter-42-alpha-50: #00D63580; /* hsL=42, 50% opacity */
231
259
  --tui-const-blue: #428BF9; /* N8 */
232
260
  --tui-const-blue-lighter-70: #6BA4FA; /* @Deprecated: Заменён на цвет blue-darker-70 */
233
261
  --tui-const-blue-darker-79: #97BFFC; /* hsL=79 */
@@ -244,14 +272,18 @@
244
272
  --tui-const-blue-darker-25: #263B5C; /* hsL=25 */
245
273
  --tui-const-blue-darker-70-alpha-30: #66A3FF4D; /* hsL=70, 30% opacity */
246
274
  --tui-const-blue-darker-70-alpha-40: #66A3FF66; /* hsL=70, 40% opacity */
275
+ --tui-const-blue-darker-70-alpha-25: #66A3FF40; /* hsL=70, 25% opacity */
276
+ --tui-const-blue-darker-70-alpha-50: #66A3FF80; /* hsL=70, 50% opacity */
247
277
  --tui-const-blue-alpha-8: #428BF914; /* 8% opacity */
248
278
  --tui-const-blue-alpha-12: #428BF91F; /* 12% opacity */
249
279
  --tui-const-blue-alpha-16: #428BF929; /* 16% opacity */
250
280
  --tui-const-blue-alpha-20: #428BF933; /* 16% opacity */
251
281
  --tui-const-blue-alpha-24: #428BF93D; /* 24% opacity */
282
+ --tui-const-blue-alpha-25: #428BF940; /* 25% opacity */
252
283
  --tui-const-blue-alpha-32: #428BF952; /* 32% opacity */
253
284
  --tui-const-blue-alpha-38: #428BF961; /* 38% opacity */
254
285
  --tui-const-blue-alpha-44: #428BF970; /* 44% opacity */
286
+ --tui-const-blue-alpha-50: #428BF980; /* 50% opacity */
255
287
  --tui-const-blue-alpha-64: #428BF9A3; /* 64% opacity */
256
288
  --tui-const-dark-blue-alpha-6: #244A7F0F; /* 6% opacity */
257
289
  --tui-const-dark-blue-alpha-8: #244A7F14; /* 8% opacity */
@@ -261,9 +293,11 @@
261
293
  --tui-const-dark-blue-alpha-12: #244A7F1F; /* 12% opacity */
262
294
  --tui-const-red-alpha-14: #F5222224; /* 12% opacity */
263
295
  --tui-const-red-alpha-24: #F522223D; /* 24% opacity */
296
+ --tui-const-red-alpha-25: #F5222240; /* 25% opacity */
264
297
  --tui-const-red-alpha-32: #F5222252; /* 32% opacity */
265
298
  --tui-const-red-alpha-38: #F5222261; /* 38% opacity */
266
299
  --tui-const-red-alpha-44: #F5222270; /* 44% opacity */
300
+ --tui-const-red-alpha-50: #F5222280; /* 50% opacity */
267
301
  --tui-const-red-lighter-62: #F74646; /* hsL=62 */
268
302
  --tui-const-red-lighter-65: #FF4D4D; /* hsL=65 */
269
303
  --tui-const-red-lighter-68: #FF5C5C; /* hsL=68 */
@@ -278,6 +312,8 @@
278
312
  --tui-const-red-dim-27: #5D2C2D; /* hsL=27 */
279
313
  --tui-const-red-lighter-65-alpha-30: #FF4D4D4D; /* hsL=65, 30% opacity */
280
314
  --tui-const-red-lighter-65-alpha-40: #FF4D4D66; /* hsL=65, 40% opacity */
315
+ --tui-const-red-lighter-65-alpha-25: #F5222240; /* hsL=65, 25% opacity */
316
+ --tui-const-red-lighter-65-alpha-50: #F5222280; /* hsL=65, 50% opacity */
281
317
  --tui-const-white: #FFFFFF; /* N14 */
282
318
  --tui-const-white-96: #FFFFFFF2; /* @Deprecated: Заменён на цвет white-alpha-96 */
283
319
  --tui-const-white-90: #FFFFFFE6; /* @Deprecated: Заменён на цвет white-alpha-90 */
@@ -421,6 +457,8 @@
421
457
  --tui-const-orange: #FFB74C;
422
458
  --tui-const-orange-darker-56: #FFA51F; /* hsL=56 */
423
459
  --tui-const-orange-darker-48: #F59200; /* hsL=48 */
460
+ --tui-const-orange-darker-48-alpha-25: #F5920040; /* hsL=48, 25% opacity */
461
+ --tui-const-orange-darker-48-alpha-50: #F5920080; /* hsL=48, 50% opacity */
424
462
  --tui-const-coral: #FF6347;
425
463
  --tui-const-coral-darker-60: #F5593D; /* hsL=60 */
426
464
  --tui-const-coral-darker-52: #E74023; /* hsL=52 */
@@ -431,7 +469,11 @@
431
469
  --tui-const-sea-blue-lighter-66: #5ACAF6;
432
470
  --tui-const-turquoise: #0BD5C1;
433
471
  --tui-const-turquoise-darker-40: #0AC2AF; /* hsL=40 */
472
+ --tui-const-turquoise-darker-40-alpha-25: #0AC2AF40; /* hsL=40, 25% opacity */
473
+ --tui-const-turquoise-darker-40-alpha-50: #0AC2AF40; /* hsL=40, 50% opacity */
434
474
  --tui-const-turquoise-darker-36: #09AE9E; /* hsL=36 */
475
+ --tui-const-turquoise-darker-36-alpha-25: #09AE9E40; /* hsL=36, 25% opacity */
476
+ --tui-const-turquoise-darker-36-alpha-50: #09AE9E80; /* hsL=36, 50% opacity */
435
477
  --tui-feed-category-neutral: #90ADBF; /* Для ленты операций в МБ */
436
478
  --tui-feed-category-neutral-pale: #E5ECF4; /* Для ленты операций в МБ */
437
479
  --tui-foreground-neutral-accent: var(--tui-const-cool-gray-alpha-44); /* @Deprecated: Перенесен в группу status */