# HDESIGN CODE

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

## Источник цветов
- Основной runtime-конфиг цветов: [design.config.json](/Users/dcconstructions/Downloads/mnt/data/dc_taskmanager/NODEDC_TASKMANAGER/design.config.json)
- Рабочая web-копия: [plane-src/apps/web/design.config.json](/Users/dcconstructions/Downloads/mnt/data/dc_taskmanager/NODEDC_TASKMANAGER/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
```tsx
<Button className="nodedc-external-primary-button">...</Button>
```

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

```tsx
<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>
```

```tsx
<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>
```

```tsx
<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-компонента.