{"_id":"@sarafa2n/vkui-tokens","_rev":"31-469e64b1f795734ce53bae1e515d3ec6","name":"@sarafa2n/vkui-tokens","dist-tags":{"rc":"4.0.0-themes.43","latest":"4.0.0-themes.1"},"versions":{"4.0.0-themes.1":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.1","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.1","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-b/Vb8PppL+3ZMN4HEcPsw3XFhoXCKOyqNFkkiOh7IxYW6eJOwiYlalMbMcZ0YAa2NM+1uCPPPkjN8UQGlXND5w==","shasum":"35064eb474e5b964dcbfe481f855249648c85757","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.1.tgz","fileCount":776,"unpackedSize":21511925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2ZrOCRA9TVsSAnZWagAAZmcP/jf7SjJXlUHfknMoN2rX\nm+f+AWPR14DhCMYXi4E8susZxbMiYIYsebf+8WH/naB38+i6nGHAeZ9sZRSC\nIVDvLzuxuhPX7mppyCulGnEMR+8Ro4kiSzvzN32nWFRjy3GDYB3EiNWLtw5q\nvjMKvHImVFsE4LP5xsKd0pWkh9XZvatO8zU3O0eLNGhyXDQFincNucR4BXNr\n4vR9Cmktrw64XuQyKW0I5r57nkrENpGQUNuygZUix5MorJYAJfN5c89KftfU\nawmrIYyGzUAZM0XhROrck/a9QH5j8U0aURbhcmwIr7QVwt/TF7M8mxELOVMu\nuJAtFCEHH4G4VR/a5q90BWuu93t4KbSBNgWWqdFaqRV1NGhp8d87Y39CvfZA\nL2f57u1pA4QD0OkZRww1Y7twn5C2nWML9n/aa7KAmAxEsxQ5JjJVX48KtOkh\n/b86pOgEXaUWfcjoKWX1ZyFBkAfmF4pQYZEQjYMkzCbh3l/1V0JwyT/YrHPl\nY7uVOx63xghSWo33kOWKnfldtUE0Bd+w394EhdFsTqAoyvgAlKhGOft3FAAy\nGJNeqy0kRLPZIqA/cQ8yxYIsY8wMTXN0VkInXaCSIFCpbo2Q3pdZD7gPQpCN\n+YxN4AUQTNagDGm9BYR8AZSKTYZkCyKNdGhFIWNsFUV3vIq94TZhWJKImazM\nbwT5\r\n=17Bw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHEHxCk29x/aqt6Vn4natchN5a1AvVzj0Dzd9hTJuSrAiEA6V7Hol6xJk822FCEKLvw0GjwB/DrUbP7zgPdS1hDHPE="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.1_1629108191540_0.7171219483249376"},"_hasShrinkwrap":false},"4.0.0-themes.2":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.2","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"![\"vkui](\"assets/vkui_logo.png\")
\n![\"vkui](\"assets/logo.svg\")
\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.2","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0hV8Y/M0ghY3HXEuULFQdDQSb5/w5nsbZOKBCXvgsDVkXNnT+s97Pf9HqOo/o0qv/rRueG0lUa8CID+Hqq0rBQ==","shasum":"05babf92f1aab6c95a8289cfff8e6f3fd236ea8a","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.2.tgz","fileCount":776,"unpackedSize":21849421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG66XCRA9TVsSAnZWagAAJrkP/irD24Dm7r/M0K31g2aD\nxBoXIQntW3XTRpiavCZ0q9HENHbNjWsCydLIm9JmTvBoiofhVDfziRzNkKNt\nlPxQq/XRdDDoJ3XoMaAjaC1Q/otgHh+DCBSa3KhCjE1jqbmjPeRRndUO1nQs\nduYiGEtTpg+LS0Bxt5myKtFAgWJT0EwUSQtdQ2ZXZ0jCTbkVKm7bIIhYr5NE\nxXKVnmB/DjaJG0ZbCN3MSUMjqZdUFGehCzIHh3hwsAY4ID3J6r1obTkNHTvc\nfW+isIW4aD7Ed/wSVMYjnJPX0RZFVP5xIDN71Gv4DJxPieSf+9fjqeDLkF7N\ngP5Agal874t21li4V7M1IW03xEbK1qvzvzEyT52VZ+VipjnSbnc21Vz+A07m\nzDwNRHnc9iEBG9Jla2sMgfyXXn84KQPgzfxaDnkd5yyANamfv8hnmG1OewAv\nVgVDqA+FtrjuR3HV6e7vm3OGPEmqaER+kFY5QWPBKM9GIPQkcnEb/9TSJ3lL\nIFlBvi6Xudk0fGoyJMsN2I8VJxtQdmGGwhNqhDfr3T0lcwTIyQ9u+BJFr2e9\nai0Dv8ysJ1/S7SalSSqj3I/cx+0YSFEyYIBjS/wDy7IFSGdFQb1YN/9ksfUM\njrVFuXHVKSJrgOtKF4UEfgx/f7Sfn+dtct1FEmCX3eduiF6ceRP6nLyKO+sS\nAz1U\r\n=HUwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGbpF8bHqzXeRNbNV222By69cteo4V96hS54NVvQCwwAiEAwxot6kEU43LfYmqEz6jXdVzQwQpSDAMvoH+UXtdqoVo="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.2_1629204119570_0.8990431258637326"},"_hasShrinkwrap":false},"4.0.0-themes.16":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.16","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"4d54ce88826c295899ccedb3bb6a326f2021812b","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.16","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-RG0w1Sb9lngbdyP2fAzJmfBF/WK2XeD3EnYsR2dUcb+mrvdZPYOPD3pI99JjiSBuQT27uPa07nKA+XQyx4QRzg==","shasum":"7018616952a43f3df8b89701170c11d95b4efcb6","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.16.tgz","fileCount":776,"unpackedSize":22587267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQFicCRA9TVsSAnZWagAA3G0P/1krel8T0k7HiqtKnAZN\nMYjMjnsx8lVESgD1U2EUC1sfZ9CEyJHaBNnQNFZNrxuXlGLeOuUS0lKafoxM\nDDSLisCTyp6pI8Tk3UfHeXlgpjY5YPsVjzEBomqggdFyY6gWxKJOigWV0kvR\n1XnokOfnmtuJEBzrxX/0/ZtSiCD9sbbR5zgUvNADkcqgsEtrXq55hQBjUN0q\nYq4ygt+KP9s1TSF3WgYCiKtAXkz8a31ChpUlQM2p7yvTNdLSS+PPX6RuTqHn\nRvC37tQy7ev5DoEeH1E7zvWv4tT0arui93BByuCrQ+FtX7FVHegXpJcLvyu9\nc8oZMV/90/k7YQt+uOxyY3MIoYUsNczlmax+XLCrXkcIn46l+jhQfAR+J8fv\n+PUazSfaSSfZW4Vre3pleAXtifU6mdHunhu5wxHiXlLbDZ7ZON+J7rYcGdPX\ncEL585Jn6zvq3BADKfU1jKpghcosTTEGjp3ldP92DuOsd8s31jZPZ3w98Ytk\nD3Ixtd8mugvD0YcWGsfq+RiEtpkf6jeuiRHOkBdrA9rs3PacWvGjwzZOyawZ\ntsLcV3aLWXhCbGzIZhaAfxdxiG4AYEh/LrNrXLWYn5IGaGmd2qwrcwmPSTZ5\nfZI/oRDzKA2HrphOTuoPvxCxCbsXLj7l1AiLMkpoLFrKzzvtFu76aWbd92V8\nbAbT\r\n=S/jF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVdmEw8md0F86yeKMKWf8OAalm9u53yIyHhQwPibVFtAiAipMsp9dG8Vs2uao5l4dKEv0tFqCc0xfbVOHWJL50xXg=="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.16_1631606940676_0.7023753090216172"},"_hasShrinkwrap":false},"4.0.0-themes.17":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.17","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"7690ea2a6792ca54c033ec41dbdff7c68ccdd5a5","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.17","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-3sVA1LrJk68UuFgzdBmN+ljV+nFFvZBqeGxjoIQlINNR3+BUmYsxUpu96er7kwjkzNQ+K+/xtJY+ijQmtW0Gyg==","shasum":"e62f0118660717bb0ef6061e661939b3f88f5b4c","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.17.tgz","fileCount":776,"unpackedSize":22587223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQGK7CRA9TVsSAnZWagAAv70QAIkcbTQDzSvJhAIQ+eIy\nOJ+JH6RlmpFana8Q9a3wr0u8uSihYysrb/EuNafhKV7g+RKN+pyUh1mGamTb\ncOANEuvoV2UlVw8uA8HXvvSJqLPR1Sf6f6vkxcQWpJKDwhvOuKok09xE5Miq\nQK0TN0EeV3Tgr0HRGZVgm7ukmKvduZA4OKjEYa9cz/sgncJbmzP/WsamvT4y\nWZMEQAafEbAxkWG7VoY4+b2y/hVQDKszlq5ue5kMG63eLv/DtWx6mxsNVu9m\neQpIMxTVD5sv5VGGswsJA6quhHOaEPkybkuTlpoEMQwYFzaB5kWND6LIG290\n2MXKV2mgqY6u47XQVg/mnkq0/L5dfRqDFACRGr1/1UfwTe+a5bZP2MAmN6S/\nGCvnOAJpGqk89wHKZ7Lov/1fuvr50cLFocXY+7o+1ekOb/IFRF6Gx4rTpxb4\nvGjp1OfVcKL3FSQxaTMsBN5cFUtsZJ74I+VX3TBAefk442OgCbSDyXIf9Jfk\nqJbAJ/1AfIXR3dmffRcUCnoq/SoFWt86mHdjft6so0Hhpx7iCY+JorMTFBLp\nMv/7DByifYqPQ3gISLoRXZLv10MNHeucnPQYEDf1EJMvcDChuN0uOrt817Ms\nxXzeRIiIl4OFuoqYqGt4H2X4JL0TF0RaOpmX8cRXHMu0WwOf8tcrz0AnoWtn\nQVis\r\n=J3Dy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA23FRQXGTKr9ia2cW3s0YztS1GqoW5dLiOE26BMuJHgIgU03WbFDPKrPX4JWrmUKWN6SJhMnh6DTdJUm0LZYz1BA="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.17_1631609530959_0.7177998918578892"},"_hasShrinkwrap":false},"4.0.0-themes.18":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.18","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"a309f7561d18d88f248822c4f1e992c1535c0c35","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.18","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-HniarDKSvH1ak9BWq68xeE5EXxXcNzZMWe2dwDPaMexSBjvlr15i/V2G7gxUNmvC1ufwEYZQ2hBKcMH01UEdTw==","shasum":"a2deb1928260358fc88b0f70a6b288338c1b97f1","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.18.tgz","fileCount":804,"unpackedSize":22696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQGU3CRA9TVsSAnZWagAA5HIP/18OwVqyk7nNn/K5Q2Kv\nUYIgPTWecOnL4IFEf3z3vAKcfpmYuRXdiw+sRHGlJtDDHAkqUSQ0qYpTF2Ha\nAAfo174gplZoQifuuiDk8HvbePuNCgXfmNH9TxSwkAHU3JvVMqz8W/2ym3pX\ns01EXIRUaQzDP1GiMuN/Wys0ViQDzwzWYNaPgBpjImc2BeFvC4k6sOyl7AXD\nIVrTfh9ns5SrL0ZPcaL7pHprBea47nVNMPGILtrAztMKJlRpIv8bdYHFxay3\nahDIbCoOXvpmgwxBsN2VVmo3u8dDCsfUiSv1lgDp6Sm5VFwbonxxBZX6H8Og\neQyhsBzgETnNnFv1XWxA5cKUPtyH5C6MYasQwzJ1dkCRwgKAhK+QZUIIxy96\noMgueg755FyzrKMFTzqyTiWLgO0cVH3dHTDj9pDh+jWtCo56RNbn+c3mgdDG\nrvRc6N6eTGKGVKGK19a/xKIti8DaAnh6Wqp/Nqz66dyPrQgbf0+Rhd2jw5BC\n69rOyLuR8rYzuboWTkjJov27+alHfjcT8swLjcgPcnch3Qgp7gm+XmFxLN+Q\nv3nQ12uNENZo2Nxc/6tp0rXh2GWNooob4pcYxfa0ONkx5WA169s1XmeVi133\nsrKsq1p3AnG/pWbgFEbBLDkr23/dMpoN7c6acaYVLhmejQOP4smkiOhtnPaE\n7d6b\r\n=pZ8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC4qnfnRctHWPyK/AssaPnyAwA2T2y5Ntt7F8gGJRLuvAiEApzhAuDnrFC1DTbmdjn5pijijldPiy0Qd7Q+T3nudWg0="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.18_1631610166920_0.817149607059463"},"_hasShrinkwrap":false},"4.0.0-themes.19":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.19","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"6487d9bc4e439673f5e1c0e03849bba3a458cf63","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.19","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-yELUmMBG2i2vVHjfBGbxsh25BdxSYSW3FBRx2IKMFMcg6XooBNqLTUNrYmSnFV+AxBHi7eM6eLUs7EJq2m81kA==","shasum":"a15c8ce60c5f130cb58bb17dc079bcfaa7cb5786","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.19.tgz","fileCount":804,"unpackedSize":22696246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQGqlCRA9TVsSAnZWagAAllAP/338ZX9gHHz8Pyvq8Yt2\nRq+WNzUYN0D6+p8nVhgP1XKRp+2Fj7cwEsD2cBLpJy45+LM2N4PrF0is2rfm\nh0zKjTIIYRF1QpYjiETVr6+EjS6XZNALozi6fFSpagXg1stv2Hdgl1zuLXOL\nk83Q65vMXLXRUPdu5LahFyvMwCKvr+Plaz+Pd31YJLPNM5kVX93BvtlV7w/W\nAAVtFo9ndPuwRd/v4nVTAjKoP/uaQ6m917+mmo/YxeIByN/2uUocOuMBc3Ka\nu4uNhE3Zbs74lPU1AoRmkVMcbmS4qqsQd0Cwc8GMIIZ+1BTKo6HZnhsa6l6z\nliG0Wj8tw0fQpGD0vwmk5jxXFSCxd05LFLKw+seS91dBfUFJptUkNxsKv7au\nt363/v/Fc6F9bQYVMZj8ij36KU7Sqn1w147ECIzNtrCTnGjjZ902j64OdxXO\nqUlDdirGpB0GRI4bhFIwc5k5wMSCQO880aW1S7g7De9Rm+lzY78ThH/dCS3B\na3ViLxbtBM+wf+B+d7RY36lQENGX8mkz3X+I3ZzWWP3EN6dAoogSN3VUCYUf\nky5ZT4WLqbK3yw2JKoSexzUg2gm2vFqIzyOvHCYhDJfMKHJ7HSmXIM41Fqef\nmRlG7dN8iQu/Yv4h5P0RqeArlAVjnbgaFXJFxkQu7ukb17EyyQJuW4Ig2Zo2\n3SVV\r\n=3nWy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmwi6YJ0yavSSpk6tBTL2kNFbWm20S+wbzABrje1M3IwIgJj0KP0O6odB2LjFG/NVSLJNaE6F+sZ0w8kEkTc22cKI="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.19_1631611557067_0.6189616524110837"},"_hasShrinkwrap":false},"4.0.0-themes.20":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.20","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.20","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-WLq9N4YsA2u8yynZ+xgch7PST2XfukUEBHemnMc1b9f+PIUSqalqNKbmKacR0SMeYRrfCTcSvF9fY5Dtn2hkyg==","shasum":"96a4282bc478f542a406b048c7f78923330e9baa","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.20.tgz","fileCount":804,"unpackedSize":22697082,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZp8NpmpCnmHSdTbD7wAMazmTuYomyPqNk4jyIRj9kGAIhAJUZX/mAaZbQbTOMw3YtkNJTI+L4DYfiPxfyJc+mxVtf"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.20_1632130005232_0.5548034076038104"},"_hasShrinkwrap":false},"4.0.0-themes.21":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.21","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"bad54204f278e877aeeb7319e4938e653c2ffb78","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.21","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-ve3UHY96HDREcyx7vkn+HDys/7iDW2EntGTjTQLQp4/UWy8IAVk1f9ctdGcQcFgVU+cGPVSNdq4QTEUgXMEaCg==","shasum":"fc7c48b8d66e6b321bca72d93baaeaf016e97c18","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.21.tgz","fileCount":804,"unpackedSize":22696840,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp1AJ/OSIhR076HGK6gRlubZxoZxA1LzqnBQf8sTdsmgIgZRyeExmo9kS2FlxSnWCIypnE18OKmeF/A9q+ET96uUw="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.21_1632130965717_0.437993394501752"},"_hasShrinkwrap":false},"4.0.0-themes.22":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.22","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"31c33f890d96f0389e92fe4ef9f5bee5aef60d1a","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.22","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-gFj2r+M5Sn03SlnI7pbDGDhBK1GejOJy3iBjPkIB2LbrW80UtIju2s1sRS2x4k52mUAhtLu/RfJWrgepiQKzLg==","shasum":"d05ba3640fdbd58f04783f24549e92230880e085","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.22.tgz","fileCount":804,"unpackedSize":22398874,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDEnOuR+MLSd+KwNAlRcaF8Dt3gzG/Bhtsnmj3E2wIKQIgdTnxhMuu2fbfbt/jCjjeTGK+FCJFUWRcPIVrDEsI0Hk="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.22_1632223695235_0.8528687041409162"},"_hasShrinkwrap":false},"4.0.0-themes.23":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.23","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"36b493bd699da25944aa07cdf25d8f227a5520bb","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.23","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-jkpA6YcP5nSLNCibBSwNYQk8I7kXviR4j9/Iftm9N8G5kuiZRO0K0LodybbiKIjp1Nismn1eIhUON1gXVasmxA==","shasum":"e4ac66033ed338c775aeb6d16cf05e86660efb58","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.23.tgz","fileCount":804,"unpackedSize":22362713,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnDGXVt6A8mIohd0L1//kDqdt3j98vIEgxtO5LMXtQWAiEAmbYFPqSAc2jCHnz/sCj95Buuh7LICJ4BOOdMTcd1WAE="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.23_1632239643587_0.7929963131615927"},"_hasShrinkwrap":false},"4.0.0-themes.24":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.24","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"c5bbfdde8663d0115db2b1dda3e927653034bbb1","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.24","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-CmSp2qRHnBbt9eIzbjh3mo7DZi7IIA99XtTWeCHlSTOtB8I2vos841jTsgELZoOLuOYlvlaWfFdEtKv8aaPq+Q==","shasum":"3189659ab866248304f2d35296b6572f6e65748b","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.24.tgz","fileCount":804,"unpackedSize":22300409,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1n4YEpjGrFhgnUvS8Ruh60L83Tcywdu7Zh4SirftydgIgInR6jvYRJBiYrciXOOCcz1VVIPQTvae1cUOJBPt4hL0="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.24_1632242734377_0.09894250035750218"},"_hasShrinkwrap":false},"4.0.0-themes.25":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.25","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"d26a688c6f7a1ec1107e81673978dd9ff4c5679d","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.25","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-7A+8fxXBWMx3r5b07bdQcTnUuz8cWwE+pFfI0NRTsgejTpeQKUypau9nTxxHUWuz+bvuqZ99nzgoi9ADPMUiZA==","shasum":"1a029da501df8b5d07fb683ee6a20c19bcf53bc5","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.25.tgz","fileCount":804,"unpackedSize":22284272,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjyadPLjkNYCp/6WZhDBk7lZdDHyAVrQ+M4nj4wuZFaAIhAIFBlnqp2KNHK52EWBmsw8tv+T9+zja5UYV95r77Wwsg"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.25_1632245253814_0.5356906011659972"},"_hasShrinkwrap":false},"4.0.0-themes.26":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.26","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"c0da1e0d7f8f43607e73a9271724bb38eb684013","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.26","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-o7kIOqZ4sRyQCPXzHuVI07o8iTqgWYIQ3SZUHHWl51ks2h/KXFumi6CNd8tQQYF9/vVPNqhCCjeJAdtfl0KP4Q==","shasum":"4920f56dfac769c694d1f9c98e550dfeb1cc86ba","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.26.tgz","fileCount":804,"unpackedSize":22363552,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOAb5ogO2J/29SJoyZ2aj5KQ1EH6Fj+cEYDXexYNalkAiA4i92VcHMLr/EFPhGLA1EefwPxJeChpGdEpZwntsUhYQ=="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.26_1632302954382_0.6684802441049227"},"_hasShrinkwrap":false},"4.0.0-themes.27":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.27","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"b25589cb0a45a29ef12b078ef279a8feeca5113a","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.27","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-FpastcEsOoKyuxN0ithQB0mI/a3duVagwclgipb1W61y/rGeSoRJ6CtCJh2aj4X9VfhCnudNcUe9hk43NLv4Tw==","shasum":"8ddb110d1c914105a6b548990c42a347f0432a7b","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.27.tgz","fileCount":804,"unpackedSize":22414140,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5VOOUrYqU93TUGkz9Ctjyqk6jJolP63AarNUrVS2T1AIgOFolhEr3JQF6kMLob0X5cHPS/w7xOh0tJWqxeJJfitc="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.27_1632306626672_0.7621115912221486"},"_hasShrinkwrap":false},"4.0.0-themes.28":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.28","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"8af7e354cf4570f2b136c8c3d9fe38fae141f215","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.28","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-5qWnvNiqv0kLL2Rd0loti5J8NFIgYr0ht2/LyP8L084W2COadvaRegAyf/hsPsBxbCEdiPj+9xNMlvQfJYRPZw==","shasum":"5e123535beace1f00bf79815b19c552e64c01a8f","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.28.tgz","fileCount":804,"unpackedSize":22370703,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYWuEZvPlmjIg4ZqzDADLUe3hT/SXpzzJX1L1F87ymNAIhAI/q0GDlb6zDEOVroWt89DPyW/xZcLwa673jv3F0moGm"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.28_1632316186402_0.7127944098045205"},"_hasShrinkwrap":false},"4.0.0-themes.29":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.29","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"4a23a8f161a65722b1d28ac3a79aca95397e0a22","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.29","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-l7I9QwZIahMX71qUB0A5L78qmMMsslNvaQlAEmFdSbb12TsBvU62X7Jc5Sq31IaQWNTzcjf80rOMdiEKWShtmA==","shasum":"7be39e63b29ae76912930e3649c0d5563ffc31b3","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.29.tgz","fileCount":804,"unpackedSize":22222980,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/ByP4HhxDEw5lG/DzJThpRJSS67o/sTACHpVmKfGN+AIgG/pGGnLRf9PZCHrfDVV1efisopULKHbm8Ew9lnPe6S4="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.29_1632317867538_0.06995706328805906"},"_hasShrinkwrap":false},"4.0.0-themes.30":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.30","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"894c3b3111990ea0a242e6ace3607b9cd4d1fc77","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.30","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-Fh21NBVYkThH78guJOjKB5Cz0+nzPabEdxhNccCTtwuVg0IAEjUiwVsUWhLl0s0GiJxjEY3os/rREVAvCG28jA==","shasum":"7fbd45e0252ae529c07ff4dd486a38a60280d500","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.30.tgz","fileCount":804,"unpackedSize":22305142,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpxaspjxI7sN8/7GnYDh+5PzUuZBXtt9j3cnvmfWrNzAIhAN4Mo9HkT8CYk7hgy8TBESYNzSm+mTPc87KG3pNP8mz1"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.30_1632320898752_0.5387645962583372"},"_hasShrinkwrap":false},"4.0.0-themes.31":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.31","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"e181e91e73281aacee327d152b967e2dc0e2e89f","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.31","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-WJ1TlJ0PfR9QU9st2MYjO5gV5FewLL8qfNftlG3e3gDu03EQeJzKE5RqpDhBr8Q8TM2fs3bwNCxr09NFvNMZHg==","shasum":"4ac3ebacb034b91f3393caadf600d5908d7f2800","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.31.tgz","fileCount":804,"unpackedSize":22301047,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVu1LGlixvZYouNpm16RITGAhJp0K4BoOeOn9k93gzqAiAWDEduXcnpJkcnmtbi+WqppuwfMWBWrbmcFcRafoWE4w=="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.31_1632329604042_0.91309533858614"},"_hasShrinkwrap":false},"4.0.0-themes.32":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.32","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"8649c9b9b58dab00b026aaa6ad34eb75d77d8e0e","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.32","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-GUhx4HeeF8Tyg9qyZJ8NkCq4smESRfBuls4+facjX6jn5dM5Gur4d8V3h2EwslmN+PSN7o21sh4V5my9+Lb5pw==","shasum":"78ed846bdc87ff86ae7fbbb20132477e91ff85ab","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.32.tgz","fileCount":804,"unpackedSize":22303687,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpHahERK9IOZgZ4u/AQqghrHCAD7LKaoQTarQbH1ETnwIhAL5w7ey4IvALbFpXs0saXPKIlZ1XiFmS5jDHDWZvZW6Z"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.32_1632332431603_0.26650487947353896"},"_hasShrinkwrap":false},"4.0.0-themes.33":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.33","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"e2f7426d2046b1ebc6a4837a344774d21a49d21e","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.33","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-kkR+uiywmDdc68evuzghaagOqtWPUlvbQdS0tA2/aI6UYwbQDXT31kV1vX8IpSnvYUD8labc0eKzpTvopyaDHw==","shasum":"d5d5a75aef03d8ce81a5541c1aa9e8283d0d96f7","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.33.tgz","fileCount":804,"unpackedSize":22303687,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk7VfvxTR7/6yFe+AIv0BbPb83JrqRAb/qXiLGPXsMWgIhAPt63h5oiIRFV6zUrZi6DMBfa7ToEU3nSyXjobSSniik"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.33_1632333634615_0.0976890893774165"},"_hasShrinkwrap":false},"4.0.0-themes.34":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.34","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","gitHead":"d322b45f0ca3cbf4d0d32fbbc47345407c779aa1","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.34","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-bdUtWpstXhB29UdlphXrPka+6yEnRaIxGKzX0MtJIOfXwZBw7k6N8xRWhCwnvGMYmOx0V9HBrqIKNVt4wDvHfA==","shasum":"19f6874f9164e1968bc96b5ec0e2210b83be8e4c","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.34.tgz","fileCount":804,"unpackedSize":22210012,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfUMB3gELspE4yckwd5RTTrcPcTxlH6uMgbAFxWjIiQAiAk/epCh7xTUk7XSEzF5zK/6RXocDMNbXug0+LRqAeMxA=="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.34_1632398023201_0.4999379755361666"},"_hasShrinkwrap":false},"4.0.0-themes.35":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.35","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.35","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-WqwjFyIM875mrYykIYeSLlIB0Tq2jBCrXt2tBxxUUC4V6wvAB8JPYANgFiMOrHo98uTKlQMW3Y/da+PDsrVk5A==","shasum":"28fa91fc2b1ebc6c877df8cb7018469952e79f6c","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.35.tgz","fileCount":804,"unpackedSize":22470494,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbRw+OjxwBU9NMn7hgxd1bNwrexoYd9Q4XOcugvs+p4wIgfaugKVAIa6CaSRU+HW/3Q3NEVq8jqX58N71J8mDCMIk="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.35_1632475569253_0.3480140155767446"},"_hasShrinkwrap":false},"4.0.0-themes.36":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.36","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.36","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-GopBVi3NdaJ60k6CipWazvVdrKmGHHo05shyAMeCkIPFCb3A8dOC/zX84PttdEzho/BvF8D/6fG8dYW2G3ITvg==","shasum":"d34389ba531af984b24ed1188edcee424931e48f","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.36.tgz","fileCount":804,"unpackedSize":22470538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCga5Me68qD0CMiSXHz02Ax/fGu18rpeMNlxal1FJ6YpQIhAJJc5a22Yr+gL4UMroWNeRk2W1twX+afjbGZ0S36fDxj"}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.36_1632489411539_0.1188970174048094"},"_hasShrinkwrap":false},"4.0.0-themes.37":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.37","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.37","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-4EF+i7iwK9ejho4BVZFgWU92orWuud6Yf5xZI8/r/73yAcvyy47rikYSVHmBSla9M/5okTy5/+3iUFmvOoPkzg==","shasum":"2665165f021418c980bbf555bd8ced98f61a3a38","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.37.tgz","fileCount":804,"unpackedSize":22470538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBs7Sy70rOY9C1CGLXmM6m1MR8iBQpU9eGZwzkEpYkXEAiEAjqFZqhIGiwtxvQARhfXFyAwQTb6wfZRM1KMQOw7ddTQ="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.37_1632497119091_0.35369807364104866"},"_hasShrinkwrap":false},"4.0.0-themes.38":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.38","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.38","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-xxHjMGmr5GALHKNWXmzrSzo1QxZhIXIUu3dANSF/t3p+fQg64JKKdBW7xzAMEcoLGRDKOtL/i2/Anz+4WB8A7w==","shasum":"cc16202c2724e0a400125aac5ffadcfa504df394","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.38.tgz","fileCount":804,"unpackedSize":22470538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSYojmulhAoQtqR/3GtN5572RBihbwkaycZiBneA2Z3wIgchDKHdd2o7sex5RstqckZFRSyYHMIEV6EqE9pdQs4B0="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.38_1632498866116_0.16015764110947872"},"_hasShrinkwrap":false},"4.0.0-themes.39":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.39","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.39","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-VSJxuxSx4akTSShcBG4w5QgGWx1bTQnL+WMeHtAu/9G3XltyFVCoGyvvh4DlFaTyfGYXV0eLm598+9ZZcn/Lzw==","shasum":"294bfd51857ad802e9d90408ca58355e02d9143a","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.39.tgz","fileCount":804,"unpackedSize":22470538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwzI22PkVjXDFQCzQSOk6IGiEtZU8UPnxpESE69N2NoAIgYDJ5GDiM9M7aB5jn1CChYUl2LYtGJJZBvnHuzoKz5FI="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.39_1632731538594_0.8670577784347737"},"_hasShrinkwrap":false},"4.0.0-themes.40":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.40","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.40","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-nSMFX8aZN/chUbmi9HdeIJaZqyWh5mjOuWIgJq2DwElZA1qbhjvv31dWItfFZVu5Sy0HHAmmPKHCmEyj92AkzA==","shasum":"eb975d194bc2d4bc03f488bc8518654b19d6a739","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.40.tgz","fileCount":804,"unpackedSize":22471660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSgtpsO3MYrg052hOye0NB8asJPSVoa543NEq2wvaWWAiEAySxog70OJSGwBBjMt/Ekt5b62PwmDc88JwjzkYGYaoM="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.40_1632732324777_0.8890203382812396"},"_hasShrinkwrap":false},"4.0.0-themes.41":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.41","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.41","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-wm7AugxzfQCx3oaHpkx91WrDe8aqURD1nI9KjoJPHkUbNuekECONyD5iYcZaneewpepNVd88qfJ5T3VmNgJvZQ==","shasum":"eae0f93c7a70bb9910bc79c1165c09d2d645a77c","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.41.tgz","fileCount":804,"unpackedSize":22470736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMs+c+88s1MOc7bpcQeg6WC88zrAUT61pU/u3FiDtiEAiEAg70BrXmd4tFf2pbqFrvUoMTmPxvOlPcC15aZVw4uI/w="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.41_1632733709555_0.9931561642248468"},"_hasShrinkwrap":false},"4.0.0-themes.42":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.42","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.42","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-M1e48UcnOxgNhjZ/siRpBzXkJr38x4ZW/ji3cMHDSIGaEu+SRQrmqXzXPLHiV0G+HASzu6Osn7oge02E1jor3Q==","shasum":"83225f95687b84d0ea152baf893013759a90f674","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.42.tgz","fileCount":804,"unpackedSize":22469570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoXd+TOCj2QO4j9XP97gvWy4LJRgqY5glBi25WUTJhbwIgTHynuoqwt+vFBVg6n6hDIhQkeYGmf8U8Y0z4VZ47W9E="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.42_1632734745778_0.06667350103849778"},"_hasShrinkwrap":false},"4.0.0-themes.43":{"name":"@sarafa2n/vkui-tokens","version":"4.0.0-themes.43","description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","license":"MIT","main":"utils/descriptions.js","scripts":{"build":"npm run build:script && npm run tsc:generate-paths && npm run tsc:dist","build:local":"npm run build && npm run clear:dist","prepublish:dist":"npm run clear:src && npm run build","publish:dist":"npm run prepublish:dist && cd dist && npm publish --access=public","build:script":"ts-node -r tsconfig-paths/register src/build/index.ts","lint":"TIMING=1 eslint ./src --ext .ts","lint:fix":"npm run lint -- --fix","tsc":"tsc --project tsconfig.json","tsc:dist":"tsc --project tsconfig.publish.json","tsc:generate-paths":"tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist","test":"jest --coverage","test:ci":"jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"","clear:src":"find src -name '*.d.ts' -delete && find src -name '*.js' -delete","clear:dist":"find dist -regex '.*[^d]\\.ts' -delete","open:coverage":"open .coverage/index.html"},"repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"dependencies":{"csstype":"3.0.8"},"devDependencies":{"@types/color":"3.0.1","@types/common-tags":"1.8.0","@types/fs-extra":"9.0.11","@types/jest":"26.0.23","@types/node":"15.0.1","@typescript-eslint/eslint-plugin":"4.22.0","@typescript-eslint/parser":"4.22.0","color":"3.1.3","common-tags":"1.8.0","css.escape":"1.5.1","eslint":"7.25.0","eslint-config-prettier":"8.3.0","eslint-config-silence":"0.7.1","eslint-import-resolver-alias":"1.1.2","eslint-plugin-compat":"3.9.0","eslint-plugin-import":"2.23.4","eslint-plugin-jasmine":"4.1.2","eslint-plugin-prettier":"3.4.0","eslint-plugin-simple-import-sort":"7.0.0","eslint-plugin-sonarjs":"0.9.1","fs-extra":"9.1.0","jest":"26.6.3","jest-junit":"12.0.0","lodash":"4.17.21","prettier":"2.2.1","release-it":"14.10.0","rimraf":"2.6.1","ts-jest":"26.5.5","ts-node":"9.1.1","tsconfig-paths":"3.9.0","tscpaths":"0.0.9","type-fest":"1.0.2","typescript":"4.2.4"},"readme":"\n\n\n# Использование\n\n1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:\n```bash\nnpm i --save @vkontakte/vkui-tokens@latest\n```\n## Используем css variables темы напрямую из пакета\n2. В любом css (или процессоре) импортируем css файл с объявлением переменных:\n```css\n@import \"@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css\";\n```\n\n3. далее используем эти переменные\n* напрямую в css (процессорах)\n```postcss\n.myAwesomeClass:hover {\n\tbackground-color: var(--vkui--color_background--hover);\n}\n```\n* или через объект в js(ts)\n```typescript\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';\n\nconsole.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;\nconsole.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)\n\n// динамически (с учётом возможных переопределений)\n// узнаём чему равно значение переменной у myElement:\ngetComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)\n```\n* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)\n\n\n## Используем root темы напрямую из пакета\n### js/ts/json\n2. Импортируем необходимую тему в файле и используем:\n```ts\nimport baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';\n\n// do whatever you want with baseTheme\n```\n\n### Используем в scss/styl/less root темы из пакета\n2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)\n```scss\n@import \"~@vkontakte/vkui-tokens/themes/vkBase/index\";\n\n.myAwesomeClass {\n\tbackground-color: $color-bg;\n}\n\n.myAwesomeClass:hover {\n\tbackground-color: $color-bg--hover;\n}\n```\n\n\n### Используем pcss формат темы из пакета\n\n2. Заходим в файл, где хотим использовать тему, и импортируем её:\n\n @import \"@vkontakte/vkui-tokens/themes/vkBase\";\n\n3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:\n\n width: var(--size-content-block-width);\n\n4. Просто так ничего не заработает, нужно поставить postcss:\n\n npm i --save-dev postcss\n\n Для запуска у postcss есть командная строка, которую тоже надо установить:\n\n npm i --save-dev postcss-cli\n\n5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:\n\n ```javascript\n const postcssPresetEnv = require('postcss-preset-env');\n\n module.exports = {\n \tplugins: [\n \t\trequire('postcss-import'),\n \t\trequire('precss'),\n \t\trequire('postcss-css-variables'),\n \t\trequire('postcss-custom-media'),\n \t\trequire('postcss-media-minmax'),\n \t\trequire('postcss-extend-rule'),\n \t\tpostcssPresetEnv({\n \t\t\tstage: 0,\n \t\t}),\n \t\trequire('postcss-color-mix'),\n \t\trequire('cssnano')\n \t],\n };\n ```\n Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).\n Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.\n\n6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:\n\n npm i --save-dev postcss-import\n\n7. Настраиваем сборку postcss.\n\n Сборка производится командой postcss через командную строку с необходимым параметрами.\n Про них подробнее тут https://github.com/postcss/postcss-cli\n\n Пример команды:\n\n postcss src/main.css -c ./ --dir public\n\n Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.\n\n## Локальная сборка своих тем инструментами библиотеки\n\n### Наследуемся от базовой темы\n2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.\n Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:\n```typescript\nimport type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription extends ThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\t...baseTheme,\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n### Собираем локально свою тему (набор своих локальных переменных проекта)\n2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:\n```typescript\nimport type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';\nimport {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';\nimport {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';\n\ninterface MyNewAwesomeThemeDescription {\n\tmyNewAwesomeToken: Adaptive;\n}\n\nconst myNewAwesomeTheme: MyNewAwesomeThemeDescription = {\n\tmyNewAwesomeToken: {\n\t\tregular: 20,\n\t\tcompact: 12,\n\t},\n};\n\n// получаем разные типы тем на основе описания\nconst {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);\n\n// получаем CSS-строку со всеми переменными темы,\n// которую можно вставить в DOM или сохранить в файл\n// буквально тут содержится:\n/* \n:root {\n\t--vkui--my_new_awesome_token--regular: 20px;\n\t--vkui--my_new_awesome_token--compact: 12px;\n}\n */\nconst cssString = compileStyles('css', pixelifyTheme);\n```\n\n# ROAD MAP библиотеки\n* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).\n\n# Полезные ссылки\n1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.\n2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)\n3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.\n4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","_id":"@sarafa2n/vkui-tokens@4.0.0-themes.43","_nodeVersion":"12.18.2","_npmVersion":"6.14.11","dist":{"integrity":"sha512-A481sI8A3+7FwBu+62nmA8dcIllmvGUTTDXdRaoX8ladrI6lzApmAuK+kwA3BW8ep5Cwk6YMkCnzQV/CIutPaQ==","shasum":"8de4a975ae23a49713d4a09b78ab8713519c846f","tarball":"https://registry.npmjs.org/@sarafa2n/vkui-tokens/-/vkui-tokens-4.0.0-themes.43.tgz","fileCount":804,"unpackedSize":22470450,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJ4B+R631rUm02kkZpwTiU5cREtYgLMaK5stjaJD6K2AiBNutA1o0UiG7KUcPW+R/9T2z30Vj4XbC7JmaH8XZw82A=="}]},"_npmUser":{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"},"directories":{},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vkui-tokens_4.0.0-themes.43_1632736742544_0.3328799816943626"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-16T10:03:11.420Z","4.0.0-themes.1":"2021-08-16T10:03:11.685Z","modified":"2022-04-06T21:41:57.504Z","4.0.0-themes.2":"2021-08-17T12:41:59.808Z","4.0.0-themes.16":"2021-09-14T08:09:00.936Z","4.0.0-themes.17":"2021-09-14T08:52:11.340Z","4.0.0-themes.18":"2021-09-14T09:02:47.160Z","4.0.0-themes.19":"2021-09-14T09:25:57.427Z","4.0.0-themes.20":"2021-09-20T09:26:45.577Z","4.0.0-themes.21":"2021-09-20T09:42:45.941Z","4.0.0-themes.22":"2021-09-21T11:28:15.537Z","4.0.0-themes.23":"2021-09-21T15:54:04.075Z","4.0.0-themes.24":"2021-09-21T16:45:34.888Z","4.0.0-themes.25":"2021-09-21T17:27:34.162Z","4.0.0-themes.26":"2021-09-22T09:29:14.749Z","4.0.0-themes.27":"2021-09-22T10:30:27.002Z","4.0.0-themes.28":"2021-09-22T13:09:46.637Z","4.0.0-themes.29":"2021-09-22T13:37:47.802Z","4.0.0-themes.30":"2021-09-22T14:28:19.013Z","4.0.0-themes.31":"2021-09-22T16:53:24.431Z","4.0.0-themes.32":"2021-09-22T17:40:31.883Z","4.0.0-themes.33":"2021-09-22T18:00:34.852Z","4.0.0-themes.34":"2021-09-23T11:53:43.543Z","4.0.0-themes.35":"2021-09-24T09:26:09.536Z","4.0.0-themes.36":"2021-09-24T13:16:51.879Z","4.0.0-themes.37":"2021-09-24T15:25:19.392Z","4.0.0-themes.38":"2021-09-24T15:54:26.374Z","4.0.0-themes.39":"2021-09-27T08:32:18.867Z","4.0.0-themes.40":"2021-09-27T08:45:25.284Z","4.0.0-themes.41":"2021-09-27T09:08:29.858Z","4.0.0-themes.42":"2021-09-27T09:25:46.076Z","4.0.0-themes.43":"2021-09-27T09:59:02.863Z"},"maintainers":[{"name":"sarafa2n","email":"alex.sarafa4n@gmail.com"}],"description":"Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm","homepage":"https://github.com/Sarafa2n/vkui-tokens#readme","repository":{"type":"git","url":"git+https://github.com/Sarafa2n/vkui-tokens.git"},"bugs":{"url":"https://github.com/Sarafa2n/vkui-tokens/issues"},"license":"MIT","readme":"","readmeFilename":""}