feat: initial design system v1.0.0 (tokens, mixins, guide)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-02 10:18:16 +05:00
commit 7623425d97
6 changed files with 467 additions and 0 deletions
@@ -0,0 +1,80 @@
+# Промпт-шаблон: переверстка веб-части под дизайн-систему @tansu/design-system
+
+Открой новый чат с Claude в папке нужного проекта. Приложи:
+1. `tansu_v5_executive_premium.html` — визуальный эталон компонентов.
+2. Код веб-части (`.tsx` и `.module.scss`).
+
+Токены **не прикладывай** — они уже в проекте как пакет
+`@tansu/design-system`. Затем вставь промпт ниже (замени `[…]`).
+
+---
+
+```
+Ты — senior SPFx-разработчик. Перевёрстай стили веб-части под общую дизайн-систему.
+
+## Дизайн-система (уже установлена как пакет)
+Стили берём ТОЛЬКО из @tansu/design-system. В каждом .module.scss:
+  @import '~@tansu/design-system/styles/tokens';
+Доступны: $navy-*, $gold-*, $gray-*, семантические цвета, $font-serif/$font-sans,
+$fs-*, $r-*, $sh-*, $grad-*, $sp-1…$sp-8 и миксины:
+page-header, card-hover-gold, btn-accent, input-focus-gold, hairline.
+
+## Референс (приложен)
+tansu_v5_executive_premium.html — эталонный вид всех компонентов.
+ВНИМАНИЕ: тёмная верхняя навигация с табами в мокапе — ТОЛЬКО для просмотра,
+НЕ часть дизайна. Не добавляй её в веб-часть (навигацию даёт сам SharePoint).
+Веб-часть начинается с хлебных крошек и шапки (.ph).
+
+## Контекст проекта
+- SPFx 1.22.1, сборка на Heft (команда запуска: `heft start`, НЕ gulp).
+- React 17, TypeScript strict, SCSS Modules.
+- Это веб-часть [НАЗВАНИЕ].
+
+## Задача
+1. В каждом .module.scss добавь @import '~@tansu/design-system/styles/tokens'.
+2. Замени ВСЕ хардкод-цвета на переменные из токенов (сырой hex запрещён).
+3. Приведи компоненты к эталону из HTML:
+   - Шапка экрана → @include page-header + заголовок $font-serif.
+   - Кнопки → 5 уровней (Primary navy / Accent gold / Secondary / Ghost / Danger),
+     не больше одной Accent на экран.
+   - Инпуты → @include input-focus-gold.
+   - Карточки → @include card-hover-gold.
+   - Таблицы → uppercase-заголовки, hover строки $gold-50.
+   - Бейджи → со статус-точкой.
+4. Иконки — @fluentui/react-icons, стиль Regular (outline).
+5. Формат всех дат: дд.мм.гггг.
+
+## Стиль кода (обязательно)
+- React Function Components + hooks, без классов.
+- interface Props явно; логика отделена от JSX; ранние return.
+- Один компонент — один файл. Запросы к SharePoint — только в services/.
+- Явно обрабатывай loading / error / empty.
+
+## Ограничения
+- НЕ меняй бизнес-логику, props, state, обработчики, запросы к SharePoint.
+- НЕ переименовывай CSS-классы, на которые ссылается .tsx, без правки .tsx.
+- Выводи полные файлы целиком, а не фрагменты.
+
+## Код веб-части
+[приложены файлы]
+```
+
+---
+
+## Порядок работы
+- **Одна веб-часть (или один экран) = одна сессия.** Не грузи весь проект сразу.
+- После сессии: `heft start` → workbench → скриншот → при расхождении попроси
+  сравнить скриншот с нужной вкладкой HTML-референса и поправить.
+
+## Чек-лист соответствия V5 (по каждой веб-части)
+- [ ] НЕТ тёмной верхней навигации из мокапа
+- [ ] Шапка: navy-градиент, золотая линия снизу, заголовок Lora
+- [ ] Хлебные крошки с золотым разделителем
+- [ ] Кнопки: не больше одной Accent на экран
+- [ ] Инпуты: золотой focus-ring
+- [ ] Таблицы: uppercase-заголовки, золотой hover
+- [ ] Карточки: подъём на 2px + золотая рамка при hover
+- [ ] Бейджи со статус-точкой
+- [ ] Даты: дд.мм.гггг
+- [ ] Иконки: Fluent UI Regular (outline)
+- [ ] Нет сырого hex — только переменные токенов