adata-ui 2.1.40 → 2.1.41-beta.1

package/-error.vue

@@ -137,11 +137,11 @@ function handleError() {
               :key="item.id"
               class="flex items-center gap-1 text-sm	font-medium"
             >
-              <a-icon-check class="stroke-blue-600" />
+              <a-icon-check class="stroke-icon-brand" />
               {{ item.label }}
               <span
                 v-if="item.link"
-                class="text-blue-700"
+                class="text-brand-600"
               >info@adata.kz</span>
             </div>
           </div>

package/.playground/app.vue

@@ -4,10 +4,10 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 p-10 dark:bg-gray-950">
+  <div class="min-h-screen bg-main p-10">
     <div class="mx-auto flex max-w-3xl flex-col gap-10">
       <div class="flex items-center justify-between">
-        <h1 class="text-xl font-bold text-deepblue-900 dark:text-gray-100">
+        <h1 class="text-xl font-bold text-primary">
           ATooltipV2
         </h1>
         <a-color-mode />
@@ -22,11 +22,11 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
           arrow
           :open-delay="80"
         >
-          <button class="rounded-lg bg-blue-700 px-3 py-2 text-sm text-white dark:bg-blue-500 dark:text-gray-900">
+          <button class="rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary-fg">
             {{ p }}
           </button>
           <template #content>
-            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+            <div class="text-[11px] text-primary">
               Placement <b>{{ p }}</b>
             </div>
           </template>
@@ -41,14 +41,14 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
           arrow
           content-class="w-56"
         >
-          <button class="rounded-lg px-3 py-2 text-sm text-deepblue-900 ring-1 ring-gray-200 dark:text-gray-100 dark:ring-gray-700">
+          <button class="rounded-lg px-3 py-2 text-sm text-primary ring-1 ring-(--border-color-default)">
             Click me
           </button>
           <template #content="{ close }">
-            <div class="flex flex-col gap-2 text-[11px] text-deepblue-900 dark:text-gray-100">
+            <div class="flex flex-col gap-2 text-[11px] text-primary">
               <p>Interactive — outside-click &amp; Esc close.</p>
               <button
-                class="self-start text-blue-700 dark:text-blue-400"
+                class="self-start text-brand"
                 @click="close"
               >
                 Close
@@ -61,7 +61,7 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
       <!-- Manual via v-model:open -->
       <section class="flex items-center gap-4">
         <button
-          class="rounded-lg bg-deepblue-900 px-3 py-2 text-sm text-white dark:bg-gray-100 dark:text-gray-900"
+          class="rounded-lg bg-secondary-500 px-3 py-2 text-sm text-white"
           @click="manualOpen = !manualOpen"
         >
           Toggle manual ({{ manualOpen }})
@@ -72,9 +72,9 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
           placement="right"
           arrow
         >
-          <span class="text-sm text-gray-500 dark:text-gray-400">anchor</span>
+          <span class="text-sm text-secondary">anchor</span>
           <template #content>
-            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+            <div class="text-[11px] text-primary">
               Manually controlled
             </div>
           </template>
@@ -82,16 +82,16 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
       </section>
 
       <!-- Teleport out of an overflow-hidden container -->
-      <section class="h-24 overflow-hidden rounded-lg p-3 ring-1 ring-gray-200 dark:ring-gray-700">
+      <section class="h-24 overflow-hidden rounded-lg p-3 ring-1 ring-(--border-color-default)">
         <a-tooltip-v2
           placement="top"
           arrow
         >
-          <button class="rounded-lg bg-green-500 px-3 py-2 text-sm text-white dark:text-gray-900">
+          <button class="rounded-lg bg-success px-3 py-2 text-sm text-white">
             Inside overflow-hidden (teleported)
           </button>
           <template #content>
-            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+            <div class="text-[11px] text-primary">
               Not clipped
             </div>
           </template>

package/.playground/nuxt.config.ts

@@ -1,4 +1,4 @@
 export default defineNuxtConfig({
   extends: ['..'],
   compatibilityDate: '2025-03-20',
-})
+})

package/CLAUDE.md

@@ -0,0 +1,63 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Что это
+
+adata-ui — UI-кит проектов adata.kz, оформленный как **Nuxt 3 layer** (`main` = `nuxt.config.ts`, публикуется npm-пакетом `adata-ui`). Консьюмеры (pk-frontend) подключают его через `extends` и автоматически получают компоненты, Tailwind и стили. Разработка и просмотр компонентов — в `.playground` (extends `'..'`).
+
+Ветка `tailwind-v4` (2026-07) — миграция на Tailwind v4 + новая палитра + тёмная тема на семантических токенах; `predesign` ещё на v3. pk-frontend мигрирован на v4/семантику (ветка ADTC-8931, extends `'../adata-ui'`); `deepblue` удалён из theme.css после его миграции (2026-07-28). Каталог `docs/` удалён из дерева; реестр миграции — в git-истории: `git show 69039ec:docs/color-migration.md`.
+
+## Команды
+
+- `pnpm dev` — dev-сервер playground; `pnpm build` — сборка playground.
+- Тесты: сейчас тестовых файлов в репо нет (vitest-инфраструктура осталась). Если появятся: `npx vitest run --coverage.enabled=false`. НЕ `pnpm test` (открывает UI). Флаг обязателен: coverage сломан (в devDeps `@vitest/coverage-v8` 1.6.x при vitest 3.x). Один файл: `npx vitest run <путь-к-файлу> --coverage.enabled=false`.
+- `pnpm lint` / `pnpm type-check` — в репо большой предсуществующий долг (тысячи style-ошибок, десятки type-ошибок в нетронутых файлах). Проверяй точечно только изменённые файлы: `npx eslint <files>`.
+- Скомпилированный Tailwind после `pnpm build` искать в `.playground/.output/server/chunks/build/entry-styles.*.mjs` — Nuxt инлайнит глобальный CSS в SSR-бандл; клиентский `entry.css` содержит только библиотечные стили (это норма, не баг).
+
+## Архитектура слоя
+
+- Компоненты авто-регистрируются с префиксами: `components/` → `<a-*>`, `icons/` → `<a-icon-*>`, `illustrations/` → `<a-ill-*>` (имя из имени файла, `pathPrefix: false`; в шаблонах только kebab-case — eslint-правило).
+- Алиас `#adata-ui` → корень репо.
+- Tailwind v4 подключён на уровне слоя: vite-плагин в `vite.plugins` конфига слоя, CSS-вход `assets/styles/main.css` через `css:` слоя. Консьюмерам и playground настраивать нечего. **Никогда не добавляй второй `@import "tailwindcss"`** — второй tailwind-корень = дубли утилит.
+- `utils/twMerge.ts` — расширенный tailwind-merge (знает кастомный `rounded-10` и `text-*`-токены ДС) — использовать его, а не голый `twMerge` из пакета.
+
+## Дизайн-система (Tailwind v4, CSS-first)
+
+Вся конфигурация — в `assets/styles/theme.css` (`tailwind.config` не существует). Реестр миграции, маппингов и осознанных исключений — в git-истории (docs/ удалён): `git show 69039ec:docs/color-migration.md`.
+
+### Палитра
+
+- Стоковая палитра Tailwind v4 + фирменные: `brand` (500 = #068DFF), `secondary` (500 = #2C3E50), `chart-{amber,blue,green,red}`, `surface-dark`/`surface-dark-2`, `base-bg-light`/`base-bg-dark`. Deprecated-группы (`ink-*`, `deepblue-*`) удалены — использовать семантику.
+- Сырые hex запрещены: классы палитры/семантики в разметке, `var(--…-*)` в `<style>`. Никаких `style="color: #…"`. Исключения (логотипы `icons/company/`, `.bg-gradient-blue`, тени `#1B64B3`, error-тултип ATooltip) перечислены в реестре: `git show 69039ec:docs/color-migration.md`.
+
+### Тёмная тема — семантические токены
+
+- **Примитивные шкалы (`gray-*`, `red-*`, `brand-*`, `secondary-*`, `white`/`black`) константны в обеих темах.** Под `.dark` переключаются только семантические токены (блоки `@generated-semantic-colors[-dark]` в theme.css, источник — Figma-артефакт «Семантические цвета»).
+- В новом коде цвета задавать семантикой: `text-primary/secondary/quaternary/disabled/brand/link/success/warning/danger`, `bg-main/subtle/muted/overlay/badge/brand[-subtle]/{success,warning,danger,red…rose}[-subtle]`, `border-default/strong/focus/brand/…`, `bg-action-{primary,secondary,danger}[-hover|-active]` + `text-action-*-fg`, `text/fill/stroke-icon-*`, `fill-main`/`stroke-main` (флип белых заливок иллюстраций). Реестр и маппинг — `git show 69039ec:docs/color-migration.md`.
+- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим); «утопленная» зона (инпуты, плитки, «экраны» иллюстраций) — `bg-canvas` (dark #0F0F10 — глубже `bg-main`; прежний сине-серый #1E2939 заменён аудитом семантических цветов 2026-08).
+- **Пара иконка+плитка**: цвет `text-icon-{цвет}` всегда идёт с плиткой `bg-{цвет}-subtle` того же оттенка — колор-кодирование блоков (лендинги, карточки модулей) строится только так.
+- Примитив в разметке легален, когда цвет должен быть одинаков в темах: инвертированные поверхности (`bg-secondary-500` футера/тултипов), белый декор на цветном (`bg-white` точки/бегунки), `chart-*`, `surface-dark*`. Цветовые `dark:`-классы разрешены для краевых случаев без токена (`dark:bg-white/5`-тинты и т.п.).
+- Для ring/outline border-токены доступны var-синтаксисом: `ring-(--border-color-default)`, `outline-(--border-color-danger)/60`.
+- В `<style>`-блоках: `var(--text-color-*)`, `var(--background-color-*)`, `var(--border-color-*)`, `var(--color-action-*|icon-*)`; полупрозрачность — `color-mix(in srgb, var(--…) N%, transparent)`. `theme('colors…')` в v4 не работает. **Не вешать `/N` на полупрозрачные токены** (`bg-subtle`, `bg-overlay`, dark `brand-subtle`/`danger-subtle`) — альфа перемножается.
+- Цветные тени: форма и цвет раздельно — `shadow-[0_-2px_8px_0] shadow-gray-400/25`; разная плотность по темам — `shadow-surface-dark/10 dark:shadow-surface-dark/30`.
+
+### Типографика и радиусы
+
+- Токены `text-h1…text-h5`, `text-display-{hero,lg,sm}`, `text-body-{lg,md,sm}[-medium|-strong]`, `text-overline[-medium]` — размер + межстрочный + вес одним классом.
+- Легаси-классы `.heading-*`, `.body-400`, `.link-*` и пр. живут в theme.css `@layer components` — для старого дизайна; в новом коде использовать `text-*`-токены.
+- Шкала скруглений кастомная (не v4-дефолт): `rounded` = 4px, xs = 4, sm = 6, md = 8, `rounded-10` = 10px, lg = 12, xl = 16, 2xl = 20.
+
+### Динамические классы
+
+Сканер не видит собранные в рантайме классы (`bg-${color}-…`) — такие семьи/оттенки/утилиты должны быть в safelist `@source inline(…)` в theme.css. Расширяй его при добавлении новой динамики.
+
+### Изменение палитры из Figma
+
+Светлый блок примитивов между маркерами `@generated-colors:*` сгенерирован из Figma-экспортов (DTCG). Генератор и токен-JSONы удалены из дерева — восстановить: `git show 8862721:scripts/generate-theme-colors.mjs` (там же `scripts/design-tokens/*.tokens.json`); исходники продублированы в `git show 69039ec:docs/update-plan.md` (docs/ удалён из дерева). Семантические блоки `@generated-semantic-colors[-dark]:*` этим генератором НЕ покрываются — их источник — Figma-артефакт «Семантические цвета»; актуальные значения живут в самих блоках theme.css, регенерация = дамп таблицы артефакта между маркерами.
+
+## Грабли окружения
+
+- `rg` на машине разработчика — shell-функция: в скриптах/подпроцессах использовать `grep`.
+- В репо есть путь с кириллической буквой (`components/features/сhange-version/`) — `git ls-files` только с `-z`.
+- Каталог `docs/` удалён из дерева (доступен через git show, см. выше), поэтому строки `@source not "../../docs";` в main.css больше нет. Если docs/ с именами старых классов вернётся — вернуть и исключение, иначе сканер Tailwind сгенерирует по ним мёртвый CSS.

package/assets/styles/main.css

@@ -0,0 +1,12 @@
+/* CSS-вход adata-ui. Подключать его обязан КОНСЬЮМЕР (css: в своём nuxt.config),
+   а не слой: у слоя из node_modules Nuxt дописывает авто-импорты в сам CSS и
+   ломает dev-SSR. Свой @import "tailwindcss" в приложении не заводить —
+   будет второй tailwind-корень и дубли утилит. */
+@import "tailwindcss";
+@import "./theme.css";
+@import "./ui.css";
+
+/* Слой всегда в скане: сам он лежит в node_modules консьюмера и дефолтной
+   базой (корень приложения) не покрывается. Путь от этого файла. */
+@source "../..";
+