diff --git a/README.md b/README.md index 9eaf1e4d..1ec27c03 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,63 @@ import { ExtraButtonComponent, ExtraTagComponent } from '@cdek-it/angular-ui-kit export class AppExample {} ``` +## Tailwind v4: вся дизайн-система из кита + +Кит публикует готовую **Tailwind v4 CSS-first тему** (`@theme`), **полностью сгенерированную из +своих дизайн-токенов** (`tokens.json` — тот же источник, что и тема PrimeNG). Это единая точка +истины: поменяли токен в ките → consumer'у достаточно bump'нуть версию, чтобы получить обновление, +согласованное с компонентами `extra-*`. Никаких JS-пресетов/`@config`/v3 — только v4 CSS-first. + +Генерация: `npm run generate:tailwind` (входит в `build:lib`). Артефакт: `tailwind/theme.css`. + +### Подключение (одна строка) + +В `styles.scss` проекта: + +```scss +@use "tailwindcss"; +@use "@cdek-it/angular-ui-kit/tailwind"; +``` + +### Что отдаёт кит (утилиты из токенов) + +| Namespace | Токены | Утилиты | +|---|---|---| +| colors | палитра + semantic | `bg-primary`, `text-danger`, `bg-surface-ground`, `border-surface-border`, `text-zinc-500`, … | +| fonts | `fontFamily` | `font-heading` (TT Fellows), `font-base` (PT Sans) | +| font-weight | `fontWeight` | `font-regular/medium/demibold/bold` | +| text (font-size) | `fontSize` | `text-100…text-1000` | +| leading (line-height) | `lineHeight` | `leading-100…leading-1000`, `leading-auto` | +| radius | `borderRadius` | `rounded-100…rounded-500`, `rounded-none`, `rounded-max` | +| shadow | `shadows` | `shadow-100…shadow-500`, `shadow-none` | +| ease | `transition.easing` | `ease-in/out/inOut` (плюс дефолтный `ease-linear`) | +| spacing | `spacing["1x"]` | одна ручка `--spacing` (множитель); из неё v4 выводит `p/m/w/h/gap/inset/space/translate` | + +Semantic-цвета (`primary`, `surface-ground`, `text`, …) ссылаются на runtime-переменные PrimeNG +(`--p-*`) и **трекают `provideExtraThemes()`**; оттенки палитры — статический слепок (их runtime-имена +нестандартны, поэтому зафиксированы в ките). + +> Не вошли в `@theme` (нет v4-namespace): `sizing`, `borderWidth` (только `--default-border-width`), +> `opacity`, `transition.duration`. Для них — дефолты v4 или произвольные значения +> (`border-[3px]`, `w-[15rem]`, `opacity-[.25]`). + +### Кастомизация (без болей) — локальный `@theme` поверх + +```scss +@use "tailwindcss"; +@use "@cdek-it/angular-ui-kit/tailwind"; + +@theme { + --color-primary: #ff0000; /* перебить */ + --color-brand: #123456; /* добавить */ + --breakpoint-xs: 480px; /* расширить */ +} +``` +v4 мержит `@theme`-блоки (last-wins) — конфликта нет, кит править не нужно. Разделение: кит владеет +дизайн-токенами, проект — build-конфигом (`content`-сканирование в v4 автоматическое, плагины через `@plugin`). + +--- + ## Используемые технологии и связанные зависимости --- diff --git a/package-lock.json b/package-lock.json index 5fe8bcf3..cd52793f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,14 +31,15 @@ "@angular/router": "20.3.15", "@compodoc/compodoc": "1.1.32", "@primeng/themes": "20.4.0", + "@primeuix/themes": "1.2.5", "@storybook/addon-a11y": "10.1.8", "@storybook/addon-docs": "10.1.8", "@storybook/addon-themes": "^10.1.8", "@storybook/angular": "10.1.8", "@tabler/icons-webfont": "3.35.0", + "@tailwindcss/postcss": "4.3.1", "@types/jasmine": "5.1.13", "@typescript-eslint/eslint-plugin": "7.18.0", - "autoprefixer": "10.4.22", "eslint": "8.57.1", "eslint-config-prettier": "9.1.2", "eslint-plugin-import": "2.32.0", @@ -56,7 +57,7 @@ "primeng": "20.4.0", "rxjs": "7.8.2", "storybook": "10.1.8", - "tailwindcss": "3.4.19", + "tailwindcss": "4.3.1", "tslib": "2.8.1", "typescript": "5.9.3", "zone.js": "0.15.1" @@ -6993,6 +6994,326 @@ "url": "https://github.com/sponsors/codecalm" } }, + "node_modules/@tailwindcss/node": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.1.tgz", + "integrity": "sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "enhanced-resolve": "5.21.6", + "jiti": "^2.7.0", + "lightningcss": "1.32.0", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.3.1" + } + }, + "node_modules/@tailwindcss/node/node_modules/jiti": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", + "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, + "node_modules/@tailwindcss/node/node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.1.tgz", + "integrity": "sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.1", + "@tailwindcss/oxide-darwin-arm64": "4.3.1", + "@tailwindcss/oxide-darwin-x64": "4.3.1", + "@tailwindcss/oxide-freebsd-x64": "4.3.1", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.1", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.1", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.1", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.1", + "@tailwindcss/oxide-linux-x64-musl": "4.3.1", + "@tailwindcss/oxide-wasm32-wasi": "4.3.1", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.1", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.1" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.1.tgz", + "integrity": "sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.1.tgz", + "integrity": "sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.1.tgz", + "integrity": "sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.1.tgz", + "integrity": "sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.1.tgz", + "integrity": "sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.1.tgz", + "integrity": "sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.1.tgz", + "integrity": "sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.1.tgz", + "integrity": "sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.1.tgz", + "integrity": "sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.1.tgz", + "integrity": "sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.10.0", + "@emnapi/runtime": "^1.10.0", + "@emnapi/wasi-threads": "^1.2.1", + "@napi-rs/wasm-runtime": "^1.1.4", + "@tybys/wasm-util": "^0.10.2", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.1.tgz", + "integrity": "sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.1.tgz", + "integrity": "sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/postcss": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.1.tgz", + "integrity": "sha512-dNJuNbdEJT/SWRuXTYP1WSamelsz3ztkUsdtWQPjrexysrTpaEPM40P/71knXiXLYEojqPOEGitVLLpPMS5T6A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "@tailwindcss/node": "4.3.1", + "@tailwindcss/oxide": "4.3.1", + "postcss": "8.5.15", + "tailwindcss": "4.3.1" + } + }, + "node_modules/@tailwindcss/postcss/node_modules/postcss": { + "version": "8.5.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz", + "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", @@ -8502,13 +8823,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/any-promise": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "dev": true, - "license": "MIT" - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -8569,13 +8883,6 @@ "node": ">=14" } }, - "node_modules/arg": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", - "dev": true, - "license": "MIT" - }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -8837,44 +9144,6 @@ "node": ">= 4.5.0" } }, - "node_modules/autoprefixer": { - "version": "10.4.22", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz", - "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "browserslist": "^4.27.0", - "caniuse-lite": "^1.0.30001754", - "fraction.js": "^5.3.4", - "normalize-range": "^0.1.2", - "picocolors": "^1.1.1", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -9515,16 +9784,6 @@ "tslib": "^2.0.3" } }, - "node_modules/camelcase-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", - "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001760", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz", @@ -11400,13 +11659,6 @@ "dev": true, "license": "MIT" }, - "node_modules/didyoumean": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", - "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -11420,13 +11672,6 @@ "node": ">=8" } }, - "node_modules/dlv": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", - "dev": true, - "license": "MIT" - }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -11789,14 +12034,14 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.18.4", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz", - "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==", + "version": "5.21.6", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz", + "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==", "dev": true, "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", - "tapable": "^2.2.0" + "tapable": "^2.3.3" }, "engines": { "node": ">=10.13.0" @@ -13533,20 +13778,6 @@ "node": ">= 0.6" } }, - "node_modules/fraction.js": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", - "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": "*" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/rawify" - } - }, "node_modules/fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -16477,17 +16708,265 @@ } } }, - "node_modules/lilconfig": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", - "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", "dev": true, - "license": "MIT", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, "engines": { - "node": ">=14" + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" }, "funding": { - "url": "https://github.com/sponsors/antonk52" + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" } }, "node_modules/lines-and-columns": { @@ -17632,18 +18111,6 @@ "node": "^18.17.0 || >=20.5.0" } }, - "node_modules/mz": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", - "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "any-promise": "^1.0.0", - "object-assign": "^4.0.1", - "thenify-all": "^1.0.0" - } - }, "node_modules/nan": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.24.0.tgz", @@ -17652,9 +18119,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.15", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz", + "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==", "dev": true, "funding": [ { @@ -18287,16 +18754,6 @@ "dev": true, "license": "MIT" }, - "node_modules/object-hash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", - "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/object-inspect": { "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", @@ -19237,26 +19694,6 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pirates": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", - "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/piscina": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.3.tgz", @@ -19355,93 +19792,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-import": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", - "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", - "dev": true, - "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.0.0", - "read-cache": "^1.0.0", - "resolve": "^1.1.7" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/postcss-js": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", - "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "camelcase-css": "^2.0.1" - }, - "engines": { - "node": "^12 || ^14 || >= 16" - }, - "peerDependencies": { - "postcss": "^8.4.21" - } - }, - "node_modules/postcss-load-config": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", - "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "lilconfig": "^3.1.1" - }, - "engines": { - "node": ">= 18" - }, - "peerDependencies": { - "jiti": ">=1.21.0", - "postcss": ">=8.0.9", - "tsx": "^4.8.1", - "yaml": "^2.4.2" - }, - "peerDependenciesMeta": { - "jiti": { - "optional": true - }, - "postcss": { - "optional": true - }, - "tsx": { - "optional": true - }, - "yaml": { - "optional": true - } - } - }, "node_modules/postcss-loader": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz", @@ -19544,46 +19894,6 @@ "postcss": "^8.1.0" } }, - "node_modules/postcss-nested": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", - "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.1.1" - }, - "engines": { - "node": ">=12.0" - }, - "peerDependencies": { - "postcss": "^8.2.14" - } - }, - "node_modules/postcss-nested/node_modules/postcss-selector-parser": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/postcss-selector-parser": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", @@ -19931,16 +20241,6 @@ "license": "MIT", "peer": true }, - "node_modules/read-cache": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", - "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", - "dev": true, - "license": "MIT", - "dependencies": { - "pify": "^2.3.0" - } - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -22488,39 +22788,6 @@ "minimist": "^1.1.0" } }, - "node_modules/sucrase": { - "version": "3.35.1", - "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", - "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.2", - "commander": "^4.0.0", - "lines-and-columns": "^1.1.6", - "mz": "^2.7.0", - "pirates": "^4.0.1", - "tinyglobby": "^0.2.11", - "ts-interface-checker": "^0.1.9" - }, - "bin": { - "sucrase": "bin/sucrase", - "sucrase-node": "bin/sucrase-node" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/sucrase/node_modules/commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -22565,125 +22832,16 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.19", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", - "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@alloc/quick-lru": "^5.2.0", - "arg": "^5.0.2", - "chokidar": "^3.6.0", - "didyoumean": "^1.2.2", - "dlv": "^1.1.3", - "fast-glob": "^3.3.2", - "glob-parent": "^6.0.2", - "is-glob": "^4.0.3", - "jiti": "^1.21.7", - "lilconfig": "^3.1.3", - "micromatch": "^4.0.8", - "normalize-path": "^3.0.0", - "object-hash": "^3.0.0", - "picocolors": "^1.1.1", - "postcss": "^8.4.47", - "postcss-import": "^15.1.0", - "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", - "postcss-nested": "^6.2.0", - "postcss-selector-parser": "^6.1.2", - "resolve": "^1.22.8", - "sucrase": "^3.35.0" - }, - "bin": { - "tailwind": "lib/cli.js", - "tailwindcss": "lib/cli.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/tailwindcss/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/tailwindcss/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/tailwindcss/node_modules/postcss-selector-parser": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/tailwindcss/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz", + "integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==", "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } + "license": "MIT" }, "node_modules/tapable": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", - "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz", + "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==", "dev": true, "license": "MIT", "engines": { @@ -22870,29 +23028,6 @@ "dev": true, "license": "MIT" }, - "node_modules/thenify": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", - "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "dev": true, - "license": "MIT", - "dependencies": { - "any-promise": "^1.0.0" - } - }, - "node_modules/thenify-all": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", - "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "dev": true, - "license": "MIT", - "dependencies": { - "thenify": ">= 3.1.0 < 4" - }, - "engines": { - "node": ">=0.8" - } - }, "node_modules/thingies": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz", @@ -23130,13 +23265,6 @@ "node": ">=6.10" } }, - "node_modules/ts-interface-checker": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/ts-morph": { "version": "27.0.2", "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-27.0.2.tgz", diff --git a/package.json b/package.json index 8fa837c7..ead6b20d 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "format:check": "prettier --check \"**/*.{js,ts,d.ts}\"", "build:check": "npm run format:check && npm run security:check", "build:storybook": "ng run angular-ui-kit:build-storybook", - "build:lib": "ng build angular-ui-kit-lib", + "build:lib": "ng build angular-ui-kit-lib && npm run generate:tailwind && node tailwind/copy-to-dist.mjs", + "generate:tailwind": "node tailwind/generate.mjs", "security:check": "npm audit --production --audit-level high", "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/" }, @@ -50,9 +51,9 @@ "@storybook/addon-themes": "^10.1.8", "@storybook/angular": "10.1.8", "@tabler/icons-webfont": "3.35.0", + "@tailwindcss/postcss": "4.3.1", "@types/jasmine": "5.1.13", "@typescript-eslint/eslint-plugin": "7.18.0", - "autoprefixer": "10.4.22", "eslint": "8.57.1", "eslint-config-prettier": "9.1.2", "eslint-plugin-import": "2.32.0", @@ -71,7 +72,7 @@ "primeng": "20.4.0", "rxjs": "7.8.2", "storybook": "10.1.8", - "tailwindcss": "3.4.19", + "tailwindcss": "4.3.1", "tslib": "2.8.1", "typescript": "5.9.3", "zone.js": "0.15.1" diff --git a/postcss.config.js b/postcss.config.js index 67cdf1a5..390440a8 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ +// Tailwind v4: движок + autoprefixer встроены в @tailwindcss/postcss. module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, + plugins: { + '@tailwindcss/postcss': {} + } }; diff --git a/src/stories/components/popover/examples/popover-rich-content.component.ts b/src/stories/components/popover/examples/popover-rich-content.component.ts index 717c3e7e..63d0dfb4 100644 --- a/src/stories/components/popover/examples/popover-rich-content.component.ts +++ b/src/stories/components/popover/examples/popover-rich-content.component.ts @@ -10,7 +10,7 @@ const template = `
Заголовок -

Дополнительное описание или любой произвольный контент внутри popover.

+

Дополнительное описание или любой произвольный контент внутри popover.

 @@ -52,7 +52,7 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
Заголовок -

Дополнительное описание или любой произвольный контент внутри popover.

+

Дополнительное описание или любой произвольный контент внутри popover.

 \`, diff --git a/src/styles.scss b/src/styles.scss index 9449e0df..75d23e2d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,6 +1,8 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +// Tailwind v4 CSS-first. Демо/бин кита «ест свой корм»: тема (цвета/типографика/radius/тени/easing) +// берётся из собственного сгенерированного @theme — того же, что кит публикует consumer'ам. +@use 'tailwindcss'; +// Демо кита «ест свой корм» — подключает собственную сгенерированную тему напрямую из tailwind/theme.css. +@use '../tailwind/theme.css'; @import '@tabler/icons-webfont/dist/tabler-icons.min.css'; diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 5ca81c64..00000000 --- a/tailwind.config.js +++ /dev/null @@ -1,162 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -const generateColor = (color, arr) => { - return arr.reduce((res, value) => { - res[value] = `var(--${color}-${value})`; - return res; - }, {}); -}; -const arr_10_100 = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]; -// const arr_50_950 = [ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 ]; -const arr_0_900 = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; -const arr_0_900_alpha = [...arr_0_900, 'alpha']; - -export default { - content: ['./src/**/*.{js,ts,html}', './primeng-sass-theme/themes/base/_styles-tailwind.scss'], - theme: { - screens: { - sm: '1px', - md: '768px', - lg: '1200px', - xl: '1280px', - '2xl': '1536px' - }, - extend: { - fontFamily: { - roboto: ['Roboto', 'sans-serif'], - sans: ['Roboto', 'sans-serif'] - }, - colors: { - // Common - current: 'currentColor', - transparent: 'transparent', - // Primary - primary: { - ...generateColor('primary', arr_0_900_alpha), - DEFAULT: 'var(--primary-color)' - }, - // Service - danger: 'var(--red-400)', - warning: 'var(--orange-400)', - success: 'var(--green-400)', - info: 'var(--blue-400)', - help: 'var(--purple-400)', - // Neutrals - white: { - ...generateColor('white', arr_10_100), - DEFAULT: 'var(--white-100)' - }, - black: { - ...generateColor('black', arr_10_100), - DEFAULT: 'var(--black-100)' - }, - //Surface - surface: { - ...generateColor('surface', arr_0_900), - ground: 'var(--surface-ground)', - section: 'var(--surface-section)', - card: 'var(--surface-card)', - overlay: 'var(--surface-overlay)', - border: 'var(--surface-border)', - hover: 'var(--surface-hover)', - transparent: 'transparent' // rgba(255, 255, 255, 0.0001) - в фигме нет transparent, это костыль на нее - }, - // Text - color: 'var(--text-color)', - 'color-secondary': 'var(--text-color-secondary)', - 'color-primary': 'var(--primary-color-text)' - }, - lineHeight: { - DEFAULT: 'normal', - auto: '1.2' - }, - borderRadius: { - kit: 'var(--border-radius)' - }, - borderWidth: { - 1: '1px', - 2: '2px', - 3: '3px' - }, - width: { - 1: '1rem', - 2: '2rem', - 3: '3rem', - 4: '4rem', - 5: '5rem', - 6: '6rem', - 7: '7rem', - 8: '8rem', - 9: '9rem', - 10: '10rem', - 11: '11rem', - 12: '12rem', - 13: '13rem', - 14: '14rem', - 15: '15rem', - 16: '16rem', - 17: '17rem', - 18: '18rem', - 19: '19rem', - 20: '20rem', - 21: '21rem', - 22: '22rem', - 23: '23rem', - 24: '24rem', - 25: '25rem', - 26: '26rem', - 27: '27rem', - 28: '28rem', - 29: '29rem', - 30: '30rem', - 34: '34rem', - 45: '45rem', - 50: '50rem', - 54: '54rem', - 58: '58rem', - 60: '60rem' - }, - height: { - 1: '1rem', - 2: '2rem', - 3: '3rem', - 4: '4rem', - 5: '5rem', - 6: '6rem', - 7: '7rem', - 8: '8rem', - 9: '9rem', - 10: '10rem', - 11: '11rem', - 12: '12rem', - 13: '13rem', - 14: '14rem', - 15: '15rem', - 16: '16rem', - 17: '17rem', - 18: '18rem', - 19: '19rem', - 20: '20rem', - 21: '21rem', - 22: '22rem', - 23: '23rem', - 24: '24rem', - 25: '25rem', - 26: '26rem', - 27: '27rem', - 28: '28rem', - 29: '29rem', - 30: '30rem', - 34: '34rem', - 45: '45rem', - 50: '50rem', - 54: '54rem', - 58: '58rem', - 60: '60rem' - }, - zIndex: { - 1: '1' - } - } - }, - plugins: [require('tailwindcss')] -}; diff --git a/tailwind/copy-to-dist.mjs b/tailwind/copy-to-dist.mjs new file mode 100644 index 00000000..9f120622 --- /dev/null +++ b/tailwind/copy-to-dist.mjs @@ -0,0 +1,56 @@ +/** + * Postbuild: кладёт сгенерированные Tailwind-артефакты в dist/ и патчит dist/package.json, + * чтобы subpath'ы `@cdek-it/angular-ui-kit/tailwind` (CSS) и `/tailwind/preset` (JS) + * резолвились у consumer'а. Запускается в конце `build:lib`. + * + * ng-packagr генерирует `exports`-карту из entry-points и НЕ знает про наши CSS/JS-артефакты; + * без этой правки `exports` заблокировал бы subpath `./tailwind/*` (exports — закрытое множество). + */ +import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const ROOT = resolve(__dirname, '..'); +const SRC = resolve(ROOT, 'tailwind'); +const DIST = resolve(ROOT, 'dist'); +const DIST_TW = resolve(DIST, 'tailwind'); +const DIST_PKG = resolve(DIST, 'package.json'); + +if (!existsSync(DIST)) { + console.error('✗ dist/ не найден — запустите после `ng build angular-ui-kit-lib`.'); + process.exit(1); +} +if (!existsSync(DIST_PKG)) { + console.error('✗ dist/package.json не найден — ожидается, что его сгенерировал ng-packagr.'); + process.exit(1); +} + +// 1) Копируем артефакт (чистый v4 — только theme.css) +mkdirSync(DIST_TW, { recursive: true }); +const from = resolve(SRC, 'theme.css'); +if (!existsSync(from)) { + console.error(`✗ ${from} не найден — выполните \`npm run generate:tailwind\` сначала.`); + process.exit(1); +} +copyFileSync(from, resolve(DIST_TW, 'theme.css')); + +// 2) Патчим dist/package.json: exports для tailwind subpath'ов (v4 CSS-first only) +const pkg = JSON.parse(readFileSync(DIST_PKG, 'utf8')); +pkg.exports = pkg.exports || {}; + +const cssEntry = { default: './tailwind/theme.css' }; +pkg.exports['./tailwind'] = cssEntry; +pkg.exports['./tailwind/theme.css'] = cssEntry; + +// CSS не должен вырезаться tree-shaking'ом при JS-импорте (для тех, кто импортит css через bundler). +// Sass @use инлайнит CSS на этапе сборки — для основного сценария это не обязательно, но безопасно. +if (pkg.sideEffects === undefined || pkg.sideEffects === false) { + pkg.sideEffects = ['**/*.css']; +} else if (Array.isArray(pkg.sideEffects) && !pkg.sideEffects.some((s) => s.includes('.css'))) { + pkg.sideEffects.push('**/*.css'); +} + +writeFileSync(DIST_PKG, JSON.stringify(pkg, null, 2) + '\n'); + +console.log('✓ dist/tailwind/theme.css + exports patched'); diff --git a/tailwind/generate.mjs b/tailwind/generate.mjs new file mode 100644 index 00000000..f98f7bdd --- /dev/null +++ b/tailwind/generate.mjs @@ -0,0 +1,318 @@ +/** + * Генератор Tailwind-темы кита (v4 CSS-first, @theme) из дизайн-токенов. + * + * Источник правды: src/lib/providers/prime-preset/tokens/tokens.json (тот же, что кормит + * provideExtraThemes() / пресет Aura). На выходе — src/tailwind/theme.css (@theme). + * Чистый v4: никакого JS-пресета/@config/v3. + * + * Запуск: `npm run generate:tailwind`. Включён в `build:lib`. НЕ правьте сгенерированный файл руками. + * + * Что маппится в v4-namespace'ы (@theme → утилиты): colors (--color-*), fonts (--font-*), + * font-weight (--font-weight-*), font-size (--text-*), line-height (--leading-*), + * border-radius (--radius-*), shadow (--shadow-*), transition-easing (--ease-*). + * НЕ маппится (нет v4-namespace, либо одиночный множитель): spacing (= v4 --spacing, 0.25rem), + * sizing, border-width (только --default-border-width), opacity, transition-duration. + * + * Почему primitive-палитра идёт статическим hex-слепком: у кита она вложена в `colors.solid.*` + * (поверх Aura), поэтому runtime-имена `--p-*` у оттенков нестандартные/непредсказуемые. Только кит + * знает свои токены — поэтому маппинг генерируется здесь, в одном месте. Semantic-токены, напротив, + * имеют стабильные `--p-*` имена → линкуем на runtime-тему (цвет трекает provideExtraThemes). + */ +import { readFileSync, writeFileSync, mkdirSync } from 'node:fs'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const ROOT = resolve(__dirname, '..'); +const TOKENS_PATH = resolve(ROOT, 'src/lib/providers/prime-preset/tokens/tokens.json'); +const OUT_DIR = resolve(ROOT, 'tailwind'); + +const tokens = JSON.parse(readFileSync(TOKENS_PATH, 'utf8')); +const primitive = tokens.primitive; +const semantic = tokens.semantic.colorScheme.light; + +const SOLID = primitive.colors.solid; // 22 цвета × 50..950 +const ALPHA = primitive.colors.alpha; // { white, black } × 100..1000 + +const SOLID_ORDER = [ + 'slate', + 'gray', + 'zinc', + 'neutral', + 'stone', + 'red', + 'orange', + 'amber', + 'yellow', + 'lime', + 'green', + 'emerald', + 'teal', + 'cyan', + 'sky', + 'blue', + 'indigo', + 'violet', + 'purple', + 'fuchsia', + 'pink', + 'rose' +]; + +/** Разрешить значение токена: литерал отдаём как есть, "{ref.path}" — раскрываем. */ +function resolveToken(value, scope = tokens) { + if (typeof value !== 'string') return value; + const m = value.match(/^\{(.+)\}$/); + if (!m) return value; + const path = m[1]; + // {colors.solid.green.500} → primitive.colors.solid.green.500 + // {text.color} / {form.borderColor} → semantic.colorScheme.light.* + const solidMatch = path.match(/^colors\.solid\.(.+)$/); + if (solidMatch) { + const [color, shade] = solidMatch[1].split('.'); + return SOLID[color]?.[shade]; + } + const alphaMatch = path.match(/^colors\.alpha\.(.+)$/); + if (alphaMatch) { + const [color, shade] = alphaMatch[1].split('.'); + return ALPHA[color]?.[shade]; + } + const semanticMatch = path.match( + /^(text|form|content|surface|primary|navigation|overlay|highlight|focusRing|mask|list)\.(.+)$/ + ); + if (semanticMatch) { + const obj = walk(semantic[semanticMatch[1]], semanticMatch[2].split('.')); + return typeof obj === 'string' ? resolveToken(obj) : obj; + } + return value; +} + +function walk(obj, keys) { + return keys.reduce((acc, k) => (acc == null ? acc : acc[k]), obj); +} + +function solidHex(color, shade) { + return SOLID[color]?.[shade]; +} + +/** + * Разрешить все "{ref}" внутри строки (инлайн, напр. shadow "0 0 0.1rem {colors.alpha.black.200}"). + * Целостный "{...}" значения тоже раскрывает. Нераспознанные ref оставляет как есть. + */ +function resolveInline(value) { + if (typeof value !== 'string') return value; + return value.replace(/\{([^}]+)\}/g, (_m, path) => { + const resolved = resolveToken(`{${path}}`); + return resolved === `{${path}}` ? `{${path}}` : String(resolved); + }); +} + +// ── semantic → литералы из tokens.json (статика) ──────────────────────────── +// Тема кита одна (darkModeSelector: false), пресет = definePreset(Aura, tokens), поэтому +// значения semantic-токенов в tokens.json и есть финальные цвета. Резолвим их в литералы, +// без линков на runtime --p-* (их имена у кастомного пресета нестандартны) и без fallback'ов. +// Нейминг чистый: foreground/secondary/muted/disabled (утилиты text-foreground, text-secondary…). +const SEMANTIC_TOKENS = [ + // [tailwind var, путь в semantic.colorScheme.light.*] + ['--color-foreground', 'text.color'], + ['--color-secondary', 'text.secondaryColor'], + ['--color-muted', 'text.mutedColor'], + ['--color-disabled', 'text.disabledColor'], + ['--color-primary', 'primary.color'], + ['--color-on-primary', 'primary.contrastColor'], + ['--color-primary-hover', 'primary.hoverColor'], + ['--color-primary-active', 'primary.activeColor'], + ['--color-surface-ground', 'content.background'], + ['--color-surface-section', 'content.hoverBackground'], + ['--color-surface-card', 'content.background'], + ['--color-surface-overlay', 'overlay.select.background'], + ['--color-surface-border', 'content.borderColor'], + ['--color-surface-hover', 'content.hoverBackground'], + ['--color-form-border', 'form.borderColor'], + ['--color-form-bg', 'form.background'], + ['--color-danger', 'text.dangerColor'], + ['--color-success', 'text.successColor'], + ['--color-warning', 'text.warningColor'], + ['--color-info', 'text.infoColor'], + ['--color-help', 'text.helpColor'] +]; + +/** Разрешить semantic-токен по пути (text.color, primary.color, content.background…). */ +function semanticValue(path) { + return resolveToken(`{${path}}`); +} + +/** + * Гард: значение должно разрешиться в конкретную величину. Иначе генератор падает с понятной + * ошибкой вместо того, чтобы молча написать `--x: undefined;` в тему. + */ +function assertResolved(twVar, value, path) { + if (value === undefined || value === null || value === '' || `${value}`.includes('{')) { + throw new Error( + `[generate-tailwind] токен не разрешён: ${twVar} ← semantic.${path} (получено "${value}"). ` + + `Проверьте путь в tokens.json (semantic.colorScheme.light.*).` + ); + } + return value; +} + +// ── service colors: семантика кита → какой solid-цвет несёт полный рейнж ───── +const SERVICE_TO_SOLID = { + danger: 'red', + success: 'green', + warning: 'yellow', + info: 'blue', + help: 'purple' +}; + +// ── fonts / type / radius / shadow / easing / spacing ─────────────────────── +const FONT_HEADING = primitive.fonts.fontFamily.heading; // 'TT Fellows' +const FONT_BASE = primitive.fonts.fontFamily.base; // 'PT Sans' +const FONT_WEIGHT = primitive.fonts.fontWeight; // {regular,medium,demibold,bold} +const FONT_SIZE = primitive.fonts.fontSize; // {100..1000} +const LINE_HEIGHT = primitive.fonts.lineHeight; // {100..1000, auto} +const RADIUS = primitive.borderRadius; // {100,200,...,none,max} +const SHADOWS = primitive.shadows; // {100..500, none} (со ссылками на alpha-цвета) +const EASING = primitive.transition.easing; // {linear, in, out, inOut} +// spacing: v4 отдаёт под spacing ОДНУ ручку --spacing (множитель). Базовый шаг кита — +// primitive.spacing["1x"] (= 0.25rem); вся шкала (p/m/w/h/gap/inset/...) выводится v4 как calc(var(--spacing)*N). +const SPACING_STEP = primitive.spacing['1x']; + +const HEADER = `/** + * СГЕНЕРИРОВАНО. Не править руками — источник: src/lib/providers/prime-preset/tokens/tokens.json. + * Регенерация: \`npm run generate:tailwind\`. + * + * Tailwind v4 CSS-first тема кита @cdek-it/angular-ui-kit. Единая точка истины — tokens.json + * (тот же источник, что и пресет PrimeNG provideExtraThemes()). + * + * Подключение в проекте: + * @use "tailwindcss"; + * @use "@cdek-it/angular-ui-kit/tailwind"; + * + * ВСЕ значения — статические литералы, разрешённые из tokens.json (semantic-токены из + * semantic.colorScheme.light.*, оттенки палитры — из colors.solid/alpha). Ссылок на runtime + * переменные PrimeNG (--p-*) НЕТ: тема кита одна (darkModeSelector: false), поэтому tokens + * совпадают с рантаймом, и статика = рантайм. Поменяли токен → пересобрали кит → у consumer'а + * обновилось (через bump версии). + * + * Покрытие: colors, fonts (--font-*), font-weight, font-size (--text-*), line-height (--leading-*), + * radius (--radius-*), shadow (--shadow-*), easing (--ease-*), spacing (--spacing). + */ +`; + +// ── theme.css (@theme) ────────────────────────────────────────────────────── +function buildThemeCss() { + const lines = []; + lines.push('@theme {'); + + // semantic — литералы из tokens.json (статика, через гард) + lines.push(' /* semantic — литералы из tokens.json (тема кита одна → tokens = рантайм) */'); + for (const [twVar, path] of SEMANTIC_TOKENS) { + lines.push(` ${twVar}: ${assertResolved(twVar, semanticValue(path), path)};`); + } + + // primary = green-палитра (primary кита это green.500). DEFAULT уже задан в semantic-блоке выше. + lines.push(''); + lines.push(' /* primary — фирменный цвет кита (= green-палитра), оттенки */'); + for (const shade of shadesOf('green')) { + lines.push(` --color-primary-${shade}: ${solidHex('green', shade)};`); + } + + // service colors (полные рейнжи) + lines.push(''); + lines.push(' /* service colors (полные рейнжи из палитры кита) */'); + for (const [name, solid] of Object.entries(SERVICE_TO_SOLID)) { + for (const shade of shadesOf(solid)) { + lines.push(` --color-${name}-${shade}: ${solidHex(solid, shade)};`); + } + } + + // surface ramp (zinc + surface.0) + lines.push(''); + lines.push(' /* surface — zinc-палитра + surface.0 (white) */'); + lines.push(` --color-surface-0: ${ALPHA.white[1000]};`); + for (const shade of shadesOf('zinc')) { + lines.push(` --color-surface-${shade}: ${solidHex('zinc', shade)};`); + } + + // вся solid-палитра (22 цвета) + lines.push(''); + lines.push(' /* полная primitive-палитра кита (colors.solid.*) */'); + for (const color of SOLID_ORDER) { + if (!SOLID[color]) continue; + for (const shade of shadesOf(color)) { + lines.push(` --color-${color}-${shade}: ${solidHex(color, shade)};`); + } + } + + // alpha white/black + lines.push(''); + lines.push(' /* alpha white/black (colors.alpha.*) */'); + for (const shade of Object.keys(ALPHA.white)) { + lines.push(` --color-white-${shade === '1000' ? 'DEFAULT' : shade}: ${ALPHA.white[shade]};`); + } + for (const shade of Object.keys(ALPHA.black)) { + lines.push(` --color-black-${shade === '1000' ? 'DEFAULT' : shade}: ${ALPHA.black[shade]};`); + } + + // fonts + lines.push(''); + lines.push(' /* fonts (шрифтовые файлы китом не публикуются — без них fallback) */'); + lines.push(` --font-heading: '${FONT_HEADING}', sans-serif;`); + lines.push(` --font-base: '${FONT_BASE}', sans-serif;`); + lines.push(' /* font-weight (utilities: font-regular/medium/demibold/bold) */'); + for (const [k, v] of Object.entries(FONT_WEIGHT)) { + lines.push(` --font-weight-${k}: ${v};`); + } + + // type scale: font-size (--text-*) + line-height (--leading-*) + lines.push(''); + lines.push(' /* font-size (--text-*), line-height (--leading-*) из типошкалы кита */'); + for (const [k, v] of Object.entries(FONT_SIZE)) { + lines.push(` --text-${k}: ${v};`); + } + for (const [k, v] of Object.entries(LINE_HEIGHT)) { + lines.push(` --leading-${k}: ${v};`); + } + + // radius + lines.push(''); + lines.push(' /* border-radius */'); + for (const [k, v] of Object.entries(RADIUS)) { + lines.push(` --radius-${k}: ${v};`); + } + + // spacing — единственная ручка v4; из неё выводятся p/m/w/h/gap/inset/space/translate. + lines.push(''); + lines.push(' /* spacing: множитель для p/m/w/h/gap/inset/… (v4: calc(var(--spacing)*N)) */'); + lines.push(` --spacing: ${assertResolved('--spacing', SPACING_STEP, "spacing['1x']")};`); + + // shadows (со ссылками на alpha-цвета раскрываем инлайн; гард ловит неразрешённые ref) + lines.push(''); + lines.push(' /* shadows (box-shadow, {colors.alpha.*} раскрыты) */'); + for (const [k, v] of Object.entries(SHADOWS)) { + const resolved = resolveInline(v); + lines.push(` --shadow-${k}: ${assertResolved(`--shadow-${k}`, resolved, `shadows.${k}`)};`); + } + + // easing + lines.push(''); + lines.push(' /* transition easing (--ease-*) */'); + for (const [k, v] of Object.entries(EASING)) { + lines.push(` --ease-${k}: ${v};`); + } + + lines.push('}'); + return lines.join('\n'); +} + +function shadesOf(color) { + return Object.keys(SOLID[color] || {}); +} + +// ── write ─────────────────────────────────────────────────────────────────── +mkdirSync(OUT_DIR, { recursive: true }); +const themeCss = `${HEADER}\n${buildThemeCss()}\n`; +writeFileSync(resolve(OUT_DIR, 'theme.css'), themeCss); + +console.log('✓ Generated tailwind/theme.css'); diff --git a/tailwind/theme.css b/tailwind/theme.css new file mode 100644 index 00000000..0847d253 --- /dev/null +++ b/tailwind/theme.css @@ -0,0 +1,461 @@ +/** + * СГЕНЕРИРОВАНО. Не править руками — источник: src/lib/providers/prime-preset/tokens/tokens.json. + * Регенерация: `npm run generate:tailwind`. + * + * Tailwind v4 CSS-first тема кита @cdek-it/angular-ui-kit. Единая точка истины — tokens.json + * (тот же источник, что и пресет PrimeNG provideExtraThemes()). + * + * Подключение в проекте: + * @use "tailwindcss"; + * @use "@cdek-it/angular-ui-kit/tailwind"; + * + * ВСЕ значения — статические литералы, разрешённые из tokens.json (semantic-токены из + * semantic.colorScheme.light.*, оттенки палитры — из colors.solid/alpha). Ссылок на runtime + * переменные PrimeNG (--p-*) НЕТ: тема кита одна (darkModeSelector: false), поэтому tokens + * совпадают с рантаймом, и статика = рантайм. Поменяли токен → пересобрали кит → у consumer'а + * обновилось (через bump версии). + * + * Покрытие: colors, fonts (--font-*), font-weight, font-size (--text-*), line-height (--leading-*), + * radius (--radius-*), shadow (--shadow-*), easing (--ease-*), spacing (--spacing). + */ + +@theme { + /* semantic — литералы из tokens.json (тема кита одна → tokens = рантайм) */ + --color-foreground: #2b2e33; + --color-secondary: #6d7076; + --color-muted: #85888e; + --color-disabled: #cecfd2; + --color-primary: #44e858; + --color-on-primary: #ffffff; + --color-primary-hover: #1dc831; + --color-primary-active: #168322; + --color-surface-ground: #ffffff; + --color-surface-section: #f0f0f1; + --color-surface-card: #ffffff; + --color-surface-overlay: #ffffff; + --color-surface-border: #e2e2e4; + --color-surface-hover: #f0f0f1; + --color-form-border: #cecfd2; + --color-form-bg: #ffffff; + --color-danger: #db3424; + --color-success: #168322; + --color-warning: #dc9710; + --color-info: #1e76cd; + --color-help: #9333ea; + + /* primary — фирменный цвет кита (= green-палитра), оттенки */ + --color-primary-50: #fafffb; + --color-primary-100: #f0fff3; + --color-primary-200: #d4fedc; + --color-primary-300: #aafbb7; + --color-primary-400: #77f48a; + --color-primary-500: #44e858; + --color-primary-600: #1dc831; + --color-primary-700: #168322; + --color-primary-800: #12611b; + --color-primary-900: #0e4514; + --color-primary-950: #0c3b11; + + /* service colors (полные рейнжи из палитры кита) */ + --color-danger-50: #fffafa; + --color-danger-100: #fff0f0; + --color-danger-200: #fed4d4; + --color-danger-300: #fbacaa; + --color-danger-400: #f47f77; + --color-danger-500: #e85244; + --color-danger-600: #db3424; + --color-danger-700: #8d2218; + --color-danger-800: #611912; + --color-danger-900: #45120e; + --color-danger-950: #3b100c; + --color-success-50: #fafffb; + --color-success-100: #f0fff3; + --color-success-200: #d4fedc; + --color-success-300: #aafbb7; + --color-success-400: #77f48a; + --color-success-500: #44e858; + --color-success-600: #1dc831; + --color-success-700: #168322; + --color-success-800: #12611b; + --color-success-900: #0e4514; + --color-success-950: #0c3b11; + --color-warning-50: #fffdfa; + --color-warning-100: #fff9f0; + --color-warning-200: #ffeed4; + --color-warning-300: #fddeaa; + --color-warning-400: #facb75; + --color-warning-500: #f5b83d; + --color-warning-600: #dc9710; + --color-warning-700: #9d6d0e; + --color-warning-800: #6d4c0b; + --color-warning-900: #4f3709; + --color-warning-950: #453008; + --color-info-50: #fafdff; + --color-info-100: #f0f9ff; + --color-info-200: #d4ecfe; + --color-info-300: #aad7fb; + --color-info-400: #77baf4; + --color-info-500: #4496e8; + --color-info-600: #1e76cd; + --color-info-700: #18538d; + --color-info-800: #123a61; + --color-info-900: #0e2a45; + --color-info-950: #0c243b; + --color-help-50: #faf5ff; + --color-help-100: #f3e8ff; + --color-help-200: #e9d5ff; + --color-help-300: #d8b4fe; + --color-help-400: #c084fc; + --color-help-500: #a855f7; + --color-help-600: #9333ea; + --color-help-700: #7e22ce; + --color-help-800: #6b21a8; + --color-help-900: #581c87; + --color-help-950: #3b0764; + + /* surface — zinc-палитра + surface.0 (white) */ + --color-surface-0: #ffffff; + --color-surface-50: #fafafa; + --color-surface-100: #f0f0f1; + --color-surface-200: #e2e2e4; + --color-surface-300: #cecfd2; + --color-surface-400: #a2a5a9; + --color-surface-500: #85888e; + --color-surface-600: #6d7076; + --color-surface-700: #56595f; + --color-surface-800: #404348; + --color-surface-900: #2b2e33; + --color-surface-950: #181a1f; + + /* полная primitive-палитра кита (colors.solid.*) */ + --color-slate-50: #f8fafc; + --color-slate-100: #f1f5f9; + --color-slate-200: #e2e8f0; + --color-slate-300: #cbd5e1; + --color-slate-400: #94a3b8; + --color-slate-500: #64748b; + --color-slate-600: #475569; + --color-slate-700: #334155; + --color-slate-800: #1e293b; + --color-slate-900: #0f172a; + --color-slate-950: #020617; + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + --color-gray-950: #030712; + --color-zinc-50: #fafafa; + --color-zinc-100: #f0f0f1; + --color-zinc-200: #e2e2e4; + --color-zinc-300: #cecfd2; + --color-zinc-400: #a2a5a9; + --color-zinc-500: #85888e; + --color-zinc-600: #6d7076; + --color-zinc-700: #56595f; + --color-zinc-800: #404348; + --color-zinc-900: #2b2e33; + --color-zinc-950: #181a1f; + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; + --color-neutral-950: #0a0a0a; + --color-stone-50: #fafaf9; + --color-stone-100: #f5f5f4; + --color-stone-200: #e7e5e4; + --color-stone-300: #d6d3d1; + --color-stone-400: #a8a29e; + --color-stone-500: #78716c; + --color-stone-600: #57534e; + --color-stone-700: #44403c; + --color-stone-800: #292524; + --color-stone-900: #1c1917; + --color-stone-950: #0c0a09; + --color-red-50: #fffafa; + --color-red-100: #fff0f0; + --color-red-200: #fed4d4; + --color-red-300: #fbacaa; + --color-red-400: #f47f77; + --color-red-500: #e85244; + --color-red-600: #db3424; + --color-red-700: #8d2218; + --color-red-800: #611912; + --color-red-900: #45120e; + --color-red-950: #3b100c; + --color-orange-50: #fffbfa; + --color-orange-100: #fff3f0; + --color-orange-200: #ffddd5; + --color-orange-300: #ffbca9; + --color-orange-400: #ff9273; + --color-orange-500: #fe6434; + --color-orange-600: #d53f0b; + --color-orange-700: #a83107; + --color-orange-800: #752506; + --color-orange-900: #561c05; + --color-orange-950: #4b1905; + --color-amber-50: #fffbeb; + --color-amber-100: #fef3c7; + --color-amber-200: #fde68a; + --color-amber-300: #fcd34d; + --color-amber-400: #fbbf24; + --color-amber-500: #f59e0b; + --color-amber-600: #d97706; + --color-amber-700: #b45309; + --color-amber-800: #92400e; + --color-amber-900: #78350f; + --color-amber-950: #451a03; + --color-yellow-50: #fffdfa; + --color-yellow-100: #fff9f0; + --color-yellow-200: #ffeed4; + --color-yellow-300: #fddeaa; + --color-yellow-400: #facb75; + --color-yellow-500: #f5b83d; + --color-yellow-600: #dc9710; + --color-yellow-700: #9d6d0e; + --color-yellow-800: #6d4c0b; + --color-yellow-900: #4f3709; + --color-yellow-950: #453008; + --color-lime-50: #f7fee7; + --color-lime-100: #ecfccb; + --color-lime-200: #d9f99d; + --color-lime-300: #bef264; + --color-lime-400: #a3e635; + --color-lime-500: #84cc16; + --color-lime-600: #65a30d; + --color-lime-700: #4d7c0f; + --color-lime-800: #3f6212; + --color-lime-900: #365314; + --color-lime-950: #1a2e05; + --color-green-50: #fafffb; + --color-green-100: #f0fff3; + --color-green-200: #d4fedc; + --color-green-300: #aafbb7; + --color-green-400: #77f48a; + --color-green-500: #44e858; + --color-green-600: #1dc831; + --color-green-700: #168322; + --color-green-800: #12611b; + --color-green-900: #0e4514; + --color-green-950: #0c3b11; + --color-emerald-50: #ecfdf5; + --color-emerald-100: #d1fae5; + --color-emerald-200: #a7f3d0; + --color-emerald-300: #6ee7b7; + --color-emerald-400: #34d399; + --color-emerald-500: #10b981; + --color-emerald-600: #059669; + --color-emerald-700: #047857; + --color-emerald-800: #065f46; + --color-emerald-900: #064e3b; + --color-emerald-950: #022c22; + --color-teal-50: #f0fdfa; + --color-teal-100: #ccfbf1; + --color-teal-200: #99f6e4; + --color-teal-300: #5eead4; + --color-teal-400: #2dd4bf; + --color-teal-500: #14b8a6; + --color-teal-600: #0d9488; + --color-teal-700: #0f766e; + --color-teal-800: #115e59; + --color-teal-900: #134e4a; + --color-teal-950: #042f2e; + --color-cyan-50: #ecfeff; + --color-cyan-100: #cffafe; + --color-cyan-200: #a5f3fc; + --color-cyan-300: #67e8f9; + --color-cyan-400: #22d3ee; + --color-cyan-500: #06b6d4; + --color-cyan-600: #0891b2; + --color-cyan-700: #0e7490; + --color-cyan-800: #155e75; + --color-cyan-900: #164e63; + --color-cyan-950: #013138; + --color-sky-50: #f0f9ff; + --color-sky-100: #e0f2fe; + --color-sky-200: #bae6fd; + --color-sky-300: #7dd3fc; + --color-sky-400: #38bdf8; + --color-sky-500: #0ea5e9; + --color-sky-600: #0284c7; + --color-sky-700: #0369a1; + --color-sky-800: #075985; + --color-sky-900: #0c4a6e; + --color-sky-950: #082f49; + --color-blue-50: #fafdff; + --color-blue-100: #f0f9ff; + --color-blue-200: #d4ecfe; + --color-blue-300: #aad7fb; + --color-blue-400: #77baf4; + --color-blue-500: #4496e8; + --color-blue-600: #1e76cd; + --color-blue-700: #18538d; + --color-blue-800: #123a61; + --color-blue-900: #0e2a45; + --color-blue-950: #0c243b; + --color-indigo-50: #eef2ff; + --color-indigo-100: #e0e7ff; + --color-indigo-200: #c7d2fe; + --color-indigo-300: #a5b4fc; + --color-indigo-400: #818cf8; + --color-indigo-500: #6366f1; + --color-indigo-600: #4f46e5; + --color-indigo-700: #4338ca; + --color-indigo-800: #3730a3; + --color-indigo-900: #312e81; + --color-indigo-950: #1e1b4b; + --color-violet-50: #fcfaff; + --color-violet-100: #f6f0ff; + --color-violet-200: #e5d4fe; + --color-violet-300: #cbaafb; + --color-violet-400: #b284f5; + --color-violet-500: #a265ec; + --color-violet-600: #9457ea; + --color-violet-700: #48188d; + --color-violet-800: #321261; + --color-violet-900: #240e45; + --color-violet-950: #1f0c3b; + --color-purple-50: #faf5ff; + --color-purple-100: #f3e8ff; + --color-purple-200: #e9d5ff; + --color-purple-300: #d8b4fe; + --color-purple-400: #c084fc; + --color-purple-500: #a855f7; + --color-purple-600: #9333ea; + --color-purple-700: #7e22ce; + --color-purple-800: #6b21a8; + --color-purple-900: #581c87; + --color-purple-950: #3b0764; + --color-fuchsia-50: #fdf4ff; + --color-fuchsia-100: #fae8ff; + --color-fuchsia-200: #f5d0fe; + --color-fuchsia-300: #f0abfc; + --color-fuchsia-400: #e879f9; + --color-fuchsia-500: #d946ef; + --color-fuchsia-600: #c026d3; + --color-fuchsia-700: #a21caf; + --color-fuchsia-800: #86198f; + --color-fuchsia-900: #701a75; + --color-fuchsia-950: #4a044e; + --color-pink-50: #fdf2f8; + --color-pink-100: #fce7f3; + --color-pink-200: #fbcfe8; + --color-pink-300: #f9a8d4; + --color-pink-400: #f472b6; + --color-pink-500: #ec4899; + --color-pink-600: #db2777; + --color-pink-700: #be185d; + --color-pink-800: #9d174d; + --color-pink-900: #831843; + --color-pink-950: #500724; + --color-rose-50: #fff1f2; + --color-rose-100: #ffe4e6; + --color-rose-200: #fecdd3; + --color-rose-300: #fda4af; + --color-rose-400: #fb7185; + --color-rose-500: #f43f5e; + --color-rose-600: #e11d48; + --color-rose-700: #be123c; + --color-rose-800: #9f1239; + --color-rose-900: #881337; + --color-rose-950: #4c0519; + + /* alpha white/black (colors.alpha.*) */ + --color-white-100: rgba(255, 255, 255, 0.1000); + --color-white-200: rgba(255, 255, 255, 0.2000); + --color-white-300: rgba(255, 255, 255, 0.3000); + --color-white-400: rgba(255, 255, 255, 0.4000); + --color-white-500: rgba(255, 255, 255, 0.5000); + --color-white-600: rgba(255, 255, 255, 0.6000); + --color-white-700: rgba(255, 255, 255, 0.7000); + --color-white-800: rgba(255, 255, 255, 0.8000); + --color-white-900: rgba(255, 255, 255, 0.9000); + --color-white-DEFAULT: #ffffff; + --color-black-100: rgba(0, 0, 0, 0.1000); + --color-black-200: rgba(0, 0, 0, 0.2000); + --color-black-300: rgba(0, 0, 0, 0.3000); + --color-black-400: rgba(0, 0, 0, 0.4000); + --color-black-500: rgba(0, 0, 0, 0.5000); + --color-black-600: rgba(0, 0, 0, 0.6000); + --color-black-700: rgba(0, 0, 0, 0.7000); + --color-black-800: rgba(0, 0, 0, 0.8000); + --color-black-900: rgba(0, 0, 0, 0.9000); + --color-black-DEFAULT: #000000; + + /* fonts (шрифтовые файлы китом не публикуются — без них fallback) */ + --font-heading: 'TT Fellows', sans-serif; + --font-base: 'PT Sans', sans-serif; + /* font-weight (utilities: font-regular/medium/demibold/bold) */ + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-demibold: 600; + --font-weight-bold: 700; + + /* font-size (--text-*), line-height (--leading-*) из типошкалы кита */ + --text-100: 0.75rem; + --text-200: 0.875rem; + --text-300: 1rem; + --text-400: 1.125rem; + --text-500: 1.25rem; + --text-600: 1.5rem; + --text-650: 1.875rem; + --text-700: 2.25rem; + --text-750: 3rem; + --text-800: 3.75rem; + --text-900: 4.5rem; + --text-1000: 6rem; + --leading-100: 0.7857rem; + --leading-150: 0.8571rem; + --leading-200: 0.9286rem; + --leading-250: 1rem; + --leading-300: 1.0714rem; + --leading-350: 1.1429rem; + --leading-400: 1.2857rem; + --leading-450: 1.4286rem; + --leading-500: 1.5rem; + --leading-550: 1.5714rem; + --leading-600: 1.7143rem; + --leading-700: 1.8571rem; + --leading-800: 2.2857rem; + --leading-850: 2.3571rem; + --leading-900: 2.7857rem; + --leading-1000: 3.3571rem; + --leading-auto: auto; + + /* border-radius */ + --radius-100: 0.25rem; + --radius-200: 0.5rem; + --radius-300: 0.75rem; + --radius-400: 1rem; + --radius-500: 1.5rem; + --radius-none: 0rem; + --radius-max: 71.3571rem; + + /* spacing: множитель для p/m/w/h/gap/inset/… (v4: calc(var(--spacing)*N)) */ + --spacing: 0.25rem; + + /* shadows (box-shadow, {colors.alpha.*} раскрыты) */ + --shadow-100: 0 0 0.1rem rgba(0, 0, 0, 0.2000); + --shadow-200: 0 0 0.25rem rgba(0, 0, 0, 0.2000); + --shadow-300: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2000); + --shadow-400: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2000); + --shadow-500: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2000); + --shadow-none: none; + + /* transition easing (--ease-*) */ + --ease-linear: linear; + --ease-in: cubic-bezier(0.55, 0.06, 0.7, 0.2); + --ease-out: cubic-bezier(0.2, 0.6, 0.4, 1); + --ease-inOut: cubic-bezier(0.65, 0.05, 0.35, 1); +}