NODEDC_TASKMANAGER/HDESIGN-CODE.md

HDESIGN CODE

Документ фиксирует канон интерфейса NODE.DC, чтобы не обсуждать одни и те же правила повторно.

Источник цветов

• Основной runtime-конфиг цветов: design.config.json
• Рабочая web-копия: plane-src/apps/web/design.config.json
• В рантайме используются CSS variables:
  • --nodedc-accent-rgb
  • --nodedc-card-passive-rgb
  • --nodedc-card-active-rgb

Цветовые правила

• accent_rgb: акцентный цвет интерфейса.
• passive_card_rgb: пассивные карточки.
• active_card_rgb: активные карточки и primary CTA в зелёной теме.
• Primary/active элементы используют акцентный или active_card_rgb.
• Secondary элементы не должны иметь ярких outline и цветных рамок без явной причины.

Радиусы

• Главные модалки и большие surface-контейнеры: 1.75rem
• Стандартные glass-карточки и settings-карточки: 1.35rem
• Поля ввода, селекты, secondary/primary кнопки, chip-кнопки: 1.25rem
• Малые круглые action-кнопки: 999px или полный круг при квадратной коробке

Outline и рамки

• Внешние outline у контролов запрещены.
• Синий browser outline должен быть снят и заменён на нормальный hover/focus surface.
• Если нужен контур, он должен быть частью дизайна:
  • мягкий glass border
  • акцентный border для drag/drop или active-state
• Красные технические outline, debug-рамки и случайные browser-box shadow запрещены.

Glass и фон

• Popup, dropdown, modal, sidebar overlays и settings-карточки используют matte black glass.
• База:
  • тёмный полупрозрачный фон
  • backdrop-filter: blur(...)
  • мягкая стеклянная граница
• Popup не должны выглядеть просто прозрачными. Если blur не читается, проблема в слое рендера, а не в одном rgba.

Кнопки

• Все кнопки без жёсткого outline.
• Primary button:
  • фон: акцентный или active_card_rgb
  • текст: всегда чёрный или очень тёмный, если фон светлый
  • hover: более светлая версия того же цвета
  • правило распространяется на все filled CTA:
    • Добавить
    • Сохранить
    • Обновить
    • Принять
    • Добавить запрос
    • любые акцентные toolbar-кнопки
• Save/update button:
  • если это зафиксированный green CTA, текст должен быть контрастным и читаемым
  • hover осветляет текущий тон, а не уходит в синий
• Secondary button:
  • тёмный glass фон
  • без border-outline
  • hover немного светлее базового surface
• Danger button:
  • без кислотно-красных рамок
  • мягкий danger surface

Поля и селекты

• Все поля ввода, textarea, select, chip-select:
  • скруглённые
  • без внешних outline
  • glass background
  • единая вертикальная высота для одного класса контролов
• Placeholder и label должны быть читаемы и не прилипать к краям.

Toolbar и верхние панели

• Элементы верхней панели центрируются по одной горизонтальной оси.
• Активный layout/tool mode выделяется кругом акцентного цвета, не квадратной плашкой.
• Кнопки Отображение, Аналитика, Добавить рабочий элемент:
  • одинаковая высота
  • каноничные радиусы
  • нормальные горизонтальные paddings, чтобы текст не лип к краям

Карточки

• Внутренние карточки строятся по симметричным верхним и нижним padding.
• Верхняя ось:
  • аватар
  • имя
  • вторичная строка
  • action-circle справа должны сидеть на согласованной геометрии
• Нижняя ось:
  • assignee bubbles
  • дата должны быть симметричны верхней

Dropdown и popup

• Все dropdown/popup приводятся к единому matte glass канону.
• Запрещены:
  • квадратные active-box вокруг круглых кнопок
  • жёсткие border-outline
  • светлый фон, если основной экран тёмный
• Search shell внутри popup должен использовать тот же стиль, что и сам popup.

Reusable классы

• Accent CTA:
  • .nodedc-external-primary-button
  • текст внутри всегда #0b1117
• Secondary action:
  • .nodedc-external-action-button
• Secondary icon action:
  • .nodedc-external-icon-button
• Readonly property/control surface:
  • .nodedc-external-readonly-value
  • .nodedc-modal-field
• External property rows:
  • .nodedc-external-property-row
  • .nodedc-external-property-label
  • .nodedc-external-property-value
  • .nodedc-external-property-control
• Dropdown shell:
  • .nodedc-dropdown-surface
  • .nodedc-dropdown-search
  • .nodedc-dropdown-option
• External contour card/shell:
  • .nodedc-external-card
  • .nodedc-external-section
  • .nodedc-external-content-shell

Anchor snippets

<Button className="nodedc-external-primary-button">...</Button>

<IconButton className="nodedc-external-icon-button" ... />

<div className="nodedc-external-readonly-value">
  <SomeIcon className="h-3.5 w-3.5 text-tertiary" />
  <span className="text-12 font-medium text-primary">...</span>
</div>

<div className="nodedc-external-property-row">
  <div className="nodedc-external-property-label">
    <SomeIcon className="h-4 w-4 flex-shrink-0" />
    <span>Label</span>
  </div>
  <div className="nodedc-external-property-value">
    <SomeValue />
  </div>
</div>

<Dropdown
  button={
    <div className="nodedc-external-property-control text-[13px] font-medium">
      <SomeIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
      <span className="text-primary">Value</span>
    </div>
  }
/>

Drag and drop

• Drag overlay использует акцентный контур.
• Delete dropzone:
  • без красного технического свечения
  • текст локализован
  • акцентный outline допустим

Тексты

• Пользовательский UI на русском, если экран русифицирован.
• Не оставлять смешанные подписи вида Created at / Updated at / Label / State group, если экран уже на русском.

Правило внедрения

• Новый экран или popup не стилизуется локально “на глаз”.
• Сначала используется существующий shared-класс или shared-component.
• Если shared-слоя нет, создаётся reusable-класс/компонент и уже через него приводятся все похожие места.
• Цель: не точечная покраска одного окна, а единый системный канон.
• Если блок визуально расходится со стилем системы, не добавлять поверх временную wrapper-заплатку. Нужно либо перевести блок на shared-компонент, либо переверстать локальную структуру под shared-классы.
• Для экранов со вкладками/переключателями нельзя оставлять flash старой верстки. Перед refetch нужно очищать stale store-data и показывать loading shell.
• Если карточки или списки разных модулей должны быть одинаковыми по канону, нельзя лечить это внешней обёрткой. Нужно менять сам внутренний layout item-компонента.