/* ============================================================================ Data Item — site/css/data-item.css ИСТОЧНИК ИСТИНЫ. Figma Components isVYOT7tW0RTaIofg7FAqM, страница «↳ Data Item» (2851:3390), набор Data Item 2851:3477 — пять вариантов. Адреса переставлены 2026-09-18: дизайнер пересобрал страницу, прежние 2528:16904/2528:16964 умерли (первый теперь принадлежит ЧУЖОЙ странице «↳ Collapse», второй не резолвится вовсе). Состав при этом тот же — 5 вариантов, 10 свойств, сверено поле в поле. Геометрия снята обходом Plugin API 2026-08-31 (box-model узлов + boundVariables), цвета — резолвом valuesByMode по всем 4 модам коллекции Theme. Скриншот не участвовал ни в одном числе. ЧТО ЭТО. Подпись и значение: «Комиссия — 1 200,00 ₽», «Статус — Pending». Кирпич карточек и сводок, а не самостоятельный экранный блок. Значение бывает трёх видов (ось Type): просто текст, ссылка, тег. ОСЬ РАЗМЕРОВ — коллекция «❖ Data Item», три мода: переменная Figma MD SM LG Min height 40 36 44 Core/Gap 6 4 8 Core/Value/Gap 6 4 6 Core/Value/Size 16 14 18 Core/Value/Line Height 24 20 24 Core/Icon/Top-Bottom 4 2 4 Core/Icon/Width|Height 16 16 20 Core/Badge/Top-Bottom 4 2 4 Core/Suffix/Top-Bottom 4 2 6 ВЛОЖЕННЫЕ КОМПОНЕНТЫ БЕРУТ НЕ СВОЙ РАЗМЕР — и это не описка макета, а отдельная таблица соответствия, заданная булевыми переменными коллекции (Core/LinkText/*, Core/Tag/*, Core/Badge/*). Прочитано по ним, не по именам: размер Data Item LinkText Tag Badge MD md sm sm SM sm sm sm LG lg md md То есть у MD тег и бейдж берут SM, а у LG — MD. Совпадение имён здесь обмануло бы: переменная «Core/Tag/MD» включена в моде LG, а не MD — она называет РАЗМЕР ТЕГА, а не размер хозяина. НОВЫХ ТОКЕНОВ НЕ ЗАВЕДЕНО НИ ОДНОГО. Все четыре цвета уже были и совпали с макетом по всем 4 темам, 16 ячеек из 16: Static/Text/Neutral-Blue/Secondary = --ds-text-secondary · Text/Neutral-Blue/Ghost/Default = --ds-text-neutral-ghost · Static/Icon/Neutral-Blue/Tertiary = --ds-icon-tertiary · Text/Disable/Neutral (Blue) = --ds-disabled-text. Это тождество по всем модам, а не совпадение в светлой. ВЛОЖЕННОЕ КОМПОЗИРУЕТСЯ, НЕ РИСУЕТСЯ ЗАНОВО. Ссылка, тег и бейдж — существующие компоненты ДС со своими решёнными инверт-осями и состояниями; здесь для них только слот с вертикальным отступом. Inline-копия внесла бы десинки заново — ровно на этом уже обожглись меню (badge/checkbox были inline и дали invert-баги, 2026-06-16). ЧЕГО ЗДЕСЬ НЕТ. Состояний у самого Data Item в макете нет: ни наведения, ни фокуса, ни ошибки. Состояния несут вложенные — у ссылки они свои, у тега свои. Если строка целиком должна реагировать на курсор, это делает контейнер (строка таблицы, карточка), а не этот компонент. ГРАНИЦА ЗАМЕРА, названная вслух. Переменная Min height привязана к корню только у ТРЁХ вариантов из пяти (оба Link и Tag); у двух Type=Text корень стоит HUG/HUG без привязки высоты вовсе. Здесь min-height задан ВСЕМ пяти: переменная названа «Min height», ряд у неё полный (40/36/44), и высота 40 у Text-вариантов на канве и так совпадает с ней. Но это приведение к общему правилу, а не замер — у двух вариантов привязки нет, и если она отсутствует намеренно, правило надо снять. ============================================================================ */ .ds-data-item { /* MD — мод MD коллекции «❖ Data Item» */ --_di-min-h: calc(var(--ds-comp-unit) * 10); /* 40 */ --_di-gap: calc(var(--ds-comp-unit) * 1.5); /* 6 · Core/Gap */ --_di-val-gap: calc(var(--ds-comp-unit) * 1.5); /* 6 · Core/Value/Gap */ --_di-val-fs: var(--ds-text-md); /* 16 · Core/Value/Size */ --_di-val-lh: calc(var(--ds-comp-unit) * 6); /* 24 · Core/Value/Line Height */ --_di-icon: calc(var(--ds-comp-unit) * 4); /* 16 · Core/Icon/Width|Height */ --_di-icon-pad: var(--ds-comp-unit); /* 4 · Core/Icon/Top-Bottom */ --_di-badge-pad: var(--ds-comp-unit); /* 4 · Core/Badge/Top-Bottom */ --_di-suffix-pad: var(--ds-comp-unit); /* 4 · Core/Suffix/Top-Bottom */ display: flex; flex-direction: column; align-items: flex-start; min-height: var(--_di-min-h); min-width: 0; /* иначе длинное значение распирает колонку таблицы наружу */ } .ds-data-item[data-size='sm'] { --_di-min-h: calc(var(--ds-comp-unit) * 9); /* 36 */ --_di-gap: var(--ds-comp-unit); /* 4 */ --_di-val-gap: var(--ds-comp-unit); /* 4 */ --_di-val-fs: var(--ds-text-base); /* 14 */ --_di-val-lh: calc(var(--ds-comp-unit) * 5); /* 20 */ --_di-icon: calc(var(--ds-comp-unit) * 4); /* 16 */ --_di-icon-pad: calc(var(--ds-comp-unit) * 0.5); /* 2 */ --_di-badge-pad: calc(var(--ds-comp-unit) * 0.5); /* 2 */ --_di-suffix-pad: calc(var(--ds-comp-unit) * 0.5); /* 2 */ } .ds-data-item[data-size='lg'] { --_di-min-h: calc(var(--ds-comp-unit) * 11); /* 44 */ --_di-gap: calc(var(--ds-comp-unit) * 2); /* 8 */ --_di-val-gap: calc(var(--ds-comp-unit) * 1.5); /* 6 */ --_di-val-fs: var(--ds-text-lg); /* 18 */ --_di-val-lh: calc(var(--ds-comp-unit) * 6); /* 24 */ --_di-icon: calc(var(--ds-comp-unit) * 5); /* 20 */ --_di-icon-pad: var(--ds-comp-unit); /* 4 */ --_di-badge-pad: var(--ds-comp-unit); /* 4 */ --_di-suffix-pad: calc(var(--ds-comp-unit) * 1.5); /* 6 */ } /* Ось Label Bottom. Порядок меняется ТОЛЬКО визуально: в разметке подпись всегда идёт первой, и скринридер читает её перед значением при обоих положениях. В макете вместо этого переставлены сами дети — результат тот же, но там нет порядка чтения. */ .ds-data-item[data-label-bottom] { flex-direction: column-reverse; } /* ── Подпись ─────────────────────────────────────────────────────────────── */ .ds-data-item-label { display: flex; align-items: center; gap: var(--ds-comp-unit); /* 4 — постоянная, ряд Label/Gap = 4 во всех трёх модах */ min-width: 0; max-width: 100%; } .ds-data-item-label-text { font-family: inherit; font-size: var(--ds-text-xs); /* 12 · Caption */ line-height: calc(var(--ds-comp-unit) * 4); /* 16 · Caption */ font-weight: 400; /* Figma Inter Regular */ color: var(--ds-text-secondary); /* Static/Text/Neutral-Blue/Secondary */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Иконка помощи. Размер 16 постоянный — на канве он привязан к примитиву icon/Size/size-200, а не к оси размеров Data Item, то есть с размером не растёт. */ .ds-data-item-help { width: calc(var(--ds-comp-unit) * 4); /* 16 */ height: calc(var(--ds-comp-unit) * 4); flex: 0 0 auto; stroke: var(--ds-icon-tertiary); /* Static/Icon/Neutral-Blue/Tertiary */ stroke-width: calc(var(--ds-comp-unit) * 0.375); /* 1.5 · icon/Stroke/stroke-18,75 */ fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ── Значение ────────────────────────────────────────────────────────────── */ .ds-data-item-core { display: flex; align-items: center; gap: var(--_di-gap); min-width: 0; max-width: 100%; } .ds-data-item-value-wrap { display: flex; align-items: baseline; /* суффикс мельче значения и садится по базовой линии */ gap: var(--_di-val-gap); min-width: 0; } .ds-data-item-value { font-family: inherit; font-size: var(--_di-val-fs); line-height: var(--_di-val-lh); font-weight: 500; /* Figma Inter Medium */ color: var(--ds-text-neutral-ghost); /* Text/Neutral-Blue/Ghost/Default */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Суммы читают колонкой и сравнивают по разрядам — цифры обязаны быть моноширинными, иначе «1 200,00» и «9 999,99» встают вразнобой. Свойство не трогает буквы. */ font-variant-numeric: tabular-nums; } .ds-data-item-suffix { display: inline-flex; align-items: center; padding-top: var(--_di-suffix-pad); padding-bottom: var(--_di-suffix-pad); font-size: var(--ds-text-xs); /* 12 · Caption */ line-height: calc(var(--ds-comp-unit) * 4); /* 16 */ font-weight: 400; color: var(--ds-disabled-text); /* Text/Disable/Neutral (Blue) */ white-space: nowrap; flex: 0 0 auto; } /* Иконка у значения. Вертикальный отступ, а не выравнивание: в макете это рамка с padding сверху и снизу, и высота ряда держится ею. */ .ds-data-item-icon { display: inline-flex; align-items: center; padding-top: var(--_di-icon-pad); padding-bottom: var(--_di-icon-pad); flex: 0 0 auto; } .ds-data-item-icon > svg { width: var(--_di-icon); height: var(--_di-icon); stroke: var(--ds-icon-tertiary); stroke-width: calc(var(--ds-comp-unit) * 0.375); /* 1.5 */ fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Слот под вложенный компонент — бейдж. Здесь ТОЛЬКО вертикальный отступ рамки Badge из макета; сам бейдж рисует себя сам, своим CSS и своими токенами. */ .ds-data-item-slot { display: inline-flex; align-items: center; padding-top: var(--_di-badge-pad); padding-bottom: var(--_di-badge-pad); flex: 0 0 auto; }