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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*.log
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,147 @@
+# @tansu/design-system
+
+Общая дизайн-система для всех SPFx-проектов Tansu (V5 Executive Premium).
+Один источник правды для цветов, шрифтов, теней и паттернов. Меняешь здесь —
+обновляется во всех проектах.
+
+---
+
+## Что внутри
+
+| Файл | Что | Когда подключать |
+|------|-----|------------------|
+| `styles/_tokens.scss` | `$переменные` + `@mixin` (компайл-тайм, без CSS-вывода) | в **каждом** `.module.scss` |
+| `styles/global.scss` | рантайм CSS-переменные `:root{--navy-900…}` | **один раз** на веб-часть (по необходимости) |
+| `prompt-template.md` | промпт для генерации/переверстки веб-части по дизайну | при работе с Claude |
+
+---
+
+## Установка в проекте
+
+В `package.json` проекта добавь зависимость (пин по тегу — стабильность):
+
+```json
+"dependencies": {
+  "@tansu/design-system": "git+https://git.tnsu.kz/timur.gorodetskiy/design-system.git#v1.0.0"
+}
+```
+
+Затем:
+
+```bash
+npm install
+```
+
+> **Авторизация.** Репозиторий приватный. Чтобы `npm install` смог его скачать,
+> на машине должен быть доступ к Gitea — проще всего настроить **SSH-ключ**
+> (Gitea → Settings → SSH Keys) и использовать ssh-URL:
+> `git+ssh://git@git.tnsu.kz/timur.gorodetskiy/design-system.git#v1.0.0`.
+
+---
+
+## Использование в SCSS
+
+В любом `.module.scss`:
+
+```scss
+@import '~@tansu/design-system/styles/tokens';
+
+.card {
+  background: $navy-900;
+  border-radius: $r-md;
+  box-shadow: $sh-1;
+  @include card-hover-gold;
+}
+
+.publishButton {
+  @include btn-accent;
+  border-radius: $r-sm;
+}
+```
+
+`~` — это ссылка на `node_modules` (так работает sass-загрузчик SPFx).
+
+### Правила (важно для поддерживаемости)
+
+1. **Только переменные и миксины.** Сырой hex (`#D4A01E`, `#0F2440`) в компонентах — запрещён.
+2. **Заголовки** — `$font-serif` (Lora), **остальной текст** — `$font-sans` (Inter).
+3. **Отступы** — из шкалы `$sp-1…$sp-8`, не произвольные числа.
+4. Повторяющийся паттерн (шапка, карточка, кнопка) — бери **миксин**, не копируй правила.
+
+---
+
+## Рантайм-переменные (опционально)
+
+Нужны, только если читаешь цвет в рантайме (инлайн-стиль, динамическая тема).
+Подключи `global.scss` **один раз** — в корневом компоненте веб-части:
+
+```scss
+// PortalMainPage.module.scss (корневой)
+@import '~@tansu/design-system/styles/global';
+```
+
+```tsx
+<span style={{ color: 'var(--gold-500)' }}>...</span>
+```
+
+Для обычной вёрстки это не нужно — хватает `_tokens.scss`.
+
+---
+
+## Шрифты
+
+Подключи Inter + Lora один раз в `onInit()` веб-части:
+
+```ts
+import { SPComponentLoader } from '@microsoft/sp-loader';
+
+protected onInit(): Promise<void> {
+  SPComponentLoader.loadCss(
+    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap'
+  );
+  return super.onInit();
+}
+```
+
+> Для корпоративной сети лучше **самохостить** шрифты (офлайн, скорость,
+> без внешней зависимости). Это план на будущее.
+
+---
+
+## Как менять дизайн (workflow)
+
+1. Правишь `styles/_tokens.scss` (например, `$gold-500`).
+2. Коммит + новый тег:
+   ```bash
+   git commit -am "feat: deeper gold accent"
+   git tag v1.1.0 && git push --tags
+   ```
+3. В проектах поднимаешь тег в `package.json` (`#v1.1.0`) → `npm install`.
+4. Пересобираешь и деплоишь проект (в SPFx стили впекаются в бандл — это неизбежно).
+
+**SemVer:** правка цвета/значения — minor (`v1.1.0`); удаление/переименование
+переменной (ломает проекты) — major (`v2.0.0`).
+
+---
+
+## Дальше: слои дизайн-системы
+
+- **Слой 1 — токены** (этот пакет) ✅
+- **Слой 2 — миксины** (этот пакет) ✅
+- **Слой 3 — React-компоненты** (`<Button>`, `<Badge>`, `<PageHeader>`) — следующий шаг.
+  Потребует сборки пакета (TS→JS) и перехода на npm-реестр Gitea (см. ниже).
+
+## Переход на npm-реестр Gitea (когда появится слой 3)
+
+`publishConfig` в `package.json` уже указывает на реестр Gitea. Тогда:
+
+```
+# .npmrc в проекте
+@tansu:registry=https://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/
+```
+
+```json
+"@tansu/design-system": "^1.0.0"
+```
+
+Публикация: `npm publish`. Обновление в проектах: `npm update @tansu/design-system`.

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@tansu/design-system",
+  "version": "1.0.0",
+  "description": "Tansu Construction — общая дизайн-система (V5 Executive Premium): SCSS-токены, миксины, гайд и промпт-шаблон для всех SPFx-проектов.",
+  "private": false,
+  "license": "UNLICENSED",
+  "sass": "styles/_tokens.scss",
+  "files": [
+    "styles",
+    "README.md",
+    "prompt-template.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://git.tnsu.kz/timur.gorodetskiy/design-system.git"
+  },
+  "publishConfig": {
+    "registry": "https://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/"
+  }
+}

prompt-template.md

@@ -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 — только переменные токенов

styles/_tokens.scss

@@ -0,0 +1,158 @@
+// ============================================
+// @tansu/design-system — Design Tokens
+// Дизайн-система V5: Executive Premium
+//
+// ТОЛЬКО объявления: $переменные, @mixin. Ноль CSS-вывода.
+// Поэтому файл безопасно импортировать в ЛЮБОЙ .module.scss
+// сколько угодно раз — дублей в бандле не будет:
+//
+//   @import '~@tansu/design-system/styles/tokens';
+//   .card { background: $navy-900; @include card-hover-gold; }
+//
+// Правило: в вёрстке используем ТОЛЬКО эти переменные/миксины,
+// сырой hex (#D4A01E и т.п.) в компонентах — запрещён.
+// ============================================
+
+// ---- Navy (Primary) ----
+$navy-950: #0A1B30;
+$navy-900: #0F2440;
+$navy-800: #1B3A5C;
+$navy-700: #244B73;
+$navy-600: #2D5C8A;
+$navy-100: #E8EEF4;
+$navy-50:  #F4F7FA;
+
+// ---- Gold (Accent) ----
+$gold-600: #B8881A;
+$gold-500: #D4A01E;
+$gold-400: #E5B635;
+$gold-300: #F0CC5E;
+$gold-100: #FDF5E0;
+$gold-50:  #FEFBF0;
+
+// ---- Gray (Neutral) ----
+$gray-900: #111827;
+$gray-700: #374151;
+$gray-500: #6B7280;
+$gray-400: #9CA3AF;
+$gray-300: #D1D5DB;
+$gray-200: #E5E7EB;
+$gray-100: #F3F4F6;
+$gray-50:  #F9FAFB;
+
+// ---- Semantic ----
+$red-500:   #DC2626;
+$red-50:    #FEF2F2;
+$green-600: #15803D;
+$green-50:  #F0FDF4;
+$blue-600:  #2563EB;
+$blue-50:   #EFF6FF;
+$amber-700: #854D0E;
+
+// ---- Typography ----
+// Заголовки страниц и секций — Lora (serif). Весь остальной текст — Inter (sans).
+// Подключение самих шрифтов — см. README (SPComponentLoader.loadCss в onInit).
+$font-serif: 'Lora', Georgia, serif;
+$font-sans:  'Inter', -apple-system, 'Segoe UI', sans-serif;
+
+$fs-page-title:    24px; // Lora 600
+$fs-form-title:    22px; // Lora 600
+$fs-section-title: 15px; // Lora 600
+$fs-body:          14px; // Inter 400
+$fs-sm:            13px;
+$fs-label:         12px; // Inter 500
+$fs-caption:       11px;
+$fs-overline:      10.5px; // uppercase, letter-spacing 1.4-1.8px
+
+// ---- Radius ----
+$r-sm:   6px;
+$r-md:   10px;
+$r-lg:   14px;
+$r-full: 100px;
+
+// ---- Shadows ----
+$sh-1:     0 1px 2px rgba(15, 36, 64, .04), 0 1px 3px rgba(15, 36, 64, .06);
+$sh-2:     0 4px 16px rgba(15, 36, 64, .07);
+$sh-3:     0 12px 32px rgba(15, 36, 64, .10);
+$sh-gold:  0 4px 20px rgba(212, 160, 30, .18);
+$sh-modal: 0 24px 70px rgba(10, 27, 48, .25);
+
+// ---- Gradients (фирменные) ----
+$grad-header:   linear-gradient(135deg, $navy-950 0%, $navy-800 85%);
+$grad-gold:     linear-gradient(135deg, $gold-400, $gold-500);
+$grad-gold-v:   linear-gradient(180deg, $gold-400, $gold-600);
+$grad-hairline: linear-gradient(90deg, $gold-400, transparent 70%);
+
+// ---- Spacing ----
+$sp-1: 4px;
+$sp-2: 8px;
+$sp-3: 12px;
+$sp-4: 16px;
+$sp-5: 20px;
+$sp-6: 24px;
+$sp-7: 28px;
+$sp-8: 32px;
+
+// ============================================
+// Миксины — повторяющиеся паттерны из эталона.
+// Используй их вместо копирования правил в каждый компонент.
+// ============================================
+
+// Шапка экрана: navy-градиент + золотая линия снизу.
+@mixin page-header {
+  background: $grad-header;
+  border-radius: $r-lg;
+  padding: 26px 30px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: linear-gradient(90deg, $gold-500, transparent 60%);
+  }
+}
+
+// Карточка: подъём + тень + золотая рамка при наведении.
+@mixin card-hover-gold {
+  transition: .22s;
+
+  &:hover {
+    box-shadow: $sh-3;
+    transform: translateY(-2px);
+    border-color: $gold-300;
+  }
+}
+
+// Акцентная кнопка (золотой градиент).
+@mixin btn-accent {
+  background: $grad-gold;
+  color: $navy-950;
+  font-weight: 600;
+  border: 1px solid $gold-500;
+
+  &:hover {
+    box-shadow: $sh-gold;
+    transform: translateY(-1px);
+  }
+}
+
+// Золотое фокус-кольцо для инпутов/селектов.
+@mixin input-focus-gold {
+  &:focus {
+    outline: 0;
+    border-color: $gold-500;
+    box-shadow: 0 0 0 3px rgba(212, 160, 30, .12);
+  }
+}
+
+// Тонкий золотой разделитель (hairline).
+@mixin hairline {
+  height: 1px;
+  background: $grad-hairline;
+  border: 0;
+}

styles/global.scss

@@ -0,0 +1,58 @@
+// ============================================
+// @tansu/design-system — Runtime CSS Variables
+//
+// Этот файл ПРОИЗВОДИТ CSS (:root{...}), поэтому подключай его
+// РОВНО ОДИН РАЗ на веб-часть — в корневом .module.scss компонента:
+//
+//   @import '~@tansu/design-system/styles/global';
+//
+// Нужен только если читаешь переменные в рантайме — например
+// в инлайн-стилях (style={{ color: 'var(--gold-500)' }}) или для
+// динамической темизации. Для обычной SCSS-вёрстки хватает _tokens.scss.
+// ============================================
+
+@import 'tokens';
+
+:root {
+  --navy-950: #{$navy-950};
+  --navy-900: #{$navy-900};
+  --navy-800: #{$navy-800};
+  --navy-700: #{$navy-700};
+  --navy-600: #{$navy-600};
+  --navy-100: #{$navy-100};
+  --navy-50:  #{$navy-50};
+
+  --gold-600: #{$gold-600};
+  --gold-500: #{$gold-500};
+  --gold-400: #{$gold-400};
+  --gold-300: #{$gold-300};
+  --gold-100: #{$gold-100};
+  --gold-50:  #{$gold-50};
+
+  --gray-900: #{$gray-900};
+  --gray-700: #{$gray-700};
+  --gray-500: #{$gray-500};
+  --gray-400: #{$gray-400};
+  --gray-300: #{$gray-300};
+  --gray-200: #{$gray-200};
+  --gray-100: #{$gray-100};
+  --gray-50:  #{$gray-50};
+
+  --red-500:   #{$red-500};
+  --red-50:    #{$red-50};
+  --green-600: #{$green-600};
+  --green-50:  #{$green-50};
+  --blue-600:  #{$blue-600};
+  --blue-50:   #{$blue-50};
+  --amber-700: #{$amber-700};
+
+  --sh-1:     #{$sh-1};
+  --sh-2:     #{$sh-2};
+  --sh-3:     #{$sh-3};
+  --sh-gold:  #{$sh-gold};
+  --sh-modal: #{$sh-modal};
+
+  --r-sm: #{$r-sm};
+  --r-md: #{$r-md};
+  --r-lg: #{$r-lg};
+}