{"_id":"@sberdevices/plasma-tokens","_rev":"297-88f97ddf89e64fcc6e46b03a47ab9567","name":"@sberdevices/plasma-tokens","dist-tags":{"latest":"1.17.0","canary":"1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","rc":"1.0.0-rc.7"},"versions":{"0.0.2":{"name":"@sberdevices/plasma-tokens","version":"0.0.2","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"ts-node ./generate.ts","postgenerate":"tsc src/index.ts -d --outDir lib && tsc -d typo/index.ts && tsc -d themes/index.ts && tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"_id":"@sberdevices/plasma-tokens@0.0.2","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-CkJGQFdlj+S15Wr2sJLMXO4nag1gQx/U83gR+uNUQSINSKTROSbj5VVlyCzJkN48sBib5DZNVyo5J1SreMGTnw==","shasum":"0bb384afa4ccf9eb3146cb7ef51ebad909a8863a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.2.tgz","fileCount":123,"unpackedSize":197758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdbAwCRA9TVsSAnZWagAA+OoP+wa/JfpVZ2HR3mwptKKm\nh3w/mhVHvFo4gEvZ7RO26HYrS+tWm5z1eKs1uY6M2Ng12v2RFz4jBJJ2Y0cE\nhgoGiLKZZmoo5FF+V/teXrTYeaLqTE683UPIuf05uFtInhfNhZZ/BiWrRT/4\nIC35kwwaaxBGPzrgdNPSAcJ2Rw3qTdz3Q9blBmOXTZfyG1nQvgjLfD9cwdGW\nBrHwGaypxx1WYJLVGcpOOF/v4qM/GEI5v3DFvvkXzC8RgRU8V6i2Bh7HGOC8\n8fMEz7i4dPdmBYqAfjlQKgLGLKYJ475Ioba3Pa5+/Kfa79rOpMa3L33NcEWX\n/NjNGTrR5x6EwlVruO7B3j2kGUhOZvB+kROWPC5OVE0lZ+ddc4omDJMHRf9p\nWEqtq0zhE9vPNUNQu4HkVcMGkV4mBMyL/rsu/+HmBQZANi+tixFJ6Ezjvyj7\ny3eqK0XqbCoe4HJ4OeKaIoRVIjoHIwCDTFgNw9RnrehTccn2w3ad4vfRvkde\nh8zoRQ1gwqDEAGpiXJ2VIN5rQ4EZJ0uBoM20dr/+ps2G+D9FuUd3dOsnyC+w\nvbcmCjHQ2d8ZGaYAa+gYedLI/Y09yIK6kH1LISP+cjLCpozx2pI9kmZ8Nz4T\nzM1ZMXBC7HnFcAeaJTHpYHe/CEtUT87TFDzN/f0+CRWmc6Uo/P/slvp4rvo+\nKKbl\r\n=adrz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv9tL0tmCgDhR7XkZdT1KL6Qw8959gIA97UyI2LHul/AIhAKYs0SMPwFxMQWrZ4XSd/SMrpjiXIqa30Kcr0anoLA34"}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.2_1601548335794_0.7997758460284812"},"_hasShrinkwrap":false},"0.0.1":{"name":"@sberdevices/plasma-tokens","version":"0.0.1","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"ts-node ./generate.ts","postgenerate":"tsc src/index.ts -d --outDir lib && tsc -d themes/index.ts && tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/camel-case":"1.2.1","@types/color":"3.0.1","@types/node":"^14.11.1","camel-case":"4.1.1","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"_id":"@sberdevices/plasma-tokens@0.0.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vtoVGZshAHO0Kj3kAFnlXGzLourPtvj5F13u7ki4JSw3LyTF4bKSjbBDtD2LBJ64HYtK/xUf0vuH8JBsMcanjg==","shasum":"05fca77c52da83950e50aac7f7da6a6096fc8dc4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.1.tgz","fileCount":149,"unpackedSize":178804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdyzaCRA9TVsSAnZWagAAN20P/Ags3Elq6zZj7OXQnLlu\nU8/5/66nLCdhYX7/Ck3gUuLMGWyqdGmzP4l1xujvD/1nVrbxhcy8grIr+KDc\nbR2Rhe+HBEmnOOhzsSteWqtwrTWjCJvel8GlwQkgfjSSWULk0sQiU594J9ru\n4FcbhKYw5dr4ID8qTveh8OyBzEhodEbbxpvkuKap26xxbJt8ZXNfMiPye0KK\nJHjBrBWM9f6+RoNSEJ69zv8Qlm9wR4gb6s0qJcU1JPGieivPRshj/SKDqxHF\nt5nrBZ+nPqGQ458Mr72u3dR43b1hP6d4MF4Id86wvvrlMdvjmeafj0+OFQv7\nZtVMJoxnM0eIlxRPiK7JtAFgnbgXFOUdv+jMX795t/2LMukGdh0bRmyHYKfu\ng53l3j/FDYbjhuAidgbaLCjjQ7G97qBXnSwgYaAGN4Ih41kWRsTb+TlGhbDc\n5uu7kq+6vuxLvbJQ3Yj/Fnh0IrMWCltq0JJ0bxafbk6a1FO0/9TY2m9ZUJku\nF1HS++MoZTrE5AOKCYuqbVMjEAE43O0PuQMzGrPdQ/JDYULJMevi9li479qN\nQfRO7hsCAMYellDBEtbrcI0Q6tHUyAKbf7n+w8UwPaJSStSUY5WkELxLcs9n\nEGwK5ab+XvWF0DmKNtRIUeBf7/isWr+r170tvWscKZxAPt7KriXIs35fPzc7\ncR82\r\n=iODs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWNg3Rv2z7ZVJfL91igrSjJocGNGYLnqJHnq7lCgfrVgIhALRx/vlo8b9msX8BwIo8TotGvibVWTOeWg8FzpxZdV5u"}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.1_1601645785997_0.5827890382155834"},"_hasShrinkwrap":false},"0.1.0-canary.5.a91d767311b8b178ead13301b21cc118133079f5.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.5.a91d767311b8b178ead13301b21cc118133079f5.0","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a91d767311b8b178ead13301b21cc118133079f5","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.5.a91d767311b8b178ead13301b21cc118133079f5.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-wWSi6MO7CnKWXRj5sBAaYkiRdQTwXvnn1TUqZIdyLHUrkJpjplzJwC1KcPKe0wyYvnuQ0sBIyPdRcnPwxZ9AvQ==","shasum":"4e17e912e9e5076e91b0fabb863b96e1e689e6bb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.5.a91d767311b8b178ead13301b21cc118133079f5.0.tgz","fileCount":124,"unpackedSize":259969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfltSzCRA9TVsSAnZWagAAWEwQAJKsPN+UVOdtwO0c+RCw\n+NjEwH7eZ7yLGDLU/UXSvAXrSmYQM7Q0QGx1S1w8e2DBkNfFZ2ckqcPhkboq\nWeVmF4QOy8kLZtvy6qEB16LuFe2VrLzDx1iBtPmEEB+ODxyFuAuSecosNlI6\n6qBoKHZR6pNFGID/ycJAoc5JJYJ/AoO56VTZtANWdumsytMcUPd2BPSwz682\nQncE6ApcHDp3shAeyBRUPILL4+BF7Dua74EnCzinSuYHtcSS26dKh320FBD0\nAol2d9TITrPAHBsivUMJpiC9n5sfoAyJueuDOPFBKMYURbvN/c5rGw3iz7Rq\nfZdmBVCJjzmRgWZeAtkhnbDpyPL4zp6UuNCZdRC16h5Cnq+0iME7m3qamOse\n2wt2dguggSV9Mg172fmkH6YnVxMPpJ4xgxWQDvrKbPTln4KaM7ZvOBP7j/ME\n+uDGZA48me0mvblUL3RJs48QspkCQ3yE7ZgkwkB+fqX1lsKQgjcfkKvW3piN\nCqW/8tpDHoCO677EuK2Ln07xW50rMqdX3Qu7lOXFSk97PXAx8cqJDy7eEmOu\nO/z05qmIPzwlxTHfCnfHC4KpQ1CBFxQbYAtTsx0s1XXIFu/sPOamT+BWS644\nLihWugVLVeI0S0Tab+bU8i+VW3wzqXGYvHlh+eXUQB0bb7iRdOluO9G6Z8bQ\ncyHb\r\n=pAOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5pDVCstazsdeLLFPYfRiYOt7ZGpTKRHp05gocMw37ogIhALjdtBChLNJ92kXPengkrS4WKNeAJqrdtU2UGQAlyBCC"}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.5.a91d767311b8b178ead13301b21cc118133079f5.0_1603720370875_0.5152464114775439"},"_hasShrinkwrap":false},"0.1.0-canary.4.7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.4.7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4.0","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.4.7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-dYOpVJ5FUIpr0tFyRxFXUzPjUffWryiFk5om5/USWcScHTg6gId3j0EN5yX9TQXMzytUKc3R8FNk6XV3aM46QQ==","shasum":"d3d3f0075c96904556bbf951064b8b49c7527781","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.4.7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4.0.tgz","fileCount":124,"unpackedSize":259969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfltVuCRA9TVsSAnZWagAABdoP/3F3BQrzlGaDrrWNvcmm\nYiNyTW02juUQye3wfQiHab5YlCJq877ze8MWb9CC74fQCrZiF/Gdydrm0zb6\n0EP/vCCgAjP1UeMZ9A9UDIiCBQ08qx1ODpztSOjPK/EnRtS+1vjcuH5uHRKH\nAu9mqzYMEZ+gQ8o2PhV79si6ADITfDUd9FaIVS0JOVdNvzfNk7+ls3zvjFC/\nV/uweWIUzj3uf1fUIXKdhMqPpgc4xDtjCUcqL9HM+nK4fhA8ja6k536dDpvA\nhit8k8FI6YXeq+onnetqPHuchdK1CJnQw3jq+NGLxRsed936DyTf4np/QzbU\nJm908BsMeCmRky3FUTJ7ISOVq1BIBmq3QxjL4G7RBEFHpEUzRseSrn+07BwP\nXzNsq9DcCzcW7v4OchcAGmIFC6TrTdEPHoIBPhwUDYRG6iDcYKNut9uvsxCK\nxgFU9wIUeStxbcxzTqEUWMa5WhiQfJZ7IzeAEdVzA92Vy5YuzoG89UPiLAjR\nKMXRCqD7J5z7KH4ZghgDGCAklbIPc9sP+v2r5hAMQYuiaVIFHImx5c2fjMoO\n6dxcsd5HUHcNbL8YqpUJA/fDII71FRbM0CRSdlSOjiAL1R5TmPcn/zmxADO4\nVzeSJpANifVXJCBYTV0DgBpuz94/dzNB6CPTFLux/j7pKS6WgVUHYSDZ4WEB\n3Rq4\r\n=t6u8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHfWX1dyHjJTBiR+IXfK3/dfxcuRURaAiT9Or/Hhw2EQIhAM7MpurlkvEjc68R5STrG9uwI565d6tJXqYURgAW6JCm"}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.4.7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4.0_1603720557648_0.13148898353565897"},"_hasShrinkwrap":false},"0.1.0-canary.5.ffee3ac311193cd995644e7a9ea87cb2c6cf64dd.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.5.ffee3ac311193cd995644e7a9ea87cb2c6cf64dd.0","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"ffee3ac311193cd995644e7a9ea87cb2c6cf64dd","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.5.ffee3ac311193cd995644e7a9ea87cb2c6cf64dd.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-VNS+eFm3JvW7pvula63OerRJ8sEdObUP02x8MRpUV5kKE8LTPVUhsPTi47zIdUw0Iwst0eRdd2J+mWlazXH8fw==","shasum":"6a4b57d512571209b3440285c98248eebc34112e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.5.ffee3ac311193cd995644e7a9ea87cb2c6cf64dd.0.tgz","fileCount":124,"unpackedSize":259969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfltgsCRA9TVsSAnZWagAAvmgP/10l1LjQ3aaeM8W1Uthn\nEtKO5fFYmcSrUR849mCXxKGR141AjPskmdr6S84kUia9wLL+nGptIWibSORx\nw6tldSE3iaQLl0+VUX2xKq4+V66N6NW3gvXtjZ+oMvIjIQi1+pY8n60o5sSU\nwkOs4q/rX0HbJ7XaTafkW4OZs9M3Oi33sPcUYP3hy7IvFQFhTTbHRGYeePef\nW6DmHAeBcWiOBy1WNJ5WvKCTSAcmUS6HA2umxsbMbJhxdpf2MeCBqS1l6O3y\ndKaVjRbhqhpjeURL2qxFEmOYrgCZXV8wSpGuoC9aoeQmFmL6bkqQWRogzXjx\nzPIk1ADOSuU7kHzN6CRglb0f5URKBrg3iKvUKjx2HMH3Fzy8lXIBuHibpwwb\nWjzEgy3ha6HdxUXf0/e9g2M9ifyyEIn4uAjjY74RjF2ZPAEOc+SznY5SKoX0\n8NKgNC+ZpUktxNP6KMGmNalGDi80+lolQqbKx+ieJuHByJ4lHK2ngJFImxyv\nfaG5JMxa7uGJPa3bfc+8+0o3vdCScl8fCpNq0HbX3+WzPew3bvrPvGOIaFkt\nq2W/KX/XPsNsGQIyEJ3vfTzgDkwaaodxk8Nji4EEU7D7ZpxeOAQWayTqQ2+v\nl9noO92MqaLvzMIkk2vSadVPNqIvSifKVFnMzI936P7fc4khIaIsC+/33Yng\nesom\r\n=KcdY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2HMxISODN3kPFIjyVjDdkzbhUa4uXrZphLXh0RlZxdwIgR+GnciPzD7yJ+PKMefdYtLQDdDxb20QCKQmEep+H+NQ="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.5.ffee3ac311193cd995644e7a9ea87cb2c6cf64dd.0_1603721260183_0.9134349139122253"},"_hasShrinkwrap":false},"0.1.0-canary.5.9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.5.9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31.0","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.5.9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-FvRn1yu9UGmkbp3BR4M+uqe4xo8hl2shMlNejs3BT+HIGS4KUozzU1m6Wmg2WNS1UC8hMHyBC8xus9Bl4lNmcA==","shasum":"e344283d38f92846b064794deefcba4e65779a0d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.5.9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31.0.tgz","fileCount":124,"unpackedSize":259969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfltxRCRA9TVsSAnZWagAAcpkP/0fCvUzAL2uxq58t4aDo\n+kAHSQRa8gzY5+BeaeWx7REHnZ/bY+F8w9JFtXDVqbFXkEJ/Iy1VNvAohh4N\nPKhTWrHPzyuKaMqGPD5jQWi0yoW91rv7pX+ZunW9riwWqtDTaU3wjdZZfmn0\nSACAk8QfusvZ8kT9INz30DVu7h0rzx6PTVMR+egyGlUTybOGl4ZkKQiV2/Bv\nxhEot/QPUwoS1XX2rolBpVGUsQNjOGvXt1eMo7Pwb2saW6G730c0Cg5BVuCo\nfWlIEcUGQ08YQOxCtNviSIZg4wkQgLyA7sjMVfdvqNdAxQqmSa1n2KXxLSto\np0Hc0H/G0OliZ8Y7jjBK6LInmSw4bKzpxdmAeiFwkTbg/2znLydb9RfmLPFK\nqZbzAclk2FUbT0sn/JKtcc2TvEqzV+kVvGzfPPxBmwVUuoV6ssvjTFAZKtDb\n2O+X2dSNVhbqDUcyEoSmtK3xF/cmp6NnsxCMxWmyFXXwHirDcH83q0oo3tfg\nzIkzaQGmKXZgydnZLbPsS71hldbyQFfgkm0h9/Grn1dTJJJnb5jQ6uQYAjYG\nYw4iYPDTY93okAG7TMhDxB+BFXFVOzfOU38/dRMABQyudPBay/LW5nwRSx4Y\n99uOLCEhv6Mn0vxdwBqzZq2MTUNiYQ5K6TN/H0shwlce8BPBgbXGCmax8PiG\n/GbJ\r\n=29BS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwasQAoUgMDVUaE8u380kEADiUKiityjXtB9qrMDy4gAiEAgIjpII0jXwFVETY+xjNMh1xhv4kfBCud0Z8i6iyAl+s="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.5.9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31.0_1603722321026_0.5516947124417289"},"_hasShrinkwrap":false},"0.0.3-canary.6.a4eff243cb4e4c9e7259cc0f402ab21865077e93.0":{"name":"@sberdevices/plasma-tokens","version":"0.0.3-canary.6.a4eff243cb4e4c9e7259cc0f402ab21865077e93.0","description":"","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a4eff243cb4e4c9e7259cc0f402ab21865077e93","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.0.3-canary.6.a4eff243cb4e4c9e7259cc0f402ab21865077e93.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-3PQO0J9FqbRgAy5IefE8uJa8ntLONU9CWR5mMMz/fAPCncy3EnG/MSM5x0zMoYC/OjT6jhpQCl2+Y5VfMoCLvw==","shasum":"bc217c388a83a9d86605fa443af4be15f775169c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.3-canary.6.a4eff243cb4e4c9e7259cc0f402ab21865077e93.0.tgz","fileCount":124,"unpackedSize":259969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflt7xCRA9TVsSAnZWagAAxqcP/32tJqsF89k6d5ORxgDe\nPUkWLVvraRVB1iLlaBUaEKRfrP+iGdECFKdUxbZ88ZZt1S/9sFpbcL30sE51\nFeAhkfJ68QZTz6HnprempkWDAGvgPPkGVh7PMvvJwMp4j9w5ZRDgwa35+n4q\na8Q/EwlzzmupncOmCJ2Yr5ItEr7/+5TcRD8P2x70BMT+zUMKWNpBNVw3p8VG\nRKVyHnjFw1NU77/gZDfYRhgNyxtHs5x8u1oLpTjE6wKN3GwDIuMWxehJGx/x\nlI+i4SvWhkqUswgn0FVEyctL4mUEL/w3dSM8YyMoBbv3tn6XYs2BkjgNk2nG\nSBDSuvjg6N4cx0fBJA4jp/zpakHLBQrbH1SPpXpkiPCu9vmcr9lGc+rRReIj\nQe9LznAADQryKvWpxCdR3up5eGM+3PD6KjBIbAeHTtR/tGkkXiFZYX0XLnyR\n6ETlJk+/+bRnEJ/0yBsNkSVhbHmg0XPH/4lSG5Nfi9CZhiVRIgCXkdAVZipc\ndn5fqPbxGgEAQvIowFA+j7ICRdXC/IZD9ZqtHeTTXcjP1Oz8DzIQwiM1oVj3\nLkNTROetakYyNVu152YKJcM0Tqm/BIZk121l7G4h4dDfj/63XJI/uRz2Eexr\nYMXRpVywCLBWXel/cmFAL0Mr6u+wDORAEcxmfhT434/kX5JFkjPfWw0yXwqC\ndQw1\r\n=FkgY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENrh2uciVnbodtBHrqC8poxFdI3TAo5GAj4f7ggrcX4AiEAht7Mti/g6icsb+s78/jVZfJrMQCqWy5rQBlxQxjtkUg="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.3-canary.6.a4eff243cb4e4c9e7259cc0f402ab21865077e93.0_1603722992929_0.11464441654182367"},"_hasShrinkwrap":false},"0.0.3-canary.7.8333882bc403661d498b9fce815b603d8de02d6a.0":{"name":"@sberdevices/plasma-tokens","version":"0.0.3-canary.7.8333882bc403661d498b9fce815b603d8de02d6a.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"8333882bc403661d498b9fce815b603d8de02d6a","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.0.3-canary.7.8333882bc403661d498b9fce815b603d8de02d6a.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-99fRWpfH1j6zN4StW4D+KlR5+PADzPNZ7KEKphEAw0jg/xg2RPnb1OoXyjM64hwslTe1dO7dZQn7ygnJdyNQ9g==","shasum":"72f39a441f3f9ac89f8ed17866128634bdd800bb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.3-canary.7.8333882bc403661d498b9fce815b603d8de02d6a.0.tgz","fileCount":124,"unpackedSize":260096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflub9CRA9TVsSAnZWagAAZCsP/1VNMZ3uCroW/X+KssFu\nYexjg+/JhxPpd2VAVv2EXmJi42laUR/ri6ZLv/WTRTz1vBdlo+3Z8sNDZoSj\ng49Hsi11ljBLy5+HdFL1UGIv2HpHw3Y96uaUuDhJ4Bd3ilyTnUB9bg2oztlx\nQm0wygguKg0uPXc0uznNCVuPLoKsnAr534aWDtjt2T9uZj6aZx4DG3hhzre0\nMVNrNQofEhUV99slKmBp3RVWfNZSOwih4XwidT+oRSn3QBtX5gVYzSmBU1Vj\nG9fBS5Wjp3zfFKwyQXHzZ8MlDr1QrNZTKdOgK6QW4nckfjrVrHvmNUep94Mg\nn71xCv1nmikU376Lwu11eV24zACqNHrNshp93H6vWGceLFxCNZ84ZKVJ3xRu\ndKTx1UgCMp5QnCnqTQcMDkWYgxd/0sPM3MmXSQAJOUlAePU45a9Hp/n/MAEu\nkwnQGid3NHgw5mLmOvUF2yRcakvcd50McPG2YgM+x09SlV93SMJLSL/X2qCR\ncqAjzHrYKVc35mTuUQEInbIuinHjCQqfPwBlUQCblaxQPW/H5FG09UcMDq1Y\nPTLPlwRr7lFLD/9FiD7+SXI1VxCM2HI7bgOfqimyhfA754WZYiDY4zDdeu2+\n1stL5jOESrij7vZBuPM4JDm8mZ2C9zbxJ2yDgB99Ev1g5laQh6xyDaejlJcC\nswRJ\r\n=+CSR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEg5Y1u/iL3MzOOHCIbDo3u6qlq2Z2x3+Zf9foisrVpwIhAJRk6UUpT9ZTPa+BAm8kh34YgnoU/q6+Gd4Eth57xN69"}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.3-canary.7.8333882bc403661d498b9fce815b603d8de02d6a.0_1603725053163_0.9042667054402336"},"_hasShrinkwrap":false},"0.0.3-canary.7.5bf5291340f8ac07a653bf230b663221142ca878.0":{"name":"@sberdevices/plasma-tokens","version":"0.0.3-canary.7.5bf5291340f8ac07a653bf230b663221142ca878.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"5bf5291340f8ac07a653bf230b663221142ca878","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.0.3-canary.7.5bf5291340f8ac07a653bf230b663221142ca878.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-Dfp6yCMKj0dq3WB/Vt4kOZP7wWk7XOahP55cgZoD+e5PX9v6sEnxZaia/9x2ZsPMPFqGyhF4+cU6bHZsKSZCzA==","shasum":"f74cda32a2ccef01532576d1a7eedae0c2db590c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.3-canary.7.5bf5291340f8ac07a653bf230b663221142ca878.0.tgz","fileCount":124,"unpackedSize":260096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfludUCRA9TVsSAnZWagAArbgQAIjwm+ergf4lflwAwyrY\nJoJDhUa9vaxLlCt/KE278WGt1vaqKBrNue5cXVuDMF3RCEcKKK2qhQ5SpfWM\nV55GfESg6byufwVCpYxjy+LBDYyk84+woQgnQ5IvJSePQN4fi0YdUe5sSXSx\nckilbEC8uJS5YEheCbvIAJKfTerh8DBkBE25GcseNTgxNyZvX3SvM5wOK8VK\nESkBKQC4DDVsfVDCZzOr9CrBCvGs5XEh+bG7mqecI6fRK5Hm0Qz39d6JoeOj\nldrSRJry4L9rKsFMQOrUXWzlaPCPGCH1rJ8RlN/P9yyRqr19Ve7OG9dDX4Yw\nZXEDsSkQWGZMAm5HRgvOZvnRsMVnvMoHt16gXrcaRKWyZR1znDzGIvxngZ/P\noPWn0Sam+FMyokDZZyv3Kj1W3gYgYlMA3+Kee+zqlZIucS7h0PKaawXrmTuN\ns/nxjGFaX2NBHR1ruoIlM7MY1GlkEbTVcr7xwxdQZuUKxVUdQK73jX7NwqJD\nvcTyfnlTBdFXz/DQowNpQupC0en/TNuEbjH5uTNKyrrn+VbqIDgA66UFx5gg\nfjF8YWXPd6kYFQMq6XuCongBiNORDM1dEyb2s3fc2/6k0Q0xF5iOKVXTTGV1\nCiq8HQg9ODQGa7Ms8UGBH8EuFMgpckgPSJfg5OFvJcN/6bE5Z/WiMF0TgcSn\ncJC1\r\n=C1n2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUda7kIwGkwOeXQlqnCHUTVjupCttYDZu6UGYodYqyjAiEAr6JhUTcMRYFy2V7TwT6nVjMw85hU/Cll+4BlBIpCyNk="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.3-canary.7.5bf5291340f8ac07a653bf230b663221142ca878.0_1603725140554_0.24430269092444457"},"_hasShrinkwrap":false},"0.0.3":{"name":"@sberdevices/plasma-tokens","version":"0.0.3","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"42cb3ce9283089d9fc8d45b7208dd925b63e300b","_id":"@sberdevices/plasma-tokens@0.0.3","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-QGw//zvEzHb3WNCIUnV/NE131OeNhfAj70xTVYQPKNJEHjHdKEPiTiyJwjA/ngp0PRhiif55eNJB2/vwAjsGIw==","shasum":"aefb5947139d4a85d1afa8d2e30952f906ec03f8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.3.tgz","fileCount":125,"unpackedSize":260323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflujQCRA9TVsSAnZWagAAC0cP/2EVhUeLosI0aUP1AhfY\n2mFZ1WXREcLzT79ec9FGxupI1+vC4KkBCeYzCIhYNF3NUSaZt5QoL6V+F/34\nh9KAKcVTjnFCI+TKJ9L/fQ5ktRjBCtTeCGGjPFfrYXjt/WwHvnIYpDLOfebn\nPF9D7EdW9zUHlR7QW9keY7DBGi0I8JeynNv57A3sxL9npPfVONyQxE32j7AX\n1YikoNhuXzx4Ryi4qPA0hja99GFwmVp6YV+qpCjWW56b+X+diaJEFVlfU7cc\nEVk+hjttTgUTJ5FIPBMcjThtz0oqV6jODXWnAOy0I7Pjfp5LTgC+BiiNbVZk\nNWyq0nbC/2ezGDyzvKr6kKTVf2gllOtEH0dsQR52FsqwxDPQz9+gsL7nz01k\nI0w6q1/naCyv73L+QlR7vSaXlLAcyYGR6Vz9MgS1Y1ebEj1VtNhkI14W8uvr\n3428CTL1UwGAY8tZo+cMciPHgAZJ7kf3YqrNsBDiX9O1rHYVgEdVeHGvMCDS\nbxYMO9//IkaoRFg/BV4hPXK/kOy99WvkxWbwkIzaM/HhGyNQZLpd43g2/kW+\neXBHZLB1zFWHz6l2fgsvf8DIFsHnzDgVuZ+3VGRLKXAk6m24JLcFrQuiAEl+\nCRS5WQ4LBIWAJ4gdnXNWhF3zuhbSFjfldXsDhZqFihkq5WIxYe+BV1ruxOQz\naB0T\r\n=DD1/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2/yjqGFAQg5FDMUfRi3xXHPEHLMUjPVJb+SDrC7VUmAiASgXVAq/1adYnREn4w6AHF6GKV/NjyQvp8SiSwV5gfjg=="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.3_1603725519865_0.8341228033365073"},"_hasShrinkwrap":false},"0.1.0-canary.11.30fdaefed8a59a637d7d5878bff04177c5a1a5af.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.11.30fdaefed8a59a637d7d5878bff04177c5a1a5af.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"30fdaefed8a59a637d7d5878bff04177c5a1a5af","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.11.30fdaefed8a59a637d7d5878bff04177c5a1a5af.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-ARRtbWeyF4QayasefxoG7eo6zwfPBzROAs2g14slmP2ASQWvoMvSOQvziOzIP0Y1BUKI9pAIuXjV+5l2K4iTkw==","shasum":"5c554fa25fd2cc3c445230458b92e73b02a991b7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.11.30fdaefed8a59a637d7d5878bff04177c5a1a5af.0.tgz","fileCount":125,"unpackedSize":260420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl0MrCRA9TVsSAnZWagAAXY0P/iou7FkabktZZ2TsWKQS\n5Me2a6BE54M4Mrc7ErZ+PIuJZmJAuVTQG83di0X1i+IzRSwpxobm6g+3yS63\noBHJ7crTxpDAypRVYKm60GMXVuqS5QR49LGwBxmf/97M1glnvrotafAeyciw\nY/aMlsrS4hQF1fkauRZkcd/DmoYFtUZiAdmhv522NLTW4rlDwUMqgRtU8euD\nmpIuP1TopG/vZGvJn5r3PUczs+i7TXaRFkr9/VeV8S49fRGHNqoMJBLO2jgB\nN/+qmeyOL0nTCBoyB9Hzo7OqECRypNe3oeXqT6ii2RIrpdGHlYljgmumKg9T\nQYm91BAHbUE3ID3arn/AZ+omBEcdj/wmfFSnd3XTns1NeqU7O6Z2tIeq1BCm\njZY+acSspM/tYwHcgbRAwa3o6xoiUhUtEmmgjzF9FSXO9V1xbCbm4oUvqV9g\nLLfGlSiOPHagv7eD65pgHb/ygtcYsKCNciivqqLTYazxuKsGFekvdNP2ru/Y\nrDLe3PBYhZrPKX/ksClnc2PdyvkfxixVAMQ22Lg7sCYs3HP8Qjqx8mxYc+Kl\n7TrN3P4Ut9wmukepQJgM0Du9j6ymtJZKcSsHYrOLjHaTDA5kxxmyp0ArkxIZ\nodtwGqGGLBB7tZbhWLkCx7fih0gmHP306KWPYMwrfa4PpPZ+PVMIJQoUsq+o\nBgjg\r\n=CktC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAediN64N24D51V6kZcEG/2B8vmrSYmQVeX2SdGxj//VAiB0ik51EzDIJi0gdWK2QiaVjZVPKwYvn7+e6uihEn5w2w=="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.11.30fdaefed8a59a637d7d5878bff04177c5a1a5af.0_1603748651481_0.1311504869079534"},"_hasShrinkwrap":false},"0.1.0-canary.3.3790010350104e46ddc642467541f7bf5ae495fe.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.3.3790010350104e46ddc642467541f7bf5ae495fe.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"3790010350104e46ddc642467541f7bf5ae495fe","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.3.3790010350104e46ddc642467541f7bf5ae495fe.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-NDMdv8LsdHsXv2Y9z8I7oYQWG+lYxUmhOu8PrWVv7BWvdj1YJ9TI4qDgfHBinbaeq0RU51whYDmpUXWdmsFJyg==","shasum":"a75275c38ff8461b067f9a8f1d8351647f02fdcc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.3.3790010350104e46ddc642467541f7bf5ae495fe.0.tgz","fileCount":125,"unpackedSize":260419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl8dTCRA9TVsSAnZWagAAtd8P/30d5LegdciE21xZMfTH\nFSAiLlV6aHUeYnNyESdk19MAz8zrNfuSUKTkJ3Xi/oqCE0rOtrwDvK5VaMTd\nG4xSzHV3dA2PkeW+c1yfWeG3FdDZcNI7DY6rVCo+WQ/rBdNIft4+7LrdKr1V\nyjOyWCCTbeOCAo8O/x8hsERDY5W+MM8+lxtJQ+b7Uam1eBVAC5D1KaaO0MI7\nGEaa5Osw3ACQSP0Rl6yLVpoNCByIZfCOVO1962GVwA4Lx/mVktNK7dDSTx0B\nIJ/tv5qoyJPG2IDe6zZHc3wDx9AhIgBGX4Hb3dlbzQw5OYAhWJTBLWrSLQq1\nqMTglcy/E9ZZYTs/gMr9wGAJRnvRA4T/pDhDPMTFDQGgBf+NS2p+AP+MG1lH\ndMuBjStC9Vg7pJzih2tWSf8x5buozj6VchnitMDSP22MvDV0sBDybUDnpxLr\nr5BoF8zfCAKxh93kVXQokEi8JP0ydcrjHR3+so430qLEWMA6rez8B2Ybppxx\nrJPNQXBi+pC97CJpNFoeKEMfR+QjKiL1KSFVwM9047+TWPasw6S3HmblCTgR\nPlj9N1JqUTp0LgzOmAhY4lP02Xj059MqlSslfle/U8T7NdVHPmf+6eq3clgB\nFJXy/ljmH6awQm6LQRAhd3M54YR36um11iamPdX9KZhbeCcFFY0zVzYAArvQ\nuTth\r\n=sAlL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBImxMEsGkGW08sF3KBUKIkjpBqbNlijb8CSUHxQkLRMAiALP2ImLajuLhAvKjrf/VgeUc+0JaUICsl33IvtBV/jEQ=="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.3.3790010350104e46ddc642467541f7bf5ae495fe.0_1603782482718_0.5791923892170665"},"_hasShrinkwrap":false},"0.0.4-canary.15.acb97535528c2aa58506424457a9d37f469c7b04.0":{"name":"@sberdevices/plasma-tokens","version":"0.0.4-canary.15.acb97535528c2aa58506424457a9d37f469c7b04.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"acb97535528c2aa58506424457a9d37f469c7b04","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.0.4-canary.15.acb97535528c2aa58506424457a9d37f469c7b04.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-gEswtgXeB5SG2+CARtcIEW1kSFCdG1Jfzj2k5xlUGCiViK4QuZNasYHrPKAFrATl7/J99kEKrrSshQS4R6+ABg==","shasum":"d53d5125353ad82d1662ee25b4823c182c5cdb7e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.0.4-canary.15.acb97535528c2aa58506424457a9d37f469c7b04.0.tgz","fileCount":125,"unpackedSize":260420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+B+CRA9TVsSAnZWagAAqmkQAIAMiRupxAmRP9kk1LP+\nTKaqFVDa6n7CMw9r/MH7u/eBRdftP+j+hro5PnebEuel+qtGSTSSHnAFlCJR\nwKI2BreBcBr80RWIlhC4D0BenoSAn/EA98QpLYeNBYeVBhXFYjstORzQW30z\nXF4Bj6sHXGo1dCrMUjCS3KiXF98CMf+/dH6GKNtRDWeFoa/lr04rDPu8V1e7\ncYDw72RNytBO1B9jYN6K+NZqxTnNE3xXqmXXvxoH9q0UkjMZnf1/0SRv3zgS\n7xguxmYeSVEl3lmr3COe+vMJ/jrvsHeM4qc4ECQAThXEb6lW2XtDNqRP5fOc\ntsGj1iHWN6upexySF7eTMKFiTmcB2Lgjyuurf/gNMhO0AS5q4eo6894vfpa9\n8dClI7ipeAC4LGWVEgIUooX5H0vVBoZ3TQtLfm3LCx5mbJElrpKFwuW2ZOCO\ndPsICZbgSS3PEri6lKQvdbHzkdJT8n+yLVRqtZ01qC0xbgY9N0AQrsnV4Bpp\ntFQd6Ahg5UBa/DcQrXfWpChxD+OIsiuAF0Y1Ez8NQNKQktm0Kld21WV3Fmy8\nwDctDGPJFYHxV5uvKcJWZFaOubn7YdSQkuzSSEzF2tVc0asQDyhRDldtrTw7\nOt6+WtWbl8xatbwLTpT0S+DtNXBzzJJie5yAH8yYSlZ1Vmn54c0cOOtQ9Di2\ndzOw\r\n=2Dqk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiCJw5bf0Ac2M419LuDkekxXLUg4Re9k9IqE/ZXcGVkAiB6gxX9eHJS17kM/ZLhmaygwuHbzU6nYCCGR+L97LGwdw=="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.0.4-canary.15.acb97535528c2aa58506424457a9d37f469c7b04.0_1603788925579_0.317143226498378"},"_hasShrinkwrap":false},"0.1.0-canary.1.2cd286a75c4c1027b441f1ee32ce975ba62a84b1.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.1.2cd286a75c4c1027b441f1ee32ce975ba62a84b1.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"2cd286a75c4c1027b441f1ee32ce975ba62a84b1","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.1.2cd286a75c4c1027b441f1ee32ce975ba62a84b1.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-xw/2+eVF2Xk6IoYzcxkkP5bYHGDcf9Issu7PNaGNpkANqwM9AHhBCsGhlPDo2n1/pkdyScQD2QJnhzjiblaToQ==","shasum":"c87c3c0aa16597227b6690143fa125906927c79d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.1.2cd286a75c4c1027b441f1ee32ce975ba62a84b1.0.tgz","fileCount":125,"unpackedSize":260419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+bZCRA9TVsSAnZWagAAG6UP/iUdW76WjCHyMc51hBGW\n+92s7PtPIJUF+VPLmm5eZnO6p5yAqUOTD4K5bHk9v5hS9hAfDyg1ZbDoAFhZ\nZmiVkERGeYkrDEsR0CcZhYlMOwrPLr6qXK/rBhrvNqp35k1gtkNyLDIoBrpn\ngMXQHDY+SmoSeh7oqZWSbfZv2S8caCDrUDXAWSoKAmTGHyu/xPOAjRHh/2Lc\n+fYn8fg3JuehHy4FKvJ7ocKsXxsfPpCvXbrwHeh32kUOB1i/++7qlv2ZeUxu\n0blPAOspi7CAlOTfXQwM6/iQyEZUc0rFsU8erTSeSLj0Jaenw7QtvYDrifWg\nWAS8Sl0G2fpoGmIjwR0Z1ZRKoGE5ndd17m7ia2ZtYIrmdXJsaZqWBeF7D851\n64KUk/+N+dqDRmkjd8iEEqHgCwwI0EQDnQxYeDYfL+zr1KLY8uVE/PPjDOVr\nT+vby3GBqOCIaoccJMOIdit3BbtKpvyQtENDrbLiOdukldFT0o1Hc3iVhG2S\ndY7P55dbKw+3hsyvMXyk6G/hvUt3m/IsZTUnZDZCsaGcS2UNyILgtbzZgyEe\n2H3LhxLFf9NJhnK/jEzekdijv6gx2hKN1gqkYrKrh792lwzKqq71Adott+9H\nzR1djXZSFaffKWm/ij22jjZ8u7+F784/9/Q52or/1dfg/xhCbqjSCV9biVpL\nAkWv\r\n=8Wc8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvWikE7K1h9iC6mlXqQQ77cdAbeBSCDUZ1H/FYT3/EtQIgL2IFJZ/TPbtnExw6qwwpPkje/74wrTBKq2NF0BtXZp4="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.1.2cd286a75c4c1027b441f1ee32ce975ba62a84b1.0_1603790552641_0.13106268780836428"},"_hasShrinkwrap":false},"0.1.0-canary.16.b154e2c5efe96b3cce488c7bdc40bff9ffae53f9.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.16.b154e2c5efe96b3cce488c7bdc40bff9ffae53f9.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"b154e2c5efe96b3cce488c7bdc40bff9ffae53f9","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.16.b154e2c5efe96b3cce488c7bdc40bff9ffae53f9.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-dCkklBQmvetpq8J2gmIuKzQVjU5WVPNKBT+dy77a79smAzObvZ/9hdIVfMbVU8+8huKOHxp+9nQNKfQBj/B9dg==","shasum":"3309a1bf5b1ee4b75c8cabc882af534228c5e46d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.16.b154e2c5efe96b3cce488c7bdc40bff9ffae53f9.0.tgz","fileCount":125,"unpackedSize":260420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+qBCRA9TVsSAnZWagAADiYP/iJtnEe7C6xUakJ29pRG\nCPM8Yu1hYeApeGNCcod3Re7UDE6kZSe0FdgndUR+qB4xCJ+8HFJL4+ZI3APb\n3nwuJ3Ew48dLE6zkwAV0UJdNzMO0MXFLBOZNjzitMoBo4DjT5vI+NWl1pJWU\nA1J9A7oxe5N6LlPhmc4NCECJLvg2O75cyajB1IrSfY0wRWF9eykPbWi8LyAH\nFyNsfVUlUFbFzOtURMA3Lf/DKDbCP3dOOWeUiShrvXd1BcwdhJ3kVv1Hv4Xi\nYCzmi8DE/qNPL84oD9gMvK9m6y2WyaJ1zSjtL6i9UnDuLCTTipIf4CgcA8PY\nW9ju2k9fJ6TmyQwdPkRRuFKEybCf9Z85plFd51kjBBf7AkVInOwMTs2DE4y9\neQkUgybfKs90ZVQfvaRHca/5BZo0zvcFeOFFFeINCMjER2HvMLtxncX68gU2\nG2s2V7e1Cp2APtT6RSqOYHr5jpH6f9dlFRZNwyvsHMU9/pza2wVf5qBcG2G9\n/AZg5Zby+DSsuebsgv1r2jXYImiU4dmWmtyq9bnpa75tHmAGTI71zbMllRaK\nbk2SPiHfK/mEQcTKbFWAFUs1TP2n4pXOhwDVxtHT4vPEGcSTB6JHQv3OBhWw\n1R8LXLmyO+2vCdGFJGL+fU5WVnJQy26PxLiI7Ott7Am7OZ0dBTBJY3fLc/sp\nqPOa\r\n=OFcq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE8VVwC0Sdji1V5PY6/u3KxqGSe9AgjbTAMYlNXzVwSwIgWEA/bx0Mqki7yJY2aRqTyfz5QWWvSzSCrMoLL2qrXaU="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.16.b154e2c5efe96b3cce488c7bdc40bff9ffae53f9.0_1603791489405_0.9866137467031046"},"_hasShrinkwrap":false},"0.1.0-canary.16.4116f0bf83b6bd04416d16333c71270772739727.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.16.4116f0bf83b6bd04416d16333c71270772739727.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4116f0bf83b6bd04416d16333c71270772739727","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.16.4116f0bf83b6bd04416d16333c71270772739727.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-QCAH+uQLiXf+KKas1Mv28etZj2Wrkr7pNLhdpcQrS18EVgB4JR0ngLRSZjKjlGiOKTRz/6pTbgJstpLkOSxCJQ==","shasum":"25a5d769a5910a9348c6bf0f0a053bb2481c947b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.16.4116f0bf83b6bd04416d16333c71270772739727.0.tgz","fileCount":125,"unpackedSize":260420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+u1CRA9TVsSAnZWagAAyp4P/1oIrUkpWzQCSebgwXKS\nXqvZjcW4u71LFB5UmHqzfKij5n51mnDuCIEqtT1GIC4s0Awzc7uaYIKvQJUw\nOJSbMEgXWp4QTb0qJEAgkOUABTYVOokYWYGDUez9COGvcF5YHV5DUOc900ni\n/5cTdTa9LShob8eN1iDBp76/VLXnx6rUsfBzKcyTCcFXDfLDxBfhnDK8U7tF\nX0PFBTCVFV38sxofB6RQfLAZERj9hfHcq9DlxZOTtTunoFD1rO3+1hhpU3Ig\nSaYd92SUTQFe4p8ryX/y1D4ZP84GWx4IeIsg3i7n2d5OzGdFRlrwQPGqzCFe\n3wLifxDGZp6LzaCE8OZAWmROHPszmlnMPmH2OdS3guXWKxvphgVueWGo1m/P\nqwVLXRNVDtBpJddriM3V+mb4rt3QqmBNUZ+I7xYiWn5y3eyckVZ+g1FPuiMS\nvyZw4NzL9Q2QK28K+KojLy3g0QDITz+z2QRcqcf/DNxZZj1XHm++0nQ69I8w\nLoUQeen5qpKq4DqZO4rJEqSzEntIdE24kbs14RB0AKEPSTj21tL5LldqSf+q\nI7Q3MRNz29TbESIvXyF4Oi2063R4u2ur+aPbu2gLCQJCQ5fv8FAl4unNRcck\ndHazy35ZQwrJnIks4z8XicBJ33wiZzBwy4iL6mi8Y6KdsQ5xDvkz+CfLURX6\nJ0r7\r\n=anJy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnERUEzkJETLGTH0Q3ZgnWjyh7A9339ZgkJSqqnkYNLgIgFAb5fu+RnnYxWfBESBdIUfD2jb95IrNZoePTiQhTL3A="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.16.4116f0bf83b6bd04416d16333c71270772739727.0_1603791796511_0.21286426072936715"},"_hasShrinkwrap":false},"0.1.0-canary.16.cf53b3af87b2cc64550a9196454e266fdb3d432f.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0-canary.16.cf53b3af87b2cc64550a9196454e266fdb3d432f.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"cf53b3af87b2cc64550a9196454e266fdb3d432f","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.1.0-canary.16.cf53b3af87b2cc64550a9196454e266fdb3d432f.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-iNjZeQIV+fVB0Q6TRpdC1ZANUllNZBLq8j1VS1EAe28n12Wm4bpLtBe5Fz/lJ7XJJaNuBR6YQOtdM5Bpv0eWtA==","shasum":"85de512835c21310ab0facae9d61bfec37c86ab0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0-canary.16.cf53b3af87b2cc64550a9196454e266fdb3d432f.0.tgz","fileCount":125,"unpackedSize":260420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+0ZCRA9TVsSAnZWagAA7sgP/3acJKEBrny1l4FVz+dT\n5OoP7xhKVgr3lU+CgETLcOFVn/NitWlgNJR7tT/SXl3AyymQAv9SxQUgUgTg\n6DDr+7YkOlifpq7bqk0duRC8O8OlDMwCxhagJRJThRZhY0zD+rAgRAEdL6lu\nATC+t4r9P7VkTsmZ3bnzgSeeU/SxhYI2lgp8nA41DX+IE9QPAZDuX7QvVt2v\nxJyVCRou4uZjI8ZegQgkE+Mo6QhgU8KA+myKZbQNDO8Wq3sh0FecVVEBQTZv\n6Hog3K3qiD3ZEoIF1FdwSVabz6p4ddX4v29sJxrLKPq9CfAlvOWfTpVYCY7d\nRL9NlgnJrm/pySdiz1HX9dWVfRvrYTWjXVLAPbXwhQ6beEz2W2HfN69jDllL\nbU2ch+MBrRb7ALD/rOKLHqrMUDCvAaIcjhb4fW41eEmmnPIDEHUcsWnzv32K\nc6OnNANIBfu03YsCSwfLaH8qQueR+rHlKsgdeA9TNjwRaTsD4/t9clSsTOgw\n75xaT3kbvD2ZrYoX5XH1aQP4p68+iW3SEIq7LvLA53sLiyuZXQvSByE5ISaT\nYDuKBOPCeGgwpG/9podkp9BAzFkaoqzpmXAluRD1XrRSbR+ZpkXoxUib1ldy\nSOKM0zqNUP0RrQrEVs5Zpf6uIvvAL+JMhDHH5qg/nM9H2X6nAp3VROh2+gHP\nF+Vs\r\n=MkVf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnnxPqQmW+1/T6pQJy41d9+16/PgqMYclD7CVZNYPyKAiEA1V3/IwowJp8pxpXqFyqxok/nX08uR+3m8WytVxfWWEY="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0-canary.16.cf53b3af87b2cc64550a9196454e266fdb3d432f.0_1603792152708_0.049457859885686295"},"_hasShrinkwrap":false},"0.1.0":{"name":"@sberdevices/plasma-tokens","version":"0.1.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"54a6e28930e329aca630b54a2b7aaa1d0216745c","_id":"@sberdevices/plasma-tokens@0.1.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-l4QVNS0dS/MUmrpg/r7VTHl7v4EijAZZedPGi4j3gyL9iW2p44lVA2gnC0xjWz/shPNMixQcDLHpeykafi8G9A==","shasum":"a610716a224fc6ffc71e84b9a8cbad982c0bce3a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.1.0.tgz","fileCount":125,"unpackedSize":260674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+3xCRA9TVsSAnZWagAAtOQQAI1Zgm9Bj3FECoeM5Ulv\nw9Y4O6mbPZg8L7QZABDtpfC0l3kAnyBswZ4f+h7vG1nLdSMvqw/8CS9qJzKP\nplNvhBmyjK3ioUrs9pl9WaNsJ/hh1atwX0DpgpR6fM72sGIdAaP72W4+E8KH\n6m6wK9TUEFFQVRQJA5P+MwfNkzxZAqdHokVDaZtqzv+ksdR/MtZCWXBkLr+D\nW4SvKRIRaMyKxsl6I050Z7f/8J1dhg9zyN2d3BLJhHtTzGmua5GQgRbq/p3o\njWgITPwdv6EjjOft7m+8bSkV7NjnznFFwHSoXwsULpomH0sN0lOoZajDfoRa\nShAJ7ZV8JxJEeh0ezhK7perdiFjP5ibxBTT5GQacuL23KtlsUkZPfwdy8q1I\nwCOz76eE1lrd3WTzsLlssSwMGPwI7WSk+LlDX+djU11EiZvv6rMWQc0HMPdx\n3/dSsCbyf89pAjRnVrzYJ5sE9V8YwfbNKtIMTJvzrtXnMSe2a8b4cBK24xFQ\ntWS/Efj5Pr3nvhhoFrBsI9Hb6Ax35eMg65B50Ku3TIDz0hn7RUjJHOoF7hqm\n4CqBJVeqLX+/IOrwvXtLm39pNn3YWvMXKopJbIdDjFRNsOwBTsILdFyCXObD\nhDn/ZjAZAiuw13qa/e9785WO7E/Q81igS7vtXN7sa8/1t6neBYX3KR9scgxq\nMNG5\r\n=+pG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrLYFIaL7KsqQjUD5Vew3bqpNR0U8+FnV0EnprgGNUzQIhALQ6X+ZpCcKGNLlExoWLXCq58yobHRbVxqRdQ1hoataJ"}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.1.0_1603792369027_0.5990968941771284"},"_hasShrinkwrap":false},"0.2.0-canary.36.e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0-canary.36.e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.0-canary.36.e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-2Id9i7TRycyun7bBMyYSk7tN9BGOamM6sSjoJZpLpgTShvSl6D96hHOZ96T2ksDfICMrLA5d0R5XERGOOxEqnA==","shasum":"f3c447ac801b49ee5b005a4421355a7116df4805","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0-canary.36.e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6.0.tgz","fileCount":112,"unpackedSize":239311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoS2CCRA9TVsSAnZWagAADjEP/iaG7obP8FL4xz6StI0S\nYwPTMffn4UfWfbJybxcwwdYKQ1FsoyIPl8E/EkPD8aasfd62bA0Q77GkPXCk\npaEu/QJEjnx9TmTPCz2Lg6eYEtVLrm1Yh6W1UWS8OjVk+Bl0zDrIU9BZiQfy\neKf5HVmJLlKbqyxz1oQVGlmNiPHtFtHatCKv8gkA9SJMGH9s50mvf+QPCMgB\nqKT4pTFUnIew8S4ouOIDiedGR5prl3ep3SE0Js4j8g8jUxERhhH7c40fGkQb\n5aSyUgaBUyxYH3T0oWSvWL5gHL0ohP4f1VDILR7hgJJqQUxFLQZYjLMatWTi\n7N2Eog4kELP29ltjiDF+Yuc5ppnR2WCYTKnjsKUFVRVBzZ9FiXhpj50AvhCy\nNNomutF8v2/PCprQvfTxUvJEkrD3Trwbq/wKZNliYVkoEF/8uQHVsXSJJ/KL\nX4Bwh3IQyYW98AXbNa+Cb458iDA5gUI27d45p+Bp8szXjNs/eqHDPwTSmQiQ\ngfpwtf0YYzMCRDjbjBZkvZzsyCX4+nikqnk3/Z3MknZFrwnNWbr84dR5A3Bq\nASx+pMXIvNvfs7LRqhSDD90SKoSMCjlYZHqt4+hs28HBLZBzRbZqA/nl7miM\nDe2Fwo02v0Fx4rYIa9gwknT2Sn2KAEadEI6KLgx7CXSvIh1yWw6b7IKAB6dO\n6ir6\r\n=usWk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBon5nu69ViJSl9i2agh26y2UnsWwHyMe2HQHjXpXPtZAiAV0zR+MG3EMq32dP363wIhW/j9ke65YEeKbcFkfh1+Ww=="}]},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0-canary.36.e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6.0_1604398465499_0.21163612204618398"},"_hasShrinkwrap":false},"0.2.0-canary.36.6de99eb9b539cbf7db634f9bdcee65700d58a418.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0-canary.36.6de99eb9b539cbf7db634f9bdcee65700d58a418.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6de99eb9b539cbf7db634f9bdcee65700d58a418","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.0-canary.36.6de99eb9b539cbf7db634f9bdcee65700d58a418.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-2y9xnjPdb6QefvXLNakakUoUtNJhaOjrJCnUQcf9fQJX8bMcfy+LndRDMngV0Fe8Y6UaSPiyaQV4aRtpqOHTWA==","shasum":"3e592b7cb77318c0209676256055ea9455e6bfa6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0-canary.36.6de99eb9b539cbf7db634f9bdcee65700d58a418.0.tgz","fileCount":112,"unpackedSize":239182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo67rCRA9TVsSAnZWagAACLUP/i0ju6Ha447UFz36/lz6\nHmmIsqN2fEzlspt27rpLHiLhj/5n0xZ+3I3SouBCkXEhrFFAYU/LKfQiTCC8\nakGivoqK2WDaluKSBcnGqPmBq+2U7892PGY0PHBXgZ2b0B5g5nifSxVQrWz0\nijU234AjO7dcKQeoWIEC3L/Ou9hLMQ5q9tU8Izf50ec7fyQTnMwikXH/B1Jx\n14O0/pKRhvH23yVFb/qGWGAprPqGD+JuYitnt1Iu9dwlQvsEK0m2sJSDm0UD\nYAl/yCvhRFYS9zZfrczX8sITrKW0vdVe/RYWU995zHiFlBalTlOszLKWtYqx\nFxB7XpkjHZpQKpko1SFNtCGzIcZS+OjELT7R6RjHhFccm+y/LWxIVzhia2fG\nqsHTe7sDC89acEDzh8wRBOrDcgFMTkbnhF6WPrUL3XekLuUNa5r9qVFL531T\nK8QHsrm4RKNfQx4SFcgwPcormTn1yx9hrd8jUxpl9nDd8tf9vYDKMePQpE8b\nBQ3xxWb3rFaIQwgMQ0SgPlX0jzCRvgA0+/yJKK7Q5m30cRUb8GCJoGvrE96a\ntIMosYCTvFiFTEmM4Vs+wdBAJYpILOvpZ8398tLPhHiVBc1r+W5+8HoPHmr5\n309PKaY+9QMgBvACBEGBwudAAUpV0FYLyiikNCS1fQNy0V/d+fyB8EDBm9vb\n2uzo\r\n=sbCZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1Mp7L/ucsDrTSg2C7NZSQf6uCaNERBCOOzpZtN4lu5AiBVuWLi+SALOLGcdjFXtouNKo4ofkVESHhbtwmAhF1Vpg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0-canary.36.6de99eb9b539cbf7db634f9bdcee65700d58a418.0_1604562667220_0.41006511934056755"},"_hasShrinkwrap":false},"0.2.0-canary.36.4125e1db5c2063108642983008195286569509b2.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0-canary.36.4125e1db5c2063108642983008195286569509b2.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4125e1db5c2063108642983008195286569509b2","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.0-canary.36.4125e1db5c2063108642983008195286569509b2.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-jtjgw38iJqrNMAzqY5OwbRfsn4lIAMZI6u16ySXXDYSeyLe6UIu5TCwyB045JxGWkt6UzFtFTeWCzHkU3X1wlg==","shasum":"ddde60b1566780d78b6501d7dc4dcae8382faf7b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0-canary.36.4125e1db5c2063108642983008195286569509b2.0.tgz","fileCount":112,"unpackedSize":239182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo785CRA9TVsSAnZWagAAIn4QAIIuETQ76TT5YdvLCj9H\nNI4acAOJX21XtlC2ivYlVVph6ZzTUAo7zb8YmdObeRXDwJcMM7QNAwvE6EX9\nPuPsBBVAq60nf/G/OuE8/6f7QQNzTwpE0gK7XM2TFbCtUVXp4fI+kDTiAM73\n8oK2zgjqqSXgRo4PsVuh8iexkXHxgGEtAEf0f3AgWg3K/7kDi2Jq6N6Kn1R+\neJ5SA8y6CteNwWhXunMJ+dof9S5Gd8FRNJaaXf3xX9fQlvQq13g7ij7E48AR\ngv9VGG+jOq/3dfnpDvX9m+g0I+4fJT5x+GZjA+K6VxCqJOGhZxTIYYuDMk7E\nFvVHQOXAJC0PCMAiKHp68D4n3/DNwlvSDPh4C7pmIrMv8CvDCc+W4yMaRMea\ns8SnomzjC3T4YKjo+VfNT4uHWyCq9CumSfN+DBRSBcOD6T4obWIPrN60gpfh\nKoMxBIJI+K6Zfr4mHnqcCPpCYjoQM0YbRIANlJuEfxRYn4S1mmrBGOujZfER\nW5s0gCKLvFPqvpstvNxHWJGPS1AoJMnTN7amrV4SieRyCq9S7wg0lk7SchEl\n0Qfkxg12y3XeUGghIx21vWBaoqpRnI3OjMkJ/5GsR1Hi5wDs17+0DeXe9eU7\n21VMNVUb3wiFewPlPNidETRxpiwsjPCJQSSzDAd0j+ApxmXfU0+s36/KSnPB\nmPhX\r\n=Ta2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEfbn4fk0uquwZL7xYspYahdGReRYLoA3CPyaPIZNLDAIhAMvVPCj43khRtB7cOM6QmuePCXrbuMcn5D2B4nBld1bh"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0-canary.36.4125e1db5c2063108642983008195286569509b2.0_1604566840827_0.8053099400076646"},"_hasShrinkwrap":false},"0.2.0-canary.36.a4601b8c64d75f2197fd807afd568c02415a8b68.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0-canary.36.a4601b8c64d75f2197fd807afd568c02415a8b68.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a4601b8c64d75f2197fd807afd568c02415a8b68","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.0-canary.36.a4601b8c64d75f2197fd807afd568c02415a8b68.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-cVlnqfa/0cp3tHy476LN5uX3MP8QY3jEWoK/HvtiwzH+lB4FBEYxXUqndqlRRRpqBGKg6nQ6LFkAVUBaRtQLhA==","shasum":"0dbeb18961378bdf24ba9cef0e9dfa60e9b63aad","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0-canary.36.a4601b8c64d75f2197fd807afd568c02415a8b68.0.tgz","fileCount":112,"unpackedSize":239182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo9AaCRA9TVsSAnZWagAA8pEP/AlBhh+jphoYsFn27gqo\nlMLODDfg4mdGzl5rnCE0G+UjSam9YoXMaj8b7RJh1IwaKuRBn8Zk9dhkH5m7\nBurGTLCMo2D8vB0Q9cWRqZTliKuhsQhCD62Nvr5SiAMVNblN8wyaq1PFzh57\nPQmdT/Q3o1fJ29fFMt5xsUjC3ITFdphAtpRTXpB6jdH3cS9JT45g/FE4IgaF\nGex8CpFfxP8EqlQRN6j2N1gI/5kPl421sw2PF6zHWOoq+7bPabldmUkyJ6Qu\nKxvBBbeXCx5CzpTO5nTluaz/a9VwLzkt3JJUhV/rL7FP7sXoGB9lklxjnC0b\nbz9niBjTOZOT0pPHJ+tVLW6o3vBNAZTw9VSPi+/qQQynXUGimNpRU0F/huPB\nb2EnKSFzW4otP4sMELYBALyAfV1//afwUenYphed19yiZ4e/KLQcKdQEenmk\nyu5pqir1mFk61zJGxiuLUhCelr9NiK9UsZlz1u37042UHQfLNSB5CXmKAYwT\nHUd3MV/9J3p0CkbNPXC+ViqLeClpj0HNrxO7/nA2K2pIryTFMeciRVFC0DzC\nV0CBx3oPFW6vhzT9aNj/iBd90QmxaUZd1uVNpKQe0jS6127LAq+avi/NzFdI\nIjzJE7WhH/iqo2Q7vu5lwrEHXcsdHSDz0GPKDE8tFFIdXHjLEEBW0EwZ+ag5\nuOrr\r\n=izZd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAWyB2UTEFtBbJWMqtkebpSro8Bbt51jzd2k3U/+J8ugIgF5OqpdGXTYqh7pVAJrXKO68VcnNNWK1sOhT0RXOAfDA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0-canary.36.a4601b8c64d75f2197fd807afd568c02415a8b68.0_1604571162353_0.4372293485690064"},"_hasShrinkwrap":false},"0.2.0-canary.36.06fe92c1f54c34061185aa1c0c3e435cf65bd616.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0-canary.36.06fe92c1f54c34061185aa1c0c3e435cf65bd616.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"06fe92c1f54c34061185aa1c0c3e435cf65bd616","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.0-canary.36.06fe92c1f54c34061185aa1c0c3e435cf65bd616.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-3MYmBCDWWbczJrXlJrYlCyRBQLq09ENczEstNOqICm622JUms7yy/xQW7aq4Jtf+Q01Y1BQUuR1EINbLd3HfxA==","shasum":"f0f0b05001aab9cfb41b9870d2de9c45ce381e53","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0-canary.36.06fe92c1f54c34061185aa1c0c3e435cf65bd616.0.tgz","fileCount":112,"unpackedSize":239182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo90sCRA9TVsSAnZWagAA8toQAI46iVi1tsrTpIdrxE7Z\n3abaqeQygroN90y9hnGj2k5h5jEUvMKp3ztleEbDKyoa+ushF+PCvJ1clVlK\n8Yroz4EDPf9lt61S8TFxDxz2wyyI+sIkSXYY905mOZOKukyXrxPBGECSFPIf\nFbHk/C+gKrYb+M7uNVAVA4y4G2Ir4+Ar0T2gZHyC1IZh2ch4qU30rasqR2FK\nVnDwdA5oZnHgqcSj39c11aeyDJBi248JqPyCvSmyG6jHpWcP10OewONBMVPm\n8id63VaOJk0mAN2b7Sh0EQRIxVLMGta70yybjMqcND0W0gdv5Vmok0/G3SV1\nGu5enx/bp47/+77ue0N5d4aP+CeMduhm0Zqyv+6SKQL7ske10BTxr+XD0YMo\njpIiRslraBnIPI86tf6XsaiUSEUU1iPOohCazjf5akUVn0S2ztZVWk7p+kEC\niqUyEwzEPlNtLUu/OjFZVFxS84KF1MB+LmSiqJd+U3XVsd3KZmZb3b5rpK4F\niwynD60w+HhmjNNeie29FBnOBt1ne0G7/Wtl/qhhFPCtOGKxxf/ROm17kdPb\nrlVifXCbE5y94HoggswtQZXucdq19q7NkO9kYJg4OsmHsL7B+sovqwepy7CJ\neBXTw2DfgUEt7XatJoEH4Q0p6CMaNvD+E2KP+3Chq4M8qjfN6l0bK9l3VNCs\nB//i\r\n=SKB/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJUowiIDMUXOj7dW0MbpbnhsLj7LC2axqWguzlpGXgbwIhALbXxAsjz9ZGmhJbhPjv+IWi1S/4U82XVg8oSfBAOgNv"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0-canary.36.06fe92c1f54c34061185aa1c0c3e435cf65bd616.0_1604574507663_0.9160438268831561"},"_hasShrinkwrap":false},"0.2.0-canary.36.1cd239993187abfccd0b233054aee04a59b47a44.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0-canary.36.1cd239993187abfccd0b233054aee04a59b47a44.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"1cd239993187abfccd0b233054aee04a59b47a44","readme":"# Plasma-tokens\n\n\nПакет предоставляет набор дизайн-токенов реализующих дизайн «plasma-style» для разных устройств.\n\nДизайн-токены [синхронизированы](#Синхронизация) с [figma](https://www.figma.com).\n\n## Пример использования\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```js\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nexport default const App = () => {\n return (\n \n

Hello Plasma

\n \n );\n}\n\n```\n\nДля более подробного ознакомления предлагается изучить [исходный код примера](example-codebases/example-styled-components/src/App.tsx).\n\n## Типографическая Система\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\nВключает в себя все необходимые константы для работы с тектом.\n\nСейчас это следующие готоые стилевые объекты:\n\nHero Unit:\n * display1\n * display2\n * display3\n\nЗаголовки:\n * headline1\n * headline2\n * headline3\n * headline4\n\nОсновной текст:\n * body1\n * body2\n * body3\n\n * paragraph1\n * paragraph2\n\nВспомогательный текст:\n * footnote1\n * footnote2\n\nКонтролы:\n * button1\n * button2\n\nДополнительные:\n * caption\n * underline\n\n--\n\nТакже можно получить все возможные значения для `fontSizes`, `fonts`, `fontWeights`, `lineHeights`, `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n> **NB:** По умолчанию размеры `fontSize` & `lineHeight` увеличены вдвое, для того чтобы корректно смотреться на большом экране устройств.\n\nДля получения типографических констант в первоначальном размере можно использовать следущий пример:\n\n```js\nimport { typographyx1 } from '@sberdevices/plasma-tokens';\n```\n\n## Цвета\n\nЦвета можно забират из корня пакета, для каждого цвета есть комеентарий описывающий его использование.\n\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport declare const accent = \"var(--theme-colors-accent, #2AC673)\";\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\n\nЭто позволяет переопределять цвета с помощью [Тем](#Темы). И При этом без необходимости не загружать в рантайм лишний код темы.\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n\n```\n\n\n## Темы\n\nВ пакете предоставлены 6 тем:\n\n * darkSber – Тема по умолчанию,\n * darkEva,\n * darkJoy,\n * lightSber,\n * lightEva,\n * lightJoy,\n\nПодключение:\n\n```js\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// Подключение не из корня пакета:\nimport { darkEva } from '@sberdevices/plasma-tokens/themes';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\n// Создаем глобальные стили\n// Лучше такие места выносит из render() вашего компонента\nconst GlobalStyle = createGlobalStyle(darkEva);\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n// text, background & gradient теперь устанавливаются согласно значениям из темы darkEva\n\nexport default const App = () => {\n return (\n \n \n

Hello Plasma Theme

\n \n );\n}\n\n```\n\n\n## Синхронизация\n\n\nВсе дизайн-токены взять из фигмы с помощью утилиты [Diez](https://diez.org/).\n\n\n\nДля того чтобы обновить константы, выполните следующие команды\nв корне пакета.\n\n```sh\nnpm ci\nnpm run figma\n```\n\nПосле этого нужно изучить изменившиеся файлы внутри папки `design-language`.\nОсобенно внимательно нужно посмотреть на файл `design-language/src/designs/PlasmaStyles.figma.ts`\n\nВ нём хранятся вне токены стянутые из фигмы.\n\nПосле того как вы убедились что ничего лишнего не удалено и все изменения дизайнеры сделали осознано можно приступать к следующему шагу:\n\n```sh\nnpm run build:tokens\n```\n\nНа этом этапе запускается скрипт `./generate.ts` который перекладывает токены из фигмы в необходимые форматы. И создаёт описанную выше структуры пакета.\n\nЕсли что-то не собирается можно откатить часть изменений из `design-language`. И пойти разбираться что не так. \n\n\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.0-canary.36.1cd239993187abfccd0b233054aee04a59b47a44.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-HqerBioERw4Lg2KcVOBwvQsbA+/04dW5Q9gSk2/DHMrZUtNsuN4p+rJCb7Qd3EcAW9qN1fLGSwg3IpuSw0Vpkg==","shasum":"2661824e82406e27022c87b30b3c37e7c559a58e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0-canary.36.1cd239993187abfccd0b233054aee04a59b47a44.0.tgz","fileCount":112,"unpackedSize":239182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo99QCRA9TVsSAnZWagAAYq8P/3NQovjkz08tYAfaEk6i\nNDM1+D7InpJGKnbAQM0b287D7xsEHoMzQ9hUOjKFji9YQi/qyZxUIXYChOxi\nSWqOjWwrKIH7Fi5XDYFyHeNY1kfCa8HJyRY4XnFMHIBJpox4jU8WRTAeAFZF\ni2+Rg3sm+CXY4Xv85/XJoEcfZUkegN2PDgShlMrc5sXN2ekF0nAOuK+evw82\noMmOBxsMihUZvG6Gio1ZACrui+VamMKu2hfnRDNr2nFRYjhe+iiIilsbYyIC\ntOAx7AnVXBqad3zflf9vTb42qaYxVMvjcwbtM5sbsMPgTzZy9quHOrX8CY6n\nNmzDw70ICWBx+tey9dDNPfHPEuWEZvtnZB9g7CWFvBJE90l8PWQNsaPK5TYm\nbpaWyGr1m65pEt6PQmTFvQTWclFrqMna098WKYp+8BBnaoqT8Z4fS2AOASb0\nUHFInkWZUlUREIIzkSYZQQWc7etmRM/YquJ+XrmgYnYQaIXCfI9uroxMlBtV\ne8jQC4ED10iHHYlO+qsNcCOmqfNFStzgJJXu6ar+LmVTtUVXxlVzUSVQAIrc\nirO/c3GM8K7lPoeaTjUq55Xa1r320Bdvhn5P4uZPgPF2IjYQP6XA8dBa3yGT\nmzNy+HGtVbpVZH120Gms4zRqOJ8PzHdEwo3hcxngocSZootEFJUB/4WnvXvF\n9BBD\r\n=V8H/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHI7pzvxnBWDLioQAOFHpAutXhlYscRHQaaVHU54Sh76AiEA8MXNQfn45Ie4dtvOzxeBFdma83eSszD4Hc7JonG/uPY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0-canary.36.1cd239993187abfccd0b233054aee04a59b47a44.0_1604575056079_0.7326138315741311"},"_hasShrinkwrap":false},"0.2.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.0","description":"","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"0bbeb9d7d5d55f1b904ca18017d3cd0d52638bec","_id":"@sberdevices/plasma-tokens@0.2.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-4FEYhQU88YfAh7J5AYB5aCrp4dS90soRRgXCkGi7OI0oNMAsViyKUGNVzjbzItDeI9C/c0CNSNQKFOYI/pdB2w==","shasum":"3608bc77fb10c8ec70dc608127a85d3d0484a602","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.0.tgz","fileCount":112,"unpackedSize":239422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo+bmCRA9TVsSAnZWagAA96cP/iHPGjiZwu1OSWKXY7OA\nPvpjJGxfZtqVvYgYfqn9kfDlsseroXND32wPk08mRGh2X+YyVfUVZYTcOzYe\nElWfVhToHhbVVEAdxvfitQNONfN5zjU9Wcj5UtGO33CeGqCL3UAaMFyYlaM/\n4fvdvFny3D62VTdMy2Vc0KCyAJ9wiUJEnyld8/BcoHd5D/NrnMwgRx0hMOQD\niIsz+WTNCPzdJDMZhFN5yaxgc2InlyabXM16eeLzc80zHb8uTpa8Cyi7vgcQ\ns0pi3pOSrJu3X4F48B/yYeNhNkN5J0j4b5nQhHf+6XUqENQzsQt4rkDP8aqw\nBZslaiqaQPMQbwp4EdtS2LdrdeI1/fm4Osi5lraCkjx3ikpnjjIlSbR6q9Sx\n1zX/LyMYkpnM91u18EuEJrEmJW57a5xSqO+II+89BnFx0NMAz8DdzmZVPkrj\njQqYA42N41oOScJ2veRNU3GXdAnaJHm+Df43WZViHOe+cUa2JnX+g90rcyG5\nxUSeB6kJvkgffRIfGp/hk4mVMO6fYVOgXKJkQFdYr/Y1vEaUA+cWKf1xn2VU\n9NK8wcoNPBbUW+8gjEa4ZxT60RyJEU0VF7cHM6mfh9yTaP942jJKI7dd1SPC\nK9Fk61tT6e3h2zTWnkAkTON0NlrhyWG5sOlQ8saBJ0LYzC8bpqM7T1X653Pj\nykPX\r\n=MJkV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPkafaQ9xA5QezZIvj9i3TzbBiO+b3X/Ez8yeTdgrfPAiALaVgLnslVkJJXkm5VTLX/9YpSo+eoSExy1unHg7lQgg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.0_1604576998529_0.820851094342119"},"_hasShrinkwrap":false},"0.3.0-canary.46.989807093a01d5e01de0b1ca63935b10a43e83cd.0":{"name":"@sberdevices/plasma-tokens","version":"0.3.0-canary.46.989807093a01d5e01de0b1ca63935b10a43e83cd.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"989807093a01d5e01de0b1ca63935b10a43e83cd","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components][styled-components]. Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn][cdn].\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app][create-react-app], вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app][create-react-app] c использованием [typescript][typescript] и [styled-components][styled-components]\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n\n[styled-components](https://styled-components.com/)\n[cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network)\n[create-react-app](https://create-react-app.dev)\n[typescript](https://www.typescriptlang.org/)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.3.0-canary.46.989807093a01d5e01de0b1ca63935b10a43e83cd.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-6K/8EweUGUE6BHYwNR5Av2LU3V+yztEb5/w8HXX4PBHGvAlBDmc5HOOTpQg7W2Z7MJfXUz5zLCj4cX1Rb/8ifw==","shasum":"9be005dae49ebd07a3a3e914c9739b732cf1243d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.3.0-canary.46.989807093a01d5e01de0b1ca63935b10a43e83cd.0.tgz","fileCount":112,"unpackedSize":246233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqi9UCRA9TVsSAnZWagAAsUEP/A8dj9msyOGA6jY1T2Zy\nCBrG+ZPe1E3+OVbSQNAoPHND0rxmyj3Td7+cTERlJNz3xk9PK9cxjaGnu/Nt\nmrH08af+z80RCfHnJx8FyvctC/xL7N6GqOpryHNHKskRRvT9eXBf6lmn16Vp\naE0+0wyfen0tq0vE+KXBbMYRfY2amvF/LI34nL6Ngnv2fr7SbWEjOrIjmpt/\nUnImsPFgS2Z9n6WCmOy3Zse+5g6rbFtDGFZ6OCCNJYCyAZtpeH6Uwt1lo+8I\nEEsnNVx/MDR+5GedXXtvk7K1LQWfR9jeA6tH726bQxusaCeMX4Fu5X1Ljesw\nHiHFyr8gBntpNFXzwS+NCtbvlXDZzInVEQJ2EYizt4jOh1NoYOmwIQUgFqG/\nDddxMw86QTGB67xFgUz4+Qoty1qwFwAmJ+p0hlC09HeSzRXqAbQfMD0eu9iu\nKooacPymnnq0AE9mHTKZbsK+UpAUPxzm64pPT+UBPcr/Su/P+KuCGbbR75+9\ngCl81r2VILsuWLKQMGbxnYhTCxaSFUhpU3DYDqql6cOlT73iR3QP7qsJ2rMf\nL3//SfNO9VoVIcfBfRjkkSwfbUDjLlsB/LOISyFb5kq5pUdaDhSy9KsA0sWX\nGukJ+hha5agQpU1gmNwqrI6jAaBGedKYDVN9PZFxtH1/I9JTNDmRfB0YmoOp\nSZ2u\r\n=0kHL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBQH0Lb1LnpOiiYcLRwU7ZCW4OZnmBuMw44EWS7j0vuAiATMUgaXzTwbmtUOVNORB2YXU11wUvGoyHpH8olMJxX4Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.3.0-canary.46.989807093a01d5e01de0b1ca63935b10a43e83cd.0_1604988756230_0.21331298406857524"},"_hasShrinkwrap":false},"0.2.1-canary.48.1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.1-canary.48.1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](styled-components). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](cdn).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](create-react-app), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](create-react-app) c использованием [typescript](typescript) и [styled-components](styled-components)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n\n[styled-components](https://styled-components.com/)\n[cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network)\n[create-react-app](https://create-react-app.dev)\n[typescript](https://www.typescriptlang.org/)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.1-canary.48.1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-sH0j09MgANpvsFbOUgQhHioIv9mIleHcEcwpAUs7w/hktUQqoKK4pezuh/6FLbqRxDTO55IZcDCeGA0CA4a1Zg==","shasum":"fcf74f8ea289550e352f0517147f238caa0388ed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.1-canary.48.1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa.0.tgz","fileCount":112,"unpackedSize":246233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqpODCRA9TVsSAnZWagAAXXcP/iQYXU2ONzni+oP5TCcn\nKJzTORZTQxhTj2s7stbZhRFSnlFGoKixWhfWfeuGHDDXJlHSF2vs+HTIntW1\nL08cC33Ud4JxvxWSZK6LwelJ1opuUBOjsXebtBKkAG6YKvuXka1CeHK7Ky5K\n2fek5xb5sAbQPyGUkS3ZdHx/qvpBYeR32VCQnZFzFHNy0TCT+DOoz3jrR1rk\njn5msNSfPRC1YpdqxLIJtHx4p/IpLnYs+b75kBeC0LK1ReIQhKCuoIz9y+fT\nkcc/B8dWGBDrEdTSTN080nVCYWYZ1iRdVFcd8XM6oBo4/pdJ94hu0zrIaCGR\nqk9TPHHEZAzX9E7PzTtDnPEgF3y5t/7nZ5/AdRJkpfry/87eYouNFRj3dFMo\nC7g22T44xNKIQ51cXu/uKMyUMZ16Wyi3UXmMgWIYE3F7OeFS31xkZqlBIivk\n8mDM9Zzv7wYIbMYHJXkkinCGg71JWBOzWw2kK4NPAmJVOkj/ePdRp45xBv79\nDa0b4T1C2NrMckRTOCu6qt8/9GdZY3j9rwIay/Ycs5NpxdxHmdYhHjsXRUvL\nT6fiUP41+EW7R2P7f+SO1fsd5FUo3qUv4ZU8M8QPAEIBpnsG4yidtEFlrHAc\nDAiPtAaLIfqseOy8Zr4WJTRjVoB1l/Rgrxv/o+DTifaiQjpgAj8Fub0KmfpF\nmsk8\r\n=/fFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1C7LXLoY5axgCL4ZwIN5GbdaSzvYEDCIlLwS4yYxF/QIgYcMZgBUzrYldU+XkHlVN2zY0eB4TW3sRa/gkRoxfhGY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.1-canary.48.1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa.0_1605014402528_0.7026040673492053"},"_hasShrinkwrap":false},"0.2.1-canary.48.7bbab3f37388064c199a517ebcc9b5e347385a4a.0":{"name":"@sberdevices/plasma-tokens","version":"0.2.1-canary.48.7bbab3f37388064c199a517ebcc9b5e347385a4a.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"7bbab3f37388064c199a517ebcc9b5e347385a4a","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](styled-components). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](cdn).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](create-react-app), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](create-react-app) c использованием [typescript](typescript) и [styled-components](styled-components)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n\n[styled-components](https://styled-components.com/)\n[cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network)\n[create-react-app](https://create-react-app.dev)\n[typescript](https://www.typescriptlang.org/)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.2.1-canary.48.7bbab3f37388064c199a517ebcc9b5e347385a4a.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-Us9lWhx9dd4hIHuWXGQ9BrWSOfaE30wUGDmJpchDhJu23iAy6UXnZmUB+UQclLiBnim5xSXtxMxvwlKtc/yuew==","shasum":"f5a3e30fb1d801015b2425c014d35796a827cc8f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.2.1-canary.48.7bbab3f37388064c199a517ebcc9b5e347385a4a.0.tgz","fileCount":112,"unpackedSize":246233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqpZVCRA9TVsSAnZWagAAoBwP/Avgwuwvq24Ff4qFB/O9\nNK1kXjluNUKja/5qd3BgPdr2xK9aWry/Sv/d1myUjzVACK0t6Ofc2ap8c6r7\nyc7ffJFcHXZoVUgR2dXHlMeKGEGdW/vPUqgjtidlu7thmii45IWVG3lCWTHz\npgoJreSIkGtRvwCHV0apHHlLtkdDsBUOceLpU3qQlVzZSw+xWkL/8eZ280+8\nLUcrQ225ALR4FVHvHUT6lTHCBxqHeMEL04mgSJkKDvZBuIdgQzQvwNTkFSAt\n2lmyoMoTfch2vKLKgi2x9MuMNwC3qguC3zN722Maux95YS/4kyMX7W0xFgux\nqUTjb80lhCpPvlqNRIH+cyd9thwPBHol+eUiK6CdotWVYu1ODrRr6P4hX+32\nVz/ut5OGIis/pN7b/q/1wR4iH0uhEDHEpDYjBS/0S+oiie3dlyQj82ArG9YS\nQydfP8XQbftJB7q3TXXmG6xYwfLORsUJdUxIPo4mLYcm7JWQAhaCv9xX79Do\nS1f240/pSo3o5OTNZvD9C//yKSfOGM5owO3nw3HtMS/vZMaW4wRxA0Q2DB9g\nsS8Nk0mjWojjqxz1G42kJby7BV6Mjcgegafmg45Ah8rNm2JmUM2xarw/IsQm\nJyGnHgRXAdLG6+EzpcFlY9Kv5xKVFrFmqIA5rW0Ve8w6G1wxggJSzZSFrGON\nstOy\r\n=pgqj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvmxZOeOR5GP2DzpnycwA403WUm2ri3xqrsHeSQ4uDOAiEAi920hSDqKfDLSrWZdJWViUv/SbQ3UDUFGATHyvqlsP0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.2.1-canary.48.7bbab3f37388064c199a517ebcc9b5e347385a4a.0_1605015124948_0.18930758569203232"},"_hasShrinkwrap":false},"0.3.0-canary.51.736fd78012958d985e41379703fa8fff9f811577.0":{"name":"@sberdevices/plasma-tokens","version":"0.3.0-canary.51.736fd78012958d985e41379703fa8fff9f811577.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"736fd78012958d985e41379703fa8fff9f811577","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.3.0-canary.51.736fd78012958d985e41379703fa8fff9f811577.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-38BpsmOb6g2TOiR6lv7fbkY760oo0JU624eLOAZ75HTskSoh441inIZCaOR7JaF64o7b99YcwFsjj4J/KYeHuw==","shasum":"45e4400ac3c3048394dabfed80e1d6595cfc2c71","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.3.0-canary.51.736fd78012958d985e41379703fa8fff9f811577.0.tgz","fileCount":112,"unpackedSize":246145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqp3qCRA9TVsSAnZWagAA31EQAIEhAcKauzcpaVTUFD/y\nKKG8AuwTM5iWcC2K8vYRW6p3Q0QQ1DFHcWxKWVDS4SQZ/yFKRFuCuou/xZad\ncdHTsCbK6TaqT2LQ6ireZ7HFXkuAXfYcDzsjT6RauD5sUecMLyg1yL3CgQXi\ncUdSCzf5E8ANofQLtdyU0vsVIgJAqgIXT36fVw7Xk+vJl07fMU2hoVxBD9rn\n8H0dG5QHNWYganYHTallFz3stMgikSv+xcpNYATSKqGCTQxwahur2e8yyZIc\nrnDxKXZCXZ6tOqeiXWjxVqyUUbXxn65wV2Y91IwS2uAHg6mwxpjgG2ePS/ks\n7WEqWerFb6JPWdYBM5QtdD81fpBV+GdSxAJ8ZNeGNf3U9XeFYlBJys2x+V8O\n4tAZNbaO/LP7ogMj4w+thuUmFXUUZvLmDYfHIF1QAqTznp/KSYJWSGjWS7wc\nf/kuBZEd47yOvdcEWWVONLGEMvo8yrjIpNFTE53jUTUucqQvBjGbmUipxQWm\nZmpwnEfYjZtpT6M/2ZH93IFy/MyXo8hy2uYJzc8cmHwW0dzphpGKKX46rWak\n5DZXsQTbo8v2SNod/jMPVYHwh2j4DmmCunajg7Uz+3Ay/dmt/KEQALFcEzB5\n+aGGrzdvkvCS4d1X4jZf25LFm9jEP8k8ZlnwW9pLt2W0h+Jes9qvnuZmMHkG\ngNcn\r\n=nft1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcuxc0yW9NjfJz0gEzA7MK6Ve/0lw0G2n4kZxESYZpFAIgDKpQD/IvyfB67+1OQmwpSBijeNv/0Pb13ZMPTcUZOqs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.3.0-canary.51.736fd78012958d985e41379703fa8fff9f811577.0_1605017066122_0.839077436394748"},"_hasShrinkwrap":false},"0.3.0":{"name":"@sberdevices/plasma-tokens","version":"0.3.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"cd9c119b0bc54cfbd166a86ad809563b1c6cfa90","_id":"@sberdevices/plasma-tokens@0.3.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-RCy6EM8GGJttKxLbS/bK3RO8p99rurO75h1fq/zptfp9ul/Jwzm/PRqnVv/gVwyBp5Xi3xYU0q5SiuxrTAviGw==","shasum":"ea45e069edb0b24fd7e0fc9ccd0a0222e9cbcc48","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.3.0.tgz","fileCount":112,"unpackedSize":246830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqE3CRA9TVsSAnZWagAAC/UP/jwauPKlWFefpLCxkP0A\na80ZqYCXAvDkRwTcKCgn/qGuMYMkY/2p0FmePLTMa9AQLSiE7k5IoWE9uGVx\nD7iyRlYzuSjE93gqz99bsER5hXW9TdIQ8rvrg1TdByk9N5ZzL6PqIN6Guixp\nfr9nyHBrx0f6DeLSkrruk3f3z2qTqmoMNkhBYxWtV0IYb9Lnb6vNPM6cxHyG\nEFM1PU+/Q4IUhmSvTV72fR2xqtvitJIGiLt0gftTUXdyFQUUrPLtokXvLegs\nz9JDxVOj2DhaoEj3LNbOyKgzn/KpIKsi7kKUMsok1OFMzKCtGVaCL2wpRfMh\nErZWucebKtGy5bsD6aAeEqmfUNm6auK2d9WFlmF57N1ZD/mEFr7DGs1OakL3\nw1JIrlDJrXxjU1eDkRV/MQRPS3D37QxwhaJtb4WMod6CRuQBm9D3Y2skqoJS\nQmP68CjW5frGNXOnBUHduDcfnIt4ysrmhlXnowupZCQcih3ROUqowj4i4TE+\nohT17ANdG31MuCXWt3oKO3ZCkeJUf+jCt0Ve4URywOFdAxbregKizM0vbmrK\nwLzYnde1mpBSlpt5+yTef/coMJBYI5HgTXqmQxbtAdd3bIpFEJwMueKIouiH\neVhC2uxy+24gDrmTY1RHk3cV19l3jto3rYhsioFhje217cBA3hrksvHaLHZW\n8Rrw\r\n=5o64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtrTFlvOYLxqQnpBmRmARGz0pOUDt9WJ3OqWBzA5pwSgIgb7y42RE/4LZC1LclACG02TUvJchixzK6YlMbSbCygp0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.3.0_1605017910482_0.12817449790579394"},"_hasShrinkwrap":false},"0.4.0":{"name":"@sberdevices/plasma-tokens","version":"0.4.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"18491aa68a1fdffdc1b03bed93aa02bcde63d28c","_id":"@sberdevices/plasma-tokens@0.4.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-K5B+SiSrT8sMzJ1vPpZQ4xN6a8niZITDb+Nb9RqB/GjgJ+OV6dsy02Opw22L2LF3/ElD0qrni+1MaBmAORuWMw==","shasum":"0f13f1ba268f42d92f3d973fe8c516cd33e99d2d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.4.0.tgz","fileCount":112,"unpackedSize":247074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq67UCRA9TVsSAnZWagAAYKYP/1T7tEkmX5apgysO9gjG\nLITungibWToY6kGk2GWxZc5ZuygkCMeKkUfUglY09jRgD+Pbqx3xuKwsW2EV\nnRr9QR+Lv2tNuyBgek4NQCe1nUPUiCpkQRAMcSCr5G1SN97nAkhvuXRe+M4O\nVjk9eZ+02trwlJJ+jl17d7Yy3Xv8HvoLLEDymqug6uz+S6Xkc5DX+fKokhIL\nIqHeShmq1nZpuI/DUY3iwb7QDapWKG/hWCP3CoHVQoZgCPhK2+nddBcrwWKc\n2Gkk3PeMNxiR9pVxlDEUidcsUjxgy0WIBC0fbBvdJsfriV1dlUe8QcBF/UsZ\nqVuvC8ApBkVq+Dwq1FU/ZIYfLEtiOsuPtpuTyuX0ojRA+kKcF+A4H+K3nvJ0\nL7s2yqov3xsD7EaF5aMaP4O2WGnOXl+Rkhy7+LaiOkELNY+i8eat3ebymo4d\nq20Q3z1YlFBhPl3x7IleWGth45t41eZdGxu0fyBqcPSjZU6DLd/n8cEK2Sra\nBPOdK4FOoRoKEvjUnrkSwWBdn3k1H1+Wp3Tt7apmanwaQqIZweV4+9xIW22X\nP7r0AIM26kf7/wkfQpJtk3H8YL33OnAduA8PjckhkIiQxOna+nBDJcuClKSE\n9CKPHk8aUbsH6cm83cgAfI50sMrsGUNenvABjc6PZLekD2dvaDwYrf4UzyKk\najjT\r\n=pB1D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtODA6h70Oyt5+RL73Lz3kliGlNLfjDiGY4dxTVkZXzAiEAzL67X1i1S3rixKnYXmJUnhARClYlX3WsjtHl7AMNP6I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.4.0_1605086932196_0.4815876973238542"},"_hasShrinkwrap":false},"1.0.0-rc.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"eed46cccd949c8acee9d90ff358d543d73b5ced9","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-rN7ZYVwNoo0A33VmivKTZaXoARaTnTh7sCFWysMqUGNst7fLeDOXGHb8ps6uPb2d7DiRxUoIrjyyAKB3OeqVpg==","shasum":"044ba17bfd574f31e2a899d31a445da78323ff62","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.0.tgz","fileCount":112,"unpackedSize":246972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq7UTCRA9TVsSAnZWagAA4w4P/iqx/FDPHXOSYYBtWd2z\n4AT4tIYy1tHfeGdYryf1syXWe5zJMk4zc4G2/wbqVX/xiCBDlFbzIYtBBSpr\n46IOtDV98W0CSOtNouQhMFKjh8FcpxuyYbG9dTwgUfE964t3jPCX9Jj9SvZY\nSTaIT5Apk8P3ODPNZllw+1Ssx67Or3BEOOvn7591Wglbv+UMfvMaGsxAJVPL\nJtsgiBR0dueUUZbCmzRe7g2BIR7yjRU/za5HOXd2f+BlWlb/GceI1M/rUh6F\ngPHt+NiP/AQIbqDr+PFn/lKS9GZHeELVxYr9aEQTDMTqCAqGJx5CcVRrv32y\nagAzARsEoepQ5kkZ3HzqTHVicmfmpv1qJwSBvzrwMoNQQbYAABHXSv9qRAkH\nZe+TYh/UJ+WZgc1oycxuPc6JFA4RR60PPd/pI0J7oKIlk8zhDg3wYJu8QKHj\nBSfH8Cra8JvNYAAJC86z4Jlgm8KL7A+AywdWjK9IcbLweD7kNVl+6u9Oo0AL\non7v3IyAmE1aDuuAHetymIg4S4FnJnF53GFdFbOl+47Q5zqYfGk1jSmxUIwP\nMU3O/DanfqqxDr1w/HvZ0UVL4csPI9bRfQ8BJZgmbIaDvAJdl0K2a7z6tgCJ\nlXmFRua7pk+W5xNS8vpCB3jwKNHaSVNeNlKMObZ4T46hcN4rOSKFJ1A0rU2A\nJMkI\r\n=6jfz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFocmFYasAqW80uxf5Gj5mU4Ik7xDsOYq4LlpNTpQU3LAiEAzFB/w6k1ndTS6tveAOcotslBTYP5Nc4Xg8Lk+w4l8pY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.0_1605088531209_0.034196130143754555"},"_hasShrinkwrap":false},"1.0.0-canary.63.7e5877b7c3bb8adaa6c378f24a068fccc71f3c49.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.63.7e5877b7c3bb8adaa6c378f24a068fccc71f3c49.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"7e5877b7c3bb8adaa6c378f24a068fccc71f3c49","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save '@sberdevices/plasma-tokens'\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.63.7e5877b7c3bb8adaa6c378f24a068fccc71f3c49.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-JZsdywbwFceC+zmgH2/DZIlNNa8C/ceO+pj0xtEQPO8SLiQ/Uz4UMakiHIzP/EoxLnAqgrLvtmW0O9oR766AlA==","shasum":"3ce4554371d72cb3e8e0e446bda83cef69fd2551","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.63.7e5877b7c3bb8adaa6c378f24a068fccc71f3c49.0.tgz","fileCount":112,"unpackedSize":247184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq8seCRA9TVsSAnZWagAA9dIP/0lXeFPXpYWyp/Up0yU8\nFTWY6c1S4Lm4oFBb2ijc5W+8/XUCAuC/2+f/4NnMDXvmUFcd2cJgIuJt4NmV\nZmErKMU+ub/nQXflsZgre4fYNF978zvMPkZASdRWStqlchlvkFqth6NeDr30\nkXRyiVYCApRolK2DnyWUmZ+4w+w+ASJi5XCkZFQoIYs7ZlPhRvRaaaZkd8BS\nwhh7Uymd7yYB3hJBGYlCD6qq0B9G9iEgn/b8NquzEJKcvsy2au9dz6BmT2sf\nU/VZGtmYAKt2h4Wg4DrRZud3NSMxp5hKbqNrEBry1tp1dvlqxvJEjTa6h0nU\nTq5WpuI8LRsImQcrXKc5/h1ndJZE4JoVvOpKKqbQ3SCTQzfXiVlPE8rQt02/\nN/gtXuA9P4gcV06w7jiLua/Z9D9m6QsovrxFSao4vSkGjxlkpOSjuBQ8n32/\nwo1XT//mZvREGFTUxtuBYiLG1EohO8nC3pCU/BAvxR0tvKSL0NDm5BtyqrPj\nurCjTqy8e/TaxPB487H7WwoiyJfcsluaSapl4DSA7OVVpsOcKrz1oib3aSLC\n5H4a8sfXSEbNGuEB2t3DoeedNiMvd3P33CDtn5bslZpoOHHTMgBu7ySLXaTx\nvU4jRdbmC2Yc+WW9u+4Vsd9CNKRlT9oNKV1fuBXuGbLyvY3kRDZDMrD+Bqcg\nAVIT\r\n=ihhu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7I3MAEii+VUdAUde6gd898AaBEKhl8AEcOkSDdcd+YAiEAwotl/bLyngaIOkaqPagFtxOVf14lPZ/Je3soZJCJ33k="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"awinogradov","email":"winogradovaa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.63.7e5877b7c3bb8adaa6c378f24a068fccc71f3c49.0_1605094174406_0.13529560434153187"},"_hasShrinkwrap":false},"0.5.0-canary.121.fa2d050e85a703a6c379b9beb28d65f1100306f6.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.121.fa2d050e85a703a6c379b9beb28d65f1100306f6.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"fa2d050e85a703a6c379b9beb28d65f1100306f6","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.121.fa2d050e85a703a6c379b9beb28d65f1100306f6.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-V5vzExT2u93PBR4o+99zfjnS/UuTwi3Tsdn94NLbMf83m1AHLWjDMmN/EFP21d5yP+59IZsE3y7mKYB3xcZTfw==","shasum":"af646823008d2595ed9e3e59d3699b1e95a5baa6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.121.fa2d050e85a703a6c379b9beb28d65f1100306f6.0.tgz","fileCount":112,"unpackedSize":246940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3lKkCRA9TVsSAnZWagAA6XcP/1CamUZmQ33H6Sw1epYH\n0zJc40vx5KR+9hpufuAcBJSvxKMsh91+iYWgf13Rvhml5FumhCBdJD1Ai/Bu\nAeVmf4em0BoGgd0s2U8VZ82N1W3cmrM0m0xnG8dd+Rpsv8XZ7vzCNtZaRCMB\nik2QUDsU9VJK226D6UjDUVtODZmkQMiLwmmfIapxHKvZhsR0L0PWdoMQlfCB\nk7P5PHoWnW9q5B885UdJvc56tR/OoIkj38Q6Lb+SgUeuW86cbSYz5xWzDLFR\njiGFPmMxYY9LnuYnUbMsg519XWSMVeUX85lVKWceT5FP925FGV4cDA91aHRr\nnzV9p04QMuc9NVzVOeYoMQRIOjJKlyWLbhbUj88U5MCZVuGHvwf67pnkySCo\nxjkWgjo+lr2Yv5Ul/TXW2aVJfH5FVeJPSUkSuBBdf3W19SqXVrv+NWPUC0eq\neE+ja15gbLfBNMZbrzQgn38y1pU+LliDNMhLw2ZKMXZwumBgRThD646OJTWc\nk34fCaqX/GN/P/eg8+5ML8oFvwtOrDha+uD7xJcw6aKUMz0PiZAhPHW6tURH\nik1C/rTqEcBrkuEnNngSr4M93sAPF+PRRkA7bjEgSqUokjmEoZDnGI0Qz8e4\nii6AcMEkzVOZ8+dpLqzFufc1R/8Vd+e1mcRwp8+jbgF6Nksi/PcSmfo2djBJ\nJ+S3\r\n=5nAc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGoJsw7gUpBRhbkNJBoddwsmeH8OLUykJN+PQN5u4ieqAiEA0JobA2R21x+Z/Yj7g3/pDr7QgKpbOzNbDFdbVbrT8Vc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.121.fa2d050e85a703a6c379b9beb28d65f1100306f6.0_1608405667456_0.8064169721752479"},"_hasShrinkwrap":false},"0.5.0-canary.121.4ac1b1010bcb87c759b0b971bf62f12dd1107cbc.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.121.4ac1b1010bcb87c759b0b971bf62f12dd1107cbc.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4ac1b1010bcb87c759b0b971bf62f12dd1107cbc","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.121.4ac1b1010bcb87c759b0b971bf62f12dd1107cbc.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-HSNQt04sfP2E287uIVEsq3OLrLMabViwKXXT5KutZ4aMyRn2oqUWyqwOQoRKdOq5YVv4EHicmBxe0tKC34XJCw==","shasum":"cf89b6f3175acf42834c46681ab9a91130a92116","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.121.4ac1b1010bcb87c759b0b971bf62f12dd1107cbc.0.tgz","fileCount":112,"unpackedSize":246940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3lVsCRA9TVsSAnZWagAARnAP/A0+mL6nyEZw4+7osGEN\nvtxwgi7/CYDTQRPaN8nKMPraAj6033/qqStAjOR0WJESaJe1SML+47bVFKbm\nknWfYDfwD8MQeEAOE2NYGEpSqgzaQqTUD/hd2vnw93QYOCvFIh0CFe9NGK6E\nRcaqQwZgqKVdLubFHQ6lcaSv3mAF/clgT+rpPOhEcd8PMtzMf368Exkb5/6Z\ngixs7/w+7+72ZpqPOcjpLKBpJ4OMn2VQx5RyNoHeBq46Bad7ci/N20ih0b7G\naCDm5OTk31FuqZe51vlC1rYN+ImWwbVdtj9q5pmeAs/EJLeTIMStMlvLqN5c\nFF3VRxz5FY/QuIpySIcSePlDR15+m4ka0sJafls/dTlkL5A+uXq04Sb0nkO2\nlo4SmD4Zu3UieNXGyhYYJx0KlXA+1b4Ij4Qg6juP21PfZs8JkeTk2PxpaMP3\nexcPv+I8oiM5VIS5OGTlg39OW9t76/VD2v6QeJgimUuu1EceFmik7M7ScLH1\nXDJ44n2f7yz81sN3uP/qM559EHnP93NJBR2Q7hbwV5WVUdWt515XQ3hLLT1E\nlFzttWZ+DYMzCgxr/W7zFs28UMN2YgB9DLAMbUEHRdLo9S7+7zdr4bf8dhqv\nTGgROpj+/ZbKsJ2LxUTKLUuJ9jEkNXAXepLQ3KNpakRcdtx7I09ABqGRgFfF\nAcI4\r\n=cCRG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjquNCcCFOJ5HHwNoTjYGycS+TZvBnKNj7PQ3LzDgJhwIhAIFQENSpCnewrPvEmhKgT6Huiv+/WtkhO6D4ZdYz8li1"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.121.4ac1b1010bcb87c759b0b971bf62f12dd1107cbc.0_1608406380043_0.8698785453519038"},"_hasShrinkwrap":false},"0.5.0-canary.121.30a147f9730b8a87eb5ca20f611c1bbf4456b9b7.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.121.30a147f9730b8a87eb5ca20f611c1bbf4456b9b7.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"30a147f9730b8a87eb5ca20f611c1bbf4456b9b7","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.121.30a147f9730b8a87eb5ca20f611c1bbf4456b9b7.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-5Ap7ERytUVx6c99EqYeXBj2iBAoAkxP2XC8P7MBF5jbcdCpYeJLF/Yp+teo2+GwDr+0ViqQwxuMEwNHcwhC4Dg==","shasum":"e427f32a8568756eb173dae3aa28daeec78b877b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.121.30a147f9730b8a87eb5ca20f611c1bbf4456b9b7.0.tgz","fileCount":112,"unpackedSize":246940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4F3ZCRA9TVsSAnZWagAAj+4P/jqFyZ8dqGRNIHGIgje3\ngLVn+ivA1Kc+FxeezIRotvyoyZRQkvdTTCoMJpEiVLFjvmb8L41hg5tsYlr5\nYf+u8Fl4gfJSvNfNWGrFBCRumzQv/uvZyRcf4fsZf06oRTX1hGP0hhN/U4sK\nn8Bk6OYHfRADZCT4c9Ne1uW2sKyULbMGcWxbI10scGS7SJ8Lh9GGNDxBwEKk\nHjR6eRpABrCe+zkLm/xJAlrzGu3YjDbpDz+5t/IIV3tKGcTYTOZg4h7jF7jP\n0duP4VkiloHXMliB2x4MDSZX5PUtorm4+HjPLRxqvOqX/KH3fXmHANwbYJXy\n0VVCNPBMoMK1palQoWW+Dhpl8sncopNaIkA7A29Pm2L0o75QaSuola3/B0RY\n8+LYJ2Tow4dpMqw9e+Ad1edehAoldbNy4t8O8fZ2mmZOrO6YcTeq6okPPZ91\nhsjVhp/0vhAqFK6MyPJEG/6B9qOUoavrpbyEd4GaUiUVn80Y4+GZYlHJ+Gdx\nktdeU553GMrHSo5N38LjVH12O94bvXAeRtTHxrLZ7qquVGdyBMSwuu56CtVD\nTx+lLJpZxnCAzuTB/QP/5DBVBkEzL7GU0ubTlZM15bbtGUMdr2UjmCM0rYhC\n9SFhH+LzkHVCzDeWoDoQlVW1VwF1IHn/glGd8/BtpNTr8Risn3YWp/OFFgfV\n8CBf\r\n=Yz/T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsZrqn8iroeEYBzygBOdnKqvEtRLj8kLtCYMVxc9Pu+AIgYmI6Iz8aVQEN+EkM2ykuxpPA9s8lq1+1hOGRvNnHsOs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.121.30a147f9730b8a87eb5ca20f611c1bbf4456b9b7.0_1608539609119_0.6041835093113421"},"_hasShrinkwrap":false},"0.5.0-canary.121.15c66314d72960b2342eead8ed39de5771c755d2.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.121.15c66314d72960b2342eead8ed39de5771c755d2.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"15c66314d72960b2342eead8ed39de5771c755d2","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.121.15c66314d72960b2342eead8ed39de5771c755d2.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-7CwIRdPamF7zAX40r+5GVYwoO/ftOCrYYs6pEHy2aMwFRZt1SyzBYjz8cnhBT0qSJBQrRcv4XvhXtRxZQ09aWw==","shasum":"96f57d2748f71595bbec61930f29ef20fe76cbab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.121.15c66314d72960b2342eead8ed39de5771c755d2.0.tgz","fileCount":112,"unpackedSize":246940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4GdXCRA9TVsSAnZWagAAjf0QAKE9Hl+r9WePncgrHxbS\nmJPrhfgQLtoHty1V0VU7fqVFwtkEyPp+Cf+A5t6N/CzJ6bWfw0wcbcbITAf0\ningVFbhAXo0qSapiwHJehe1Rt3/zejjDCLRk1/nFMOv+JrGuRXJ+vrr8a+mg\n5itIKpnm3y+KqNlVR7HbWWcRx1TfG9fSf80hijEv71SuMwY2t5bRObNoXK8U\nh9nLpQBgZPW2Uv4BIWWPuOFUTQsrH8vZLIJHAgUcl+Y7z2Yjw8+0/pYTFpek\nSsFf2snplWq4agDQe/WAJ2NpdPKqdW1V522jtcfCjwJH6UeWYiNz9itnkRRs\nrJXZsuBxYDX7OkXIQVE3yyIEu0VCDJl6kOvgCCpveYDIVqdPz/BzSfdMoV8G\nyOWisSokvHpxULSH2yuReWxxBmyqhKZ+Z0X1a9npBGrAMwf/TiRdgfbBtlDO\nvLV6fyGYJbz3JkqOsrd1RB6X5WdOGM2sO9ITxe70tmlHRVrehJt4KtQeZ88h\npYLeRA0ahcMt/N+nl/DhXNLm4xwkazVo6rbvXMe03LsoO8O/utybFc4oYXej\nEhuYSRuJd+jzRqORqa6+/roN6Zp9F8vsuaBCY6Vo3iv2H6UBVZuJd2tnUFjT\netlOI+qalmCkV/Vj5NFfibyx3XlFUuual/5VIIdozcjEzUuLwHKWdztolFWb\nqjC7\r\n=2XjS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHyq9ZgxPzcfyb3YkiV9QUbzv1pJdAfsXnhooN3K45XAiEAqMKLBr0KIucP2c5xPmNxJtydkLjSBBcLziWoiG+Y30M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.121.15c66314d72960b2342eead8ed39de5771c755d2.0_1608542039174_0.6340536348945385"},"_hasShrinkwrap":false},"0.5.0-canary.121.3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.121.3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.121.3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-f9idPA9F/kYmegGefe6FHIBwtgpRI7gyhYuz9HipsYRdBlcnOKx0TFFnvAzhnkn99Eb0PKRxKUo6UMM7/llcBA==","shasum":"c254f28f8ea837b244191f07e1d1a21497b2edec","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.121.3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563.0.tgz","fileCount":112,"unpackedSize":246940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4HfmCRA9TVsSAnZWagAACcYP/RzS+2wcXKS25bVYp5nD\ndfB6rrmG6Cbhs4UE/Seci5xo/veSMxOa347stQxvRclTt1F1BrIlB/KAP9qV\nbDesruBL/O3srTOAEnAv2BA7csA+eT3HtdnZUVypBz9NvpahSJDlT3lTOFF5\nABwNd36CxDb8B30Dp+sLqQkejyJV1hKVu+CjDwVidyvBEkgPtlHK9tZ9P2ir\nY0+m/eFIcFul3aJ/LyNmsUf1bWq4Y578m9J8EZZuchAw0Rl80/nqfMXgn4Fm\ntyH7/AurKDy8g2XGDkZv5UZJeT/tDRZtTdZ4rxJ6JxTgVyRZFcTBvA9KoMYB\nzwjMzwLFsuNPqZ6/aItOjZ6EIcZKdlJoPg4+sb8Mjty2KhR2aCbuC8cARG7Y\ne/9DrMzYvchV9e9nYDwixkMBENjUUosp+RLeompS/G0cgD8L//5ik/udFTDZ\nURS9gqJf6BE1LGXmfhVa4fg3OrnAx261b/MTVjlPvbugIDqEtpqme4uB9vy1\n+Wh7qan2CGKYBmepWnowZ804b2Swnwc2922qDT1HjB4d6w6l7Wul2GBFUK5M\nV4XRyGwOZ5RoTC01/DwDw80AebePK02NxFN6abvzYAwOSEBYlbXYp+MoXg1M\nFfaf98WInfEcMiqi0isubSYJw7Dmy51WehEIIAAh5VecvREharAxY5zmj8lY\nuPyw\r\n=N+z1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUkFeM3uN6LYGqhPz4sZWZ78mP28TU9GQ8sNfR42bGjAiEApte8FVtetaGRyz/1kDkcrKL9sRUMVoPiZ7wXFkxGKno="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.121.3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563.0_1608546278197_0.6104076567758763"},"_hasShrinkwrap":false},"1.0.0-rc.1":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.1","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"ac95fd982f4317bbe7fbd01b3b64819c9be0bccb","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma-docs.netlify.app/typograpy#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma-docs.netlify.app/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.1","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-27pghmX/BL3uuTqkgoXIIcNPJ7BKNNydpYLrn05OqOf405pBDVl9BMsegiZKCvCyuGlDpbA41JDMa/11Jh1B3A==","shasum":"d97845a43c7854a4368346058de16d70c26660d1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.1.tgz","fileCount":112,"unpackedSize":246727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4H3YCRA9TVsSAnZWagAAnX0P/iiInQfzMHLb8G/wMGkW\nnnVdigmK2rBN+b+Bh2+ZSw1qgwMDzxGub7nocfRNahiUsaCsf0VPiX6Q7YSN\nrWnvCbZQ+vOnEF+wjmWnjHRJddTU/L1wNeA29axBS/06yOtl6NEUysg8LfKL\nhbnvvJOzzk0hc6MFcAJQdAmLZYfsMFbYElgWfiFPmzwpnZlDyxprd3DKim/h\nHhtS85QOD6PbTkhlVCd2qVZOhVpqit2NT+9d+DD8CMSZaLR0PkP7lfAzGMBh\nYKGbhwlwsJKB85jVkWmEoXO6+gcGXvUEmedPg7tfFtqDnJK70gHV3ba8Tiaf\nUAe8DmJrIWM1hNXORNKsjzD6QyXRIeZZNRAfj/J9rs1Ig4aPimVavLu5mLpT\nAY8MhVHP8vnPsX+hcRwiyhSVuBOEQ3qBFe99yQ+WWSevfjfhXVomPijiLqPV\niB4fiq4kr5oV4qo/ZftmJcuchXC6uNl5KL6p8EjHbPAP2OkMTNv+wvxH8QU9\nO1CrRWAsVHkD5Qld82g2ztweVStXcWpYU5F1f7MMCgVjL7UPDMUOQoFOJ2z3\nmqHImF5aCGJfOpHG/F6NzcCofyBukzU4mwV12HJY4Esc2I8S8krKQ+Kx5QNx\nuRVzHtDiNYQ53EDe+5xO9PWR5EC3wrR6baKFh751jzFJesUp+w4pmPrs+3yM\nc5sH\r\n=rsGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhTiom6t9yfAerQNbZv3lGuaqvp3hStXWPSbshinY8WAiAvlQKKmb/ozolAUoGIyPqIV6UR3upsNBcMtrQAH0ciqw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.1_1608547799569_0.5487105611527934"},"_hasShrinkwrap":false},"0.5.0-canary.138.67475fa66fec8b231aee22c09d945be9e3e9d9cf.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.138.67475fa66fec8b231aee22c09d945be9e3e9d9cf.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"67475fa66fec8b231aee22c09d945be9e3e9d9cf","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.138.67475fa66fec8b231aee22c09d945be9e3e9d9cf.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-I+U64BehTL2FfQEC9GzQt+WAdsAyKQwytM4MbALhyQUlAzUh1cV87DpXU6oAqE7YbgCcziCEJDzHwK2M5D3qtQ==","shasum":"ac0928b1dbdbb33e6a347fa975a062b9298d8bd9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.138.67475fa66fec8b231aee22c09d945be9e3e9d9cf.0.tgz","fileCount":112,"unpackedSize":253496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/WK/CRA9TVsSAnZWagAAA6oP/0+9T2NKO0NCOExPTmS8\nDzb6MBIc4STHOgiPxilscsf7QrZkab+6YN7oOPFR7X/JhKmTvQ0RtsVNi1tf\nlFAbZZwypbBDyw0Ob9DHDVV+pAR+fmLFsnSrtyWq8yCTBfa+prBaljz0+Efy\nGMpCI3qu+FrK862vSKL0IXXlXd7VI6Pb3GOKw1IBCvl3jYxWTfrxFQAcnxcz\n8X3UQhFM+7kitPFJQ4UR3kV/LSeIwvSY+RE/X4bqHwZNxUArnHtTQ57+5Eif\nhHTcCLT15T2kK0aswKCmteTOb9naXLhcw/rbbH2E3ZGEbeS+Kj0fDgtYv6sG\n+6K2mNpISUCcoOEFFkJ2DMEqtPbkxsFmvb6Ur8j+q/AtRMwgblz89ZucW5Oy\n2OALmQL/OGZ4Ki4EqKYl93qpSSZLnvQD0c+EhWrODEvESGZl0/LfUwFAbsvK\nexlbjycAHnZAjZcDXb/IH+Bq5FJRU9w4r61dZahsXyAC3Gm+p6kOWD9sDIGh\nT/WIuNz1bqRgoMzhcsPnFmom6ClBs9pVC7NW4kwnPputIk/dD1K0ayJxpSyW\ntnHlSMqaCRL7nEJ0cP4Spo5QFnt3MciRZsLE0CY79au05jeQ1s4frSPhpuFx\nMxvSP8tr0xJatDzpgKuLbFmRL4QCbgvWOalPSeRiLeDp2CP+ZI3x4kM24Bwm\nB4iu\r\n=RpaW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDorVHuL7X2LOd+v4XYzXZ/gDvdParUIl0g8ItplN/dkwIhANYNa1jbZY2Xn6zKQTK8OAKi9NVQ1fWA6qC+QfcNPERo"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.138.67475fa66fec8b231aee22c09d945be9e3e9d9cf.0_1610441407229_0.8904338598010737"},"_hasShrinkwrap":false},"0.5.0-canary.138.72b4cb752353d7d62710aa786549d8d1ec3cdb65.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.138.72b4cb752353d7d62710aa786549d8d1ec3cdb65.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"72b4cb752353d7d62710aa786549d8d1ec3cdb65","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.138.72b4cb752353d7d62710aa786549d8d1ec3cdb65.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-DlB9XWveTwK6FCboFOv1LADv+gxfKAvrb//JYLpplRELcf5dSITU43Z3A4FB+B2uQ1Q+DZJPrRnqXxfb9hwunQ==","shasum":"276d6955ed16560e8bac7a49ed4cfae97b570955","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.138.72b4cb752353d7d62710aa786549d8d1ec3cdb65.0.tgz","fileCount":112,"unpackedSize":253496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/aJPCRA9TVsSAnZWagAAi0cQAIbP5I7Qr+6Ed+JHHluG\n8wcPXp5ziVVeWiRNwWmhU4cnc6Hd9/gexZTpvq5b5ujEXad03atMxCPFz0Ji\nL5j0ih9juu5qd3+Lvr1sJ/63GKkJ4bZPX3f+csjwDWgpcBHbCrHcQU8bBCan\nttpr1lm/7uvJCuBtbTP05qagQNcQg+MzGdsqHF2Iv7D3CJCCh1rC5eI2FQiF\nTa2XqxOdU0G//TZ3oGZruBTInH06s5/AxrW3i6+cp7WK3VKe+lhtwOjEdNR7\nL3YxgaVnv/j5HNFTRN3KG5BFImW832SxECTbPMTXigIYpPYEu+pTKQvz8LWY\npWkFGptyQyDrolCAOvW8+aTLU+Wv7HGeh7KmytvKXk5djY+y/1jSyFxq6xQm\nndOT+je7SgrG0lSOYA2Q7/KGzB57YRhPbwCsFCt3sFEhUawPvX5eMxWOZqTH\nelo+fjexiXFGvPi4MvODb94VcujcJJmdVmVcO53Qy5W/Cs6Wb+BXys2jA0A5\nI1/Msm1GU8nRH0rjw3UB+ameKQwZpRrIZ0erhNPl3pwEXrw9I0LrzL341NfA\nro1rcls5YnYgmtlSwyntDHT6m013FwhZOuSI+gwdmHbCV6JYsYt14+k6SsN9\nn1+at/6dRkoyhxtURVLBAQ+JsCbXWblrNZACzr3TBpgsBTAy5rhE8jbBPgan\n1Ho6\r\n=NWDk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICegt0+F2mNJyaic1ZwmEan8kdGL4pmJhlNTxt5hA+92AiEAqZzf0yiYKW2UyIUzr0YNIkQWGHZfTqk3GG8x9M0o+Ws="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.138.72b4cb752353d7d62710aa786549d8d1ec3cdb65.0_1610457679255_0.6261295577237662"},"_hasShrinkwrap":false},"0.5.0-canary.138.a2e920370ecb7ab2498d3408ad32506826262335.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.138.a2e920370ecb7ab2498d3408ad32506826262335.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a2e920370ecb7ab2498d3408ad32506826262335","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.138.a2e920370ecb7ab2498d3408ad32506826262335.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-4MN5j/qZ+sIW8AVtb4kzX5J7KfFt+shDsCr3M7QN6SYS4DQJbszM0qkMt7zH6w3PMWZW8eXT5p3KxXKE7hPkFw==","shasum":"253f994ea90c6dc8144ac129fd20800503144629","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.138.a2e920370ecb7ab2498d3408ad32506826262335.0.tgz","fileCount":112,"unpackedSize":253496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/rBLCRA9TVsSAnZWagAAgXYP/2ej90PIsYb8aL94EF+0\n96mbHtVrfiDEph7vaJT/YVIdYD9ODIDW+kxfMTANlhYP6NTQorMVDUVajDE2\nS8CH+0w3wPiSi4N/i4Eeg8XhUStfaNdwPT0Ez8gvHk68OZihAK15oHtpLRvP\nbKfpXp9xnZQXazfnJq9QLRkph0ZYxZru+Zp7//AbyCfdIhPKoN72oG7C1XyY\njJeLEIwJI/0/II/oKV7wZ5cpm+j+ioTtIgwdL4YDdjlQsKU8Hp/iVK5HruA/\nJAxEkf1bkE72xUuHeSHRDbtnoHkDVVzHzGzOrTrmIICtu9pZvQn4egREC7PF\nSeXKUIyeQQkLWN/8YtSsUMJqEhZ8gD3+2FEAtzfaWSsegeLyq6Si1OVyh3yc\nRUe07JvPvmZm/9roB7lwbX7gQRHF4rUqbs196sRM2QxF9Qs+PVl3IBxegq1i\nCf12/uscMxmd5z7zg+xdftAOsXNhIHyXGWMlrTxi7Vv3Wcq+UALX3iRqNW2c\nTi7wHO29vl6tC3KS4i3bDXfioKXoutrjbOw14Al+t47erQVYS1nEVChEFdLh\nlWvMXzwJ31LKz9zr5EzS8LcSZ35amt4jIJHuIQJz5/B75hJ9RyX0zJwPM/c3\n6NOp5yAyjjuDdUZkuE7Dk6H6IsK9KbwWw2p5RvI5cvSUeE+yvhh+UsJTkChN\n+BIZ\r\n=zReh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEqGr1Mkc1enkmJmjBrlHDOv/YWjBpa/aQJQx2ZKYzWwIhAOmg5HLKKfdMYPqNmMQ7zFreTV9zwAXRV+tbbCuRoxGE"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.138.a2e920370ecb7ab2498d3408ad32506826262335.0_1610526795459_0.9466485781501137"},"_hasShrinkwrap":false},"1.0.0-rc.2":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.2","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"5b3e4e022c99c2033032e048b888b0e244b4c186","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.2","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-ifFkmJVBckyMS1Z1890MbglQ9wN7amUiSmzcty2/4xqXj5vxQzQyNDtkGuezZBtujaPlDhVkLnVOUm5qjrrzpw==","shasum":"d1b6640b952e79284ca182db9f6db16850eb7c2d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.2.tgz","fileCount":112,"unpackedSize":253283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAAd1CRA9TVsSAnZWagAA23oQAJPwScH90b68IuWaG1PS\nRb3wiAmeIQOODkTLhIp3G0o/I2c1A3f9M9AJfhWUf9aNWzsRIaCIEuHdrY6C\n1dplat+vz2hH8W6G7q2LrO6Heb6DH6xjX9T3ipa3FxU8kPv9ElJty+WCHlxh\n31KEH/3XysGCOil75CfKkZyu49O7xhdF91vjR3VchC1VltWVwY/Exu/cruH/\nYp6o74Shg2vx3AAUTTKoHXk6upz6+Oc1iSh/AeeVnSCOc2a4Kd5V3/lPEfCV\n7tIYr0luoCsWuGnvYlTpWizWm64QRJcA97pPB/9FCq5fOdE8iNaowwRKLnK4\nXd/ffyVGcWgQ5r/k3PRyFGB8hXwdiflyaA5Dqv0u1rapqDVe8SAKlpf1Q6ZL\nQeFfqEhJlL+ESVPNYYctSd+bQotpxzcEniJ/qh0tlfuTu5NBkcN1rgtUcicq\nNEjZHE45wpAAoRFZzg7CRyMpLdY48Xk8CKouUQrx73A9mE1OsEEeKMz6x4Da\n+uMjkWsBqog3OTMM2cHK+TLbAX0xrjfXQ9bRa1aZl7lh0yoT+r76X76Er2Gi\nrmkMs9JDQxAl7A+ZADMuvn1EZGqZS4aetsnnif1C/85MhWWmM1Dw86UBZZQe\nkO8Atokj34LblEAxTPspQwIlR4mFYwfoteG3KyuxBEcGdoVAGCCC1j6bRLsC\nRAeR\r\n=+rvA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCkssLVLRKvA6g0pC16HG724MTpNSXBz9CyWRoMLAG5AiEA4uMxbG6CxOFCVXp1NPvP3+6+RwnS1a/JrtQ/M82Fadc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.2_1610614645218_0.08431941306530488"},"_hasShrinkwrap":false},"0.5.0-canary.159.db93da82140a30e7b1d2d482ce44a729f6a4495b.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.159.db93da82140a30e7b1d2d482ce44a729f6a4495b.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build && tar -czvf tokens.tar.gz build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"db93da82140a30e7b1d2d482ce44a729f6a4495b","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.159.db93da82140a30e7b1d2d482ce44a729f6a4495b.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-0CqICB5feNnNlF2N0UYIljOGYew5C4w3KwFEzpsOA3JPw4TW1l6HaJORMhyn6zzcoFyxDiuJNpfSyy3MjNWiuw==","shasum":"fe50398f0b9cfc188f82885e6067332311e82261","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.159.db93da82140a30e7b1d2d482ce44a729f6a4495b.0.tgz","fileCount":112,"unpackedSize":253684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCAnhCRA9TVsSAnZWagAAcHsP/1e+1TB3CY5a1agEwzNC\n3/qLhpzJBrtEW3ufcM412o65Xk5/ERcEkYC7Y7pRYbR0rL+a70kHQbeXk/TU\nx7ZITQrOHVdW42WdIIXJNx/1Xu0VhnE18a+3cwN5Vi1yTVuOYsjCWU7u1IhG\n3E7q2KxccrcYOrP478xfyGLT4BTEfmzUVkqwB13KOGVrlee6WXErs6p5zR9i\nT0D8D2mH+M8JmPck0ps+HbD4C5/DPQSNMkGiPPx2jGh62WlaEFtdtiGH0Eut\nuLIG3J+O4RtKA3RNrbdbAjkSz/anhjAcG8EwDHbA3/hSQ4w9OQZy8ol6Idy4\nGwjJ7pdsKOMbbJbcYkC1oZ8XTQRtQ5iptXuPmtVDlFeuq9nFyyNE9oUZqozL\npeyGqi3KSBSfc91lurXL/JT8o3MzsQB6IXgspVI6VORKbocnx4O7hQy2fukR\nc6vm3XbhLbiaRSIqIKgolXf+xmfdhHV6JejIduSyr1/VUl/TTnZQ6MApJ2O2\nXmBVSb7LNfVRGDEAHgaSQaz5OUDBl49B+zpbfoVH7oJyK6JV7zeem8Y2DmsC\nfVp/9/lgeklhYgAV8TneHYnK/BNICRCvpkxbeoYmwqWAj3Ci3O47X4Wjijn3\nh8XCqlxvsWga87lPkZOjIo3nR+f02AXTagAIJ8Fs0rFDlOVUHV7WtxjJOPt0\nhn1I\r\n=bKyv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqkSflfrYkDSuvHCkgoZftoskTz+J8KjWi5aFVq3cmRAiEAolqMaPU3ASkK8W4FZupER9yBE9U/2kJKvlnshLHPDIk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.159.db93da82140a30e7b1d2d482ce44a729f6a4495b.0_1611139552713_0.5960283243757092"},"_hasShrinkwrap":false},"0.5.0-canary.159.482c420417eb42655006372fa5a02bd24b283985.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.159.482c420417eb42655006372fa5a02bd24b283985.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build && tar -czvf tokens.tar.gz build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"482c420417eb42655006372fa5a02bd24b283985","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.159.482c420417eb42655006372fa5a02bd24b283985.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-6VCqWqPvOpGhw2/UWvw2X1VhMPHD6Ht8OxWwZtCS6/nNPb4bgkKNfdX9CwkUsZO+m78XXxJAGNYDIRzMFwVZ4Q==","shasum":"4f421cc4e559fa25d517f9f69fff8042cfee7031","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.159.482c420417eb42655006372fa5a02bd24b283985.0.tgz","fileCount":112,"unpackedSize":253684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCA1vCRA9TVsSAnZWagAAZ6oP/2GdQ64QIc5xtitLFnb/\nqkJBotBhl+e1AH3pf7MUrjbJQWDFO609XbTP6/mU+7s42+9BQ37OLUn/8GM1\nyG3pusM96f90lzphJ2spHua+7nV+j5VImKkoyqeqR07xbCXeoyPq/6LCpJeE\n+GhmQZlH0tGgw1DmG13F6pXRxQSodJBfjopQebmUq6ORNmBqvKc4yAs1TiBP\nBobkmYAAXGxHyZUdkj1XrzkKD3OwpV1M/tKRvbV3uzy04YDiFM+mf6nrF6w+\nCPCEuRCseb0qwtseSnT4LXSlZEmjAEs8X8dZ5d1+7H0G6lCXrMk1Y8UewJba\nfoQM+q6GYEpCOX/bbBu8S0mNbQ7VffVYdkstpyiJkluI9wFt6nGO8BqJZ2Vk\ncHDjKfPmIKsA+++AFzjrUZf6dGVONdBAPomALylyNCxHkLZyefsqQcZgoDZe\nMwOJ78mk6FXYADD5y+8j7n/j43J60Y/osgQ2spO4OsuZMj4lxr5mkNUL8SYc\naWLZOP1Sx4UtNZyeAc3ule9NNTHbCTJcPZGBSLR0g+g1z+z/N4WWM5wge39q\nCFUtPO14yUm+3460YDamtw7QOotONDA1/tm/6ST4psrbpKRcHeqvolVRhO0P\nJP2d4t/IJ1RxgxZ6savGmJmwx3yu5CnQLJG5ueXoTLmbLj5hST1iL6ZI6Ncc\nYg+t\r\n=tYez\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYmH24oSiVk4AcAmYTeuSXFm+GV4ZiMUpx5/13i7uVTAiALGvfe0smk8TbTGU5s27NqhstMyMrN+dFpUrf6JHL/lA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.159.482c420417eb42655006372fa5a02bd24b283985.0_1611140463437_0.6015488394485271"},"_hasShrinkwrap":false},"0.5.0-canary.159.0c57d15f12fdcc4f09c051750fdfc65997cb272e.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.159.0c57d15f12fdcc4f09c051750fdfc65997cb272e.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build && tar -czvf tokens.tar.gz build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"0c57d15f12fdcc4f09c051750fdfc65997cb272e","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.159.0c57d15f12fdcc4f09c051750fdfc65997cb272e.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-eVubVBuxv6qjl4AbVv5tr8Mu6LTpQAktUexhHp/earaR4M3fd0GonQ9EN9brxF8MD9ZDnUAzDt+kqTArjc3nAw==","shasum":"5b82cb985e0ab244358b6a110a8c0cbf2795c676","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.159.0c57d15f12fdcc4f09c051750fdfc65997cb272e.0.tgz","fileCount":112,"unpackedSize":253684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX5qCRA9TVsSAnZWagAAYSMQAJViKPPfS8gblrUe6EwS\nokBwAblOFuWHWgOA1l8Wib09R1EKlXv3jWy+PH4WR+ri5zkq8Z5SKMEwUho/\nH8A3ftQKefZnwck0JYDH73GXNjdjIVAmIOmLXphF3adMopuExkG9pNBMT48F\ncXR3KfbYRpYxWFGRut77OR8wA1I8abVb9RcXcUzQsJ9cF7BQvTT5QQXUPfdB\nZe6sl3U6PM3t9TA3bYmP9Sthodx6cP7spDux6uIJaX71G/RxUr6S6S+6nYQi\nmsLk9Y6Ji4qLsEoNklzhT98OQZCn/Eu6plE/9fXLI8toMF0Ujm5vevoOGi5v\n2oD9AtmbaOk5Yy8ebutRUFmhYWmt6Ul6FkP0jOz07wc8/umNZ9tE/s9XCC2S\njT9zidUCIg1ZknXur0lM+/0dsPU/K72fxE5YytoW6VJfT+bTHhcEAyC5qp/M\nsUgnzWIEBLVE7XzkONZeDDVNp4SigTGr1wnf99lUeKDrZX2KTme42WK0tQVR\nWagm4FLaQWluawgqBcMaqjs01JZdlAA5dX+fcic//ChVRapnYWoCYy9JxdWC\nvMbBOazUrBSO0Uz+Sj3ISZKpd4AzSbPtF29skQA2c4UvMveM3ShHEIf1zxRJ\nStga/FfMHKsdRm9XOCWExI1uNJD+osx13SGKHENeiID2ISS3zTtij1MFhqlG\nefdZ\r\n=VgRf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDArWvn7NzVXv9eTLnwJX5ppVGmq/H/uXCz4CM2kFQTygIgOxqRNjbpPCmb6fNIgHVOvwminuMdM/nHADqDBuDTMSw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.159.0c57d15f12fdcc4f09c051750fdfc65997cb272e.0_1611759209942_0.7225751234943407"},"_hasShrinkwrap":false},"0.5.0-canary.159.9191d526a6fb29cd0912d4d41fa771c306a12b26.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.159.9191d526a6fb29cd0912d4d41fa771c306a12b26.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"9191d526a6fb29cd0912d4d41fa771c306a12b26","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.159.9191d526a6fb29cd0912d4d41fa771c306a12b26.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-dtwXXB2E7U9LeUdNFeRqqnT5AoZzJGmBrrxbTnFjivnBjkPxgqRwW2eDWHNqU6aG8krOO3ZVdIr/OtbjFCtN0g==","shasum":"fc218da7ee23b6aa6dd33d7c52e214682fa16de7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.159.9191d526a6fb29cd0912d4d41fa771c306a12b26.0.tgz","fileCount":112,"unpackedSize":253651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEwQUCRA9TVsSAnZWagAA41wP/jLzPlpFkU+CoVQJNN/z\nI/rtwRziRPUxGLbZNTfEQ/cAIyfaR7lZblBhsym6PtJ7I+Te45FVldX9Veep\nbmeyZbZ+I3cS3+++xR3jc5VS2Wh2G0denlCQWkLRYUObHzr4/gPPhjio+ljD\nqRf1Si7YU8fw0+Zb8tRe5nw7gdxYcTBA8heSwuXBseLuGMmGilIjGWXYMlAa\n6mgO9XuJR+LKVgdWl3998401pi9XzU1vS6cHfPsytfCgJT+/f62antUHYBuo\nsScnbK0MEu2bEBPfYdAtn58uvmPQGsRYQupxVESTqfvI0isxemy4idnu5AJW\nrNsTySJS/R/WCW0m7aGdtJqzvzDKfJDIT22bV+BycyqZ09FK3DL3dNmadHhN\nSbRCueEfAQXgUkrFzEm/TDda3IyazBl/l8Tn/g0aFkBVFgi4DIQ7B5mrbHxR\n5k/9EMm83/TPzk8iIoT4PBmhnsB84H3ofTKG0nidj/zV6d9vyVQlM+J2Ae6j\nSsa8IZbQIBtDxhaBrkKnY+YbD92uriS/A8T++l/jHBNtzTLDTTG7Nj5a8taE\nsF+YYTTQbcxr9sL2S4b+2mn3Vvk1m3ngISCetC/SodV7TBRPd5YcgsCX1JKO\nWs3MwwJ6mzsmvRh/6HgJJLZXUjp2KcR6aU4+llUfC14Sqh2IwGLaZV/1ECzW\n+kSP\r\n=eGXp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5SOwh7LNmhdBTMMRPYUoMaIl3f8hXrIeU8j7EaSFaVAiEAuHkjFy4pI6ezexEoTaG9sUzyvSnyWV/s4gDq/2BXu5o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.159.9191d526a6fb29cd0912d4d41fa771c306a12b26.0_1611858963513_0.34006421817021093"},"_hasShrinkwrap":false},"0.5.0-canary.159.16a028c6a076e38061ed42666d051b3126687810.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.159.16a028c6a076e38061ed42666d051b3126687810.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"16a028c6a076e38061ed42666d051b3126687810","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.159.16a028c6a076e38061ed42666d051b3126687810.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-WYBu+aPaKmhEHS5VHpyzi9zKO3mAyeG+CfwcN3JNTmxSUXqvOPVortiV0Z10tgQyYY7/XaFJZgYgE+s0auYfBw==","shasum":"8a2524d912b4f45a3cde9c44f7ba316d42550819","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.159.16a028c6a076e38061ed42666d051b3126687810.0.tgz","fileCount":112,"unpackedSize":253651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw2tCRA9TVsSAnZWagAA6tUQAJ1ufgX7tyBHX6jDLHDE\n4JVVv66Ea0IBEjcEUrniYTuoBvTJSACEqGTK8YqAKgDgIfm/PCCgc3Eq9Nl3\nVis34QXcvHpux52YQ4w9eCw5irLK02ewYUG+19hB2mmmDcgsAkjQrdGxGNpc\n3aDUZcsIBaJqc3hDrsgv+ctHI9buRSc8wcZaZLbe9y5SGK22zRirfkoh+P/r\nE8CYnokoIrPaHlICkPeTa2M8gPYfNmpYYw99lK+lBfs/E4nNLTHDTuE+AMdy\nNC2MhH8zDULKdcU3tydv0dldSck7P7/qOJokco5ytIlgRaKIQXWPp5PymsPk\nj6tlX5rAmBUaWI1eD2DKWZ44Cm3KR+Z4c5bhCEu8L6py7IwdRSpd/Xw7uhYs\nvAHjOS3kco6P7QJh1uEbXPxhEjsrlerEvxdnAu9xjM4p5M1amnEDnA+0Z32u\nRUDdNm6wIJSwrn5zzfnNp9rP4vlgAfTjSMxFviw2A04SkKFlY95CTcJEKFqM\n8VLQOs86tbOz4lIAKxG4IaFf9BkVQVVWM5MQcf4QfQL606t0UZ85gujRyotJ\nC9b2sAJ2PoPQx4PjXkfPoW/QjSaayss8WWFc1yT+XWAW307U+lt01zP+V24n\n3sLa66o/v9PVjsD9O9oE1yE9uG413NFgj516DqpNd/mBDeZGtLvzYCNJ0b4M\nsNPU\r\n=RQlN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGeKbykwyRwXQ1OQCMUu0OKpfZi/aeOrRGOsl86qw1dpAiEArOWtO4BChbuJv2i3m/lp9jOzZN6hA8Dx+aGPDOffSos="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.159.16a028c6a076e38061ed42666d051b3126687810.0_1611861420970_0.6254297937252751"},"_hasShrinkwrap":false},"1.0.0-rc.3":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.3","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"16a85c6e55c64b6a044a3702a48b9d0387f05938","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.3","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-AFWDpY0Ih1HBTqsUWEsH7DJ90yUuJEuTpdWDQmCcKzNiBL8xUktRbYseFBSKlQ7E3GpZSbt1hDcUmNnHzB5bxA==","shasum":"5724e969052545d9e21b1dab36280c23bf84d5f6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.3.tgz","fileCount":112,"unpackedSize":253430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExCGCRA9TVsSAnZWagAA5bsP/1tLTqIo4EaS6T6bzAGd\nSmGzEgqWsTb+yC4HApC42SZW6tzOwBCp8JGIfq6IZiWfEBi6ltDqAmMY/spk\nwOyL8RwwOoTCRCTbPd2HuCIgvak0nKHjNHZkVH9XFeh7PDh48iheYnCxDBhf\nixmtyceEs5ErKaJhWSl1eEEgMOdLI+8xcn+J7FXsVWufWDwkeuulV01alTba\nNCVPZxCfZMNr5vDVc83ZrKaxFV+p3pU7Re3PJoGu2rmRCzvuLgKhcON2IGt7\nBuNtfG2G0/qNjwxDlvCQRT2wrlkJt4PtOBK5Z7m+7tp37GhaKmv3p/e9xUxZ\npmlBbuTmF3tCJcVfhbHZ/enaSFlcemgMrDi8YMp/ILNLU04sqPZnqm455ZM9\nm/FIqDSm8W7plRZnlfYXA+h6zgdU4uMzR4shd2RHiBksdXKxBS9DtKyq8B6k\nrW98d540AcDoEGsk+rT/1vnAt2xKj8BYzU224+Lo6GsMpLGxA9KzUouyLtP0\nzFF9LiGMfaVqMzZwnok7ln9Km0qK1AsX0P3SvnTnzfB5Fg1HZK/418FeAIsQ\nysswB457A8nUPpRxo019vzeJZJV+rfMJS+pQIC3AIkMIxjqd8J34GYtjhPp4\nJIYp1V59kPmHYCAahxH8I0wK3Mo3AQdaq72lOb3fcEK8IrINWle/7fnF5UK/\noDvF\r\n=wyAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFm79ObFlZyJuvtoK6gnmd17Y4C6jCllnTKvST2454yPAiBIpAwSqyqF8QfLIFyBSGM2a55yxJy3oLV7Bt6cvVUoVQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.3_1611862150052_0.8772138743433409"},"_hasShrinkwrap":false},"0.5.0-canary.218.ae10cdf247d912a7a2236730a8db184979544db0.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.ae10cdf247d912a7a2236730a8db184979544db0.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"ae10cdf247d912a7a2236730a8db184979544db0","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.ae10cdf247d912a7a2236730a8db184979544db0.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-5FWeEK96MtJSXTAC+nS7bLBn+l/pXaxzLXASYmWALf6ZFRMoT+fdsk0b7uBTbPrSKPapMAzNL4Lcrcyarujueg==","shasum":"56e22c90d3be767a9d1db542a6df54a1eb619ac0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.ae10cdf247d912a7a2236730a8db184979544db0.0.tgz","fileCount":112,"unpackedSize":257197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL9xPCRA9TVsSAnZWagAAbqMP+wT8kIQq55PIaUftZLPZ\nx6Rqv7MX1CJQ9UqHbvUAppGmvyDyC9Upkc/vNezkUNOSdU8vmYiZdm4kcZOq\nzhJsngHCVdBMJiRWqjj/1jpKG7GMc76MMby8BC0cd2xPrFKuonpZXIA6C2SE\nzAZpHtDElZv+b+UGH/bnUNIhvaQRZGzeXYc6eobmhYrLsjMNSuaKjesfSFcj\nWVRBYg3JmYtoNxVOVahn2EWAAswnjHIoSb33fFiqNtycap5a+vJRuTuPA25x\nLZ1+0rlyFflAKUOphwuVcgstTkOSPPCWrQpGsayvmEMzPNNrSnkTwThxf8+j\nqNBkuQzXj0jGewCkRWSpcF6WPLGpVG/7vXK5k01xWcHFMnjfKd/liTAKCZfD\nDxU/+IeqvH9MQG0TUK85GZvl8AsOTFcZgum7hn2X+ITST5oqaJ/x9/K10OWI\ntjySg0ZCPA0elnzcJsQVhYlkIHKKLRf5aJ/+M1B6eTml/Aa9a6TrAwFOO0fz\nKjBU2wSlM11jGCOafm7Nok5xyj00Wtm3D3Fly8FaG/Ea7YTtkptZXmSjNhHj\nq5UQ/Agk3u9ondDbIOXmZD97bI3vjYVnGWo9YUigzmFffn+QTuV9UN0SG+j2\nDt+J7gIxvVkWUUdA53S02fZsZLr5LCL5dFxDgkejfSEzLobKP0XCnFGnWOXc\nIOus\r\n=eepe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJhiSMDMLYnUQf81g7NKfKSYgiXnkrUglC9Rqi0rHoHQIhAOXpBIFkgaLd83H/YQ5lfWK9BKjwEBasaKqnloTbavxf"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.ae10cdf247d912a7a2236730a8db184979544db0.0_1613749327107_0.3079061554489957"},"_hasShrinkwrap":false},"0.5.0-canary.218.f81bce74a8e1222fe6a1b9af392c9e7c6be80574.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.f81bce74a8e1222fe6a1b9af392c9e7c6be80574.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"f81bce74a8e1222fe6a1b9af392c9e7c6be80574","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.f81bce74a8e1222fe6a1b9af392c9e7c6be80574.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-GawPcYAAAS+kj4GgEE2+HQOgwtLy1rdHQLiEUVbgcs8lDjM3e7PHSF4Ck7IWzaPxkFIcWF7tGiGTw0W4BkOA5A==","shasum":"b4ebb6a95514bb6ab7c5bb94e8772efb2aa56022","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.f81bce74a8e1222fe6a1b9af392c9e7c6be80574.0.tgz","fileCount":112,"unpackedSize":257197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMLqPCRA9TVsSAnZWagAAgQoP/3FKwA6JULJQKKKCkKP/\n7DsqPBd+tDss5LbbhywfBtFQaj11vxHYX3MfGY4XGQSXxl6ygdWQb26WdDta\nQpY9Tx1k458HnjM6563hqVIkuS3zH0DNfsBBUoY3DKO/AaqtvXZjK5udAxgp\nu6yAfD1AYAeu40437IA6Wamur1NVdKNjk1MDJlzNUHYlxD41yU1fiC+rGfLY\nBTbYVwI/8PvohkNA0hHq/5jmg+FhJ+iT8lO7CVC88O2SIg0LnQN+d6R5kuLf\nZhtV/YJrsAdXhvF5fX2D6nXVTMWbNrZ6MJ5BOcJghGJbz1h9Z8eljJBL6mSG\n8Neq7TohO8PHorLM2f625R0iQCZxwB/EaV+/DmIaliRu85SlopCcVj4r6L3F\n6yJZ+hG3r4mQNQPK5VGMF2WLXZGwVQ8wlgfEEix6aNdrkdpq3R1SgpGqRb5N\n+gcpkqkUB2OSPVtu6HjNO5OV52Cy/rHJ0m+In39HAWKR3FTEsb0NsSzQGC4C\no7lKh6W6oDn9r9aoVUaHEicryWQ0ovILPRyvedz+JS2zywMy7ZVoLq0wayln\nf+S+DlzA0XZNybENYW5g/xazTu5CfHx/bCWscaHiG235HWIrO7l1DTQcR+39\nnm/suZqbtlqZaL3lakjMy0K+SLVf3uzve+X9glaikXISUZcIwOjZ/6sEx9aq\nFfQg\r\n=5Wxn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjZYd7yU7uS0j1UmvIORlJe3fNOT3qJdQTYEJK3MAPOAiBhE2z7YN6giC3uQSOIlqjVLV/0DsXY8bK7ENFF2VLzQg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.f81bce74a8e1222fe6a1b9af392c9e7c6be80574.0_1613806222892_0.5174893642999836"},"_hasShrinkwrap":false},"0.5.0-canary.218.a7e1e9fcb826b0b7d5943658dd01add2819feb81.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.a7e1e9fcb826b0b7d5943658dd01add2819feb81.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a7e1e9fcb826b0b7d5943658dd01add2819feb81","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.a7e1e9fcb826b0b7d5943658dd01add2819feb81.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-nqtaXUCdzYDYsb1ai6OpNq+jgOkpZM9dKz2UDfKCUrMx7dGf8OMdf82TWfWuZoQoQmdVB6DNbKodBC9Xdhgnwg==","shasum":"06c52242c8b9567c2fa00dc4092c53f5006d0a96","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.a7e1e9fcb826b0b7d5943658dd01add2819feb81.0.tgz","fileCount":112,"unpackedSize":257197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMMM8CRA9TVsSAnZWagAAiooP/iXMq2+Zd0EsNrU9Xs0G\nROBXn6ZEktknJCwPoS9zPj8Kdz+LSwiwtfEElSmkh7EZSZvphUuETqelIJ6r\ncxGna52PyseNJwvc3oCHtpVKZ/3gkU2VJ5JRnE9uNVPStLrnTPt8AOzlgf7y\nWy/3SqkrDWDz7xj83OxQcKEPhBrav91QCh2K6HX1nbPNyeQZ24ZlwxVI6trb\nBiKodUAOqRahChC4L6itQZzkLh7Qua/Z4fjGIIv2XLY5YMYTtBVvY99uctGb\ni5HOm8BB/41/RBFAJHoN+6KjKIaGA4vYeXZAyCVlUTG1mLslMrUE+DPBsroX\nO8Oeq80CbcZuz3aaLF7WbdgKPESCk70CzZw8UDFZT9WllhLG05dQgHSJP4/N\nUXbLu7tfHq03hBG5k7nZZJbYZCjD+C0/Sk4pWQV4Nqy8dpSCfwmeghut2HJ5\nY+77K1VObqNpwb/KKHulgP9AjDwhrpBYXiBCd6zA+/TxtRIBTR1D7sOR6GxY\nWiEOIpG3qNqR6nZBBHgFId/aXe7I8cP+AL7B79kTfIbrUEba/FdIBMFR7TDI\nw40lHy+09K6EBcBIMmSw05Jd/NVbaeUAuV2PGOXqXs+PSl9RJ09wPxTGw1In\nAbnTjBpvwYR6ouHmaVu0cFTJo1RYhRcuwHjqoD/ehEPBW+KTozNT6L3xJDSm\n0utV\r\n=4gTW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD51sNIMxtLAD44EvTzm0nfwHdhrDT5hoje89AMk1g0ywIgIhyD1D9KGm8Waj4hyiE8mhC4a9qIQwx7BqMDeYXATS4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.a7e1e9fcb826b0b7d5943658dd01add2819feb81.0_1613808444534_0.6752131264753001"},"_hasShrinkwrap":false},"0.5.0-canary.218.543e6fe3068d732d7faf97e303736bfc489ff624.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.543e6fe3068d732d7faf97e303736bfc489ff624.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"543e6fe3068d732d7faf97e303736bfc489ff624","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.543e6fe3068d732d7faf97e303736bfc489ff624.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-oiaA9G7ojdhOZv/W4wrh2uCZdwGzFYfZT2MCuWVgQ+wq79DmZzkC52RYYyuG1pR+KH3wV5ceFVtAdP6k6/7riw==","shasum":"b9da60a66ba182bcf201677c4d2b817eb08b7521","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.543e6fe3068d732d7faf97e303736bfc489ff624.0.tgz","fileCount":112,"unpackedSize":257197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMMneCRA9TVsSAnZWagAAkbUP/Amqwelm1ZqqhTZXZMIP\nssEf4KKoeGDNkUavs+tx5YSNORZIV3rZ6y9Va6nVvon/oeQroE1yb2QMFYFy\niYgkM0Wn4BFZWQGVCKVPFYctVtpO0r7irJG+KXegL5hlGFmV8W9nC/9KX08G\nMhRtGADvjgxxjp1QZDDfe1jXadgZjZ8u3xVe9mOYdlaGVuEp9oH+xNPlGLc8\nE1TQ1onCLRIqWFsh6uGgBcxVIB26SVdBIdM9EbWr0qdndJoXWASMGmCrPWgu\nYvCfcR3q7QVwyhAd4tAL06xoFhIPgnl1B+9WCt8DEp6QOMf4jRn4Hpniwwlq\nZphMswwEC+JE/wAgricHzZ7eYbYVKee44ghF1uxIQ7rLYMuBNVu5TuFOL7wa\nK6agc8R6QUjLKvoS1CTQHcbR+HY+dpDOBOD0f6zKIm/DxIaHEM5Xzmz9hyuW\n8Jhl1KfXjbVslKAUvHOr9FucSP0SYAOu2CRLOYuYD+qfzI0uzYGAKisc2qmO\nbJrmnPUZspeCCNLE1cm1KDb29pFUik1G0STkEMhSVwT0xzVoCC8N9d82jJC1\nhrL/yHcm6yowLDnHltzzexJO05gfjtvAooIvKkK9qSRXW8AkAMWpsEDC5vSm\nqpQJwIBEmlVzcr7gYRObbkpJEh9wyNYaF5s+MLh0IUTNQX/3QRj7n9WiFK24\nHxBf\r\n=YkCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDusxgMorZgbDsQeizZ9aLbib2fylNKhoImobUlWquAigIgGAS84wSbVpYrO2vJNkj80Zh7VHsdSNcUPNeSXBsS7lk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.543e6fe3068d732d7faf97e303736bfc489ff624.0_1613810141597_0.42616991910832547"},"_hasShrinkwrap":false},"0.5.0-canary.218.330b4ba909de1021de68cd7e30d9ea4536d4d868.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.330b4ba909de1021de68cd7e30d9ea4536d4d868.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"330b4ba909de1021de68cd7e30d9ea4536d4d868","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.330b4ba909de1021de68cd7e30d9ea4536d4d868.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-Kz97VJy/OFC47/tDeBJbeSbnR09hG7LazJv2FSg2ETWbHevc1MsSl/BlnFMwEA1CnDeXockMID2eWfzSbQFimA==","shasum":"31f9051b6a5c3e2f9e7e1419774ee7de1af67366","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.330b4ba909de1021de68cd7e30d9ea4536d4d868.0.tgz","fileCount":112,"unpackedSize":294685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMNdUCRA9TVsSAnZWagAACRcP+wWOAbBI2fp1FXmNZEKv\nINroYUC3ncKMan82Q3PeLZqArfrr/d/xQQUdTr7B0ev1N1QwM5gKjGMROs+P\nffSR6FOlaR9nxvhN2Kt1fcC2Wv/m3eKPSU6uNPZNLKKXOw/AfciFGfMRNSdv\ngB7vpA2VF3KDSJGzUbVpuJ2P0DGrgv587OETK+n/L1qoilWs2Z1Dfu4STyMF\nOENKE1KuypDOYnhBMcQlQymTu1VArIW/vM2ISdSKq3NKb1iTE7t9naJBGVVb\n6GtDZQ6upHXgBWw83pORl/CDQgXrnQUFrrSnvXVJwHMWAcgKBUrSlzmK7mE4\nEcah6BySTGSHH0JB8ozG6aMAKHI9uNFSvSxG2p5bbOC+1SRupPyXBVcqJPCS\nL5v/sHJgfGWSbGF3T8qALTgLICkh9FOKNaKCyxZX4h6dXswH/yc1dCU/WA5+\nAyhCRi5S38Fxzn4f8E545ns+d2r8qtQ9TLrn/mXXEKONP7NNn6LOZfKIth0+\npIit47iELpsqgqhm2e5f6SJQoyl6EF3q68RgmcX0uu+HuM7cXFDGqPS684Uo\nmGfyuyhST0Nj2N4XoqRRgZSDFdAOUVNhK7fzhtJxcJefGUUuYljCSKTECyyd\nnUSv1wohlbma99fWjbMSHw1G5uei4I5tf2BM/u6YKfym39MtSygv+1JYIrc9\n/FTg\r\n=5SI0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6bxpePc+3MQq244G4vyf8iM7rNKBgleAyjON6WiPiEAiEA+1TyvArRiPPs+kMM4FhtGgIRk/IlQykPJc2fLSrkkQQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.330b4ba909de1021de68cd7e30d9ea4536d4d868.0_1613813587697_0.5547724899897943"},"_hasShrinkwrap":false},"0.5.0-canary.218.b7ad88ff27d592a93132efa751b717196457ec74.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.b7ad88ff27d592a93132efa751b717196457ec74.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"b7ad88ff27d592a93132efa751b717196457ec74","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.b7ad88ff27d592a93132efa751b717196457ec74.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-IUFICCDPxJ2IpHJb8oF1LO1mipDyWwJ2iLkNI5tZ2KDnK9QG/oW36y49waYab8HgatDf50TyfxWP8cx7DtBQ0g==","shasum":"7ab31beea0ea4e67d4cdb461220a04706ddac5bd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.b7ad88ff27d592a93132efa751b717196457ec74.0.tgz","fileCount":112,"unpackedSize":294685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMNqeCRA9TVsSAnZWagAA+HMP/01N70qMMAO0k6pziDmp\n8IEtZKqTDjGvefnqDH/wHuy8BQonHPxJdlqU3PsshOBvYW7+kTOtwpi+7KKb\nIe91L1r7tRHSxzoqasflAdb/uy14c0VcS9AAyclc7SSpLnDPg7okUy6vi7vp\nQFhTiyk4YY9BIV9eVzLaPoytAsB/r1Mavvs2+C7d7JBpnroZwoYW0qijZd5B\nNyLuhotHCFO4ITzkG6VqGhUGEnO+3fQUUeTMvhzUK846SeLK2XNcdR/krNaV\ni8TyPIPrCljuyq8XuZDYx0blGAPHNaHmCykiTzx3GC7t6CNAgzbGRWRdI1nE\njmyCWxQQFNnR1xoM5R6P1Tdtaa79bUiKfLWcyeg7CwaJkbq5frGJUlZ4Dqk6\n9+dikHinWIlz2DOKyJGrQsL6UCK5jRNmV9MysgPz2zJIv+u1fh0oZPnVV6d4\nnri2DAWys7bf3PQrRGzfvx5ptBT6hAdLeBgMbGXctFRCAIS67djAl7tntgHV\nt4Jc2YAwzsbBZ3REPZQQ8LpT2tbJLlha4ffXVuEUx2qPkyXxarDZBZIyHbuX\nzza+loUCwRSO9OteiL++zxGZIpUP/Ij+rRZHBio78OCgeMnr7Y19Se1PfMQl\neYXUCyPcKfmBecq18Ep9I7sHNiBsmrtXiL4ZQ6IUj+BdG4WWpWff0ocj0xyF\nVFux\r\n=l8uM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAaklr86BkYkeSScEpFJ+V/BjAuRT9KcDezevnyrYSooAiAMftwEP1yh/Uu/1Vt0kERq99rPTQ/iI3DIqIqD2KReIQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.b7ad88ff27d592a93132efa751b717196457ec74.0_1613814430327_0.19075282182568754"},"_hasShrinkwrap":false},"0.5.0-canary.218.b486ad898d3012495269b64789a2146031ab45b6.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.b486ad898d3012495269b64789a2146031ab45b6.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"b486ad898d3012495269b64789a2146031ab45b6","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.b486ad898d3012495269b64789a2146031ab45b6.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-7oAs5Qkq19cCZsL1BLe6vmnZI7QdDMk9VzP5i6kF9VeKZLvCIXWUQp6pRhI7Qr38Llwm2YJiP/PKIHKZx5/Qtw==","shasum":"2fb88a168740cb4aab422ee5e387ea05f702c30c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.b486ad898d3012495269b64789a2146031ab45b6.0.tgz","fileCount":112,"unpackedSize":294685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMO3QCRA9TVsSAnZWagAAX9QQAKHIRryYD1eEdfyhda37\n7FYENUqdbYLX4H6Ti2FyPIDHibe7XRWjCCxhz6FcIaqpemEAe36HOaCnW3h6\n/W4+1DhEsMUr2mgx/L4zAAmqkii2qyp7d7eo/j3qZNd12q+dsyWsdlM84eXm\nApF/lsFDKHeqZfclFZf39B3K1DYUliDGY3RoXnlqYEXW/8PXVJ5nMqxu+rsg\nUtOL1CZGmL0u3osCMUNJi58NUb+mcbyFkF9f+Xaj5LVtjKkQBgCltnALej6d\n2l+UMTB+rDqSK55TLc4QOjjSUVrOjOMslXlP/1AhgALWjV9YhWFon8EIzLUe\nZ4CxAdfgoaGPJJXF+3rNWRAtZ7scuPcREd0TqNNLhKtVn9HGOlC0W/cY/2FD\nqHSzO8miFvFONZqJcIDWLc8tMvdezRcBCZXxNch0JwPael3vkYKVG9gZU/Wu\nVA2YXCSrhGqvzW0Vbx1Sg6K7NYlUEaXmSiUnfXSpVrxQGwcMp63DNm6c6e4+\nvvVqoDBYmweuAsz+B9YSYf0wGIROTl/6vhhVCQV1VWlkAMX0Z+9OIgv7zCp1\ndko41xXxVDxJaU1FvQBrbY2wiNr1Mr3vy/+VFxDhSncwzBqIiEnaQ7frnnJ/\n8j9W3zve0anWjdkFSB2s8ZzAkd/JUhqmiVeHLojuYyZerUzM6WXuqmM5bTxB\nJSQP\r\n=VIT3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3IkFr9PtCiJ7fXBGwVo9HhRKhv4mTRgMTbnzjCxozegIgdFybl83rghRWm4pC3THaLABLM9MgIiUqAEY7QQQJLrQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.b486ad898d3012495269b64789a2146031ab45b6.0_1613819344415_0.7163981476221415"},"_hasShrinkwrap":false},"0.5.0-canary.218.010deaf8ffb8bf6b6a16798efed68c19b7863e4c.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.218.010deaf8ffb8bf6b6a16798efed68c19b7863e4c.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"010deaf8ffb8bf6b6a16798efed68c19b7863e4c","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.218.010deaf8ffb8bf6b6a16798efed68c19b7863e4c.0","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-otHp81fm4/JQG3kaFWmksu7SHz4PM0dy+42LROjeTQZArJXMPRna79h4SFDKW/8hSB754vrfaRsJfFxXri1EJw==","shasum":"8981975f6c9298f4a0f7655e2392626cd9a616ab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.218.010deaf8ffb8bf6b6a16798efed68c19b7863e4c.0.tgz","fileCount":112,"unpackedSize":294685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMPvMCRA9TVsSAnZWagAAEyAQAJnzGozRvhKDRjHa2Ia/\n0uH0svHcRyTtXl7s4FDBsNbQUVhv1GS0RJ2E5Jq4DuCCJgQ3HjbRNVRf9rX+\ndR+faQG72Zl1VsRZMwnK5YBH03r80SMlm3F2dNsOW3rdC/rdZw2HQwcUuVe2\n1abSU4jidmbdQ4tEHhQtLjmbg5x3cy7X+9w3gZG9kjCoWGz7JqfGLS9JTXQb\nI+MpU4aqBmcGT+KDRvQXs0Pmp01cfCziJGW+/SSarUM3VWGDTmMA/JRSmIIe\nL+nCc2f5FGUiZj2d6jOdnHgFip6I8B2cpva7qttz5QG4A5GKxehiCL/D2Apv\nrpFWubgK+RXIDQ02uGftyc4ZKxLdgxVfbQMD2BKLGYDXeAcCnO1CE/iHt6UH\nL7ahkMVRnJLifAxpXqh8rb8ON/rPYwV2FhqGmYRILmmfjAuT4n0eeT58kcqG\n5uB5ZYZeEl91GBXoWDdtYI4JtbyTfATSBD2SS1/a4jNfc0KD8QqgpIwYRUsK\ne8sMy6jdVAefTVwVIlxno6cAwbbh98jv0XstH7QnNQI84jpruDTMmYOAVZGx\n/vRq2hyR7RPMbl7AK+jEWxnDA6roJgF2XYh12mLWCwDrY18oNC21CUbWihqP\n5Hif01G3wfzHAGp09u57HrUNZLi/vQjgs08jzmolx8G2HCws0OxXq04/ZOV+\n6yyh\r\n=tmtI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvtNxeExcdk3nXzmatymMo95/hPcuLgS4BSI3MDHdnGAiEA1PzqPjiZKatJM+sdFQKVYSa9BqTF261DWvnWP/CzRD8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.218.010deaf8ffb8bf6b6a16798efed68c19b7863e4c.0_1613822924406_0.7463011744956263"},"_hasShrinkwrap":false},"1.0.0-rc.4":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.4","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"15a27bc751a9c64b1f3c507665ee06d39694fddc","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.4","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-Jtj4FimyxNf4FEIaSX6lfu/Z2G3vehSoFkwTV4Ah9FMjo0M+aQ3ttwbcGqbzof849dXZIMaSF5fzZhPaA370IQ==","shasum":"3982a5920dbc9dec0676746577c1352e6c632f9b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.4.tgz","fileCount":112,"unpackedSize":294464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMP8mCRA9TVsSAnZWagAAnO0P/R5N0vyEBfIBidW/L8eP\nf41T3fIAP4O/HYgGsMNmmErsv8vDYhcbCIlZX2pwc9jdUA82Z8n48ROFO6Ta\nLcusmXNXCf+lddtDCs5h9wVhscEqB9fHPU1a1omMDnwWnGzrfGMRtORzkwOs\nLxvkfMvtFmJHTIrQgeGSa936DSKR3rygWB3Chm5edoOa48DCibqpQ+sdgnap\nFI3+L+LD5mXBxkrOwzBrhZ2juLt0LuXx1IVLIleJz2qqPWJfoJ6VHsKff1Cz\n5KbSbBdOIVfWeu0HAIMTZ9XACqC2HV52oy7kz+9DGp05vPYqkCg9Mn3P2asz\n6geyk6pXjDPtzv+xPqbEsunXjfmC7mhPdS5TDpwyXXu688i7l0Ruoi5VWVFw\n/vA6A80HtGCqQUil/m6mEAH1NyEaKN32AfrJSTLp6rYln8oPvAwTjcryg/xJ\nGLo3C3hXs4jbkzJHy+D7HKbLJw2/CRmeLkj1mi9GWJqdjZHrMrwtRZpsUtHc\nomiOBUBXvJDzlnXfTF270VvPzM7Qoni6/Ph6peRInrwjvmSjML3H9pte8oF3\nisLVncBXULpI+zP8oaIgG2wxk+nAlyHs8Ds9toJrzdS2OmnnkA4bbQnOdQsA\n1KxUR73rlh8kwPca8PSV6Na4NJ1TgQFIfNfvxFaNzK0Nr1iwfEXjV91R9Jec\nwwce\r\n=Q1Ny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8rqGudYyF4XoilLVPgWad6ZPRItfaPFFoFceFCjFCywIgXSaCxWR/DCBysDQ1h3XdFUtRJ3MlFEKBdXHzYlDwZ8w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.4_1613823782114_0.15675525099199894"},"_hasShrinkwrap":false},"0.5.0-canary.229.60827b2561c4180bf07cf6186c434b2705c69d72.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.229.60827b2561c4180bf07cf6186c434b2705c69d72.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"60827b2561c4180bf07cf6186c434b2705c69d72","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.229.60827b2561c4180bf07cf6186c434b2705c69d72.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.22.1/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-Ljs+6D7yifh7Qq4bV3RZ1R6OeLFaCBaTVSlOymuSXW55JtzlRyXv/XWVm57L4+6brLMSWpahf4A2lMvepAEONw==","shasum":"8d54394d1cf2e8d747eba63417f693f9aa1f9b5f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.229.60827b2561c4180bf07cf6186c434b2705c69d72.0.tgz","fileCount":112,"unpackedSize":323413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPMgGCRA9TVsSAnZWagAAcnAP/RLCUPyFaa8+9mABYvPx\nPaM1looaMIAbOQ38ZTh2FuN3budaBdH2itHsZDZd9/dRHDXlJd3Zp70E6zA8\nugy6ADdLxeM+Lzodbmq71y1spEdCphtfVMRcQrBtav3JBemOpl6UhiVns1G5\nHZNDwy2W8cEUd2/49UtbKQx7fbRLSg2bCZSBLiUBfPoGzVkytkEMu13qXHxf\nXr+xExfE4W/IfeqBo3F0GlZeffKRk8DBLWRkWAqavSUsLsT2Cz7hXGcxIRW0\n3wHD7Lu4AYF7NhPhdTLFJYWN5rMouotYNU37P+I9C8VSyrrSy0H14EEdZYIU\nuioELcBQmVw3rbe5tBKo5hIBU2q+5j30sv1Vhz2OqqEzD5Qd49x+TTZYuv10\nVWZ0vm/YP3MrgL01YscW6ZJQmeb9QGzwQS904DY9dOzrGDjlRcIkXIdyIp/B\ncgF0XKJiV8XeFm/GlOxSJlbjIdcPs8MX7RLYNH4wBYK98J425pl3lGi3Bu6e\nBseP2hS5z8aW7m52YgYzyR7WwZzUV1wpt0KFbOmmWG5WnvpNNXDRKG7INHaL\nf3tA5/6ulFDY+oJ4DiN/0vLfrCOOT4QsVv/x8qocRe8obz8dYj/jOz70vKpe\nAWp/Hq4K3TOsX7zaGyMIfkDJF5Ouzva/sAH5sYSRpWxO8UrnkVsv3WHTMoi+\n4ysD\r\n=xGSQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXGxEZgUZiRsNILHWtySCqxPJ7bFMWbMwd/+OO32DkDwIhAKEaFDd9CD+dbdQkKG29n9J07T81Jt3spksq2nQJFjfY"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.229.60827b2561c4180bf07cf6186c434b2705c69d72.0_1614596101960_0.73835453161197"},"_hasShrinkwrap":false},"0.5.0-canary.229.62ce76bde7c3aff931cf93be64396ce6f472f3fd.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.229.62ce76bde7c3aff931cf93be64396ce6f472f3fd.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"62ce76bde7c3aff931cf93be64396ce6f472f3fd","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.229.62ce76bde7c3aff931cf93be64396ce6f472f3fd.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.22.1/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-JMeJBiHagZ3r6TO73Q4lPmrQmkHVC2IacZWKcuDXhNqLWo8kL0furdkTH+X3cp5cdbmIhztiV7q2/HTAhd0dYw==","shasum":"e8dbd41a3371a4d47f3fedd851b9fbc0627b44f1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.229.62ce76bde7c3aff931cf93be64396ce6f472f3fd.0.tgz","fileCount":112,"unpackedSize":323413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPPykCRA9TVsSAnZWagAA49IP/08mCQ0LkKltFD3MhnWB\nZAVMmZxbGbAzANHG9aO1aaUqECZ4c9/ZvWrjiwuydv88xWOSyLytRZ5vvl3c\n65scCjBz0px+v2Qd8RwcV7mGzodz8gaJKyx+aOlFIZJgqSh8bhXyE5TEUayx\nOg3LDWEoCBa9q/5Ynt6Z44+sTuQDIpel8Unj34goCxVOskzlBpyy+v2mKSbJ\nRrxv0Ed9u1g5UY/yFIlr6+4NamDXlaRC5wPivL+xSULCcH6KkyWhOxgbmLTX\nbLvRacwy1/2I1HDyNiXlhB1Reyg6P+Ma5iHZztToX7OqBGFQ/9BOaej2eOZl\nnRoVRGiffm9O/E+53nQEQOBH09nCEvmCLPAMPw85cA7G4UdngsLPcliNj/8x\n3MFye85yVgEi7QlsUh7VdgBHC4Ro9zstlTbIIALJvVTuY/us2vmmxOWv97mM\nJ/fFH4kOO8qoPy744SO6Gqfj06jQipjtpY7JmBFO85mkUQzij9F0Bc0cYJ+c\nNKVPYSjcvQsRnI4lWaQNNoU1a5Iy7LgUaEWZRMtToBTZlckm9f6u3ycdGV7e\n02s/o/shI/3Uj9EFrJl3AX9f1Xdl/1WmHJpov1OoCU6+1M92bl+PDz84tI3b\nj7wTK2gFtZOvbf+0mmhP6nVHrXp/HZ1L+0fAKL3nifHaz4ZKk9gxw/V8J0xG\nn818\r\n=5ccE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzr206NGkp7ZrMGjG6SQbs0w2/W8zyU2tgmP48TbVXsAiEAxoWNqocFoZFGk145/CCHpfJc1jj+GbNdCI4VXn5rTW8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.229.62ce76bde7c3aff931cf93be64396ce6f472f3fd.0_1614609571985_0.33041771134951947"},"_hasShrinkwrap":false},"0.5.0-canary.229.6b996242ddcb888c552d96d9dd132e23d21d5eb0.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.229.6b996242ddcb888c552d96d9dd132e23d21d5eb0.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6b996242ddcb888c552d96d9dd132e23d21d5eb0","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.229.6b996242ddcb888c552d96d9dd132e23d21d5eb0.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.22.1/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-PGA7JNRpqH7kVLIuR7Vggln2oEbsEV7ahpKJE7M6iFkNzQGVxAPUZpLyB01SJnSET5zYtEER9yvt2/DLkgvqqw==","shasum":"896c6bb15cd782032fd9ad6690fa12b76ffc42f9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.229.6b996242ddcb888c552d96d9dd132e23d21d5eb0.0.tgz","fileCount":112,"unpackedSize":323413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPQBNCRA9TVsSAnZWagAAb1gQAJ8JC0xCoEpmO7sHio8d\npgRIl0T1DGc+Bj6AKC0yqrGESLj5HdbDCY7LJ4CGO5Iq8SfbC+p6G70DUmGU\n4A/ts61dEKAa8ic6EvvCszwpo9dz7PT4CRQbbCrp4TC59kgVVdhx7cw/5njI\n0SJBvFhz/858c/SlfMvnWBBBasbGqvkQ/Wht4mF2tVQPYmyt0A2Y5Aj9Dh0E\n1AZ6+hpV4yrx0zAkIKtvISXRA4wl3Pr93Ydr8jc6P+AMaU4Str1AXDA85G5u\n1sXGDneysMXL+8/NaKC0iwKZ3pqVSUzg/gM0KuE7i0VrdJj9l+GtdjBu9Rm8\nX8OsKMoH5SvnZRYnzKMWSu4ghVJUOOuUC+3hTTD4q29FMOMMooE1gWaOYxjk\nTWwK/7Amen2+xKG1SAIkWEXyk4/c+zCJfBeIkYeL1kVpm1KwjdtlW7XTyKRL\n1SN+4ejh+BXpJ4oG9jIHCpoKKBZNi7yrN8EMQ4DDM6SH8A1EQWr5wvLxLDIR\nQMzJZgVTdxmpytigUJf6Lnjquhlvzn+e0yRYxieAdGHF4zlMIhwEhKM5jL93\nzy+DVcncCxdDewW5zhLFKyp9C2ICILw8Sc6xHCMMQf0lPBGbQA4/I+FX6IpB\nadLMQ/3Wzy3GHS/TbkSQq01Xg0C/oXnad1S5akGtViXlZWqNp2RiHpL2uLut\nD7rU\r\n=RYZ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5C/Nsdy6oN7Teti4t+fMy9Y8KQodFEGWvqo6J/bXX2AiAt/Os9axujFSqpnymwokSCHqQdhLoGyZzN5VCEXXjqFw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.229.6b996242ddcb888c552d96d9dd132e23d21d5eb0.0_1614610508808_0.008078812763960608"},"_hasShrinkwrap":false},"0.5.0-canary.229.8cfb093d8a7f2c882fa4d471308a6245db058d4d.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.229.8cfb093d8a7f2c882fa4d471308a6245db058d4d.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"8cfb093d8a7f2c882fa4d471308a6245db058d4d","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.229.8cfb093d8a7f2c882fa4d471308a6245db058d4d.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.22.1/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-JHmu7TCVD0/syJ86zwFf0QuIz5GTkZI0vxEwtoCIgiEhUcDjaqmy5qQUkRWGF+9cWQrzJ621ddp6CbSRgNO8mw==","shasum":"e694b8b62c12d046e6d947efd505de0751e055c9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.229.8cfb093d8a7f2c882fa4d471308a6245db058d4d.0.tgz","fileCount":112,"unpackedSize":323413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPQQQCRA9TVsSAnZWagAAhVkP/RR6fWB1039vbEdWwMfw\n+jkbErE5aZ4T6Ot6RBmjb+s0wnl+W4o4ISDgztSCaeRMiD9x4kuuZ5oom6eI\nuoU4yZJ8cNh3aZPB2Z0SDUqYJIC2ReZSDb+ASbczQfjQtHT50VNJmL1Y5P1x\nTeU8Uyph69M2BZEhSsn0x+Qx9GRbMGLPUwQAvzif/k8P998bIQ6ypjeiJZuV\nRJpWMwaVm5X0AFlM0i5oEBjZmvLidsJDmjhNt+YNXffqXDSom63QrMnbFnoL\nrO3d5ErQXFQixz3APUW82k+t71Rfwy3GHSUjnUVY7HYkXfWqA0837nCL6Hpq\nYQ2NUiTgZvK7PaEYDBv/DgVXTB4HTwEVAGbWQ7YnbUTZDknQaEMY0F+8tJRQ\nkqXKTFU1GUo9evk97IIMBPo0fgM8NTJH4409NglAD5hBb1fc6P3Js9J5Ryoi\neggm9DlVwyvVl0IGDa2kHSKOiV6FqqUaGeTtzpu3mIprzz/DZwTtRZwtq5Q4\nEswdDRGMVGUu2ym53KCFqHoHOtTd2xGZ7y17hAB1I1JTYg5M3bJkXCWSX4UB\nMW5SbP0MHLP5qvRsGROK6tPgvKXSgAtwjFaB1o4JGtTSV23A42uXCmawSF+w\nPzRkaW2R2U4IISGWkh/uKmqRjxvLtIQI0zRIrqE5deam5CxL/SmTatelOh1G\n2yzf\r\n=Tdz8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6oYqS2CN6ZM43ztGZahFs2IT2DqILg5mvlp8UTcxIPgIhAKLzTFXQhGcg423q2owCCYCJWSXszKsLNc1TlD6XYWbI"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.229.8cfb093d8a7f2c882fa4d471308a6245db058d4d.0_1614611472298_0.7386164551236822"},"_hasShrinkwrap":false},"0.5.0-canary.229.4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.229.4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.229.4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e.0","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.22.1/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-par9MVr7DvwN+WK/3nb4z/0Ho4pBeEbFSoFYPA0N6Gnbdjt+tL9ciuTZg1X/dm3h2q+w+jAwiaAfNertnMZFjg==","shasum":"c278d10426b974eb55f33bbd8caa3b4cae5264cb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.229.4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e.0.tgz","fileCount":112,"unpackedSize":323413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP1RSCRA9TVsSAnZWagAA09oP/RvqXCVWUNM5zZCz8nGI\nwIcnzdkke8UzXY1ggV8ViYREd9f4yRHE6CsJpyP7IWx/Y7ufXN9OEd5S6A3R\nMbcbczBqPyPQN+aCcxVqsDQ5qbDfyn/thkfcWyviu0wWvefdFKq9JKv+25Am\nWEJO4+xLBGOKWRHP6yxuLKxnkoZPNxAwnfRZ5W/9k8XdHGbkBp6JKHj/G5bx\n/RV7XsVwnXNcmKULpaVdJUBGFmvjcgkaSxCpc1keFogb9rafOTv/DZjlJQnX\nZP8L1I+jCSQRk5Ij7O9cAb/uVFXTBxrf3jSGd2axpmLxw1kDNOwjHblv+9E2\nGUpRqVhVyr2Z45dRANFMkU1C6bwTr4Z91I3Ke8B7aCxKlIViRgk9AngKmQ5F\nYGXoNTD0iEpZCZq16db0sNRPuFK43IgsUG9ToFBc47UOLRWnMHwW4h405JzR\n/emoKBIVcvOkltCiQDUMo7q8458EjA8c3RsT2Hj2M7R8oRquWL5rUZc/p3Q3\nLAgGXPO6xfSdS1jj/R5S1i+4P3r0JSk5/bwLLsPwkHyCyD3XctxqWVRKYRTK\nqSNqOugAaMPIYX7hqiiSSPj+Wkt7zfu8kNlkcH6kuNXKaC8JIAeVlYPZ54H3\nEtxQi9sE/foGQo9Np7HFAPj9+JPlT87IgGn5IFjXzve2Qd7BYExfAQM0qVlj\nQlJ9\r\n=kH3Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFGzWHxHjwnQfoWezjErw1V8Z5pgHOml+O4Kap5xymzpAiBR4lDFEmR7ZskoEv6aXcVKXMQgFa+Qt8mq/TdQCHWxgg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.229.4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e.0_1614763089436_0.5290752972591095"},"_hasShrinkwrap":false},"1.0.0-rc.5":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.5","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"93cc1b472176ce775c615ac7394a89c83c0b743e","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.5","_nodeVersion":"12.20.2","_npmVersion":"lerna/3.22.1/node@v12.20.2+x64 (linux)","dist":{"integrity":"sha512-frdlVTbMm46Dx0Dj7nESg9oCE7imAvNjwOP7OWG7xrss/LDaboZDYgvw7D2T+A5eP/in1uOlSv21nEr0pBmoTg==","shasum":"39c761e06a91c47443b96814109783e336d55be4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.5.tgz","fileCount":112,"unpackedSize":323192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP2BhCRA9TVsSAnZWagAA66MP/3EobSAEWHWaD2YE5V9s\n9q8b3uQnOFmlwiPo2QNUXWIp65GYG4OEyhkWPjpO/r3lcd8+n4ZhVKMx9DxZ\nNCF4YMEIh3ePeCK1qO3wqV1RLVss6lTdzTJQnUnNNKUPNC7pj8a3UH5DeeZT\njJdDZntOKxIpZc7R5Yyax2NDqRRD4TSVksUqbIbFYLoZF6Ug9Z3QFJgUVY3M\nHHWctB9TbZcgxH8fIEu6YpNGDTEq0yQ/XshsuYaNpuc+c6ZpBdh9SXy3ckc8\nOoOjFn70vqSeS2jkzTfjxh1Mi2a90pab1u653o3HteAtGsWcktPHS7C0unIg\nTcfXYPv/Z25PFmdXv3HIF8B26ttDkjDKoM+Aj80Nyit+47gVCf2pLXBCnkR9\nk1c4GJ3xD9ikXr8JOoRQa4xmWc5JXfuxU2YChxjov78v8IUlwIzMyoD2iuOJ\nPa2bKCpXG3Xw2151GKnOi+n3l1IT9/2dcMvl5bhjJ1QlDaal7eXq6Oj7x4Sa\nTqEHSsS1brmUKJyTMRjSTOHWAojvNRs19fs3Le8S6InzH/EphCyzecYBAnno\n0RSRIKlI7g+yCWo+5pgSDDp7+KZBYXXnnl7cLmJ0Wb5A5rNYUjC5QkHQX3PI\nI4GXY3YFuOmFj3RLv+8Ahtoc/jgxmIrbi5kjgBWzQe/VwFNC8XABcuJVPWTo\nnAxc\r\n=WFUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjCoEK0ytySQqSLOec0IhcgU05VhOKoOb9sKgfhR7MHAIgfueAhwm6T+FUUGlj/kcG0pwH5GReaOw7F5hb7eEKSKg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.5_1614766177394_0.03652743405810899"},"_hasShrinkwrap":false},"0.5.0-canary.243.376b28fb13b847f21e01d3f3d493c2518c95486b.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.243.376b28fb13b847f21e01d3f3d493c2518c95486b.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0-canary.17.ebaf8f604230d5cb83334bb2e52802fa203b32c2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"376b28fb13b847f21e01d3f3d493c2518c95486b","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.243.376b28fb13b847f21e01d3f3d493c2518c95486b.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-DkB7uqibKYp48XoGgAURz2qGLXwfkBBw7hxMnp8XxdpAYWEfFwD7FbLLb1rXge6x3qTMCsbs69tqq96A3T8+7g==","shasum":"0e0471ff74b1201af8dc06f0207f59dbbe7d724b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.243.376b28fb13b847f21e01d3f3d493c2518c95486b.0.tgz","fileCount":112,"unpackedSize":323936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR9q4CRA9TVsSAnZWagAAhQkP/3IoeeZd+7+x1q53LRG5\nN3dDASTE8Yt9lfwjUWRo9f/Q2MY5F+fJ5V8iVxp3Sq4lkXhLpGWbR99uNmZ5\nXAAxd+vQ83+1m9CVeRv87laChn46bBX410cH22NGIEjUiAejZM59NHABdvr5\nd27cRsY4PHEdUBgF0ONhzusU97uB6XvzmXaWk87HdtKKiuEs6D/ynV1LRY1P\nzfPId/ZbV2CXqrRh1XomVrYJlzRhlE8kdiEdllcfchgGR57pOnAvUe6hzsjt\n27aWWX+/BEGbNMcS6+p2870exPoLZsOv78lthUQuEIL2cWcrgoXiXD/GKH2M\nWz5Tg8u6NLFmWs/ZAdKK1VKgZMqZjD8fzlS9qX+OhaylxtvCfHqfwVKbdFg2\ndWqTUTG1FwJF2cUmcoKeHbFYxfvGTP/PtWKicc0ZNa2NpOKEb2z4RNhFmwjH\nXK/vQ/CPDPSZmc+w+2ItI+UnsNUcEWw/u2gnVWBDraz+/aLmEKf9Ep344WU7\nMP+lulVoB5U0a89yuNcTQL9IV1FT0S9uIrHM+1HgGqsmwA+bzAq5JEHXpyWR\n7FuclNfAUyIHx7jYVQsfRnF+KJA0c3UvwkYI4zLXXAqDaL8Z1Y4M4TrepGqB\nkLKLyrRlgrOYHSSFarlTiG2JrA6wIiWDWH5FYq6h/jZ8JeNvYxa9L3zuMcjg\nSAPZ\r\n=5sek\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCok1+4qUSHe4QpWsDzL9b6GvfUZBUvBsxmiA5aGHtc/wIhALxilzuqBNNSLuWfaYE0zOUQs5Otf9hIu1sIKpRSompW"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.243.376b28fb13b847f21e01d3f3d493c2518c95486b.0_1615321783967_0.9537918749976488"},"_hasShrinkwrap":false},"0.5.0-canary.243.50fcf66c6e90e4139a39633da01bb864528353ae.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.243.50fcf66c6e90e4139a39633da01bb864528353ae.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0-canary.17.cb6f076ea436f4a920771ab7dcca4e765753d637.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"50fcf66c6e90e4139a39633da01bb864528353ae","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.243.50fcf66c6e90e4139a39633da01bb864528353ae.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-LvtmnnNNHxG0W6mEQ/YaCoic2pdP2Te8LcrkbUMUDZ2Cbu7UWn22V/2sVjPFWUqZlSxmTrtEFa0Ue5+ibkNgyw==","shasum":"33b545e663e0284eb79bc894afd1021d2679a8a6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.243.50fcf66c6e90e4139a39633da01bb864528353ae.0.tgz","fileCount":112,"unpackedSize":324692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSKuGCRA9TVsSAnZWagAArn0P/2wKIaRfFjzl+SNYgzdr\nBnP+QUX8IF+JzuInuwdRwza703vCAt/7nmQs1u403WcByUuH9yjpo61UQa1m\n95rFwofRaZQjXuS044YXummdn6LA7UKQwIlYZ6ZQnHNVaeBQylhuxjyJkAzK\n2bd/Kegb3t/Sw4mQ19OcEkavs/fma+XVS2fK/IkWW1pAYIKHoA2hm/3L5Ppi\na8WJ5twys8AgwCIytMGW4Mns5n1h4YFU+/lK2hpbu0OtJU2kpIVVdrj8Iu8H\nmr67TcRSuI06tgvcKnzQN9wlHrhvhk4uL3kbanzF34HH2MOZwvFUlrAEiEoa\nu+HgDX9DvVS4+zd0NFgMZTjEKOTUSj10Ktxgbu9grAGMJOVmV7ZlNP+2TbxE\nSKeL6ub2Kj/uXYiccXpPlP9FcDSuaVD3Be7TYKtbldQukN/wn0wpZNp1agK1\nflX+Wiy4CTd+HpOKhvCACM+tpa1EURe+YsJz59Vr1JEk0XU44s+tCO1u0PaV\nmJfc2d5Mo20wveA50RcrHXC9PqXINKYyd/1sRvqfVIn5KQ4tu8GGMGu2u1Xr\nSnQUYu4y+5ewiKqm9Y9n+Vec7SuGBavA+fmwrQafufiSqWbBEh8u8F4EVewM\n7NAhuaNcUmbWDFzXgK92v2nDOqzVMt9hiuILzZmEMZLBID+zYDXpD9X0A/on\nkxkw\r\n=yXD2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBANb1YVDkCFer4d3g+5vfQqU9jDsOSGiMf6gIALGCpAiAySnJ8Q+dbnnk6OOIfZxGHHcuJBYWuN6R4G45v2qcITw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.243.50fcf66c6e90e4139a39633da01bb864528353ae.0_1615375238250_0.5961118651134658"},"_hasShrinkwrap":false},"0.5.0-canary.243.59cf6d9a4e3847c62197a381681f6c80296abedd.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.243.59cf6d9a4e3847c62197a381681f6c80296abedd.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"59cf6d9a4e3847c62197a381681f6c80296abedd","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.243.59cf6d9a4e3847c62197a381681f6c80296abedd.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-ZIPNzeHCkkp5eF9qmaW12Bw1wLEv+NCIXMJGxhwDvcYtqCrJz5l5ENVZ9PU3i0YLimmrcla3v9pRpnkqutNkvA==","shasum":"e2dacb8929a034002bac1a3a9d07ae5816d8f384","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.243.59cf6d9a4e3847c62197a381681f6c80296abedd.0.tgz","fileCount":112,"unpackedSize":324639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSSNgCRA9TVsSAnZWagAAgpYQAJkwfi+XPwPi57dZEzKy\nn9Lw9rrslwQtWYfbGI5G6Oh2ca66ifMDACE20NjyCJNzbJ6EBn+nL3wSjRqk\nwxfa5/tpEN8t0Xw2UPf4tlTZGbQDq945Od6KOeGNn+Iz8XFivGDduF3MFW3P\nN/eBrsLIKkcUgpb0Oj0XRDGOKD/49g/Qh3p13JOaZ3lgPllxhKLs/2I2ZnPe\nScxQBcaffFmPFg9KUyoG+UEn2+NlG/mcNhZxS+2GdRyFVdv85xGMq/K7EVAw\ndRPuENlqxDGZWAtDTVvhb+4knEH9wtT9kThhOSbtMdBd64kVHfPQARNyWrNo\nAytN/1JDSASVEnnKL3Ui2DMZxJtKhiEgw3ADjTdaK+XcaPMOEsOcbLMUemyw\n9QHim7q+6LIWj/CNPjmfCOXgoQuMPKkdyfDzelpt/FrVAzi9Uf9M95CwNtnN\nM2b2EEreEhzNO+qLgA8OytWmnTL7YeesYLG1kHxHpsoyRNeMWZvBkrD0lHjI\nOUV6DTgtAukwXIE0o1gBuQZKnZUOsiWJS6PfBe1RLDksqo6hfx9wAay/3Kne\nk+iQXQTdNiu61gRfG16JJwoAy3aERv/+XYOj13A9PqF/FPYAbJOSYkzth9oH\n9kV3cTs1LZjdKdovJHPRcIQmGypQzu1I/iYaXgGWGDMoFT8YQ+dB2idiGcfn\nB+jT\r\n=bOBu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJBe0HQbPDSdTpOtcrAjZa07v9YFlOZzexAOM7ujKgYgIhAL2s9qqNPDsx0rPW7y7rWhn6RAXfc2ZzP9fQ4w32FMpP"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.243.59cf6d9a4e3847c62197a381681f6c80296abedd.0_1615405920057_0.8735472879441897"},"_hasShrinkwrap":false},"0.5.0-canary.249.dacb313cf10fdf9aef4ced541f5bfae8bef2241f.0":{"name":"@sberdevices/plasma-tokens","version":"0.5.0-canary.249.dacb313cf10fdf9aef4ced541f5bfae8bef2241f.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"dacb313cf10fdf9aef4ced541f5bfae8bef2241f","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@0.5.0-canary.249.dacb313cf10fdf9aef4ced541f5bfae8bef2241f.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-OLQjEqi0+d8EP6CBdzsZyJf2hzrnfC1gv75pTIBpdjjYCAZ2/fV2j0JyrqnPvSZA0sc7k1N03vZzFHEYtYdyMg==","shasum":"c412f6f9faefabc4f0084c19967b59029f035fbd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-0.5.0-canary.249.dacb313cf10fdf9aef4ced541f5bfae8bef2241f.0.tgz","fileCount":112,"unpackedSize":324639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT1t2CRA9TVsSAnZWagAADuYP/0JUP+2cLbyJJ8KSx2of\nsLxq+IqsMfKDvWW76yWQWAMNLDV+iL/90fuaSkCkpf/jQGpshxrMOElPc5vX\nNXyK+ip7LOsskgmZyXvPF8VbXHEzEFwv1q/As1Z4roTRzVV72p+ZJH60lm1y\nEfEKXyNLIJDXHswW3k6FkASgmWS/XgDkeO9B3obxfGvil7F5jJ1yULYS4qHj\nBX07EozhgjfGcL4xzDZrwWCUatm3PnmxnUjukNSU6TbF+lOvKl5HSNFrRL5V\nRZiQkoRZb5PBwUOH1K+bbnICElKqGzaeDEGh2avTTDMHGRf71YATRf4USjmK\nWkFvnk3Pcuwx6w2FHcCK1e/rUJWpDiwaV79Dq7wwHm8KTLXjShye5X3i34g0\n05Czrk4xpHnf0X2IzHqn4w2DPFOL+9H0A3w+eLgJ+QaE7MtVoCTwnHp9kACa\nJwrh0Ra3i377P1k4QT2VgAYiqx4ac16niXg3LSkcKe0lRMTGCi2R0TumDrqp\n1BaHWmXQIqz7OQPVZqvbWF/Z0JTt5pRNS4iBskf3Qu9JpM+4B+DReFL0wPke\n5maPzLG7a0+x0kjZCNFQPxnoSFTSDLlbNS34k5RlvIqyOmBhN/foEmCjZcpf\nDtREUHB8lu8ztgZMeV3KQDVlrYNwvzZNxawu9DaJgIlQfRwlRd1U+SdTQck4\nrUL8\r\n=3Uxg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHV4gi8YO32w8AttlgCkn95JXOcNc0EYWt/gmjPRa1sEAiEAyg4HgsyzgBCuWYcFVH4nRG0DFQCqWoYh9wdnk+ahVn8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_0.5.0-canary.249.dacb313cf10fdf9aef4ced541f5bfae8bef2241f.0_1615813493770_0.7874202855077692"},"_hasShrinkwrap":false},"1.0.0-rc.6":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.6","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a2bf7d2fb16b6ce00cd68ab143bbcf24bb56d49e","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.6","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-RVrk5sxXmBJYXeGOuYFJojCoznWApeJXiASVUwQLJ7NU6nqxtbNZZtFsGy1RTyIgcJxtq5UGpRKEM26nkgdXpA==","shasum":"cda48824243ecf7bd97a3b9ebec63e97efe7aec6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.6.tgz","fileCount":112,"unpackedSize":324414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUKQpCRA9TVsSAnZWagAA9ZkP/iULelXGsryselR+7vQV\n9yHX67xh2HZB30CZJfVsP5DV89YZ6sva9+KSSSROGHrV8xCtRk7W7Ra9wCgj\ne3Shkdl2eStuHhhcSfUsMWHkodgwgH5JN+oMMNSmT5obPJUlcZ5WGZVYUnxz\n3zjbLkAKHJbNIRm2c1+bLua/Z9YkQxNVD6LzPrRrGqC/PALsAMwMmUzc0pXv\nyXv5PZLuF5ns3HfepRko4vnb5WgleOeW1+uUpcib5VO4/HCTCegpLEXSDBAt\nn0/JU1H1Puw26ro7kQLtO72E8rAorEPUG0zAnwv3Fp6Th35CXhmzXvYjtQ/W\njhu7jEYqiJlSoCyvErx9G1MjtPR+hJRUUehX3xLHLZpvoZ4a7c8kXQQmVD8w\nfLRKto1Pv9O1iB4d/mtqYEgIgHqJUdWGL0zFzbTp+iqxL0WokSzowBUIZJzG\nlllsOLat256kV8/dqnCqcF9UJC/dwwIO4rL3dGiTBQ7Kamxd7vCHyW9x5UOD\nWkre8a0LqRHaokOpO49UI3+XM1WWxkSkmMfZZNkCOlSh1E0Z93NmR1nZ7ks2\n8Ry/gyBYF31wIzBOoWzJwj9OB9UJImy8OLjz4fIFWaLJ3FhlJBea82RCxGk2\ndtFsT+suu3Yg5yBVIe2m3yylgsHRC0AGzRmg0o/y28+jB8T4aD3ZKiFZcJKD\nAg2b\r\n=Kwqj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXssh/j+1XDrPdEe4LBb1BHDbLfOfdpoelrEYw3ekPNAiEA0p9D0fTk+khSaR5rhuhRDdSYlzldnEMguAPB1xS8lmg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.6_1615897640639_0.8484761440425355"},"_hasShrinkwrap":false},"1.0.0-canary.275.e33f0b1ef55c696675618fe9e2f2f537ef9406f7.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.275.e33f0b1ef55c696675618fe9e2f2f537ef9406f7.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"e33f0b1ef55c696675618fe9e2f2f537ef9406f7","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.275.e33f0b1ef55c696675618fe9e2f2f537ef9406f7.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-9ZNsSrlqgbCtTNMMxLgZ9TxBlLXQsE7YZFSxYPk3Izl64BE6S+1FjvPDRwRXjdEGhw+D4jqezNAw0vu2+K8VIA==","shasum":"55be697bad76160abae3eb3a982ac624f8b12314","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.275.e33f0b1ef55c696675618fe9e2f2f537ef9406f7.0.tgz","fileCount":112,"unpackedSize":324655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZrYACRA9TVsSAnZWagAAbHIP/0xe+1ep42WfRGBY/Unu\nIlDzQBLp3bPHA39DDiq0gq0k0AvYuxm2mBBkXwxKpkKYZ/gYpvhmCwsNsEd5\ny+t+NIpsLFbs84Nj18renNICuB5vm8nWFJ6yxREmPaONc6viw3wj6Yn3gkXp\nmWm9ryxhlL6xExht5F5I8p8UaCLJKM1Pl4fa9XG4AVJFQKcUJa647ZOu0HXd\nce7tXr+nqfATEzaVwcWMo+dc1hTVwmqsyAu6bdlVLcUZD7f1IqOz4fA2oKTo\nIatZ1ElZ0EaKSZWFOc//0Ttyc0ivVUrv/8Z52X9TQe6ZCCHh0U2hx389LdMZ\npBE0jz1Y9dWZWNTebyDplNPuLsBqYFQpUxyXZos64QmFRxQzCkIcV+7r/jm+\nioco5bHpOZ2dR1dkBMdnbe7+weaPbfMYLt9ERT/nkhpQsWIpUae736fFKfXW\nouoQtPU2LXP+DB1+1vhVudslmTorRlJrj7zjgDUnpkgtxKA2Amo8l7gP5mrM\njXIxYCnP8BZpQdzuzkIJaqvv5wJqViG1vrN97side7SgrrCj9sDqWVZFlx8r\nPm8E54Cs1yx2qQj0sa2IJQ54+KgBxx4eavRi3kSxj6o/O6wihT4KImDz4fH1\nkTdiIT8at/796WSjOyyLo8vrNkGxgMvipgqgUYs0C/L82Zl0sqtFx0bFtgFd\ncgf3\r\n=Ep8H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTloCOgKo+N/BZo5w9cDmH5B8dGBx9cx4lv/AYYFg/WAiBgSRnksGN1keXacPdXZHRJLo/QSbjQwufXlPgHEZrvCg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.275.e33f0b1ef55c696675618fe9e2f2f537ef9406f7.0_1617343999940_0.48299672526967874"},"_hasShrinkwrap":false},"1.0.0-canary.275.ae045a36301f89b5f78be0bdbb47bee4c538da53.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.275.ae045a36301f89b5f78be0bdbb47bee4c538da53.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"ae045a36301f89b5f78be0bdbb47bee4c538da53","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.275.ae045a36301f89b5f78be0bdbb47bee4c538da53.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Z4q/ijxHjV+egTlFztGYFD1oks6GFnIEh2r2dl+oIA7EfckH/PBKaacsVgA1/Q2bgCcxK6hkolzFTgqKAdbX2g==","shasum":"fd07db014beb471a22b712f7414b0b5666bfea4d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.275.ae045a36301f89b5f78be0bdbb47bee4c538da53.0.tgz","fileCount":112,"unpackedSize":324655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZrdoCRA9TVsSAnZWagAA7FAQAJaUXzgDotrYXnVzfMJ/\ncgV7LM56zt8+Qi/QzaD4a2FK/skzrjf7UueXRgrm95Mk/Kg6BYC6cAfrs6Wl\nMZ5E6SUb+neHvLUNMUQTSo7gqIWE7GdtRn2PkfulH3DS14Nd9zciTx7OIkwQ\nWQdmDRvYgMR9hHv3n5o3Lw2gfKxsNSl8BA22JnLv6jrU75CXRPlxFbTbPXUp\nvs7LAPPeUTfv6klmJ5mnWqYz6tBAq3ETmUfTWAVMGy/ETBs0QfdbiCUtCmqD\nlE26MSnU4KiHN3gyotQD2u2SXNPYI4TwvoV5LaJsRM8YhFGpZW1wbjt/7Wep\n0ZamahEZbxDpy+F918J46VlvxNQdDar11d9WbfKAFQpJ3/7EBoxtIyFsgO9N\noyspFVtfZOv6pRHecpjMnnimp+tPLJF5O4kArJKyffjuLCrK1XYeDXWBnBCq\n8vPZ4GUx1GGfJw6zvYS4RP1KzU6VtaByNIjyQ+QG1x+OQljqQBLpcJ3vo67d\nrqMMa0WGJo7VtvOY1t5TPdhWT4/dMqFGUpDi4+nn7ac51fdY0UCUr15xdDiq\nrH9kZ5BvFhcjASJnEwry8hZMj5APAm7gV6ve5O4dNWadEdsx8U31INpwcAWh\nvCiLQvmffp7Q6ZKO6eUYilrppWuLmVpCyedU2cz/oAUrZ+fi++UOUmNyyGfQ\n50I/\r\n=0zn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuOpnFSaZsyBxi3a1Ct3P7duSiXNKB5DYb5KPXMeGCbAiBoaq+d3vF5Y49R6oZSWLvZOIL0sWee5j8sKulot5hZwA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.275.ae045a36301f89b5f78be0bdbb47bee4c538da53.0_1617344359784_0.13069575019461332"},"_hasShrinkwrap":false},"1.0.0-canary.275.324e3828827f11a2c745132ec044934c1649f16b.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.275.324e3828827f11a2c745132ec044934c1649f16b.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"324e3828827f11a2c745132ec044934c1649f16b","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.275.324e3828827f11a2c745132ec044934c1649f16b.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-IJ7qRZi7tDp3SioVZWnQ0h87wyPkX6tgBy9s8axuK3d13aZLjBWtPicdvN5MS4VyaQtm/W4GpZXhUF1JMkcvzg==","shasum":"1fc2a13280c3be27e3d3deb32baf1415f2325a83","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.275.324e3828827f11a2c745132ec044934c1649f16b.0.tgz","fileCount":112,"unpackedSize":324655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZrt4CRA9TVsSAnZWagAAYrwP/13zi8xsZZAEaoJRd5Yz\nzC7LTQf3jB5KI8e1VLpR1fUTO33tyi0OapsCkfR/ezXmK3ADZ8FGZ9D58uub\nMFDmcYkFAgSaartdJ9k8mzjGw9Faie4TF2L7tDUeLcIuFpMbr3tAfQuHuDi9\n367YO8KzWEFp/weMKfA96EVEvcaCAX2aRxtiG2l6lkKSgytpfgYuQ9c0Miyr\nf/EdFbqAtyohn2Ovafe76mm0aiqGpgI0r5xeZIhooL57XOF9g1fg+YJXiwoI\nYeI1mXtFUICBXyC69/8XvzzRtguZ/sbjIbzVrh8MxsDWSVIcNXi3jE6H7wIA\nerAJL1SdqNctX5+cNuNUk2yjFU3VBhDEjkIxMU1l8IvXY0/kfwyOFSTqNWgU\n53tox7rasgK+v8/AOSYOmtvQJ6bWYK82cRYqQYBqbjlOjvOEj/Ky6uDRBbih\nwlx38CvbVqxJIPaQQgkdUzr73o9fQ5GbM6F4ifKaS9LwAlvqnyRGfhBW6d5i\n+4M30Xk8C0SlFtDeJbA+ETkWmy0vJtVgRECn7rPaFwgJx8F52qmoDjfGYolh\n2ss/ug+bEHumNiXTZrFMBS/JWOnvg7Q0utgjVL5x39bGKHQZ+UXRk8nwSCn7\n58cxmXOOmEGSoJux6tErKTMIj9YgIBnZniNfLRTiSuH9baTjYi67uNlw6soT\nb+z1\r\n=NJo7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOlTKYswVKqO1TTfSQjfOHJaf0AFFEKlVLmC/75o1viQIhAIr8SzxK5nmOzLXgsoJqx8OgLPGxbrmMmVxd0x5nLATO"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.275.324e3828827f11a2c745132ec044934c1649f16b.0_1617345400484_0.24796257016308831"},"_hasShrinkwrap":false},"1.0.0-canary.275.cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.275.cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.275.cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-jZQsd1U1iBDRNer2pN47H3AmukzlKlAkZ80aplbGouyadhgSrFjTAt46yjHi6YFCUpnp098ZVNYIH0xrvfMB1A==","shasum":"99f1966e4f84440824f7a92173f3416a2eb07e04","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.275.cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6.0.tgz","fileCount":112,"unpackedSize":324655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZufuCRA9TVsSAnZWagAAv0cP/RvESMd8V8T2XCknwNEJ\nJvIKN1aC1poQZQE7iq01WL4pHaumt6rme0Q2jsLD3NjWyq9KDIQSzIWQGKqy\nattIQ6j3p8/XUmPOKO/XhUvtU9i2d/InoyiDYObSu/2VrTtPS25w4BsFe9sf\nyrASZa0ZPwly6r835xongDfET1DNq+ZNeaN5rRsOT6M4Llvt1Kqi1PRqAQdk\ntKePjnCllqs6bEA+/iEAFpSrsENdQ2WHajjhmIpj3PVq6nF5rhBnvc9lD3b4\nBpbSJ9JFi5zr3xNSeOd5kPGMZsw7a4nOKYkpmx7hDOqJWnl1gzM2Ds2Ne2cN\n3Q/gexuetkhPxlKQGcrfT7AxdQRkB30pwPyswvRACSN/+vrWtNf06gB45uyp\nNxtrvBFloyPXPRHz32MQJwnFfIlgzBtTTJRyQ/hpLOXFT++RMC/ROs2gHha4\n1SJjC4Qvr05vCh/85ay9OXCXleKe1jZDKlYnYedeZkGhgLmE6CvC1J7Wa7p+\nDGy9oQfAlEX6bFJIcZaJZDgm7ioXK5JmqI/t74LXvj5pbbvfIGBH2w2BNfxS\n5xl8MxUb6Bh7FSBFhvgUsvkaW8At2Ia/Z3C6IbBc8ljQ1OqoeLWXwyMaoAwz\nXv7Cvm8DMTjQT+w94Q/47nSwQPS5TfE2+iOJ7rlqC9nQp7BBbAj3cNGSyqB+\niDzJ\r\n=onCG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjuI9Zc2ZHtCyTnmuptn2kUEcGUg4flWaoFgAyx0GyagIgLsNTFaZ/hcSYz6fuSRRPipt30oRyzSiJKrfTtcKqCtM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.275.cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6.0_1617356781967_0.1603781700584621"},"_hasShrinkwrap":false},"1.0.0-canary.275.64fe5b603c18b3864833a579246f9915874dafbc.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.275.64fe5b603c18b3864833a579246f9915874dafbc.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"64fe5b603c18b3864833a579246f9915874dafbc","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.275.64fe5b603c18b3864833a579246f9915874dafbc.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-xOXWaQwWyss7zC3j1DQ1MV+EzBw86pHi9i/ISb+mvnxo8I3/mwy3u2zHA19WMLceVqaHHY7jf43G0+kpfYiU1g==","shasum":"cf490d9020c918d211c311be035655a01a23866d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.275.64fe5b603c18b3864833a579246f9915874dafbc.0.tgz","fileCount":112,"unpackedSize":324655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZvFkCRA9TVsSAnZWagAAcAcP/3M02HXHhahyii0L6iYF\nKjrvQTGAebsJ5LFXEsvefWmp0SOqLV1ljFnELpM75mQECgzsACB+OXa0rbk4\n2NRwJmIMOZTLwT1RpizOYdQHepoT/fYCiHXBWhWIeuROkSixOo/TKYWWtqlI\nFbChEN623P4OiI2O3kAC/HSeiOd1Rkjlc0ZDTp1iU4B5eVxiBF2plo9LVOqS\ntc17bsA1hW4hW5X3+bsR5K/SauFBbIM90mEo8WIolya8EyNKWvVHcEWqZVLV\nR7lDXrxitMtgNmNSVJp9uxGb9xLomGbpwPPfYiiwF/mlAwi8cZM/xTDl/K0y\n9V+ZfZ9P8PVv3JP7f5CrSAdNqW5Ho9uA6hX2lra5ldIxEpOSj5v7+BxmDt6Y\nA/E4udYabtuLNtgdxe2f45G+lb0NpQZZY6C7rd/IT4bF7WJoUYxJ8wzDvDiT\nUpCY3qCShcL/n8Di1CPDpsFVb21Wzq6YQHKCStSxk+weXd5AtUIx3NVEedMZ\nEVVsVVU5nx440UK0ixXOV/SeIpqwEaL/++mf4Tx6zIltcvFygZFLnptv3phm\nMZrdWrXNfkQH26QTiEkBi6aLDo/eyVpAcmsLNgU9xFcNkQv2FIfqibJl30TF\nz8Xtcyt8L4dlqu78NQ87srsZp3Q0HNZcXoBqZCsMyVJrR9mmjBZjkndbwOTF\n3iIZ\r\n=DXue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlYuN9PlFrPM/PWbKRgcS+CgXZFV/ukgeyMaRtNzK6vAiAW5V8Xg0v69ESk4kfmNZJDuQoyFyz0HjYEYfQ2FfPI6w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.275.64fe5b603c18b3864833a579246f9915874dafbc.0_1617359204050_0.26344745990317353"},"_hasShrinkwrap":false},"1.0.0-canary.275.f949328febef1309ec809f81a999c516e472527f.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.275.f949328febef1309ec809f81a999c516e472527f.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"f949328febef1309ec809f81a999c516e472527f","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.275.f949328febef1309ec809f81a999c516e472527f.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-A+/geb5/5j1tryimNZH0CI+61Y1CSj4NTTB/0hFnz+JWkqfObO/f1l3iLevJRDKgiBToAQsL2Qp/Lc3DG3nVRQ==","shasum":"6479ada2d87e88afe73867e9f3e19739c5541030","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.275.f949328febef1309ec809f81a999c516e472527f.0.tgz","fileCount":112,"unpackedSize":324655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZvXDCRA9TVsSAnZWagAATX4QAJUPUpjE7ZkRHJ+ddLpy\nHlyScgX6YAJxwaZC2gBSo/JT7dpP76IY/97BZtmZY8dAd2vFnyTg0uZ7X1zp\ntAz8nQnNyCRF7qqeoAII+AvNuz7GCveoK2ii6QBwPdEaa11Dk1SFCwt016co\nV2yxGD51Z2XmyUHAHLFiLGRM/rmLq2q8X8pdORk6z6T2djNX4AbLdZhEWcaV\nYR0OMwEbPyzZtyzgIp/nqzv8KUC7CfLH9SBCSd5vCLcZCHLfiZ41vyEpjm+t\nAgYYCxh8yN/pP1nn7DXK0nlDyXoWjGsyG6QAND9d0zkE3C3ibLJmFbpp1siv\nlclkqpNzYBhzN1tV8X/q5+wZMm+H5ZKkPlO1sjzrKU+C9l7x6SsrmgXN6pjz\n2XsSpZJSzKpNB7Whyl505cyL68o+LCSplEv0jHBlyVB7vaDVrmdyb7AKss2P\nUECAUyvSOl+KY2kgXvqqP+631sCmOe8Rfklmdzqf3QihIQIuhvVDx9/TRu+R\nZgGZ3cwOAgJwoEN71CYsUvp8W6Yi/iinAFBfF9fAmSTnAU2PpOYoLbrN/6Kk\ngYNnJTtS76gAHS5Tgq9JTbxOhQ/BwjpJFT8iKpGu1JFQBhf1rv4NjGLcLVT8\nrW8KHXDUlLDT0agt8gVciiOWurGOORwUoGNg0osGK3q7aXqsJWAxnWy1xmst\nLgLC\r\n=raQc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGOqondlyqH4a6v82KJaxRSm5OuNvenNRkhGwWF7hJSaAiB7L40GakbcBbi28lKVwBBpieyhxuRSxrRHEa/3kB/XvQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.275.f949328febef1309ec809f81a999c516e472527f.0_1617360323229_0.2846408731563681"},"_hasShrinkwrap":false},"1.0.0-rc.7":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-rc.7","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"92ce0157138959382fd7e0393ff6a84f04e7ca92","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens@rc\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-rc.7","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-m+cHK6pVzKOqSYwwH7C6T4MYi5g3tLqyhylTHHa1KOArgCfjaSCHWrsUwKfPEMldzelgFYlpxegu2iAZXDAGYw==","shasum":"830c6760a1872f92850bc381e60e5f1578fac9bf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-rc.7.tgz","fileCount":112,"unpackedSize":324430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZvjGCRA9TVsSAnZWagAArF4P/2lc1D1+wZfZh9nzHP/0\nyGzPTCvkZt2P7oixDmM3MFd/RtNSGo5Fckjhj92i/cGfm8L46TIj608gpUWf\nAP7YBwsAtZoa67eYjOmvkThPOdihB4mBciO4mUhWjP3VOtjL/Em3vZJsCOHP\nk0WLcjr7CdK5nqftP6m0wIqb66yA27JPbk03N9VvAvd6JjcE50WbXoyiVeFJ\nH/Fw/Co1Y0uZ3lSXmXIJzTBNgNTyl8qaHGpwGwjUnZNjNdiOjRqD4Khpag8w\nu2/6Wu/jy/5qfmovsAUZ1U5M86ze+JnPJrkroUsmtrF2BXq8zx4GniHhUGfz\nzgWjIsz0J/2AvVyKPwx0cjqD55oel/DW/IiI3h5610grFk3VFBYyspp6PLQn\nd52wGqn3LGcMGTOCnCTRvUSVQ3RtZ7d6UoEnPQMjaPIXVM9n7DyTlMovpJbH\n/i2762DURF6frRGYi/z51S8wzk39prncMaaiUINPMvjh2+o4sDghvmmtgu6J\n119P1pdjNzHctJ4zuJpsiDa1I2Zc+1q8q2w7De2IUBx0vOA+QxVzQZjCo6Xh\nKNUEUoqfKYBWsfaMpk0K9F29kP/R7v04g/I5xbdT5HPvoInlS+kvpd9EEk5X\n+BNOPA9LmIFgJ4qjU2E6JqBhhyQT5bo/fgTyWow6s0bxY7BlYIu514mqwy+a\nQ3g9\r\n=SsZx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDCb6w+p+JTF+GL6Kj5OBzN0pQQZrEIEviHGVuk5kDfeAiBgP7NUJPdtHTaYZgaqA7G9FnU/MalmJsCqxGnNlyml8w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-rc.7_1617361093615_0.7422343542080239"},"_hasShrinkwrap":false},"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4f18a0c9ed1fe330682eab63cd041bf6da6b4517","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-k7oDydOKU4b09BV8WyX91Yr1A1p4gYz0uSyuhxSY51Yr+/jnlaDbkwLzE6csb7Ml4duLK7tij0FNria0AqyHLA==","shasum":"fe4be60a496e9e4c9c32aa1e59d89a95b81f427c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0.tgz","fileCount":112,"unpackedSize":324652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ0IvCRA9TVsSAnZWagAAZeEP/0fw6wuMKwMYCQ4FlUIb\nfDz1kXq/Pdt06TwMPzKh2O0q0q9suorFzBlefN5kAm+d1hhlDE2x7TGBbWtS\noiTnDVKW3Xmt3aaNQRE1mEcvIcJxpZbMUfraQ7aPy6cAOHs8Ceuk2vSvmsGF\nq8j4IV1AH0w9algjx4v71PE8TT2y4KK9gKIffkBywZFjhpvYATiDVsf6tPBr\n9kQYzW1RyssEGmx1ylyogUWZZfBQ52T6tmbXz9jDqCAf8mdCtAEPDxVM7nio\naUGFiK0yVxyOrfJlYmD7m8Bgmn9jvBLNmxVaNTeEtgpF+wyJquhuplMPvAT4\n1bOeahIwWaKlWdeMudDVNsyrO42uVZZSM9/JGq/i2Ey9bYUaKvVehNqdSW0x\nJ3ADfVC9JL4+PY/ckqBpo3wsG3jjpz1ctjPIA4QHCAHdZyQ9BWsX6QuaFhdv\ngoEvvEqS43PLXoUvTNAD/F2eLSw+6ssPn4q7EUFZGkXu/IzekqL+sjEictNL\ntgTlFP4c4+LJEg731Vv9e0BkeHjDvjiZ79D3ofCVffkgO6dH6ReUpQrq9H56\nRezJOa+RhaHZyObpvIuDa+2vnNXQP5ID8M/zvVFz6n94cuVgk4xPWU0Sxp7x\nU7yN3uMg23EMeqNG8Eo7d8R6AFxCr+1zU6hnMkz9iU1Gw9XanpnKAx/jJilr\nDFy5\r\n=NqXS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCcYNEp7PCE5CP8creNikweZOAWXsBaXnHIwfH/RZ4ZAiEA/waIl6IObx67EetbT+Ra0eVqhfZNjSQvxr8N+gHewAQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0_1617379886991_0.87063783483351"},"_hasShrinkwrap":false},"1.0.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"f2c9e4b05e1136d9bf0e9570a57f69b78712a6ab","_id":"@sberdevices/plasma-tokens@1.0.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Ai3oYxmadqAvWW7J7CIJulqMA/uOqHsgRsvJVRoGLbVOCPbpo3/wfsxWrEOfFRhezvZrpmhO4xuyQMlIyL/eEg==","shasum":"3b4fa8b46571ab62705bf85945fd76391561421d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.0.tgz","fileCount":112,"unpackedSize":327037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ0SlCRA9TVsSAnZWagAAxK4P/3IItWIuqy/FvDyNPlhU\n4aNcHydhdahQXQaVVdhBid4vnpzrqJRtDdHXkBM1iPh7EDkJeNEGNqCYPHwU\ne9vEno+90XpvLpR8nUxJtHfo7oncyPQEeYzUVlAtSZypW3pQH9ORI9G0l8gA\nMnlpVV2dYZEj5MmawdGe3dQHte9QprUg3a8t6/f67uzKONeQoIoZlrXHdjDC\nbw0vXLzU0jFUQ0ys+CGANyzIuFKD58CYvz6I7BdRwhzimem16+PEOp+/gGsN\nWT/xdHeVNyoav5HvkDpq5iUETjnWxjLk+sqTEctiHqDnlEta3wkkhrvq2viV\nitwoUZVfMqfzBkDCpeTAhaSFqg7Iz/WUqJgKEJamoVi2yd4/BAa5sdL1Bd/5\nS+oQpR1/5x60LjUkd2KSwGSlZgQHsAXstp0uOHMufNkpibjQquHnmXWXQSvK\n7UHhg7pfEkuELQQRvRSPr8ZlaIGYvH8iX1QdglgCGpqCXnR98GUNVDhGV8dE\npuTnTIwE5J7EvUDHnyhLBUhB0lFzZZynTW3sZi42z+55UIVTqfvo16laOBBt\njY1HB0eBwDMhvMnadxd+up6GTAI8AgXxRGaOrWUGdMpqyYhrBaQrftAfcC0k\nn6uYVJjs2cE8Wbqp2mKQvXlRNlnh6JHvOTtvuU/UhNeUn/uLAQAltmf23Peb\nBsh8\r\n=TyyA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAN7y4gZt+/RafrG7o3rZrp0Z0iKwMozKQLeBgSDm6j8AiBHmCkU2RGa2qOUN/BbtnB6bD0acMDG7iS/BzIsflcwQA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.0_1617380516846_0.39523750519951895"},"_hasShrinkwrap":false},"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a4359d086b8ffb16c904875d2e69f1df6029714e","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-+5geadcc+ouwBdkbAOvpKgiuc0mYlzmhiQy8Qct5c0saU+NGGSz8krs0gzcAj9Dc/XaStpn4hLJH3FRcjdZFVg==","shasum":"5fe03edf7f86712948e23e3efc1f8b73a317025e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaus2CRA9TVsSAnZWagAApVMP+QABHm5TYBZKVciJWJue\nJaylK3eJxUt5vYPlPFMaN4KOaSFlN/Xo2r72FsmKm1v1E/dZ4SuxdzG2YOBl\n5Ad2cBYfZFAjNw/LXOrgCPZYldYuONfNQVxI4cyUqHeYQo+Tq1oyyyM6jXy1\ndd33yt0O9osCKSy+zAhFhps3MYtMtorMfbLr3BQomB5K/1LxElOMFOwiVPEb\n7XMAsfEbTRDnCrL9zZT0GWMJq1SJj77LH19/rb3QqGHSpZihrrEI3DfGbDJO\n+7YNN13XyVXYcIy+kXsG+iu44VWVv2bMO0QdQrq3xW46m25XHdulmfpS3vdK\nW1oeu7fzLfZolZ53hWMSmWjzxENpz9oOIsewdHyRMoyj0XCtaI1v8F1feetw\nnSBDKnThP79MiUtlKVEG35OtWJEqZ3sb02StK5qwJHZpgRQrqxIeoYGtWlu3\nLmmCa3Q8tITIt0nlHMrh7/OHPvsSaJkgYG1iT8lqH9vu9gqlVRyLv6KlYnIH\nd36kTPnckluMRHIamzTLpzBBkCUWMoROD6Rdgy2yAyVI1HGyg4XpJEnwRq1W\nScVDhxqefm3oNo2D9sB2ahvGdmp0O8rJZwVPnGF2+/zVwzU4h0Jyss6qrSCR\ndQEI/PJtikq3PwtWSUiWbrIvfHZB+GadT3U9PzUk5jV4LkN/QyYSPM/3OUB+\nVYi+\r\n=Hl4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHxJOxXXra3RmZcQoQu6bguTstUv5B6A+qwBzjXHN1rwIhAJ5gzjcAlx5R0CXXwMFOtmtilYh5NGK7Vr06ZxwgQB/k"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0_1617619766337_0.9968027200136185"},"_hasShrinkwrap":false},"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a4770ed68a283f8f19dd765acedf60bf80c4aeeb","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-cY5JgsfIFNgXI4aGKb4Ed9+QDwO1vL1mCIGE13VuRd+vy4Bu7WXPjsvWTXJ7t1sshEL/vnvcK5ke2plVjtyW0Q==","shasum":"9013ca12522473e7e050ad4443d9535ff7933a87","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaxa/CRA9TVsSAnZWagAAYMoQAI+C1Z4+cDH2leuCTqeJ\npnAHlE6GW58o6t9FEljBigA3U8Y6zWSF5Qc6Phew/y7SlCPHJJXrRBgW7FYz\nj8/1BMVgRMSPy2z4e8cc3T44r63VAKbYhU7S4X7TtjK8JSBa3K8+0acFkTp6\nV9pYSuLX1K9Gd2fpJ6e8ib5de6xhyc9VMt8dCy10hNaKloo7oy9G+9ylgiL4\nEZLeqgAYjZI3yZy4fMFHAqHhO8kEkG44nv6JT8tSLs1sx7a0+c9AxLDcSoFl\nxsmEZR4uqERttieaSXX1iZBH8OwTO19fHqCeTueWdHOBxxgi10qo1uUz/AHw\ntOHnVGeCWv6TBeOskpX5jca3lSykz9cpFBFOfTXyM1ePwcO61HUXIbsPsu2o\nLe8knGBX/1KK0I6GbSWcKgQrHTUYlSNo9rcbwISWscB6EM3jPpdIrABdATto\nBYiUFFsuB654k4WYZDbNYDUvtQ6USeEhXCVaU5p1ghxMlPJZXkocVD3HH5iN\ni3TQcTXSlScR9Xr5m8w7vQKLVLtMIDhyHHS8ZCCVBPQ7+Z30p/9gttrHIRql\nr2RNZ9SzALwUNcFHulZ1Wset3IWCH+6sGpgY0MAVddCi0Miq91uOhitmz8gW\nmv3NNmJaMrmejM/DMUydbiW/h2HYiVr6VJDEjElSuMdt3TtfOhJnEVH/XFL/\nzbtA\r\n=QcLB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESTfHsjKE0LIuPJFIiyNaIjNfvpftpo9Xtr1de+sx0pAiEA9kz/DObQa/x+9ixBRcga7jaVRoJGNN/+oA5DtYrKsAA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0_1617630910702_0.5226802347571593"},"_hasShrinkwrap":false},"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"419cf937e3949f37df904357f6829fe95d8a9764","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-XgeteCCo7yhE9WCHPpDPbmCqegZr6bbjULX7VKVuuDazUaNUl/xMr4gCQjPHi8++0NoqV0Gfkw5Tsx/Wm799lA==","shasum":"11881e8a74c6715c2981e487f5f634e5604c4461","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayLaCRA9TVsSAnZWagAAL2oQAI5JocDh6mxW/pwhKolj\nz5BT6jnbrDM9PKntw76lNPG5hQjxzpg7vuIaHYENv3dj9Xq1HNu/BBYdTLgZ\np8bdTWz1V2zTviQyTwiKg/X77RKKyWSnVzJnVz5YPK4TUQYzmnrb4en/gXoA\nUuqH/IiN/fNlR7ai+KHv+DB7iuiDK3hcqDqxf/wc+VYJ7IrBEQr/j2409Lpg\nr4JipC4SEmN4VcxUVXhkz7d8pU3lArd/Y2TL3/UsMfNciai7EsWZgXTdwz1x\nduGlJKRZDIICy3qmsPfvAxaiyh5oGKbbWY5fpXU0hD93H6GyU/2Wu9jcfZ/Y\n99UF5FYr/PZbJaiMeagnr4X6/pxXHjwVuLiA/PF98G7sdnMmnR8qVcDHqk88\nsTt9wHmsZ6NBbZpRoCgHMYM79FlncWIeMwlL/dAIY45ny5QXYPBMx1WPXN7S\nmQYHJdPS4bhbmHKn8QFb0JoQ7OUykOD+CdyEVJwJWwXsPZCMl315w2KpDfwq\nrxQgN2vqrlc+dE5OCUSvZkbrXckMTVbvYCXpzWg07oGAXs6CFwABc442LSc8\n7khV6wZ4dN0njULC3mQx/6EKe8o/L6lbYOdOFs/bicblGPf3of+oqWp2hgrc\nb0SqwwsX+doskxNhIiuozjiioolahSJCUTVrxNGD1VjK0/iXiwjp5iPecWue\n398q\r\n=Whse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt1/SIrDvbJSxwK4Jv2dyGPcPv4vtWj9mU8X0DPmoLbAIhAPNRCNJW2yMftp8N4IMQc+5jR+7vEqmEstqSqlDK+iVX"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0_1617634009817_0.8794922803480743"},"_hasShrinkwrap":false},"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a75632abb1e369a58ed5037f8d50d8831e2986d7","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Voj8xpjcljkF2GnLoxoTDUPoOPAHyR91sc2yjjDTJ+0zYFw4nmZtjUy+yAZKErOmJ3bzniNTyjBp89mowltPnQ==","shasum":"121dca18108e58be940eaf2973ba1e7899391dc4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbGtrCRA9TVsSAnZWagAA9OsP/2BB3lyl4E1Htl+QwJAO\ng0WQwADhQrq8DBVywqbUfiUPCTyu8JYgItZBLHMTLzKfKRkE6vn+NHy+xXA8\nGoiz0C0atETGG/TMPqcnGlhXfb/JNPHrocYJTvfth8BNulnJU0H6dnBMAoo2\nvhxYTi1VXjsWsIqPElVRi8ak3wGANZYQa6B9rJ1xS3ozzDpINFe8SPm3CPVT\nuMhARzilnQD+m9TJMjEz3eJV4dHnZ2ur/1KPGHenkoUS5QFxZarJ2JK2nRFZ\ndrOLjrO7EMON2AdwQm9nydsls+FX1f6Uc9L2y8qEk2VRoQwHfghGRNa52jG7\nraqw2Yx4LNeey4s/ze1gIf4p8bLzD+GtGN9k2JFPl1hGPDgG1u4lLzG/48ZO\nH2Rq39nYrRuSE6nHHsfxhRqZcqQ+0IYAnl/NWL5llmIMy6Y8hwMqL9bASE1q\nPn8R5p29y838KsPWwqn/USoEoyljmxFAjnjQGYqeO1vz+Fh8RW9yCYi2xfRa\nrkxiD90V3b1qLo2bRi/f65/wbhRd/yYZmMU/8duDsXoShR5c7YUgLME5h5+C\nkiB8qhSkoBXxJacTp2ugKjO4Ds0FRCQdgbKhEptVckAsDCS11SPNmsOwnUIu\n4/hHvCq7672uKULgp7XwuPfmcWPs3iZblx2rpt94xuU0dnYwVitXJtQy0bN1\ng+Ui\r\n=5XqF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEzgTP+NAUIBr2LoDGVcBIgZgQUssbkIMgvJGlWPByY3AiEAmOrqsCaBEAAyneZ8MfHUHLXG9PyedWbiXXZfsE21MJw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0_1617718122484_0.19067717956320585"},"_hasShrinkwrap":false},"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"731aa8ef905415e2650d05e3b7a6932241a2280c","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-izU2UoZg1hTcpFfRPRCkgbmvfgXkeQ4Ty7ohJ5GTE9u+jIOb1W5ogYRNY1IS7XcyKFq0pXTFMfjUqByQPHTxjg==","shasum":"d20946b877575df0fdc1da9354fe386b17f25ba1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbH59CRA9TVsSAnZWagAAITIQAJdX9JFRiYZqJLq7p66h\n1vEC4Qpn+A6EAPfiC70JzWPRGIdL/2KcL5q0pJQIhLqBBYsqkfK4GOlZpAVg\nWqWQ++1K3f+dtyLfaFbImv80F2Hv2s+28nQTaY6/XAZg8O5mtlzFusx2isOi\nQ6WIfGOTUvDzdZoreUIcOsd2iCiVrD++uPIsoma4FwdaULiI82THYIX7zQ6c\nrM8rlQ1MwDHT2lM6Vtc/GemFhqtVaXpwVP85nOC6bHX8lBFatFx7voSsIzmp\nZy9SkCzYbjtnyyEyBTD4wmVVhnEzP4mTI7oS15i1QDxBgrcHHXHMYgQplSZ0\n9AXcJeoUpWesGxuY0NLqf9MQACWQ0xF/q8CzL2irqBEmG41zsz4Jju4xHZp3\nGa3ngXz4IyqRG6QcKvvj2aAchqUOaOCrQAZHQ8oveSLLcij34XsG4f2y2AQM\nlWSb8q3CRm8JnSW1VAUYsrcBuOHlI6NNLsYovy7/VvlsAD0WKEEebJ2SV0Hc\nt0nGo383zawZQpuGTQ7bsAm0lAbEfyV+9pg+Mi/WXhrLg58PlNCiEw0tYrcN\nz+RHSQebN8dYlDeJTplXcv77zQj6UJlcYCvG8VkoaLVb9JRL8MvQ8vZDsfSW\nEU4aaPt30yMCQuU005Ug1e3amlvib8WFLy6nq468/qEEtoEkezO8da13NZKx\nNnrA\r\n=+Sa9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM3ADt4KqhmwMkw5epiz+emsfoLoSbiz9UUyAhJJVLLwIgAnZPT09f4CjLgNP9I+bf0zjVt4DhFLr2E/MkpoX0eYg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0_1617723005014_0.9970931724209775"},"_hasShrinkwrap":false},"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"b2ebfb269227d181230b2464edccf731550e7427","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-fKMAiDrxC/kxHvWS1ZlUkpUYYnMJOSfj0lKgOSCCYcSN8ktlYaFvweyiZD3LuK6l4ZXuVf884MREzaXNBNbhYw==","shasum":"a221cbe56498292b03d949646d1d8f8a063abb13","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbXN4CRA9TVsSAnZWagAAmVIP/j7+Sj2PNZBmTX6BtFya\n5j/LAJQT+lCbfEziKajnUXwwvWzbN/6h8Ma5n6sqDzcU/ulHK0tCucyj8iyn\nsd9rSWBNFpBOOAXdUucYFQRBlu00NDyHogme3mOpSjd3P8LpyEiZXyh6un0c\nufKx9QbnpuYMgjctJTPmJpcg+X5nWpAqslUf6I2tU6EJq7IKBZDksKytIp7W\nId6b0m17czC8YvaVhiLhwT5eqFEGlJi9nlel7iJJ8xvh84fp9TfTiisrWt5A\n8ukJuIhUTAKnI/ALNCoODiA67m47CFbrv7mMX8+D70iBg0DwwaFnAWwJQql9\nNlAMtFMhdNYnXtsqDNC4YdujqWSIW2s/5Fp+Yaeo+keUBhBGvRsSS/pAZkKE\nGhKOxore+HA5NhmL5Pe5pxPjlFnWraR/dUxG9+DT1++GTz7VYtd7uxiXtQHw\nYHIT0nsHQmnwuG4iNStJJHtNgNX+9lKooyu3e8fMLJmYGH/LV+JCHyXL/lLd\nHGo5wbkr9VaQDbii34/EHGiZZjfXk7hZJuhsjv7gORYeqSU5OyC0BhltoAwm\ndB9viFR+5jGB3yX23jt9lS2vICRC6pyHAvwNhU9EaaZ09+aENKx5a5Du60mY\naCjZL2FNStuuZHQHbsvmLLEvFJbC4d7MKe/Z6yF9PkeOiInvnKykcYz0Tbs5\nUcJs\r\n=V8ba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD48a2wOll9gSjt7qgcLKSXJoLaNBnYXk/WWq+oQHqghgIgY123eEDV4FWKPU377WVzt+jairhISLY+D/4SpIhzy3E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0_1617785720311_0.2761527146132796"},"_hasShrinkwrap":false},"1.1.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"85402bd64384ab8e1526fb832c748c7dd0cd2a35","_id":"@sberdevices/plasma-tokens@1.1.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-hzP19Ku3R4UzViQ3TsOtEMfow8NOZSCpnWwFiiw+sSeVABMvw1Xwx7xDuiG5t3Rbum2WBlng1ICvbizjynmLOQ==","shasum":"0da3351f4f3be2b50bedc7d6500918233ddb18b2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0.tgz","fileCount":112,"unpackedSize":327315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbXUzCRA9TVsSAnZWagAAw80P/2BzO/HxeSxs0QjxtEDD\nwF9be8sFS5y66KB6vbc0yblwBULWQs5LxYI3/uwX3+PPOXBvzX3yd+I+TD11\n7Co8oIBfXh62WsEZBAZQLLQFq3y9lUkFFUC6h74sj/522nYp0GG4cOUwziiQ\nmTyhNvrEHNUmBve1KPggx9bUTh/6b8UpOfLiBCwN/IPila0XaLZZJg4JLV19\nMJ5Mg9lklPeqiAiQqvFxp07AYvOqrw36xGvHRz63GNwhZ4MqFuLGUwqu3Kfa\nW8fhvCgaVjO+HKVDP7ZOHgUSRkEUa6l2S5lv9bTZFF4V9cPZASjXePx85z4v\nLElEmMxgrFGWNxhgqn0Smi8LiWBn44ZZgLN/Pjywt3AwtrWJJa6x2Tram0nj\nsPr848x7rTKzz7aYQx/p3971/D0dRRQOGjBpxg5n17V4+nxo7UvgHNSMs1np\nDWITWXmrfpgfbChqEFHOclxOul7QHhqOv2B2Qn/pGWDnKnHlsN1PMFDQ1AAo\nsDAUNY4Eh7KIwlLHSgO8x5qT8YPLPFbF5A87R4MKNSTL/89PEjUZC8pxGAUo\n7hi0mhUpO7DjceVEjdCF+FunV7hDli4bzEiiGMjw9HVkA6KEtRmcUG/TnmmR\naPhode0VCeKTf41B8MtfC3OabkXFrRzcZ4PGRhiq4F7B8BzdtqHTVKHm3oHB\nGfYX\r\n=Qo0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW3+KVpuE1vMlIQ3p5MhLVUHaTKDUrobYFFaCugiHRjgIhAOog8hvm2RBs4Jfsf7sUb40PUOr+iZDSgcr2x/cgJvCU"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0_1617786162536_0.09044052364034383"},"_hasShrinkwrap":false},"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"0bde571ebc983edaa9381587b81297f5c86a6595","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-DBHMU+xj27bdhVgUXyS6hUS76Mr55trz7+x6rfLzUdIFl+viM6E56iYTBnc6jrfzCdRWnMKNlzGNMWL1RimGxQ==","shasum":"f89768ac4250ed03d4ceb02143abea808e949ed5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbb01CRA9TVsSAnZWagAAuWoP/1RzXzB1OE0awmkwl/9X\nFE1T705MMreN2x+ROJeyrm6IHz5857hAoyP672IdLKNh1glXAw+842uHNmyz\nxTQgec6/4va7lB20AxdKHeBZP5dj/LQyLp5kZgBkSCXfSHs8lQFor7La6mCd\n4u6vj8hbow+/QASlG/yyJHSK7QB3YS6lkuQ1v4zPzHVQALNPKADlIPNETMV7\n6t97ot00kiKUUMOwsLVlkJLH5bxqscII80MDwa00Hqv3ngSnEKocKEBFygLt\nnQCRA4TSQ9NeuGUPBcV8GdelgfOKIlF3FYXmesvfGXvaWmCfQoz1JNLY4eNQ\nZoPMKrRTGVGZpL2N82PNS1wRYRffsyFtcAKD42HJ7bfztMotAY7Auh5oUxSe\ncvAw5YqFFpUD/rghwpLtjbh5sF+8i0pWSgmXJyNP2M0isV6OED6n2rcZmP73\n6FDsT9+fCLx23SBwWu5FZnflpAs27KN0gjZWx0BSPxjBGEVhs5V+b/Ykvpsf\n/jtvWTwj6d9rabQmFQa9QF7tM+gReCtwPHSeNzO8D6L0i+O79kYa7NVZSo0a\nSi2O6nL7PzwEyYndI9lZ9hkJh8bVB55bzxEJfHVKFtXa+1af+jMLMb7wRWJ4\nAgOFUUgBsZ1i0ohiBJeXfM/bRTuTwJr8fHJE7sPydMp9L+u2L1MCBzdC7jFX\n+j7Z\r\n=usSi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAGUDh/QOsH3X5o6Oc5X99j8ETBwEu30zUf/gudSsJTAIhAPMNbCqn0lOvAiFDNdWNkXGzS7b20yhq4zZpBj4ctIdR"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0_1617804597306_0.7122306071502742"},"_hasShrinkwrap":false},"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-+lPggGkdd0lgSVr/PTbs1+aSrneOoi6rI9mww9XkA6eaVPJ/PVk/2e1kHnwAXTya8238hfcDarNM79JMTtMKFg==","shasum":"f75d41ca3e7faea53a620c1e1e4586f51d72c4ca","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbb+8CRA9TVsSAnZWagAAUu8P/iZgRIJVKcD/ZkVHA2aO\nnRdGyNeQDz2cM1xb0OAa7QF9Vt59WSNDFmSa7ask47sjAO05VJL7BuSYjNiX\nK5GaHiq+V2SPqGMC8NOCK4MdpRvuHfGOMN9w/qUdUdxUDtOvakqeWk2CXg35\n1sgFyWLToI6HYW094sXl33dGFnunPH38gQUACEQb3T9Z3q/pOo859mpFdccd\nQGwrv4KQj2j0NQ868p+dyHFXzTIoNr7IL4InLXQTZsl+inssLGTfjHcTTWCx\nwpVVExtB8EvJt+H1GdAk310IITHRRIrHS8PSoCq9jvGHn8HTD7TYMGxLbiWw\n4+glV7NYiucmxrmezPWLYDooRIJnjCGaf1J8PQr3/Ih4rBcrqY+S48dC7ckG\n6K8XxT/MiLfdE1U4UhoDJwwZ233qdwxd3VvkdUlj2fUvKzTl3ZkM7Wg5mrrU\nIM47pMf6i+SXMKKfLKYEEEPaZjWqElFaK/wuGvzraFZwk9uJXgHyVs1tkmId\n7MqdA1g9aahh2xeavrG/VYWZYe1/d82mAKBuxr/mrEl9EK2fHIimckjhkiuH\n1QRhh4at7fFR9dqbHrrvbMe8ndrNH/KqixXsvBk7PE/7SAkGhNWXr9JpOo/3\ngrX0xwMjcaioEZJ77aTyRkiRaKw4lkZscihG/8Sm6RK/hnIdmNlNe3KcOkK8\nWu1j\r\n=iqDL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOP62yW9NXC8BbMLyhvjh7RhAJG6vtXjmQQEwoGtnroAiEAtWpGRFqPryPDenqJ7O436l+xA7/kPSbbJ1lmCOSbnxc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0_1617805243618_0.7318518750049916"},"_hasShrinkwrap":false},"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a163cacf340440188d48cd6a970c21815424a13a","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-KkgcC93YjuE8uF6kMOZ+NeAtkFa6nlwx2yOBBBXwT6VrPD5ci1kNVTKXVhoCBiMvLXq4/deXDzTUfxh+/ohTew==","shasum":"c6b6e423bfd10f8e38208498ebaba5b0a99ec39d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbhHlCRA9TVsSAnZWagAAVQYP/3rcvKV2C2cNfpt06vRn\nO/+R+UEahH9sCNkbi1/9kfduSeUkIIVzOLiDujldFrXr8LfaPgMeob7N1Gtu\n98bvE55UyS07uDqS+CJ271dNzP4ypzCGZi5yKP6Chpghs7xWc7+EMsnymDUk\nQtcoT9tPIWlO6VKqszwqlimf9w+xczFYt8VfsYfxcnWBIpKvv4p+HeXLQOEU\nnHefELqmD5bACRIKhbASKyuBJle4KgzRATSP3YblAOtcNCGgtIfNJwLatLql\nvp//LXrMMFB+qtFmVhcppZN+akBCsbCieHRh1zkYDHwpGmi5mS4d6TbxKdPg\n8/SnJVPRaKNBlqT0K2RKxdaXylugCEzgD4gkel94BenMYhdHHPxjm0qrEIK/\nq9Oop65/qcH3ywtd8mecaPQ4g4OlZpX9GGt9rPQ7TExOqDnbmHcIuvNncf8F\nwczUptV0qfR+9/SE5UvPEkx0RcjurEV4viKkWbE4d7lp1zohIode4PCZtpNu\newggOkrxYoxE9vEWKURKddK3vI4xrAnR8FUqQyDqXciB+CIa2M5MDhBh0Hn2\nR7ZlJ1r999sZjqQIdx9fkKc4NYxw6NtKSzVvV+IC+bGFSQLy69v5fhm2eVcW\nn279LbpHKRNZ/TFgyTcbd85byuDScT5YVKkdTA4NsjyySfCLNQ9D76KTl2mx\nlHpt\r\n=Hst9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFmbLxzooskyHBgOPpntZ+BczYeF8YrjliwgdFIwVfYAiBUnri0daWHOxBfjg0wDWgbD1rYE3tY2RZIehf2giqXng=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0_1617826276501_0.3314840644782209"},"_hasShrinkwrap":false},"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0":{"name":"@sberdevices/plasma-tokens","version":"1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","description":"Пакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6fee0eff6573053d5401b7832d09982d37446977","readme":"# Plasma-tokens\n\nПакет предоставляет набор `дизайн-токенов` реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [cdn](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](../../examples/demo-tokens/src/App.tsx)\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/)\n\nДля запуска приложение прочитайте [README](../../examples/demo-tokens/README.md)\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-VgX5By+HIzSPS3r30R9uyh9q4F2A8IyaaQ0vmt06PBFUu7wMwERlfPljCkK9iDx+ZXtFmm7C1IDPY1nxv0YzTw==","shasum":"587e7d94e416ab4517829f0457c62ee308149df6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0.tgz","fileCount":112,"unpackedSize":327091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbh1jCRA9TVsSAnZWagAA0RoQAKIpBe2IgBADdaam33Pc\nF+AN32MI5DzsQbO9gOFwHcFEHnQsTkHJFA3DN/aqCfviEVaWMYegkzwuhzAS\niCFALyjnCVh2roGFXmlDDXcNtRf7iroGnLuqSY21MtF58TyOvZgdeQZ22c/e\ncWLLi4bZ5noNFlG67G/cPV6SjhXykobApWPTXxYtqcDefxXUr6mWh8oDTaTn\n4hQ5D2yeMEUQXveQsfaY21wz/i500eo74Gp9ZnK0IJ5tzEVLyMJpn+0jtZXm\n7MaQYNozXCggEVNUF8zwYCnJm/AWB/wQ45rHnsJRZ4SQk6Gcvr5FiTCm5pcR\n8rJVOHXcn1HkgaRXBkiN9N1I62FZ2Vn62pgsyDlbizbxcVJp7gzv+TjEkl7F\nYXhqDWsm9XC1fagjM6d7OjYCK437Ti6Y947BF2XgDkZGwJO+PhVy0zz36yn4\n5sBio+UwcOPuAF6WlKiQwBeAVuUIwHVh8pbKxC2XPDgt+5I+IfBNUMvWghMQ\nlTxyd8kjcjWXhG1ZufRy1DOgTc1xKS+81x9MexoBuetPcVabTrKmgZOZWGKt\n/L6swc4eQpS9txG3As/6aWzCuKd4BZP8tCtE7KcBYMZDvHOvMiEcPXF4NxPW\nYo4SSXsycOreF5zenoxjWZaWw23tTvvUJxnCN4qHUZFQwABhxSzSXSxQKCBC\nqelX\r\n=MJby\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2UVYeIFkIAunxWZb1vfO327420JGssjipDr6JAdl3SAiEApCm9AA3v9Qp9sQfOWjX/J1l4e5aGaLjIXxnAeMfTOY8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0_1617829218585_0.042408607007765386"},"_hasShrinkwrap":false},"1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"c41df8e1125f562e60e45f2533956409bb88fad5","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-FeOkt5x169Pm2RRv6QfO3OwHXYkHxVzGJ3A7pd0lBGzaW7aqiMbk4ndGk6Oo42nagpr8urt5uCMip/EnzEAoDw==","shasum":"e1b9a2a4ccfc70221b740436e99103e8e9a486bd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh9JaCRA9TVsSAnZWagAAUwQP/3zvKUJGIqH0v0hAHLgT\nurrT0ydjWiwQ9GrpNjkeJzdj3Y48rrY/AXIFG/Riv8XzMlWZg5FvscWmNsSP\n3fU4xzHDm4dVmh4Cmwz9aSfzFIxFmT9u5wyhw9jNY2tkE5UfjhMmhYbKh4l7\nBn/j4eHAxJd8R0RSf3Xxi+Y6KvVyPxJ+LmLYz3yGBC8zUuV0OOkfz/tDi1xR\nbg7cz3k/i4DUo7JuoUmQYMU5PEToGkkhccYRj2Lm+U+a3D9XPPCGuX8+++Kz\nWMsy+C8as7vUNYXKlN0kx1HG8uBtSt4uKouexU5VWVXmCBollPeWxPNblT1C\nHlQkxgBhnzMCfFG711q6BLMe9tBgzZ7g+Yj4qlTlqgTa+dWdHHYyvltiuZBg\n3mym6SP8ZGp62Mz4p9hdJL4wwAiYzAJA4TqjlaIWnHMlKdNP3zzybbIfYiyt\nKzteYh7fZC5kHuC2rTvt5RsvsmiovcpvZPCdSUk3nmPMc1mcUKvWlXwK8dwf\nSmHGnyMUeyoyQ7mlUsuXl7iggPeDZVoKI6mxuPPUyZUVF2ULbcMad8Y56Aur\nyGat5SyIB8oHtpri6h2J3Eo77C8HvxYFXQ4RCkGm6aFSRyPT2Y92ksK9lGqw\nHA+SKGtslY3kRcqo9JxvTNfOvuMkXlfw2OgI/LDBsemKMfxr58FVfh/bVemj\nYzN7\r\n=6yxp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7n484t/OzhRGLMWNEuZyITrUUbIvuxNHMhjgrSI0EzAiEAojq4skFDfFypjybqhNnDS+3h/qa6czM/rKcQH+C4NdA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0_1619513946181_0.3076294231647003"},"_hasShrinkwrap":false},"1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"fff02555ddc6c69161b041253e120a32ce3d8d81","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Ls2a8pz4utBD7XzyS7M+WfwPY38GVXNhEdYg0wARmViA2zKq69jrCoB2F6j3BmxN5flYINQrzMaiN3qPRATFQQ==","shasum":"775bfcad6e76beb838f5d3f33a393b9077c28d43","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiR7lCRA9TVsSAnZWagAABOsP/jBhTXswMk3KHJiFOb8q\noGfvTEJTDnTpMMKpbiTWjYXUtU2PmK4Lp+et+YPECcPsar58P4bYtxjyalFP\ndcNWD+C4rHR3kox4gueXjjq5le198W77Fmp9i249DOUPpSyyQUMo4xLsOr0s\nCaATVHtCjYZq1wLey2KFyOZjgj3OpbRD4XL9zzSYOvHZaOzRFA/b+8iE01Wc\na4MjU+X91rANBkQv8qb5rJZr8vX3th+IyI2ESZQ78nlGiJ8ol1wBgvmZj6kA\nIKVkLQ2kv1Mu7w0E/Cd+QlbFK41I8ksXvwKPbaHjrorFPQRpTVZ3fQTbmnSa\nmT/GXkk+LvRP5znT+zPyn6b+dxzJmiTW/+BsbBd18hjT6QFKDTtWpa7gh7Q8\nAZbsnBgaxQ5AZ9WyfbVOWzOSB/zl56uV/WcLRrrI6p28kLwOhJKWA5F+go2E\nXIrC4Ukt9XjYjnmWRPCJTW+vA+X09MNxeO4JWKqLDHuAUr4fEXBtj4JClqFd\nvdkzGBg5jlDbdBlSQ/BPFkVFFTH7wmyG9MW4JB+61eDc6RVbIU9MQ1DYz+8Y\nZXxUhz4WTijVJmEgivUWIWbrUB8xawXzgvblkeaBGYt6J1vq46R1eVKI/oaO\nSUppuTM9bzctSOLr4RDFnp2Np5yOjBad7zysW7RLXGW+L9rt1piCtew4dh+p\nSj+y\r\n=LSEE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOzQFLmZ21Zb0JBEh8ATXEAGjizEpUZPTVG8TlnrkBDQIhANfwvXPbjb+1XS+1wTAmSE0frnT0LE5XWqkdHhOI2Fd7"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0_1619599077038_0.6693078528107856"},"_hasShrinkwrap":false},"1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"e5b52993a3e8a0e23819e59f5ae5cb236d60abb6","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qPc6UHm5hzEeuh/eZVJwZfdBbjRP8YZXK3Nj9bphnNh+Ew9+LXhDAEL0T7lbKPNoPBNJhlDDK/fAhVFaHCGLbA==","shasum":"cf1a59b317a426f92133b1127a139e2fdd76a507","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0.tgz","fileCount":112,"unpackedSize":327460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgipSwCRA9TVsSAnZWagAAapkQAJqCI5mHN+piuNBD5LR3\nQRlwzVjqxrPsSKjqAtAv714abAlogeLWE71BJ2pp5o35sSkDbhLVhm71EY0E\neicBej5Aag2OFhBqzacppgbXXjk0fynX2cC+DPGuF0k62DuPIixM8kK0zmdG\n4cBE//Wtbm56QoY0mjdX0rCu3eeEYJOEQQZOr1DEZ3t0oEb7OgW71IU8rkIM\nR8+uf4SIpw919ry6fF/oRI0jpSws1wEzFcq1+1vNUruof/EkAgHFbHc2fjTP\n+4Yog92QX4iv3bnp447v+0KkZlQ4ouioSvdgiUHOTFXdcPVx2zHc/8otgGzJ\nype1SZ/dd+PImt355KgNX/LglW9auSLM5s8WNuStNlJCdRQe+NhhJNo9C0Zd\nbB8fy1nbOXqQgDEaVfQWtTbIw7gPlCkOlfh6VS4fM+I5E/pW07YRX1lu5U7B\n3QXLI1BlZWmPdXEZ+dv9LGC8c97Pt7ybQloLKBUlNE1h5zNFB/t4Umv8SsmJ\nxtTCdZNGm7kcxhCVzAtnPR9kIyvvgu1nAW4ZE2DIXl2oTm7+B3QevgoDOZ4Z\nTbBk30v/DCL2R8/u5eIiSWO65L9hP9KrvrZrHQvw3anJRtwLEbbaE4L4TXr6\nCvWYH+OP/CbE4Qw8/GgZtL7iXdoY1czYI4uQnu5wEWbv9dTMVVyn1MmWt7px\nNX4N\r\n=0bx/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh9iNa2J7S3A2uv1qA/uPkFS4Xbe4WpQ+aKNfmHA/IzAiA9bjsPRqI5nxzDDh1niHRd54aB2vA/0rN5y1tmoyitCQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0_1619694768004_0.2941096291877785"},"_hasShrinkwrap":false},"1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"23f936beed878a0ed569b4f7bac460908f15a2ca","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-xcJWO8gwGTFmqa670ucc5Khh4T8BY//dxD/JJ/6Jd/f9bY5bfRivWWYvax8PLjamqGDHwXoqRIgsh/sCQIgDBQ==","shasum":"f2974b05823f91153ab073b805840ca2df7e3397","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0.tgz","fileCount":112,"unpackedSize":327460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiqKYCRA9TVsSAnZWagAAFpUQAIoCOCSJSpeNHNrgMEDg\n+5qV2wHTrjRIsjqQjNzUh4uHNR3koFAa3B2tLiB8HcJjUq90crzll+n7kvrz\n3nhxScd9RIxf1SO/7i2vwqZp91nzbssUnL8HJ4n62nkI6PnNp4cu9TTSwnWk\nb9PJqLuJzAJnrIoJWayls+RJUv80A/7Spi9LpB0ZyFTB4SjaA7wUFByyuqXV\nFiv9jdhfZh80z+ruUKO6KlJ7ODSsudw6Ltpq/7FBfOY81BItyf2h6fnY7+pr\njr8s/y3Dd34PpM7BQ1ZqPbInvKapQOW+2Uk5oFxYz0VqzMrtiJdEAy4qucSL\n/aEHqIBl9NMuSqx2v2Ul8G35uteSwdxdYbxeZykmhAA36mekhaxpbXMJ8B6A\naUSVoyMSxe/lRhtgq5mKYdOaQQqytvvSAuT7qsIRoloiE87eiHztdslYMQGd\n1Rujdk1a+RHGaxTq9RtL0I96B3N9a8MVMHrGKDhnpGjPdH1gFoQxMmBBXnah\nWb9dcwNDvWg6f+djuZo1cW8eifFl2WQlc8Io0L5V+DvCj5ETjWjKfkgS+mw8\nLmyTuxu8BODwVXhqtd5G6qglc5wLXAgsd2bX523H8AX0V0hVv1HgiFwh+QrO\n9xUmnxr2QSBjn2ZZEOfQ7V8vZ9thOSW22CTe+I7fulGDro3MdNaRPVtWYgv+\nayVO\r\n=kH1C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw3BebZjsVUUBgjcZywPmkvSsvI8rd/1LeSNAo4jQihwIhAJdDbbOHnmgTREneLzF5Qh9NT8GAhlA4wzWfCfZOGUUG"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0_1619698327812_0.06940198215162563"},"_hasShrinkwrap":false},"1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"ab67cf258bb5015222088fc047e905654c5178c3","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-klHFMQpcFxgh0vkv43KXCIx5rnXvxfdKgTXJPcnmlM3YrDJHpsU4mgSRlzabtq7gUVX+yeA7vKm8o7gdt6vNeA==","shasum":"e88ad2aa6c0d0457dc803ed6c9e86e98254cc2c7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0.tgz","fileCount":112,"unpackedSize":327460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiqOHCRA9TVsSAnZWagAAFWsQAIfAndVaa9vgYoeE3El1\nvUT4wBRPwfq0GdX1TGh3nWl+Hp4rEmnsDv5KYSWNszx09OvF0rx3rwXT+PKp\nBBCpfQfBuyvVYQsrOrDs+vswdfZsplyOcEy13KkJvhHjiMTpz7ghYxO5A/u2\nt/6x8nJD/qYhTzikkmhMuLmDsZkKhmvKLHtTJtDQ3R5fq+6hdj8bSGlJ+JPp\ndFQfip9jRcMEExtujkWBNGe0zeAJXg1PuJPQtZqLIB01Q88VQ5Kmpwg0ePaJ\nrw1eMD7YsBHgQNy9uROf3py/bKbrqf9KGN5hGPGGkf7T6mkWUgtqq9jjyEZ6\nN3UNIx/pv3WEKiVWlicVMoGrPWm1tr/2C9yVf1itMTa8VxsVczQ/fMm6xlUa\nkxJhllFPNLrBImTkg2aVIbx252zCAPDfimINh+1Hk1PyF9jxyyandczsDucN\nXZphNOGF/XYvTZOel3kq/yryBe5XidY8o+hxv3E9WaV/TyW3oyBZdlFGTZ29\nZnux0voMh92wRj/HJhucwpNYWu6LUbMhvpFiyBS4LkLFcdN6F6WWg7kvT2BP\nHDPzEX36ncI12Eif7ef0Uk7pLXZVw7qXMF4eOh6r0mqBH6ixGnGAOjAcFjWB\nGUBwfgRTZrWpaWlz3SaU43RZ/wZyRutGvWWsSmeZUUcGZQxz1BEO8S38oo8v\ngsfM\r\n=qljG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk+oWQWSTe6ycA2JlbWoaR1iswucBxc3P59IChiuMJaAIhAOCdyHwGYZARs2K8PVEj/zPYMC+IONnuCHh7OVNV+oaw"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0_1619698567044_0.9846303006621637"},"_hasShrinkwrap":false},"1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"36534ec76bc28bd91d4295b189409e5c99c86513","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-iV71nFyImasaSzJ5JY+pdm9ByN4LZ4udwhIMsrRLZTt/QFEPRuOgRaZI1yFsWaJLr7RMKJ8mQIvEWkueMhGgvg==","shasum":"b4478fb60f6463ff6176fc17283b35b36b09de49","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0.tgz","fileCount":112,"unpackedSize":327460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisefCRA9TVsSAnZWagAAI/IP/2ydxO+jpZRXdcYd+irK\nCUOfdNb+u4pYhIpukqtaDS3httpSlCGAIgtvmRQpovor/EvI86aDVo2m9Tc/\nq4ab5ccXJFCB900MYvgB+4xWdI+cIK57k5COp4f4nQtf40dmJhD2rB9hM4eO\nvhfzwC4rTqEbtjpSnGHy5O2F5OIdgaSocTFlyn41ri4BRoJrMI0pN/dQQN39\nsMzt+GwcHu4NRA/12OLGZm7o1oV60wTKJCU3eTo2pa2yHK2FDx6LdWUwXq/7\nOahN01h1NLp8Cq3DGC/yxXzsbv3x7M6TdgFVkTDhwxxvYMiVp3jhKLDoqCMe\nbfEExOWCs/7Hmnqv/FGoXmpSVL2wS8IeMHlBE3X3j+mXNhkgnr43Nr8/HlEw\nAnzh+VjAKfTBjuzMSseBTEidMr0gUs1xmuXjaN3i2jZwVD2qzCC7xTtwP/Vz\nIFV3HkXfd4q7tC2ltLt6/hJRMURqlA+mB9OcvK0HLD+M+GZfkhlGgrOjx21Z\nbPWmD/ad5RBkWC1Um18WYGcEYUfFT0+nk9cczp3KInWWwr4/kwP0J5UrclV7\n0no4h+NyyHtTTELd87wtGa4H+BAADyzQwFQsIY2aL7c0FiCh1gq1VGNinfZ4\nZwSfUsHhzJt0ZeH1KNMh8ecZXCPnc0BDIWn9qsRX22utb/i1XiVGxOXVSyKv\n2p1q\r\n=UlZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfmnxVDfdlv2YtY26Gv8MgkLMXC3q/iU7wqV6zabRfWwIhAID6Uz4I2I/ll239zmBvZVnDwYKMBnnr2V+0kYv8n3lr"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0_1619707806845_0.6212349478117025"},"_hasShrinkwrap":false},"1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6dd97a26405020676145327e9d9ec8bab61e8861","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3raR8k2i6JjM+gNFuN3Kz8oFZQNl7NSxpZypskXmsL4OvKI2s7Voh7ER7XGgQbZVY1YLRRbU/ls/6r8jxbZNOA==","shasum":"78ae1d39c68cd5fc7320b9161e28e9fa3750d978","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0.tgz","fileCount":112,"unpackedSize":327460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgitKVCRA9TVsSAnZWagAAXBYQAKCN8pWRKwvMi/kidugQ\nxAircobpy6E/LSuC4U77t2L9zchnL5Jr/sKkpGtO1AmGUVffcSyyibuq79Fe\n8rByLPew03k8/Uo2RFPPjmDuHEAXK7JxBDcsMIaeS66HR7cjG6ZeH7psw6pZ\nUaIMN1rmr6s83esd9Y9D+5HgoGjtvtVfNF4J+tzyqqU1OXtixsyNx+64qDVG\nvQ6Tz2tken+TyY+Uq8JTkBU/Up045vt7qIlrQ2l45+h6idUAlQgzsEoF+7gv\nEztCHeVjreDwk3IOibBIhxsE7hG/oqECAK23rTcUgv3W6xOXG1K98KSfvjJn\nWc0p+uIKra8JxIuz6pzdW0q1rHjV0/1Fj5rw8gbdNM5s6Ef5ReLi5MX9luis\nTmCAIUM7OxLGcpLUkpvVStLvtWI4ZIXngjP2RUlVyiu12hGp7w5EizkCPXO9\nQLiH3S6MWmVJt2cePQQ6CyzzXUDGQZwSL2EPaTSsZZ+Y2B05FgKNbmpmInvS\ncqE9j/d3cE55OeskrWblnv3BBhH03lNDpXkNczqW/GX1+pMUxq1QmOXjuAKE\n1KTnVpN63+fw+UzFl2rb1i++l7pJ5fgRFhHcW0jF4f/guH1VhKkTZZPVvMRK\nmeTaZoN7gid5BOV0JXCk5UfuHH94xcK9SKjhziAKibIzSnP8FWL1iQmvhsHw\n3WM+\r\n=X78E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrKoXJpwS2o8moVi/752tqTCyQjEAH5nicB83GtzT2IAIhAMaWHCEZScc55W+Dq4a4JKj6UEI42vB03/qdtuT3iBx5"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0_1619710612655_0.4070640690970637"},"_hasShrinkwrap":false},"1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"47e80fe6fbe310a9dc653548825b1c9fdc4b3fff","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-CE3rpqzcmY4YsazXbe4b1tS+SqMrOb1O7aFxNCkqenOF5N+YzV4uUwYIicMxU7MG39qBIBQd5Sp4ROOuRk4txg==","shasum":"5f9fdd27b6e439b8208447c20421288fcb13fe2a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi7ESCRA9TVsSAnZWagAAd2cP/iLnyF/ok8B2BRT2O4Ml\nvtgxVZg2IneDkuon5yDtHJdNERB0koX6d8M1H/njAFEuUgHHQr04QVOVZZPV\nQZm06alDLoWJyZ7erPBhaOXa15mG8JwI07RLqZw5jAjziMsiYNH6unaLequJ\nK5skfot8w4wrK998/GjQ7zAvregV3GOOUIjqYTN1WJ1V8v+Xh6zvnjjQCpKI\nGSec/SYV+FGBstmVonxGhQuufycibC2NlXbf5Q/QPUM+/0VppFyowqmj+Zmo\ne79wj7ydXqViMdjYbqJ/qxcwDjUuV5k5IFuyYZ95N1q28ibLIINn+nOp3xoX\nqRy9E0iga1pdQbDezq4crcosUy3AP2nDE3nSAb5xFB903QwqBZaoKSct7SRN\nKTrqR+Esvzunhm9fPSGWQHk6Xq3X/Bv+YtXEGHxRED9HVsSO//Fo4vk+W6cL\nLtMkcvf5RgimWM1b4X+Ry5qetneAZHWDj0QYvhYKODZtkech3ZKER3fXmmcp\nYfd5YSWFNTrTS309nUpktJVSR5WWNvay1Yfsd/YSlqlcujQfD7PTy8M/mMIh\nTbob2ltJTKLJGp0YRv+bt3MTaoJYe474XhC4bVIvDQLhsYhbj95WR7fxNs6i\nwIkuqfiiZDCcC74t/WSQJEZYR34AUAY0+GW0lBasGJ3OBe/8HE66Xl5PvM7L\nwOSc\r\n=POXo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICV7L4Cj4BMPl4GeluObswG8mLp+6t9kRxV0RkWuayZjAiAyNllfH1JAPJ4jfizC4rIYuJY9oPuJztFwWTjd4tuzqQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0_1619767569750_0.2701086548870726"},"_hasShrinkwrap":false},"1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4c7dd1a77ec008f9dd655364d25d5d9eb4742a24","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VoyaGdG4FXTD9x8hymh5PmHnWMamH3XwjVaGusOTHZ3FBAEu3uE3tdpExmrN1e5R8xAvULkIbyMhO3x+Lhu4DQ==","shasum":"8d494d6522d5135ca114506daf672b8940b5930e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi/MGCRA9TVsSAnZWagAAf3AQAIyUOsiAcVZS8XKvoa9s\nh2QvwNoISc96Crhn9BJ5/G+SnLeK5nBCOVODkMfWAF/9FCyBIiXU2Jec4TQA\nZ7ZBuiNytJ7v+esEVx/QqaxRI78Pn4fQvQWRXRfI1GL0LkzK7ieZsCM4r7z0\nmQM3aBlpIrCK+npUq+V06Gs/01a6bRa1Cugf3RdGtyAyW3paq7wHh9CZNYrm\no8upUi8b2Geh28PWs/+9YLb150JkXgq+HTmOuQZQZu1EIGH2hXrKe4OkuqS1\nGCjOuiRC0CdtAwUGhqhTlaRzaiPVn//l3qGyeNlZkdOsTy/mv/PI+vJ4kZJj\nVmwNpK8EAhw3Gdfv1V9kaMkUSaHjWYe0AaQp77F3Zoo5826I8GHjp2/HRgVn\nnseMcHI7GmYxsmi9aBsgufe0zTLfflQtj2vOoxagenmD9/y1p8Td9OV8G0Jl\nVV74SPWasxNZ9X8j7ExZ3jboc74dmYqxyLag54xU8X8C6Kjjm8Qc+B6xecN4\nrAke6Y97wabFs2m26rvvj4Pc6pv++h+ceMJ14gbKfKgnjZpRm5ptmPDYRDeL\nGZJF2jTxDKfoKmdTSsAFEL3RCDHX2QqBgZ1VaI6bRLWsVblfRXM3QAlvT//5\ntUhf3b3IgklQpEP4Kr91OUSWvUjwf6Hb8ezsqYQD1bG7hn39LuwxGGB6Ulpl\nzo13\r\n=QSTe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlewNNhJ/S/V/hsSo31Qjnt1GiI1ILLQE4fecTQY/vEQIgXuLLFXhZUi2IdaTghuMVln70jAER3tXiL2ipEk26C78="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0_1619784454035_0.21283511307575864"},"_hasShrinkwrap":false},"1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6707fde038271b0f0a045745befb44ef88c38c90","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-hJAHDwJxq8qEqsJjkzSzX5PedmyTHe0VVcvp+BDlQyDLM3tg+DAuzKI6i3WykC1cED2JCVXwNJtTLzM6Yr4G1A==","shasum":"28c619c981523fb8413ed32953b90c24f95cd507","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi/dcCRA9TVsSAnZWagAAG8wP/RbeI9UqKtkXkfFJq/35\noxJIsRg7A6SnG8GxHaOrMjEsCxyoUx8n86qXvsg0Tl8mPOFpU5vgAXmRkrYE\n7oe6ml7PsChJfClffRdjgK+rfVmN9RSJ5RqUKLu8KltiB49eL2MfGtHdgcr7\n6BRSJaX8+LQMsIzNdziu3B8pSwGYRJ5zD03hI7jH4V4PHGiEzEphM90B7+5e\ntTOJBNTKDzhvkj6/hOUl+VvwFjAeOG65sbPdWQkyxUL+aHUcD2s1DlYGmxpr\ndGzzQdewEE0Fn0rprrnN2bcrxVrmYdd7jVquDHCAcBalOPQ+nYKtq8d81BzB\nQ5G5ROWkpx9nvvbDAKakvc5NrgkVU067uo3q6bdBp70JixmgKge1c5G8hM22\nEc21D3c19q9D2zRhfuP9hYxFDNhVeZ0gcnyOSMrHYELuW+tgcJsnYyZfdBG1\n22qUvpwERH10+wMmSAlJOS579ThEq/yOPo67rl0VU+yj09TpDe6d2LFEoQ+O\n4G9jCiMtTEQ/rclx7ApGbA79LAouf+6xyIR53TQFG46q94hDExPsW3xiCG6+\nXVZjFBdMGvTPIWM3M2ie9/5/D7pv8RIrhkCb+a00mJhppu0Xd/A6K5lMK4r7\nXoOUr1r5aNVyuouSOgL3mURdm1B1bz579LrYozoh05KuRMpnLxTLPG88KBW2\nVXNQ\r\n=O1ss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwKZwi9UWxwlfvSLRDF7afPrlwzgBfzkJ4XU+Gzhb00gIhAML7I/vahJi+1+gTL8/yLIHvwdya3eZh4V4nyWFVMqJi"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0_1619785563633_0.3426640238462848"},"_hasShrinkwrap":false},"1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"8596b23bb3e6ac68db248403043331b7c0e3831a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-wje08yfMEZYegS2z/RSvIf9rBUxN6sRzLu7o3itg44Ij1A4B2lxbp6+3agkQn3RvZDFrzdpohRw4ikdLulojaw==","shasum":"893c2481fe947d08c0831dd0407cf765ebeaed25","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgi/ffCRA9TVsSAnZWagAAM70P/j7QbseSTJhXLaQz/wOX\n34Q3S/zy+bUfOwiUHpAKewljfP69lFFfeXXqs+qsF/JRPOvUDMaLCFLcuvAd\nG6xMnTLlJfIOgwGqWXaIiiCTsOOhbvfdb4esAuf7D4vCFoKa1KB3uLc287pu\nUX5QtFL3JmbeDDD1wly2ipENIzMWBSyUOwaUyTxryrhk93WcRSfxuFnGcw2v\nz7JubqlqYdjmCux+BNRR57AhqeVztF1pvmJeamSAM/InPjqgR77jdrHrx5vG\nLOVnkYH1uYHzqEnjJ/t9hoUMUKXwAXNxbvmD3vi/mecIuNLiugf5oxpbiAbl\ntIj6Jgjj+mrQ617cYr/u0yHI924ubtGt0sXKeNiJ0MFGbD9e44BMx32wdNrd\n+IKBjM4l+Cw7ePF+eJuY9G8ipUBQq0bUARfB8fJFz0X1Pgxy7ct7oT5JxedQ\niuDLpxSq3ltAenR2HYWzeGNyVVaYGtpVggf58FoMWZTFMDJ3GpeSjUznLqVG\nuVEx4YyEvcOTKxXf+QE0ZfJd1I4whKkmW+8RqO+y527CPasGjtAjNaOsjvcw\ng0QqeU3DAH4+vpCw53oy1g2XbPUXmmaHSlJQATaUNietBNFVThzDonnE5V4w\nwbkkoIwtLcoCdfF3mMgIv+XmeKRwzAQgmkNbomeoyDUajqrNxIfJcwCUKdvB\nLkMj\r\n=pDlv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOAPVJjZsAqJxXdwFt2YnJnNmVOzrXGVUAw1KG+kry/gIhAOcOYoHmMpoy3SjmsPCmFIaZjLYeSty8p7RcP21Oj/jE"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0_1619785694874_0.839180531676518"},"_hasShrinkwrap":false},"1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"fd5dbe0777f88b88971c3a016f77b43e3cefdf78","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-WUtfwnRlizDHSKJNxYVx8QR715FvnkRupHmyV0roV9MTXv9nH31FIjM7E4f1h62N/q3Mi40ws3r68ckb2MepTg==","shasum":"f6ab555187bbef5916122565053ad72c3ac97625","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjAP9CRA9TVsSAnZWagAAkQEP/ih3h9KpLDanPi5h1hpD\n/Y2vD5G2n+woyzyaRJnaVDMT2AZEVe002a8ALcFD3CBK4iiiwtN8mjFSCgRQ\nmaw08q9OSXou79V/0a4a1GzNbs9eGtVRM/HN5YVxKD441OzNQRbQnSh6Z3QP\nr0wHk7u+kQTD/GgZyEYgFA4lJLbN5eNmoMBpxwBeDORH+/ketsNp9lCgouHF\n2KAXUbPRHXEY8PN/xvNHdXJR2yue1hzqVjMUWP1RvB41L7kcbsELYNJH3WdZ\n70WMmEvFYBRPIB3bWWVrdsq9Nsv+v/aso0tRfelUOisXrSmiaL25jIyfnKPB\nAfBDuTwPD4y5Sr9a4ovwCMJ02apMxo3m+1b/OPrmwxlY34ZeRZTKhxDJTlUo\nkr5u8wsYkyzCDZuh4ls6wGSw5b4DypbTvfh+2RAvH5C8YIOSKHhA8L6V3vZ+\nalFkDDzVOhCIPEzw5VLCuLyhDr0Q/POcx14ZauAYFaXg8r/KHuJg9gyackIW\nyWE9FiqOyHNeLkd4YLyVOvJ28wuXw0amQpyxKcX1wNtaoxTw78d+OBu/f6K+\n6PmmWheW8HPnDMyCcODPaMczyVUf0PqYimeHYhsO+1eslI/NlkDd0NgGTJgF\nCaax5xgdRHz0R6uc8DcjyDsdJoXM3CGjqYePwPfehT9gVNmKFR2T9/NoNjsV\nIP/U\r\n=+HPS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDV7Yar+IAZvJDkbvGZ/JE7J8gQLCmqXjCQHRAD81sJMAiEA5/6kRcrUMv2NS7S+pZy6E5KmS+BVKaOfIYdGnb4+YAI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0_1619788797223_0.7627622337974991"},"_hasShrinkwrap":false},"1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"14732c022b293ef284c6c35a92a6644a0fa0bada","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-I9unPkj+3H1l5QyQJifHcIs+aUZAJ1Uj4obIgE2/U0fhaQ1Ehmn1rABOBsRq9D250bVWFs7g9anhvBhkalWBaQ==","shasum":"90f7058f772ff277a597347bba19d92ebba8b871","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjEkxCRA9TVsSAnZWagAAYkMP/iB8ZZVsS/U7wyMcKZ/V\neLCGtG1o38pFDGhT2X65/bvrduHhPrkccOXC1OW6+2MSoETxLnFnzjKm5bsK\n16Q50OOYTEC07MeosDzxlOpq71rU/iwci9r0Li8Sr4ih9NrtUXGSdUpunzRE\nMUHdQvh5c15pVWvotsWeZwfhtBLbRRb39BjtfhPP5MvbVipQspGvE/APK9e9\nEMYP2bP9w6I3IEi+mkIvM5LkVTU8VdpGE0jfJgHXXg+TA1W+UsIY2JgAXFoD\nwIB3LzRgRDi/O7JVDE0YmoJf9f0PxxeGtuaDDUiH2bDSqq/U0lLjBAFm8aPT\nBomF09iyCWpcyVY2jqWKCFbucxAexM+B0h4emgoSj/2jWNXOB2MmsiGXq4h0\ndlSpqajHz6TaMLtDWmcwq49A648dEe1gQnXY+HhxqHyT4MLRDh/v+35uNC5Z\nHORyCcUwYkK8VOEsYwbQteKjrH39ON9aQYsTlu8JQJDInVGB8RIOFGp8PcqO\nTSheXiwXSkkEQOVFhhyI5xtInynTytoqP8QJjrr846/j9w1bHK+8W7ZncUmS\nbD77a+vIkFbH8JJXtTE//+jzeOJqqzhfyXw6ygqJavGXSqbcJ9YpbgbQhPCT\nY1GyqKGfvbNhpv+OnGUW7tRF/zDXXXH4PcmMGVTzDqN1Qjzv0k+V5KJt1TSf\n/RJs\r\n=ookh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGO87tpPPyvN6CWQMvY85oaRS51BbE4IL9Yg6oCT9J7SAiBtFZxWJTW7PXUsdR/ae+QV2Ylvep8yTjiIhkTmnPn2/g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0_1619806512672_0.3574623764746254"},"_hasShrinkwrap":false},"1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6b063673dcf43ab604ee5c3b14a32ed8e031b176","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-kQmK8wmWYeEsU3OYY4ljKUUSs7LwXc2BspZtCX8+50XQG6vaZC7gdF8Iy21GXVpjf5r0qTCMSwRmVpuJCe4ldQ==","shasum":"3cc7fbff85da61d0225ea7a9d467e80ca2a2af6c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkVeACRA9TVsSAnZWagAALW8P/1fvj8xhUevUiGhEOi0V\ns73YaBPQp7e4gTPKWk0EuAoUMrCC0zV2L+pa19dEMgHTHuLRSph3bqoAWJIL\nAVeG1FtdbjXXS87nBhaIjAWRm1ucdJiZZCLfpJWtPh7MihalvNRLIXEuJYV+\noHd/qbch/i7+4mYGxaEZ2W5ZuByEgDHqUev6psvWuqlgPCYHXDKaKtMoCm4T\nQO3CxohejBNi4ZWiJF3nM36FC2IodwDAQEow4iyGUWYer0SMSORibJKu1rAr\nR2PkE8HoXYr+b3DJb0ipW0/sjinytf5l28Jcu+8uaM1VirMXbxzozk2+iZPc\nGyUc7dupottU6z8Vj88YSft6utL/em5Adi2M8cZ4xkltHw8LRWOt3oMYS8wJ\nlGDYl60XkgwQS5q9zTYc3nso6sgP+Xt1CVzMxlgJlfYoQt2YX/1ubZ2FfJgb\nDBPlUKi+s/rJvKFp+l9lovNcPb6QuLilGD6D72/OYrnLI3aPZlPludn5ljLO\nH52XjYmDMhcrioTiq08RjxnhyU/jE3FH+DWFXaKTjJXUKrpHVEXLpatWuBPU\n3oPlwgIDehIoQpndtIHyRK7qrIlo2bndOc5jIv5pDsPl7EL7yOCONYR1Kn47\nBIuEDu/oj4lhJsWF+ZBSO6wxz4ucyrtMomcQzOpV9HIs8muPMpNAP5Gu3dkY\nSH1a\r\n=NE+L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCBGsshoVlyhysdDIFBk+nt7516qURKwEeJH3OGO0ztAIhANMU9lo75xdAU5E7Y7PsB4y5U0h/duRD1S+dKokQQRJQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0_1620137855520_0.24541010214943415"},"_hasShrinkwrap":false},"1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"86b5edbdd0534b60f691713e95275a60edf0eabf","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VGy/NMpZusSnRQHrcPeE3bzqwYCvK+TF978o5ncZUgviV82VQ5Eaj8hfnr59aqImXup8KQYB+3papDz1PtbCPw==","shasum":"4f6b6dd3efc89b8e81e5da9dcbc6f909d175e6d7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkWTuCRA9TVsSAnZWagAAtZkP/0mMQN1hwNk6Wo2G9sx2\nYlVh5mZzUZ21ni3WgrhRlQA1lF5sEB4OgD05tT7ZHNoXGil7kY+zKzXjKDqr\n9yVQKAiw9cRLgL1irIIDX9npaBvUeac53C1brm6XiXbxfGJEyoM4kTt4+Q8G\nHjXpB6tpXrxEqUfIlhWo3IwgI2C705WU9E1KrTYBO6DkpIM7K4SxyNePcY1x\nwt9kmer8L0wfXrDUTNJ/RDV3Djasf/Wr7hPG35LAIRwzTCajVfU/AUgHdQn/\nGXjSF5XUGlrcDaXjimrSUZc6/Mde6sw7CgAjS8QbwywDsiZ5ULgB4nQx51/0\nC5MHkTxXtiMhAqfeXkaJtBNxf+IqJOs9Wtgcw52fPrdLWbSF6JYxwrxGKECJ\nKXu8h1IT/VT9WXfMb2RzJ08Qvxqov02J/VoxN2rXoyJx3677pxWYaKb5m4S+\nf1aMv2yITEMzoHH9DAqycJVS/CU3C7uyKqn24CilJLbe1lb35H+HQ1xfshiC\ntGi8Ixnp/gZDEZf72WXQO6EBlUYmXdIfgG+4uUyqyTntE14axHGsBnaz93fk\n3BXHPMQD7j98FBWaZ5PVPrN5u/U51ECoOJ8FZ/eUk3vUh8RB7q6RvWKJfENT\nGfkcQyFvFbodWuQDRaPVjTKeZWol4oATWOwI25l2W6L0ExV7hzVs6Dn4a2P2\nU/6+\r\n=UMCL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy9nrD9WTf/92Rpm6WFFUVXF8k6nuaGw9TW+0lMOMGjwIgcMaDmrXrmNTxOyHG7MdD7AdByDnEdhnTFS1WSSRpcJ4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0_1620141294366_0.4345549784635856"},"_hasShrinkwrap":false},"1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"b8b5514776d5ae38b112ddcaf73e7b2d829b35ee","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XQYvh5G52FQ4F3mhNHs8lUaHHS9nWg183/eaUAMORtarJVI11t6ZHVxwfWkDsaI/zUjHz9cN57DqaBFWjvpjZQ==","shasum":"75f1c05edd001354b79244fbc1e42e6796d6c9b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkqd+CRA9TVsSAnZWagAAjvwP/1082zS85Yc66uuubH0N\nKNP99PB8nnxbIoQRWblxZ4VEh38IFmUteK8GC3tjc4qqW76ZmzAQoma3Pl3q\nDbwKyk/lUIYLF1R+llCgBs0IVEpbyqp2+3e1GbtW8II8OfEDhVzPIxkUCQOY\nZ+jvCJJBD3jQyX2ckqAXKSBBaVffSoTF9kGwEH3ooVXLBApdIPAYtseduY8e\nADhuXjogiEpM1yrAODjr0BSatMJFg+ZW9acFWZTdlHjPLKo0C28m5eEZKIAS\nPmp5xH04AjMn69PQAc6aWWPvBTm6PeYGLt7c+75zCQcOaLAaZJsaYx5rn5oT\nZiTrmX7ymHkVZOaN70qOKh1al7YFWgvh/VUqm61Lms0EECCAdZV8UKmfG2rB\nQK1n/xjsZPLb1PD2jO7mZowcP4IjsPQ75xA+eI56WuUJxtcqRbt5mE0FvV/y\nkgnvJBrC++YxEgZyXrerGUgUsh84/IJacKCJItOQa9Ix/WQcUh6G1OME+54u\nYGHhuukSOR6KvLJQ537vjPj78lRWEIC80kbYrxXEQg97YbML83T7K9WJOWsr\nYLtJnThIoXcm/DvRT7bfDFjwtwf4f+6bijAPbPurTbPlGZUssmmCa0FSPAWn\noC1GKnEL+gXFrdaz0TtV7Zr34FzinNbKtoQOxj0OSgQvPIEvraJgnbEv8us6\n59wl\r\n=wGhC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD3eD0Uhe3+Suo4r0caThJ2El2n7YzFtpvgIkZQFh9iAIgbF1aUKq0S0lPfQ0bzjdsUqmtC3czmk5o4+ucHj1jqyQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0_1620223870226_0.6265440222421903"},"_hasShrinkwrap":false},"1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0":{"name":"@sberdevices/plasma-tokens","version":"1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.2.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6be5cc9de361df9628f22ca8a521f0ff899ea73c","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-X8kPbtBye7cprfFKkzf6vUp0hsU4Tx9rxAkJSNRJ5J9yp8ohlaz0/WIgyf64PuMJ8O/f44HbdtCHp6YXhVzElA==","shasum":"dd3f8923b201c3ea303c8b8aa6805005568ff8ab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk5tBCRA9TVsSAnZWagAANSkQAJsIdbDtvdHIk+KkKeda\nDRfl/lCewIxdoKTpUhuHlt8p3HGhnvIjonRNhFVdmO3N5dyPyP8Cb4DBibo7\n3PauB2P9vQW97ZsGW9FZNa0IU5bM3nUKh2EXgCqlmyDY5Ljj1AurF4gw8DoZ\n/uca9paWJLFRpHy2pExCFFKadNTzWPn2Mt8ZEeFj122pJpOOsKKfDhcmcZGd\nxT5nU57iWH6NckYDDGTXQ1L9yt7QP1tg0jbroGER7vu3UnDhgfvFwHVbaZ4J\nllRsDjCKgfqsf32W5oGQ3zYtymotnDuNj1qCZGKyUyMHY0UyRF1qLvAvfqdk\n1mYQ7spHdAHfcebxDucNL3v6a8C6MfHIKxVmx+pegZ2cinSK34XGK1hjjxbc\ncSnNXXaNN50ukM0IKujX3vXGc9R9tLwTuY0O1ZhlqdivsQNgI6UY25Z5zazO\nx4AHNeQSUzwYIqnYMRvMvsX/KKYnogbsx69dEm9wRMOTCx0Qxpw5BrxE34rD\nPmy1zftmtnHciscIfaYUQzKJu9KFok5cMsLWbfLlxuqcrfsgG7xQCPgU0FrX\noTW5b23BYltnWr+0vT5ntm/gRLPlhParle6zex9QiehTZuu+Poz2YTCB4ZRh\nJNm7jNxHMFp+uGvixDnCSLnoih8Nn6W3fBx4SyNNX6av9jPhsoBnlca4Cm5+\nde2A\r\n=nLiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5kfwTGJl0cVWGmOal3Ti6NUZQO1whjohDLa9NYEGDPAiEAqVKSmtKvQBoOxYmYyUoyF4O9794Eg2lqaPp5ylWIfhI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0_1620286272872_0.6509247452997251"},"_hasShrinkwrap":false},"1.2.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a8e5a5dec0e236c982ef1ab53cf161adf1b33cbd","_id":"@sberdevices/plasma-tokens@1.2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-632ktIgD5qQ2RGeOVFcF+561vW1382aZUtKNPtCS+0BDFO/DaZW1rgZIl6Hy6cra82ORJhUh8WNiglj+Vj2E2g==","shasum":"f7c6a7e5edf1d83292afe712afcb44b2137b76a2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0.tgz","fileCount":112,"unpackedSize":327651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6QFCRA9TVsSAnZWagAAKQIP/2Da1h6jBO8ZjgOI6a6d\nYCpTCTVfLzs/Ja5cC0Eie/BIuZfc+7GlH4wTE9q1r1rj36XN2gepQBUHkWsq\n8H2HfooY0bFcE3uF3Vs9mWVyhXraRzdF7n/7Qz8JylCaL+YgEbKY5y89dJ3T\nB0XOZZW3XJMi6MkNXYPUogPe5U4R0K24gQmR6px+vNfHnqCs2QZfKjnBROrB\nktEC0DQjQ2padoB6wYh1y118xeFi7UkX4fVj33WQUcRcvX6cQ4nc+W1vllmi\nQJVyn05UjLQI2PBvx90xeiarOHnWRIqqUmF4qhCcKy4FN5y7p/h7xZAFJMFB\nrMLeEsb9GbYI5zXCM32cTVbrPgzaGlw0NU5s9kywcR4XUgvfcHseWds1C+lu\nYM/8fi0WPUsmVUKC/HsvE4bIdsaag3ioISaJTB8nS5cp0ydtTpKJDiQFIIz4\n8Tto8bJMrwPZs+UnNaMUqN+7/O778Nms6M82NlxS9csMPu9SzT4W39ipjkgg\nnO8JUWOaOxbcY6QYytEWQNWY3L0VOdz36CzGRCjfn8iAL5lD3E1IOfNYc8ac\nIl0DHpphH+KZOR2qxhYtUUHrT8C+cUf9l0DjVcFRJXTwsyfHK/nV8kTH1P3h\nrJLtKKU7cmXahN9g7+c5qsRMHIuEE7wWuEyKR0fHhEt65pxYSiJx92WXCtkz\nvjlY\r\n=RJvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxL0W6jbbxITMWMX5v7l8hjmUzBj0caHIlgBdyZog4qAiAC5VxJk3L1LfyguRDW2C542ADnghb1BJ9v4GoZxn/4xg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0_1620288517479_0.32756241459480706"},"_hasShrinkwrap":false},"1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"9519086778041bb35565677afb7a83d1ea0afb5e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-nC3D449HgYzmhifiGalPK1gY0lrAdZC1gyXqeUbsx61Lk1Gpp6Pc2REKvJ6tFYQJGPE03Rqqb0efdxLMHxqJ9g==","shasum":"a883e034af0a12c7ec2eff2bb32ed144613b9974","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0.tgz","fileCount":112,"unpackedSize":327514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6SDCRA9TVsSAnZWagAA+moP/0Ou28BWMCwc8bToxAwS\nIxmeLYlgEPdi83Se4Pj7nA1QyceOoQrS3eqriLljeQl+cbI/j77itR/HuXm9\nF5E8Y//94fO75kL9FEP4ptmWazDmymoXYqLaLBtCn/5C3tcrLzl4mWGENnIX\n5xiAls+NRdmw9argt/tY6DcVbtgZ0cgOmKro73cZn++0uIFIBmfxOt2FiIJs\n0YdnYqedKZFAg/OoZA7pVj6+ApuNa9UfK+vEnvqwTZLuQlizBti7FCtxGgP/\naNVHpN+5X7n8ibRA+RqHRS8kCFvzKmNKyoS4fDaZg6EzF6NVmrgHTm7dZTty\nkf6O3r/fP3iGdrMNiHwVfWrR4aFeynskGfr06hfnP0gx0iFP9yRtxqSAdQG3\nmlkhQRr0RZI1FUTMbAITFpJWU6e/yu/5WjC/jUrqu9xA6+XmpLDpnouuJ34C\nfQ4IrS85wTlyheXpxMwDlzZ3XmxGrnwPQhvfTmXToVWDp59GMYo35mvUKN1x\ni/Qey2+aIEJND3K65GqcoM4NzX7UEQPG0pluaDSs/k2IgP6lX2KqC88t0+S9\nilJ+wWf16umqFjKYauy+2llKZtmQNTIS6MpUISFogdin7vyN1w6OiO3bvt/e\nQPi8gHCYHKalCzyUg95hUZDDXx5b6n+vAsevcAKu8KwA5rA+6xNUhC93MKQl\ncv0c\r\n=yBxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxpLNf5KByKkXFCQuvTL/j3+LLayChDLEUb5LBL/7TrgIhAMObpVzGXJV/Hx9HUtA/abuhXRnIeJ8T4tHawH6Sz7RH"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0_1620288642737_0.3529511140281101"},"_hasShrinkwrap":false},"1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"6a4f5f1479188533ed161f58e0b59ad6323527e5","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6XrBMVdWsscjiWem6BogpA33CdJ1zmuQbNH3potr7n/1Am0N09+f4L28OLPrrZ8ATkJUXjTouO7Z63O96mxNhQ==","shasum":"c7fc998e103f09058399d63c3fe9b4f8414c0522","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6aPCRA9TVsSAnZWagAAu78P/jbI/K/U+VyoDMpRybU+\nNVL218gpO8YM6QljLex9jZsTD6iR8zDU8WHl56LaLm4Qmdv/IP41B73OJUcL\nWKOBES96ROhfPqVUH92IdXzFgiwk8wy9QfelVtRwawWVAKYKAHU9v/UqvDZP\n6GIZT++MSnfkWGo6+u9G/xAW6uTT+dX3LL36sINhJVHmx11OU+N5pk1JOJTL\n6IC99V7yqdvjQH3ABCcrFfOnQ9nyKy4TemsgEXwYg+MM2l/ZywL9zF3foqJw\nVjQXi23eSNBl9dbpvahKQSWcO/R40Wsdec6cNqSPX//mXxLAG7ei4yKDph7w\nJ3doHqrEZ4ugnXN5HjW9NCdhq3Jy4OdSxyCIo8/l9lcDn6K5O+exzXkAIpyt\ndF7VZRkwUOwQFbCYYsGjpjwVeSyhTdsuclyKy3AH+BHLJPGopGQFpxe8vG14\n0gAW4F6eIUxGYqLko3ty435sEDI2rVPkqK7qWVmXGP5lhKyt6Xe31X1IxHy4\nC4Lr14IGX2I8yKUO2WFzaj4qy3BLDaurHlhu8Ks5qvKT8yl3M9zO5fDX8Npv\ncmBpHIuxLY5+yt3GA0hAYgH6+dcubSGFBn5q3uFxWEr3iEzzNiL6tZeWIcmn\nz0FrVsZkC0zm2yX+JJBVwmDDyMuTyxvvBlyx5iwCTXXSmACMxBfDRok7EpOR\nj7m+\r\n=xUKG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjpQwqSNCB06MHKBhcxX19HBWVogan8pjRyvx8MAADVAIgYW79JYpvV5Cg+qTw+FqVuAvNsFdmKmSTHqA2uOMkOGg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0_1620289167444_0.816546717738716"},"_hasShrinkwrap":false},"1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0":{"name":"@sberdevices/plasma-tokens","version":"1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-oCVzH3uyY3LhGEEH3FPV5jGln3SN4sjtieUanVxVmui9183oCva+k56aupD+Vu1MSTdGfIRekESxeV6PG5RFfQ==","shasum":"7bfce0a46c18c2d5f865d596549ef8c8e0e2ffd7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk6hsCRA9TVsSAnZWagAAssEP/0Lk9JkoWAi60oyws/MH\nUJvqPbMq184xLRwegQDIrCrYhKNzIjmA7x2VOa/rG+08/gttejMWaQr38pw+\n1igyaoRHt+mrIJe1WWqCNFYqk+GUN4L4EU+yy48efpc1qIM/ZbbCc5WfBwgJ\nNAqsbLZuLOekWKT35IQ5s9KWTjrNhMrnspnRB+YlIz4PNOowe5wJg65eiCJa\nIBmJvq9fWX2PTcAb/eC7kKVmlZRNZQ1Kxds6og4MnAgCtpl5vIR5+S8dke5I\nNGOb3zVnZVTFIaVSeOeT/v7zmja1nW6baCdMNzHD+BhADyuwFah9YMOItvGI\nnByJ93557CCO3nn7bIf3Yi9VxMYZ3XEU9WcJj8UVn5beyw+cAvH6kC1fZlZc\nRO+TpvU6OYAEyMCdn/4HCDLso4MtJWloPAFy8lex2YWm4G5fzterkqE1pVct\n8GnW3jgovslbE62QdDGVx6n26i+GvN2zeGq0LVhD4y5yv4Ueris7g1MfedGz\n2bo7IoNAQK/OlcFr95yI6+g7RIyYNL4kbENW5oyUb3s6dKj1LLTgvWVG4X/q\nIdEujnO+Q7YzhWBVvO6doPZs94YLRuchQeoMNW7jJEPulg82Qdcl6lQqRoTw\nPdJ9PClScmfLVQS++tLrOnproc02YMYKda96HQaL2HkAu8cojY76fEV4Q05v\nDIIf\r\n=XVnh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdOZTcYe/S+jSn/waa+ly2vfZZlqoMDokM/ybk1jafhAiAemqYxMSc7QaZs6UQOTIarw0tPBFhp6ko5SZs3ExiDXw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0_1620289644338_0.21877198915046803"},"_hasShrinkwrap":false},"1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a47b852c1a24191c4fbf8986db3e0824a5c19439","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-83bWWt7c22dKVk0Swu3xoLKaWO9e33YrV2AHAHdTfutwcTPthSmtgM6qcQP3RWXZn2NYviXTsNIULiLm+PzLAQ==","shasum":"93358622cdd775d33d7fd4e8b64333f01e667df0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgk7CVCRA9TVsSAnZWagAAkSwP/1VcHAUIu5mP5N4jnTK8\nQNfU45p+9qnKTUzDNY9iYK1OX6DQGBjaKtK0vRcfBLd03IWAl+emh7ZykQZ9\neGZrf0zxHt3gvZCI741mYdxGkY7J3wUu1jWbNrJW9EdSMVefwCs1TOrI0+U1\nYp7Bxhvw1zGQ16lnEtWF7u014A4dpFanzwINa8JSeVbKAxaHvT0Lgdhb7Inn\n9O11uZQRrCzghD7FuMPELWRMMh5ya+R6WeSokThfsBGH8ikOBMrcGjvlrG9g\nBDPYHBftepYAV3KjXwYPpf9pzeKy7fcAQKT07oSXtw/mCI0bChvQXBjppwjh\nkGHk1Vm8VSU5za4TZTK7dOxlQdjNh+798Etox0ZRFyy0tdqp6Cm31GyTo3Ox\netoGYqdn7n9Pt09mDtUzPH/I0cBbn2IXYpkeTApVFcFIFyV5Izdf5qHnX0YD\nZajPRWbuLs0GipUk3YG62MQz1UYEOzpTgtFtsr6UXRenzkH6y/SmMD/+NeO0\nB26R/sHgASKSYxoF36xVqHaih8G2sxiQ+XKv5GOOpwHFRHDg0NKcdP6D/I51\n/E1HZ/ceDL/5kHmdR36D9k5Q/TlSjkzAAAS5h4MrrorxtZqHYFKwCdBm9LNU\ngJ9KhQ6t5zH49gtjHIWiOwIqXipY0sxgb2Zc+qRNnM1Ur3pWiduluNNzY/4/\nKp4r\r\n=9kUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmgdc1awXvOUkXmuY9mzidhCxpnnWnZD31jb260s7LDwIhAMd79CGvYOTNEm6tkUUSL1b/RVN98M/f+UaC9F4m/aES"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0_1620291732742_0.8171786005347965"},"_hasShrinkwrap":false},"1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"a8bed0e3359a118914fa2e593d9fd4a63133137b","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Z8INNEBXPrF+QVI1a9kujIDkLYFXg2Kw3Zu6LIaanexRJr6pcGVwfGcwNRG/EVgKAR+m9g8aJB01tGZ2r/wcxQ==","shasum":"fce74e9b62d604a15bf1886b7a5d4325f2b9c2e4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglPFHCRA9TVsSAnZWagAA7AsP/jOBws1s3jp0AlDmv801\ndWwlcMxiUdlx9RTB8/MZoE3Q1kUQtWoY2VUc8GJRS8L81uFLDNqqMS/ErVxE\nvqNpRQRccF1nDHu9fMsvcitRdtNpQOXKPD3yWubXpgzV7BlHJ1ylFvdvBVu9\n6O9a4e4b4MxgOCeoqVCa8JzKSuU1xrizWTH0ZZAXNqMBrbtyzRPyi1TkHaJl\n2pCmbnctc3PiaWi5Svfgnbpq+W7CiMzyY/EGfo/ti48s2a38oGDS9wPzNR3R\nXY8nJOKahlEiNV7C3cPDtjWHqwYDmjYaZqONreQ4cEc5TVuQXZ+SXuqe8T4O\nEuS5VQV0wLqMGnrAsC4671d0cJDd0zTK6HXx7y/paveU5OO0Pakki+c34uIg\nyJJty/a9EoB+ASd1m9Ixl4PbLdpolNuzmeTEiIoSsFSWKA6vU8l80W5CVuiM\nSqOYGR8TF8jmiwoR76iTULPO38KOnVFWUc8saRF3CG8COLmB2x2INZPBpgTY\nTIG5/McZsDeeEsg4EaG8qp/tKaFNd3EeX44GsGwKqBDr0DWHvppm7GYK5mWv\nJ6uuKgdWD4DKbvkAwjrVu9pnib1W0qnPX/2nNqsMBoAWbZk4Le50xRA8ZIEx\ns5vSzonQgWKq/+DQmKQvHO38qAUj9ZPngUqcNgJU32ntOHOGbHDW+ZyAIYq6\nIbHa\r\n=besn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEt5vmXQ9t3A8LriC3uzd3cFS7k9grKlq2H3IE+vNRNAiAXg0Cb7SYTnAUljUUsMrINjKrLbbkFXVd00izIg3AYNw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0_1620373830637_0.20067444598219808"},"_hasShrinkwrap":false},"1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"9e57df0010325a0cdc178e8171177be9cbf849e8","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-+6iYMOdmux8DXqVxTkgkhCMqyam0rqwDPPFMiEKJjWepBCN9PpMX+KU6E9Ir7roIIBgHazR9xGHpEgRCQRd02Q==","shasum":"8f77afe5391354238647b5328acec78a5e596fea","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglSbUCRA9TVsSAnZWagAACRAP/1TTP+tnh1rI3YThbuC6\ns8jaBafbwrEYruil8fXCC0zEeFF9arI+Qpiz5DsH2k21hG5MqTsnIfTXeUvp\njlJWH41EhqpbKXAn8BMl7aO/LakRZkD5jRG10kQ6iaOFA6hAllXXhvAhQqyD\nT5kyKdwXSi+uNRC16xU8sweOL1Zwg31V98r6EK45RmRX12eoejbS79TftW2e\n5Wmquk+DIGD6hGQSyJwJEKjA+5PlkML2baKhnH/2+YDmYo+6lC3d/+f3FGQ8\neCvZS2pryLl7QEzeeqgfVcGdi6rUq6IfFzQU7X3YYZ/xAfP9avCTT6ZXRQXj\n1fxa/2ytsWqPXljL429qP6omda1O3s1GS0kqPjgkDCrm8g4DjzoKmQKSpVQy\nbBD7MxzPKTScY3Py73c+12K57YcPhH2b3ZA+Xfmx4hfI80ux/QkGrDQ15BZ3\n2vrmQbuYsPlkZdkqjQdWjL7Du+uDX1k3vfKYGFhrpax3YvQ3IxKkZ+UzMGmQ\neDRqaptsDyhsdKs4nFvIZ2posxnPjDq7ECMuLgoIZBHFZd0GagV3ClCPxdg2\n95xzbHqr1kdZV3iynnyS0E+kJV22XumbEQcqoUgDYxdqlbp0Sfxvz04Q+Nyl\n4pdMz4RUm0yXKwarhN6arePCvxQqlFan5U5Sg4w2h73C8JyxOViONjJLOMC/\n9RZF\r\n=M2pT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqW5SAJpRk8pV6zq5mJWrphKJbjOacLXnKx8UGhbe+bAiEAtZvGk+2HG6Bkhjonrlk4ecEAOuJVClz2ZekhqpRX79Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0_1620387540523_0.721692610743637"},"_hasShrinkwrap":false},"1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"233711a5862c44bd85ccaca0a5165ecc83b4e195","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-R8m2sdUBi7Qamr+29LXTegv0wLvRb7t6NuzB4hODNpA99yK0vT/K5tM21oDxxqEJehod/Y50q94g9L7EyWDGuA==","shasum":"00e1a66d9941cdd91c24fbc00486b5ec8303ee2a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglTfMCRA9TVsSAnZWagAAOpgQAITFEVe643cJfIKQwqLV\n0zoJAEke++7g+xMyFWb4HOk5Jy/Fe5pfb3Rmzaw3XzO2KXqR5RYdrLAj/4/F\nyAUJCoqImCtt6WJ1cy/+K/iXcMHLX71e5n7ILLRkDrie6/Hab624i0x39Zui\n47FD7EyIqlWYRJblBVxku4BGseE+aIxACifwnO7g9JZQjTn64UWsDsskthvz\n6AZsOr2WZSNtKvpvQmnXSV2dug5Ldo6pmSk7+5g+zfHqi6bsZJfbc93F1w9B\nnE3IzQd9qal2xsfxTQcdr7xEaRXIQkU520N+2Dx18wDV1nMh5dbZaLjKHQdU\nLK5Jx+xEY+2Q0RReFtdCjUG4oDbbWvrYxmjnIwg5tq3wZnUOcvRC3ORLbvLy\nOTLeCYcpJ7vi0lEuGzEC1n7ZKrpLTBrR9ZiMmX6lUi5zKBO7BMNZewIkQ5+t\nb1Ugb0RFrA2VdDcUYHa0BbezWFimJEGyufDDgM2DmaM9Zs5iXfS7DieOuBPX\nfUDXgud65gjyluO5UaLHW5fhWWPYrTWLfLAF2dpEOflBnbAXq/4Lgi0whmmX\nR+GmOmEadhl0Pu83s0VXA4yooWSjWx+bcyJWsEq5EZ2X0I/5lZKdkU6vzmku\n/nvWeBjvrSkYCXToK3hKmoOrKhb6Wn0NEge9Ck3lbxRI34vaQTeT3U2fG0on\n0xll\r\n=zlOP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwSiTOpL9z3i5v3HPcPmMXm3E69+KUPJ6Fuje6DBzFHAiA4XADw1NRyN+6zOft5QA3ufcKFvGounbT6Usy9kw6Isw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0_1620391884331_0.1796878761375107"},"_hasShrinkwrap":false},"1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"b4b4553948c05bb942e506b1845755a59c4a0864","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ev96cm8r2mFfrNbqr2OwVS+roDqJ2Er9xbyYAnJb5evAsV38fh46vj7a1/DX3M79Vl5YlXkhQdSJk8a8kjHaUQ==","shasum":"bc3eec97aadcdc673e5b580932b099c06b9b3f5f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglUDMCRA9TVsSAnZWagAARrEP/0s8PQvDQh/S9Aboxvpn\nJj4Gn9KGEuzCEsV1QV+zz8Js79Lgz08bqvIRTQIagsl4ctyzDv8nCaOXcUKk\nX+npj2enlKUTMCbmbQH3nwqAavjoDU/o9o8O3czA7OfxUdRfodosV+zEe9TC\nEiYNOaeSP/mxDBzxNuM1higg/5Za3i6RtUxjLAJtzrKW92cINaf7EzY6+D2/\n6QtJZWU/BT9bTQHYxojOtnY7DCT9pi8ydEs0BfvCH/PpiMPKUtopeAQTYDTX\nRqzqsv1NLx3LApTt3Y91DKefI9YTKTIKh+9RlIfZKm45ApcF3Gt/tf8tm8Qd\nSISNncpvlwOSlfTJfiEXBJjNUZFZ2sF0/3ri9JYp55NEQnDIBYBq/Vx3iS7c\nHcINORhxhJBMSl8sqbo/1pXG0CH1h5GSgUfmofqUAP9yChZWVjH2NhdGYMRo\nseywMBtDowJS3Zf17FT7ZyENDCEwDxmc9PT/qiATxQlQEt/QYQheSJgw5pfk\ngejDMIyEpkiD8suTlc0EiowNFIsp3c2fS/JmgIXzHKihxzAHby+LTIsALlTw\nV3WZ1nEmLacyabQ49wACOjg6N1EHNk43IzYiEKluEn5ww0hQWpV+rtInE+Ob\niBX9DjmpH7prhPWDrnFWQlLEVkxvsBvFzQCOgAzyo8WtJuEEmG4roLc+jVsc\ncC67\r\n=362N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqsAf/t3yziGR0n8AmWOGB3WayQx2oEu1d+SW0BUmINwIhAILvaCZanr3ZOk1STrEj1AqyYT+S1FDArrJ05+7a0CTm"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0_1620394188033_0.953138321598892"},"_hasShrinkwrap":false},"1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"21d16ef749db95645c6e854c4cab16b1f0b3a6b3","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-HQxBNX2B5Jmnp8POfipmzWwkj2HA3r11d6bGbLHYd7hOdM//hCWdD+FBzk3xL6iTGcxc0MalamIAjZM1txrwUg==","shasum":"2e9ba0f7fc6f4220ca690a76db53d5a10e55f807","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0.tgz","fileCount":112,"unpackedSize":327705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVomCRA9TVsSAnZWagAAI1IP/RnDi8KWuaL9seyjVcy3\nAb5YidvNirzxy5NZSbTvbSgRkvg8YZA+7dOosyxnUcFZvi3Q5hII728r2O6f\n6Pr0Iy6BL5XBa9Os/lU19ckhN3m2x2Z7UEDOIZDJuCBIQAbpv/MgV4+ypDEH\ncEaBprNsl0Ol1JqEkfybxIAN77NgkP4mtr/WcxhmxWDkzCXmlwYBWuxJ4GVu\n4OieWEik96gMe2qs7sYp/BXKKBMO9Zvdr8wo4U2Vo3oAM14XKkrRNsgGEciI\nee/H4YawDKPdznUc25OUGd6w7aSZjLAVrc0/YTvj4KlugBRI8clZcDdfnSKR\n1zKY/lY+aNdZCAAUM3QWixU10wsh+9pnCd90RbiHWOK+VMgX+HenInkDMo8L\nFK8rqVroYpDET4vLblPdqErM9B/FBKPp2E29xlnEgzseMJiH4M6tH7rvnbqH\nk+O1PaD9zqReEwG28vEf6f2Xa2Qs4Q421t94cRT7dWPW4NP/EDPjy6qAWEHo\nhC3/NTlA6PcPN0dB1m753Rho0mCc5VMzH7VlAiLa083FkzI2V0CZHwa3HsYc\nuydugVrmEyQYnLUg6r9IOplcoul/Mtsq7/aT1EK8Qxit6MC+Xl2Yd29qHW+z\nf06VxOSMLE3LxNnuCgbeHuhKIYU+6oSsOGwR4piynpWqqZbVZrVqLYX3Lm0p\nLXmR\r\n=l2vJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4nlOOxx2dlwNnMxd0RfusM556RtxRmy6dWQ3KcyljCAiEAl7ZRb7AkoUMCr/gPmbOW84FVsfPbDw5+Em4KhMfa8ms="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0_1620400678029_0.38692899462093666"},"_hasShrinkwrap":false},"1.3.0":{"name":"@sberdevices/plasma-tokens","version":"1.3.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npx tsc -d typo/index.ts && npx tsc -d themes/index.ts && npx tsc -d themesValues/*.ts","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"gitHead":"2069bed4a21559f397d1aaf8923b4d654301d272","_id":"@sberdevices/plasma-tokens@1.3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-r04f6+eJWvCrtcMryWj/ZgRe+bIR1hIqAOPIXHN7kPykjtdMc8QcYVNVawgj11K9a2UhHm6viwRS1lEDZzhVjQ==","shasum":"876c18042199ad28661b1c1e4fc832348e6997df","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.3.0.tgz","fileCount":112,"unpackedSize":327880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglWO9CRA9TVsSAnZWagAArBoP/ji5xm7nZ7PjLetbUbH7\nDY5dgYcEhyVeiCITCVk8dUvvZcmcDsIsGtKGZAj1P4VQOBgJ/Rh7BYOZstN1\nTfBI5SA5nUGECwunP5KGssZKlpOb7uEMpUlQSojOd1tAXcTRLM/HWJdfqlAF\nM3+0gykJZQX/8kv5vUez/UzRTmciLvAuH8NiUjzfGvCHm/DWHDHR9TQfqp3O\nKdDIH9H+BFVUkzKMs0xCew+5WMAkDFq1HAy40LGhsZQoJj8GIstb4m+Ekjhn\nzbX7b3ycc98w9nPeMR69Ru/WlP7tA8ovfl2pStVaIXK9dTWKBfbGAKmCWzCH\nB7g2SqehRTGfx6IZZyhjiSx2sQFbjklIgBwIdwEqgqE9VWRpkiYKplIqr3xi\ncrID5CTZxzBEMV9CS3Nb+iO2OEO9xdV2uULAFMvqByohciUKo2hgxrC3SWKZ\nrk+UgKCMUbQ1FTATajtS7hU28f063AgbmP8Y0pZ4c82kmTSC5SL/SMD92V5G\noSzHT6uobzgBwA9XZvERAsC1Ui2kbHshokol8WQAfeIv7+l8Yg/X6+Vd33aA\nMEWHyQMGfCdhbtwDbo0U8VM80bM8nUS84n/dCUg0W7MVLgGFubpGmevG/Pfh\nR5cnjgxWDGOLux+cBjOA96Udx1V3szaD7pKOP791FmUEITm5DUOlX1102vMB\nLd6P\r\n=JauZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8sVeFcAJcs428J250ubjmzCWuCE3OC53CKYxoWg7qKAiEA3qe0bDDClEAU4Au/P67IMZkXWV9ARXr52YPGSnbHs7Y="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.3.0_1620403133373_0.9419072256601688"},"_hasShrinkwrap":false},"1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0":{"name":"@sberdevices/plasma-tokens","version":"1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"8a407eac692ebfcab06fa67228b9a54a2b206c05","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-fcNQASlAkZDxXhvs2GQbeEo0U6Wu7nuJE59QXGMI+qbNxIBd70HRREmFANqvr4DZ0x/RM2N5WhN8T26Fp5wEDg==","shasum":"6451bfc4ef6953b0f318c9aa32fa0a3d929b87b5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0.tgz","fileCount":83,"unpackedSize":214825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtOMzCRA9TVsSAnZWagAA1+kP/jNAMm30RUIkDfMYXBkp\nCLmKVMOoQ9WsYj1em0zD6nTaEcCYCeiN2KmVGvITZV5oBWrxHWqzj0aNYZ+k\nMnPsXSooHTqvH2QT6w2pGQThB/wrAiXbdvSvC+Bw6MQn1F7e9Z5nE0AXvPvy\nEanSFz2lNCRHwgix5XgRGDVhnZsWGKMPu//KQcr9dckfR2Sh332EhjNhjNjx\nDA1afUkDLMBxIzjpjbAocDIqy6mbgLeI2Dri8xyFrpXesf0LZGpYWujNbL7m\n0cCeLrWDQuN0N6t1TPL0GmxDX/2m+fMh23GJnTuHTlBCVcLwHVVYkR8dcxcB\nEozKooUoF4aQ+7rlq24ReMIYiPDx+iHXiVArjoCI/ACiqfeFWb3hUS3cgXNf\ngX6P9zA0Xyn3P7rQDVwekPT6VQDet8pUkRFnX9AEdPZG9RnQNr7RvC+2UT0y\naQgMIHrtQ4Im2B3f00JM/0tGKiD04CpVtKEe9wn700DrcEUUHa494TNNNqDu\nyhI4ComlM3xup4R542Tc/LkP2O0rH3yaFqhEo81z4qibRZ+iv8ObFarwDOi4\n+wop3u59FvklAT+LD2zzdSCmixD4uDCpWVdEqn0gGP91lLuwyJpQclgNE8gk\nPIUSk9RfjDglTExHhfRsQt4GbLkViBtDpclO5Zu7+wIu5XSLscpy/ljnyBHf\nIiPZ\r\n=khD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjA4P9y2xWopCdSHW3YeBS0c6IRXTyLm+h2Xaxl7neyAiEAippBFfOhPrQsR/CoFWoDbdjUKeLL1F5SufCrnJct1zA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0_1622467379452_0.6706419631644929"},"_hasShrinkwrap":false},"1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0":{"name":"@sberdevices/plasma-tokens","version":"1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"81aaee2901f8f5c9e4c6b90ea07769eac0e59993","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-IlDcWTusv1Rks1Nwim690HHJRzgAvoqUMDcoFO4BYB9qN3tIADZDCKhOboMaWykV4htFvzUoyYahXgMHdTmcVw==","shasum":"779bab536c94de136a7a123d0af69223ea81195b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0.tgz","fileCount":83,"unpackedSize":214825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtO/HCRA9TVsSAnZWagAAMVEP/iIsnRH+kYftv75azxob\nDNMG0HFJvL3xBnGRS4lF0b2dmu+WP6/ZIaBpZ9wytrmvvS1iOGOYx0N2cexu\nATEkpP4kmr8qzzwVyir7aNGCB+xo/Oba2WYA3Dn3VfC8aHW78PmPcDVYskYx\nLQAjt+mpDPylExUqHFRdBCPnH3b+NA0HB+CspmVi+K4cHv9X0QAcSJo6/GIf\nPrWUdqRBIgSzcfqyA5ienRlA5LbH37Ko0u7yrNjBZjRv1YKpvQqbvo7Lweb3\nPdmXYi/aGtrAg7J4Isqc4GuiE5fyh1oGd9l+u9Ve+FkY07csH0y2mVLAF5V3\n9gijiZAr4v7v97aB7D2BiNHNXtYLEnVlUG4e+Ux6QxNIv1Elyz8oQb929Ay6\nRNrpKcVX7FPCncuVMHtlx4LFKuYELSw1npxW3QOiIM7yDfuxPNxyezT9wY2D\nCs5gR4wzMk6BO6KMtC8zpcPxyG2k524vEfemeAzBUhU0F7Hi/mNgFxhiYOPb\n8Uay44clD2Z9UWgGTPEmLweQMlSwpDz8fMYItr/eLaD0jnDef50L4dXVSqEw\nZkjpbu3wYYcsHyiGQgpu1B8pOWEfhdO+MCuhmvI4kfUoxMl/Ann6XAlPvol1\nf5bDCWegd+GdZGi+gy4WHgP0YKrFTO9C5J72kl9n1yyUkbZvdu8Uv1cG2smA\nvqCq\r\n=Xhgh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9uW00cOjd4bQ2EK/X7zCBMHPP1sTMdgsO3lvNrQHVDgIhALqC1DM/g5+bHqYJ4OBDwy/Xsbd4cDel+e7EbyyqcJ5M"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0_1622470599369_0.9509784647973345"},"_hasShrinkwrap":false},"1.4.0":{"name":"@sberdevices/plasma-tokens","version":"1.4.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2849f268b9bea30633a0f799b369c4d2652ce234","_id":"@sberdevices/plasma-tokens@1.4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ArakYxS+YALipZhn5O3a5YxhOlGy094XKUBzf1+Kfn6VjbiNxVMfukJxbNoG4OboDHXVEinhyqpQWETygT6S0A==","shasum":"7be8f8d32ff74ce44a62f9c25d5620072cac3452","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.4.0.tgz","fileCount":83,"unpackedSize":215615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtPLiCRA9TVsSAnZWagAADG0QAJfMmbkuEwHzS0pFcfW+\n8J9kSqP1JuUtgK5i/MMwonam8e304hZzlCASJ0vIW/v9ImlCCowDDV4CG5mI\ntaqPrqdRnZ5fRzWJxBje+uAnWRY2ziMzbbI4t4p6Xj2tTDKBF9jdd7lakdvM\nph4n/BeuItyFFww1gwI3GcGotVrdMX6dnFNaohXmr/troiMNItVuJQczP/68\n0bLYfEekPn0BLHP45NeD1GDAPDZG7T5WIShpZBEllQNnerSHAaFSgfpts+AF\nuQZAS8TTUzuMK5rSQBKLF2eqOZptLoT1PFrWiLrvCoVPs51X5ecEaifGH8Kd\nXdWCPRcIgntKlmDlIqKd2LF1LuYYan09OfWKHOLDdsmaLIDZN1QIRcVVQwLz\nQIPI1tWedopuS5c7WbVzU5SYECUE4Oe5cZ4N25IU/Io6l9I8J/S90GfDmxqy\nNqK5WxENLStSN3i50FoPZHpvvEQlULMQC/ycjEjfPdDv91bv1Kh6TfVy5TuT\nIeI33SAqPH/gTkcctsDUuWeVQCX4AKW0QX0z812HXzoHaSZSnUMfaxy1o2ms\noSC0Y69IZiOnz5pu2eaQlKbBsf5hFJ2IqJ2X6XxJZ+n3MRK3z7pt84GUrag0\nIF4ol9OoNQb9X887aY9bDk1KJ3eYgsvPryEiEKtCTYfWZ558pw4fBcwe6qtn\nHmiM\r\n=01nX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwaCVMTrHAwCbX+uM/HRCoUan92a6nRUxcyoAN4l96RQIhAPC4S/C9CUe94yixoJXrrdnKi9Awj1Uenpf2TsAeEOQf"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.4.0_1622471393802_0.4424784888714377"},"_hasShrinkwrap":false},"1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0":{"name":"@sberdevices/plasma-tokens","version":"1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c69a1c0cae862f8a125186d0e117e5fa21086915","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qTE7Io3eG4mlvRWnKbDgrQ0Gcc38Eak58d28BEiHJ/P/e8mE8dLBGqpoBONAcnutVhc2q+nJxOhwd7+mIdXLxg==","shasum":"24782ccc12b59742003758759e767c4389b9cd71","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0.tgz","fileCount":83,"unpackedSize":214825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtPbNCRA9TVsSAnZWagAAkYkP+QCv4BdoYRANAhpZql95\nfFXvlXaphwgO8EtiyUkNKjZDbYRq9Mr5gHhFbsUDcLd0awISTOrEr0GummBa\n71vnzTiwHqmkItU69vLawTDbLm8PDfdqNlo1FvAzc0BVh1hDScHyWAm/kWOe\nJdAhUjflUbHClyJEzk37eZXRQ0NUg8MyOMk89Y2fU73Glbj2vKfjVfwLX9Ro\nfQqgPCspQqO5x6O2q4G6RQLtw8I1eRwfzPDD/8LrKujoEsCV7nxI5Re2/LJk\nR6Lo8JyQYBhvkd9bFN1eA2UE5R+zlKM9oEf/jEXMXcYD+/pGMQKTN6RINXY+\nw8fnluEoNqR5W3BIQa6kMnS9va/wjvL8uTBd+7M2uBS6mo017GofJf/uFpT/\nDm/hAIhCQXrR3++sljWXYpkfabKQERBIu2cJdDHCiYYu0y+IUr98XXQuZpu3\n30BnXIvUwc53gv6p1fRHqT5HyAzi9sBtzjmYk+dfiNUUk3r6QiMQoJvsy+c5\nPZXtuIFR0PEoxGQ5qBVnoMTOKaNNM8S38nB8i/BK9epJQh7+T0b/i8+oe+VH\nwSGWgV2uF+/vpK1/mZI1IGgiWZWfEos2kSY5qi9B2B1UD+oY/EjvW865E3Ha\nSrlaXd/mur8JR1EqQkLp/xQS9PE/WPuVt6670GKYFAOCjMoAmazIw647gbDU\n6u4s\r\n=hHO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqINVKmGWabX+3MtG7tz3qX3e4a5w8pll1FTB+SOQmqQIhALbln8OkXwBivSxx0sl8nSnf20SbTgqik4aX+dXnOYoQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0_1622472396555_0.27928256307276667"},"_hasShrinkwrap":false},"1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0":{"name":"@sberdevices/plasma-tokens","version":"1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"8c33948f19254ff6d6ebac8cda1525a758106134","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-KrcABMzNs7vEc3JsnECkHdJ6fZFfZLLQ3lWuApguwNxCkW5jgENJufvWHtvFu04xacDlIJQdo/uwCEghwPWFeQ==","shasum":"a8382ee3944fff11e4bc3ef4be024cfeffb4e1be","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0.tgz","fileCount":83,"unpackedSize":215669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtQcSCRA9TVsSAnZWagAADNcP/jQ0SwwqEm15qp2/9cdZ\nFDmGM8mRgfMR4bycYYs09VbZl0kKStmMHagdvbLeknic1LNdT8UjPazJZsbP\nu3BiXHEWhJpehFj9Efj6a9bWlrPnI1cgN+bv3RkzFjxrnNa1RkMuG+uT1S/F\n+UxlDVWcfr4F2qUevcj2r+PXUDb+V0r4Uw1UFYojAEuSgvyBkED+2169CSJy\nCxGdrkcw7NoZeu1MmG/VY4wIpVLEQKMlCQAVdgFevpV10JnR4JW3xKnGoA/+\nXCQOCPQmruMK7IPKwVo9ka3AkeU+YWOZGSZWJMJWqybcyFoRGc+VlGOSlLgx\neTv1nlCogeYllH1yDzmDM7n6rIGge/Lkb9C4kC1K82KP3pa1WhKhP/S2PmnC\nWCu4HS0jJP3mhAILah0V5EbtlBtG857YFBAVnXT3DDtv9dHx+fIXzHkUxl64\nSud4JV8owQNpDqYEQGBoSbLGqYhQNnAAsCjGTwv2st4jFPpUaX3V/6xk1V9B\nk/DT9I59Er4wNCZ4tJqSYpsaa9yhWztqGbVXt1ylPOW+6a4q8xWdPxIkmyeu\nxGG6zlYw2taM3HO/qZYFphzyqdfys1jzqbr9MXr5DfinVs9AzkLJX3z8CimC\nvbsTE+ISu0phTV04CztgO9PgNMlldKtu9GodVmiXZpZG/wcpETaGgF5Kh9oQ\ncO35\r\n=/LLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAGLvPb4KPSf1SIKoRX80BmHbzQSoUUEoG0fe/MR58fAiEAkBgb/4wsNRHsg115AfvZqR+3EW671woQmMZh+RfEqCY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0_1622476561849_0.7821263015646451"},"_hasShrinkwrap":false},"1.5.0":{"name":"@sberdevices/plasma-tokens","version":"1.5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7ecf53c957e2542cd4136a4aaa2598b9a450fac9","_id":"@sberdevices/plasma-tokens@1.5.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-x0JGd/P5P8JYxbFCJgJq+hlN7OnVIRLDfZzBKf2+avLJsyg78IVsgI2e8OAPz7zKwKXiCFwyayU5/KfRIYtwpw==","shasum":"b99f77f1401588178690ef2d8ca4bfaf7927b668","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.5.0.tgz","fileCount":83,"unpackedSize":215844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtQ4gCRA9TVsSAnZWagAAB/kP/jSNQfmMNYsRzK5YJKAq\naCikdXDwayUem6h+MiyaJvRi6Q/FM5utojG2T/zUhS6heQzJeSqbDXKrgiME\npvPuybjKlVout9mraSRX/M3XZJ/xXw6R4gG5UXMXrZEOArrmZSklOgcgOFJP\nFV8OCKmf4B+XckA3asZr7Uh4FF91ug89+SKl3y4JdwreLZ6VvC5Vt1OLlwee\nxbrpSwOAi2gXDlSlljKwv4BcpTWghrJekGMLMSg/jXiam47ileWyF1xp6fer\nZqQRJ3jLf/PRq8bqRMBQ6vd8t/f9u/abQT/61YpMUH1hmcp9i98oLpac/xxL\nnprCDlJxcRwe9zRytu0ggSbnPICXQ4XycWyWwzVNARcD1DjQwnG4ojMWh9ox\nd+zD6pIFP8EIvEcAjatJJnmZWcpn2IfSf0UzxlC+ig+Ifq9krLeeZyF/lvJs\naPP0br6n5Mmzqma3tfYXUa/LV1VuB8HA72Rkf0ubFHFYNnPFrD7IYzMX7QiK\n779bLojUH3XyiWfwZGgc20eKr6N5w0zmvtYecSAs/nzgaYzhWGhrj85UP+2G\n3BunmAWD5oAwU93x4TKfD8avOTz/qb4f+Yt5kVKKnRCI4ycxemhkANQm39a3\nP7kEDgMqxZ6DSsIeMhwFMPzffXmgwJBcQjyM+kCXRbW5jBN76Y/qpVhPWfy1\nPwIc\r\n=FzvK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHo2K9Bd3ceF/Q2hJcpLs0JV1udKjfTLs9olp/3MhOUMAiBHRXna2M2i1U8YDGQC75LxjDhgnkTwRQygZrJsBTOCog=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.5.0_1622478368340_0.5663776268534384"},"_hasShrinkwrap":false},"1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0":{"name":"@sberdevices/plasma-tokens","version":"1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"573acc4e434c923a19b3b5bc4e76ea253e2530ab","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-e0XcEFl49Zy79aHxuUHbO8sHldn25JutRWn3tsqXUh58QOO4aqFD89608q9AnL7vCKa1/88t6w8FF1Ze9GErtA==","shasum":"0229596e1080aaf4c2b92decaefe57313ee7c73f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0.tgz","fileCount":83,"unpackedSize":215669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtQ/WCRA9TVsSAnZWagAA2hQP/RLVbxvBbrTLQ0MJUtLX\noiA0IQYqsAbeAUiCoGhS9Zsvda+H9xmUqPUP3WjfrLIdtQCRYTtRTsCgrxjy\nT0KqfYLW6Una0/Mey+P7hdT9xpVmf419AKA00T5HPiFOEAAzektPTHB0UdXS\nh1xCBfeCWMzwLYvsyCYZjOB3u8YdleE07NWk08xmataOa9cnEfcOeSXjVEjc\nQNdSkT2vTC+J+FOoMhYsvk/VQlZ9JvuhQ1p84c/ibBYAAJl9DbeoSmTFaiIW\nDwDZqq7Jkf1WSFHUm9H4xEkx0x/h2qqWN80rfRFA9iSJcHr4n2c1IK4k2jgp\nBeE3QlW8Ijqs5W+yXgwJ4OrYCwPWhYTeRRaeVff59J6BoEezuAludUurtlGW\n8O3D1coGR/tOjaIYGt6vwmr1k+v8+LWetKsGZGLCh54slp6MLGpbOoCw781p\naZF/tsekYMvfNOB15fecbqDYarN29QgZHmenYPnZ34k8tIeJ0SrryPnop8aC\n9ouDAzUul9rYUU/Msz3wInz5/lSwQrnp14m2QsZoYE2+cRUcN0IddJ2JXdyv\n/Ks3kbOIgyQpayRp85kqx2aagb82MOTKH5OD3JQFmHvjRjY7vnQ/p0asPchu\nAt0PwQlmuH2QYrZEfta4p1SzlGrVdIP65JbJS+0N/5OMUd+uZsnmkwJG/iaU\nn++t\r\n=4KGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYs43pZTTv8cmZeQgUUQhuOS9+hhND0XkxNyIOuP7qgAiEAxyObReMBXXhisBTouZSQYOPVl6pP4u9OQftR6cX46yg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0_1622478805897_0.23129376407594093"},"_hasShrinkwrap":false},"1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0":{"name":"@sberdevices/plasma-tokens","version":"1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"9a1f60abeeccd399dfc2bce83a3aef9249f07dab","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-QVUBbU/vPVALqsSzCiQQMrEGtf/ziWzC3Kvm2m1pAb9JAbX7P/YRcs4thzLf+QtZIfobGNzNMoZk9m8B1zR7Sg==","shasum":"4788f065a90c7da5d3cef35e6b73d6851bd04021","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0.tgz","fileCount":103,"unpackedSize":519317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtR0XCRA9TVsSAnZWagAAuGEP/3WSt/U8bX3UHYPOkhDl\nZI0PMj9dVhcqm1KVqIQm9zFLK2QlXC8WvUlN0LFKNItkxclTJJt++b4BbytQ\nQJ7gSE+saNjVETHfxJOmpsgGaiA/AxKXEA+lDjU1O8m+xzq6HGy3RbRJBykd\nzSe/PWh7Le5g5LonHnW7/Bs2a5ASwttn/rfMBNktKtV5Lw6VNcaDlSInH/kC\nihZOZxFMnqKGqfoeWHA0khUzgsxQVKl7atZIPw9HHOZ5SBHImtSSR0KsgFkG\nWEv7kpDyEmYjzGE9hL0ZCQpSjQhU4XeeljtUZa4VSa4gZW6ZtoxJDI+Pnq8q\nSSO+b0Hd6yUlJV26Wnyl0SMTxrgbX9WyJL5DyEH8DYIGJrNU1cknmpKwxw3O\nlU4OfEE37XgwHKsqy3vBKVHg+zwJdddTzIfiEyTzwuN5CqHOkyvFtuP9Gcje\nBrieKzxsrL8Oa0JQ7KDoDcZY9AVv2jSP/y/uLQO5/kk+kFNF7+Ij6DQdn8Vs\ncVB1GS98HljaIDJMpXnK5bdPHb7xbZ0V/r4W5SARFu64oVW0l1Y5Uc4IMSLh\nibAYGQy/hC7Q6VTtwjmJD9DNvLCYuE3VPSgGK//CtQ4++AKS/ExZOYR4UtVw\nQttsqXxVRFaNMQEPUtzbBMuP5r634WonyhHJHtyr4YndaBBhWfWmJVxCBNP+\nLxS4\r\n=JdVC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBw3NsXCRroKBOjyYq4JERXsgIAYVr9cKha2S+EMp3ESAiEAm2HLGO4ndgn4ep5T+IMl18LIlwQvWzyp2xHk9sGV30M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0_1622482198851_0.21510186466326053"},"_hasShrinkwrap":false},"1.5.1":{"name":"@sberdevices/plasma-tokens","version":"1.5.1","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"21450520558ac739006a4dc525d34be0d8cc5cc4","_id":"@sberdevices/plasma-tokens@1.5.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-CEMQwCf3LNxV8FlfRS5YGGcRPuYwyoVy58un+84znvBo21hv2e+u+UVEdsYD338u95XUwLKIH77fAGqHuI99UA==","shasum":"e5c09bd949ed332ce99c22ba6c8fc09dd527c90f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.5.1.tgz","fileCount":103,"unpackedSize":519526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtSL0CRA9TVsSAnZWagAACaYP/A0ym+aVX3Z0gENWVH2S\nO6+KQFjuHCvgYrtJ3LVst4vx5OEkX9XYFSbOY/8CUspWx1z4N60P2FLeAd3R\naPJ1B5zyUrzbaQ7jas4CXP3cs27hDPS4Y1G6T6/L7lq25jDjJBStLh8KTS/4\ndYCSIAATtQMzngU0bSs3GzN1s92jUScJ15VXqMq/NMOSAvfhXE6GKoQLOimG\nJPqkRj/kMkakVRZrIO8/RaT75umYd34RCETyjI47yTu/eueacYMPqHCl9gFe\nK7GW3/i69j3yYDB13+m6pqIy3FqhXaVpCgNYx1Cj4xD1tqJfa1rnYV0x0g3u\nlPiiQbq/hOqE4PKiZ/ZmWggbXeLJR1WZhMZR7NEeyegfl4orSxSnHuUBoFGV\n4ulH1MYREAV3oSlHabR7MWSxE0/siq16j/XfpuTIaz1NQsw1P98+H62cXg0k\nlrEthJT7GvJhV4Yith/nHf86VL04MtK7b/POqN5pzuUBeCbl3f9mu4E09rW2\nb0dstfTI3tgj5g8YyyX+X/d5SRCLI029SyW5enjsV8FxLuVpCfWqRsk1rOEw\nYi8eJSa0+pgw1WuozXvXuMVQDrZ/5gauiBrN9qtm64uAegAsF+/qniT7bjIL\n0D0xQJGHykpdnfPgz1rPvRBf44crw/mD8vkYPi0cYhRK+kmkTYPL/uBgokis\nmhvF\r\n=IouA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR38QjYuUSiyqb9wl65slRzqTh91x7BrEbfLq/whO73QIgcmMiePUQeWN3Jvq5J7r/ZPthalIFDBOVAzpiaJT3XaQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.5.1_1622483699892_0.7430807388172733"},"_hasShrinkwrap":false},"1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","@sberdevices/plasma-tokens-utils":"0.3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"eb64c1a1e3d379ff39448c3587c44c5674b6957c","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-XXxDu4rttkk4AQaVhlsd/wMF2t1aHus9lab34OqFZE4/7ps/LQeHorH0bSwGR11oZuWQ4qcCxEK0u4ZrzFEdKQ==","shasum":"6c32e2bff65345b2745505f82882dae6b875d7c0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0.tgz","fileCount":103,"unpackedSize":519315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvg1gCRA9TVsSAnZWagAAJAsP/jZtFLdEBLnfzfAsW+XF\nncHXsuyLfYSFvknk7pVe7o1PrymdmsqELXFUaZORczYsfB6/KgA6s1XEmTYN\nmwyxHzP23AimVm9DgVR84yO0SHz0X+BiRzTDyPopIJ3vgO9rZcNujpIXW3Sl\nJXHNkMi+F0qoFm30xmg0cpJcigq9bdlr+8GM3LbHi3ajx52EZMmE8BWHjFeB\nf87xccV0nxYrpNI+84uCtnU2p7bJi43c7jEEG5k6/lA94IBkl03l83jj+sTn\nR3rP/ASENEjOMBfFcxsRdaDUcVdzIeBXH2ZSCd2gXLjWrz3cgBD6sJ/ruVMv\nPw/2Sza/FQ4yNmi7+2OHqfF2debKtmyAWX0i6Xp7mQLzL89aTpNCn3vBBlIx\n+K/1Cv0y/JmyuFp5c64asqwqdpx5lswyymYquFFEnRMokAF+sfWFDWpISlOP\ntyT32ka5929PQpzcW5ym5Tze13cbAmK5OeaPU68Gh9v/+duyoC1LrmjuQq3x\nGVA2exJc+NM/9XvlZGIA2a2Lgrj6VBbrgdbc6cVnAH7BkG+Wl77B7MU+jFSR\nw3lliG1chNSxPrH1EgeOLYvi1s5D21EiYrtqLKx9TIvy7SOwh8clJxibLyO1\nYZ+Wk5TERu5/UYqFp+n+o0L0cdN1N4AmBxbiC3wqcw6rYUoACMVlTYRz9jR/\nz2iT\r\n=WPqH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCad7olS66VQ+7woM+/Wtr+vGax2xUxIFltS+GIdQ3rOAIhAOmmQrdhrNxLRevOKD6FzrTj/AkWZM4k39wtwm0Bf0Ho"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0_1623068000081_0.7694714943143153"},"_hasShrinkwrap":false},"1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"fb58de83544a87fa5dd6ecfc71ffd3a938fe009d","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-HkrWV/ewjFC8tQCjKI63QC/Dv85VWewiPG3EhfWI2+21JDcFNuOkx09uu/I2PkvGxlTZnRnRSv2CiTY0OWn0zg==","shasum":"72040b370621a59105ca00117a31ebc4252c9806","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0.tgz","fileCount":103,"unpackedSize":528475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvmoLCRA9TVsSAnZWagAAMgUP/3iRO0Cf7MsgQUAtS73t\nMGVtyMPHoMU+Y0znYzighYzRtXgq+xtKNRjSCMrkuGyFQzN+6emgPtDG5QCt\nz3J9XPhu4kuakuu/mfTlXQOMS0UTL7X8qHbQk49+3UBs68tS/K00IAXObNpb\n3Hdhm14wy4VuBVXGbZTOro1EyLyKvt9cSPGee5ASU72GpZ1SOo/EWvhcIZ+I\nJs2iQb8Ue4g3WlugtH5I5Nu5FQvSc8kWf+CkC4zMWRiHiPeCp0GJlN0DyErl\nLvQ+fycuBG+QQCHLxmiWaRmOQrKTs9s+dxXnTpMZGTGrBRWKZhx6f0Aq/QM1\ngJz0GIHGQp9ndgAfJ/L3EjcDhySEixyzIMEbClmbXVYQv8BV0cTDYvXwca1f\nB4lTD4EozGu9ztqd78TBvfCGnPDKCLL7ZgGGHGqLOotCJwbjKxuxw+FSZQ6Z\ngZnpa0eTMtTY4vVB5YOV9jPH7ezTZRZZk6eQO9SYmGEoju+QxE9gumruhc6p\nujxMvJBMDgHkgD21iiT5wdrAIGy4p2X6oZecbcWM3WjReJOg3XmjU1Ayz/F9\nYeWiUMwRkNStJtrGSkAoi6N2B5jp7AEqD80Sr3COV3tkHJEjNHjj63TLoKDl\nb21+pzduQvsO4XY1yZkmKRPyscOKeXokA5y6sOGXwpLFKDDzEsrCrBnpqRSd\nklXM\r\n=4UDf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/oOyG8f186NMre+0pZwECjyza5wfrKAbYdUbho1dGIAiEAmzjGlp/EbbEKs6F2oEg2ekm7J+rAwZ2eZJHDS9ocuEU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0_1623091722988_0.7854570384817743"},"_hasShrinkwrap":false},"1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0ec13e0c0f15234cc43d5930866e12a9bcdc245d","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ue6Os7dk5hXIsrukpCH113HCpiS+dM9qlLvGMLLHQqP+ybpXNmGR3/edvM3Y0Q67qOkox4IBswyai9Y+wc7oBg==","shasum":"e86795e866bc51cc18b5ae5de9fe8e06b5f5644c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0.tgz","fileCount":103,"unpackedSize":528475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv0oXCRA9TVsSAnZWagAAwlgQAIjVO17B3owGrAk9/Bn3\nVPsEm8luQ7sXZ6EYCpBGNxd2sOAkJceOHcHyTV4Qqg3Mb3X4Q7x4XBWFsofD\nLexgxJZ2IKveBQS8DQPKS3Ik2Hy3/3E3X9QDD2kLC91h7VLD4toiFTVcP9Eb\nrphGfOBlLn4NJidjte+qOf+LGSRg/DiO2AK/+rrGHyP4T5CKLHgXIAulanhd\nG9aU5psd0gRQASCdrxHOWN336V6EHh7zQq1yH28x5sBbjkyhYquH43Zi3LW8\nIrt1i3W7nowXlzwqDFRpxqgDl46f0JXiWIxUp5V/Xowd7CKyAG0Ipr9QLcd1\n1DjdrW6b4H8SjLQgsnl1rQJ6/DR43HjnL/7Tohpcw3RoUmDNFVx9qZyXXEVp\nVSVzYVD9yOMIzStPVc5rQgfDDJAm750zZvdD1Nmdo91nUge8bA+RKd1dp5K7\nB2zqbapZ17SLugK6cvboQaUYB9F3qtcTZNpIzYkVrV2UV97fLRqLtf0FcRES\nWYpukgkwttMAxZOuAXSQi8TbWzjDoOR9cTwILqmkGWV97YH3KXTttnJLWjRF\nMF030lEN6u3ctECZfNNcOiEiBEkLCcbEEhyX6p+5v83/31EXq15AVpcjSFNt\nhl1UsrIUUxz2vlVDYCnE55mkeu7xMBRZyi/OV+CWrp5muBCrIXByl2ejL7La\nNTzB\r\n=/2DP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0BSS426NUk+hVbW/RBA0yZPaQlZ0VgDJXixlu3kiozAiByMukKAJ4bEHXRuf1EHxsXirH2ogsR2qbmYsl/qQFysw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0_1623149079605_0.18750683646093735"},"_hasShrinkwrap":false},"1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"26bc2d7263e1aef2c2090eea60e62575a71d56d3","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-JWMEmJeTKjzW2V8BAPfScmCLUHfgDY3W2fEnFY0qs5fZw4lL0zlKDY/mgCxjWwMtMtxTrr0l+06rSwDg+sV9wg==","shasum":"29d24acdcd193df87a10d742793cd1dfb73f40a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0.tgz","fileCount":103,"unpackedSize":528475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv0x0CRA9TVsSAnZWagAAfXAP/3upDYkJUxRYLigdfj+Q\nYiqW2GWvtf3imTcnWXZSMxm+vtc4Adds58sAtfo5bfeK9YGUmN1vTpZQZeRp\nIWfijnI3KqV9QEbbJe3kGITN4kb5UQzmNsAZXGtlRMA7a6Qqotl1axcof74X\nYWrsDd4yfDaQaWYCkyC/EsGU7OlRnzYiUwK/JUW2L9iql/vSuHV11f8idk5P\nJuyb7/Ecdn0OV+gfAThQG8YjEWkk8q9vH7qGhWzMrThgzngO34WYLr+HPV6P\nbYfC0TDUwwdWJZAb3fiu/Q0jK24LeKWpXrdQF2+ZbeEcP9AK+nKFjZ0JXjVQ\nyhWrq7jqGGeKmY7v3gqLEam9LdPxqCMRLj4klEZsZOIME1hGWGq9MvgR3Ifv\nzUgn9dwzR7fizrcdDkEYelSJdAMejWejo7nF6THEdyoma5Df+eXUSycwyFuF\nlsux9sKzngv8ACr4IfderfZ3MAPVSbjGkq6mOCIgJ0UYDGiffA5S8CoEW0s8\nQbCBq7s+KgqUaVnyxTUO0r4IAluxsy7Dp+uEvwZbMt8w3BR5cWYYcYypiuou\nv/ZL9EP1HVgDWsNJoo2XSTQ8oyBr7MrCD2ZUFIv676iUiySVXAyyh07wUn83\nRiKuALBddYi5vwKYvFyuxwtBwK9wMkWYUEXYRU929STni9nTFEa/ohN3xFdw\n5/Bm\r\n=gJ1T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAZAKUSJZN2pwBmiew6q5NXl3UIxGXYK7L7OW9706kGAiAMaIbk9QNabt2vY2LPljWW6acMLyIz5PcMTfA6HLF0Ig=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0_1623149684388_0.15627802556415404"},"_hasShrinkwrap":false},"1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0ac5b720bf762387b93bf268a2510af37330ef9c","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-H6If82FzFewKIVPmWxnrhf8Oc6kndR0fkEgq6e/nQ52NHetmtrh9U2+nZS2utRcJMrXpSQBWDnQtXpXAJT24UA==","shasum":"4fb546cd6c9d008b29aa50bd86af6e1dce7c8e58","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0.tgz","fileCount":103,"unpackedSize":528385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv1oUCRA9TVsSAnZWagAAlSQP/RGydpXgBlbCTl+Y6NZl\neHhq+CXQcUKlXz2ObLv3ZI/EhxzzSGfoWxWbel+iNTfxG136J6QoJSD+uX4v\nug48zAo24+9OSYohKm3EuvXOmXRCHuKylIXu3l9019b8RupmqnTwEGYWHeQR\nkx7x7L/dmYmbeN+ADE1CLI0UcbT2SWsNLk4QXgfm4VC3E7svj3wOR/MBfrTZ\nTK1UbMMh+sX/vYRR9Fw9A0h0jAzu3Sux1Ai6aOSrqFiQYuLA5P3y5hALjQM3\nS6YH84Asc+SBcgrE5/lPSsiZJYcaQJQp7dWhQDbeyS4SyxuK7mPR+1ybSjw9\no10WkmDn6/gqRnlK6dEwBk7ebXBAOxVM6HB5RNneiDIRlYr7q6C6ApckeS8l\nLj0Zda9XeO9Mtt1Z0HQEZTbBaYqvP2wQZXJM5gbF8+g77yiD3kuPe9FRhxgc\nXm4N/Dnn9n4naLeIPbxJJZ3idDdnGKBW7iyE7cJWCRUeUqri+2ECuiQUAmjN\nWNfBUJ36wfG/LW/VqR/05jxwVJkXMRWXctNvM2nXXA7EplDqQ/S01E2oNJ25\nUE0v4TYgHP/L/pZTcJco+bQoN2h58j6DVGtzzYuqPbtn+EG8SeyYxqzHFFFK\nmRwv+uR8L6qdkjgPS1Mg2RCdeiA4tT2E6xEwMd7k4YGrg3PXex0cvpFAPt2X\nzCzZ\r\n=XhTt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBeypnUIkstKkdRMBH4YaDaEAsaVP3S31hjHLubVvm97AiEAytuXJC/cPN4VJGI8tbLEskLceSehDiU4YCG29gI6J4c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0_1623153172600_0.2857044416010981"},"_hasShrinkwrap":false},"1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"8ef7aa1474368a606dcfb4caed0c5b37619b3b4b","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-gFwMLmB6jEKpX8JZrEpVvcCBSDZSm/aBMIqhJ4+EKqYeUAT+4J7tOnHFu8o2iajZUrc5CBXCeWnzJTT1BgP+dQ==","shasum":"9fdd4a3f2d593eb4a3ebcd490d552a5e8961af51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0.tgz","fileCount":103,"unpackedSize":528385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv2JMCRA9TVsSAnZWagAASJ4P/0Q8knrF9A8PppWAT+Ot\n/Jd10+l2Om8aF0ZxQX+GF+KrztR7sGlxIZkZRSE9aKTE0y0JJqpgLIrYX5j4\nunXA4Ccw1mWT6HOniYhYUtChSXLL5pHmBpcoRXqe+3WhFSGOQ0aI8IcI93h9\nCudOXRhK5FEp0Nl8J896UjvPZ8aLEdhH2RJHGsvS5Sq3z+Vh2buzKXTh1YPt\nuvAFz/oBY0g+D8QizlD/WNgJ9tcOyRJO7RvUsJkT+GGQRuWW3An2QeuqEwun\nZ6hEztWbOu6Ej5YeWkOJGeI/e7h7cYH+mBhQRRjG2vygnDphrE6BAkDBmGy5\n6wZa7hs4m9NMvKseGJImWQZH222fw3qh7dFP2uEoq0s/8EGWQ/aaY/2tf+nH\n/Gp2MHJPdoLSROuu3jQbz+6y0uZZQ6ZdwljQm6qokQI2o6RWNmb9iu66lstm\ngenqaTS7x9FyvB9jORmZikbtzXJtfD2+M+tQS0aV2utHgonyywy4zCQAYxXo\nstqYily8cUlOee7afrQqvYGKsI5JphoD3ly0AcGcED40HmFgxC7ioFyzqG0n\nTpF46tKVISd0axSFtmXcseMX8B+Q6kDcK3yJS/H6lnlREpKCIYFheKPMD9Fy\nzOFaA7lb3dLW5REv00DbDbXLngDU4myCU6HYQHaI73UzGFvoy5QTs0qHvsom\nG7vy\r\n=lVN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsOACwyeBhm8BocAgQirsqfor1cW2ZYzCviVufh6Sy5AiBshbVYylfO/0vUsiSVTzaM3abCkQ7Lb27eCfaPxh3LoA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0_1623155275818_0.9666328184613746"},"_hasShrinkwrap":false},"1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ef407160949cb5beac59965dc385cc6a72ba0deb","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Qazg+EEXXw931PgIKnigEVuBqI1hbPD0tY4rNs887RGMhkbhn1EXp5SeQIeDf39x6RqisHMU7er6dMIvzSxvBg==","shasum":"8bdac369acdc3fc79b222dda5c4c0ab015ed21ed","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0.tgz","fileCount":103,"unpackedSize":528385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwHxjCRA9TVsSAnZWagAALcoQAJaU3XqB/pgaEtl8c8zu\nriHXcCklkWMykFbUH7OrlbjOcrUpSjcxU3iohPKqE4zqYuyATePDfsmnRfNV\nRQjHrED6pWz+OXeIC4n9cFbjkiNIECPKgjQJwJm/XwbwBFsCuZhx/FqBGp0e\nM95jVvzbxcpPF7738ZmsgsM4Qmaqwpo7RI41ygs1BAr2qxPkIUFoRRLVH9zz\nlbEalc4lzkQfVzTgYdLMJwjxsiES1WGPhgmwm1xzZkwW28/y0qzp76JfTgG3\n5cWqrhJbXMUpQumFCIX4eaeDd3UO3Cw0nuwgKON1HE1g7JijGKwnDzPPxDg0\nJLEQaHBk9aKKfCgeJqUlqK+N0vS4zrZ7OtPhR0xCKmNCV6ukpwk+AW3oSnhk\nXVvxxiail+s52tMC7f+PN8Kr+ezqHij/vcOww+u8l/8bBd9Vslb3Lypaxih9\nABkPvWJDFAQ/gt0EcVLXtgTMnyp0j5CuBQBwh+Zbt+7dK/F9rDvNUUFEsGqe\nMeVL+jrxiR5PZjMeUD2elweDrhbSQoiATp0ydoTiJGESYRiJfHgMh04gSkxN\nbzl4wH0nQewZdhtdjodCojt2awBzVDHEqoyw4rykLh64p0Bi6o1jS5AZaPBu\nVfPbk8f++A7qKFw0Qd5X0f5fiwqHC6cH2ee9o3WS20mtqsnxFJNJzFvlEabN\n9KLc\r\n=4yuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdHlqQIkMejoRyA82CmBGw8VWbienmqIRD85BEsJPP1AiEAyjez2pP1adxks3uQe2nONA2kh8MtWKk0yd7kCS5uoMg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0_1623227490601_0.9433717208641059"},"_hasShrinkwrap":false},"1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","@sberdevices/plasma-tokens-utils":"0.4.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"b23c9912d051d0e5d25640c461627c7eaddfb78a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-REefzWZFoZO6pJndiR/yP2jQNeygjgrYdjH/ZJdkAXm0Jy3eIllpcixJuGFRdfVt1OxHhE3fZkCmHkIeQSwLGA==","shasum":"09a8947ffc22328340c8cf404232ed09321074b6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0.tgz","fileCount":103,"unpackedSize":528354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwIaKCRA9TVsSAnZWagAAo10P/Avww1eTKD/pds6TwPv9\nkg1FLEoSlLnH0KvlUhK7X9xmXyw/GPEcjlu4qV4O4ZjWF2RKP2I26WyONJEL\npvuKWHv24rw81N3K3QPzVe49YXknId+1wtw5kWFb9iNyVKKd6pUAiDLt1kc7\ndteK+J6ZVSqe8/jGtT+rMqAjzoJgGCPyoVsHNQLT8s2T2livVKeCuBWX74JM\nqzpI3LBzBUXG4Je9ied3V0busehUgaCUoFhfRFPxNYijaapcbGweK1du1CQ6\n73mddRpMwhFVH5Bl0smeE6K4/o7/tRrCVhZwao72pnlGPIE/Ubh+gCoyYsW9\nuHpyMYOwqHPmepwNGTc2ajW36rj3/JOn+JD2P2kefKunFiClqhuxmwM9O+qP\ng886k+Tq6U6L8vXTO1FRkEHfpnW6vusmFMG2g8qSofDAGKPHrS7qxz8cfpTe\n+4OdU5TgsxrrpPIZsOx/B+qIKveai2u9sqEiDTlJ/l3xQFvsJq/EhTI2g+IC\ne5y7LZkNyT6tQv88aua3YuA+i0Xf+U0i+fU3oPnfpoap3w7YzhdW8L0mF4yP\ngZ4fj034UU0rNKeZq8Wq4TYUdsmgMW+g8LplYkHjCx+5Iaf/nZoPJjFt9MY9\nGYnbSjoJisdhkrM2i2r98p/BwtynMALV6tNZ9/Q3Lyii6QC0yv1qRNaanXVo\nGJUY\r\n=dguz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFP/OVIm+Pknj0BSStX1iukUnF9ulRVVjYaUZfhy9MhAAiEA46ki4otOfQ+Cf9qJx4xmSJp2wDz9zCs0zVmXQ9Ktn3c="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0_1623230089860_0.7068536007960515"},"_hasShrinkwrap":false},"1.6.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ba08a71be31aefb075c01acebd951eecaa39c2d1","_id":"@sberdevices/plasma-tokens@1.6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-j4OSIVl8X3znmh13ENKXYJggsgkrqeISLyZpWxtVLMPgEKKFy9pxb3uxxVRDWG2ZjpDI5DvHnveYLpHEYGS8GA==","shasum":"ceeb4ca70fe85c8426a972eb3293c8ce73f555fe","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.0.tgz","fileCount":103,"unpackedSize":528464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwIqmCRA9TVsSAnZWagAAtsMP/1S1zcS95Ou5Ayqx0URH\nFE8WaLLuOs/SOSSyKVNn56t5AzKZ/IpvU+xjbuDQWjyMyahp4GArlTVtcgb7\n7wf6o5pDcdPQcJK3hyreFMEgzTVMQquBUnAZMUfqktcK0AdUaKAdK4GKoKRY\n7Vn8iAO3eLNbP9+9EG60sYjbiwsaCO8H4hwdVsozM+IOHScqwNKUeGKeZWBE\n0CIvEEMwipfXvWgNWD/xzFxNKqz65bp2m6tGFpcKqAbr0wRVpdsFZaftJ/kL\nMP4yfeBcvRNzfsvrKFspaSuzA3IlImzL38TkPuN0SpiPrJF24UefZnJF9RFc\n9GkFIKx6XCffhYT8n2ICN+kkOpyLgzcm2dUW/OIWj8+Mc5u5bgD1xb+QehD1\nzkUtol4aodl8PMg+2o9/7SErEeCaRI6oCE4X4H8PMEFMToAL9oApn+37678Y\nJuOD/ElfJ2ZTjcqKbYuwn7gf70aJem6xtQCHwK2ko4ONCXw2l2xk8J9plM8t\njQ/j90/kATppc3x5lVTbxMsYCU3o3QlT2Z9/5Ty76cIrbGqjwfIFya4ixbR8\nTJTOkgKsVb8OFeC3DfwwFrDjPEb2eMLmXqRLYmLtGWK1gPlvnUVp55d5EtRS\nzrOaTef/Pvl189iiJbcRaJVLj951TmqkHZt4hnmvTepE7KTZmSKgvtcnxZ85\n4JS7\r\n=NaWl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrF77k6GzgEe33hkcfn+cAPZ228//5aBdWYaq83ARoSAiARI8gd+Oe794dLdhLsH2r293llmBCrImrKMGNti/M1ZQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.0_1623231142054_0.9116212078192216"},"_hasShrinkwrap":false},"1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c18aca7d5ecb8881f355907ea0af891d14f00be7","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-j4ciWZ6Zz/AbHMLbnCgfe37tDkISl6XEZRAovdlfR4+defw72xtqMUvGlZodFlvSeH7kOSR22Y3lqUdufoQnCA==","shasum":"8c1fbb06c2ab06931e587bd36fc06158f906e924","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwNRZCRA9TVsSAnZWagAAxLkP/jBGvNjMOP9NdD4YTgEF\nezfNGWgtHS7hD6yXY40c+4ummG70d94uvb57xs1ASerBeq6hbV7UGaKE3kfR\nt5HSjGmuik8b148CiWIGGC+kchKxO9R9TzTcNzWvHkOB5Pwp2eAsWrQG4tj5\nsY4BxfGXltWOoowAlR3ypiPu4Mf0EqsQh0aHdSdNojYKuOepSb5qbJG4mUuM\n+sh2zYL5J1TV3XlIpt1dSIyc8ao/o2YhntgFlJBt7TAzWH8TiDqI96O3KE9S\nmtxYHQsqDkUKNH6s6WbVoCbu44VNM3KRn8uckI9dVnfBGcM9SPGSWxlbTfTX\n6a92pnUT/5OZCpNzydOPC2FJHfVFzVdfmLS9ufL6iJjEwD0b0g1GWf/ZrLzW\ndfSJuXcdXfXPtNMdL3/xyGZnZxJT9iuyJRy7gHzsglPiFA9qR9n5wADJFemF\nhEhOwvXN1w96BEVYtls8OMs9zrB2QqyfAWpc2+v2sKXcxktutJyH9u6i9hRx\nOXdUq9V94tHn1mCzKLQodKLLeENZAmwOBR5xFFFfGwrMyh2Hp5/aAu0p9ibD\nQIqnTeiXnv6VEQ7MAdElM6m9YbKWf13JNDU8lMPX4bKx3ZyE8BrZ4HrhT6Gt\nZB8LKh0RcM/GFj0uC6XJN8CQZtQfsglx3WfBlAdKM/zPY5+Jm3omWQuk438+\ng04F\r\n=M6Fz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIAgdFTB2T/va1L/FnQMnFYmz3vWE7ypXnrFOvX69sjnFAh8HZjAicdpy7BhLWAxFB2Ch8fedpWWRlTc48CORRGOs"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0_1623250009546_0.23420193491026509"},"_hasShrinkwrap":false},"1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"27e31c2796fa918820eb8a9d1fd384addf7d62fd","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Q2jec5wZEvnm+AjJ99NLQfFimA384RMZlZe39ujd8AYhuWrd2W/dv7fPJu6TiLndXRk+4mfmnI7qudnmNEaRQQ==","shasum":"bdfa0647a6c3be9412e15e660a9b3bb4e50a681c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwNy7CRA9TVsSAnZWagAAeCgP/jvXDko8NjM/rdWPS6WL\nxDKMySC5vR8zsUHWkjNhYWyKOuNKcuX6oZ37EhaV3gdrYIL0REP91i5SZOhW\nhfSRz9BJjdc6u9LUDOk2OJ9maDgLMZP2acGTvB9N91khV3ZW2KOfRaae31+M\n/c5nDL9MmZ41XIOK9zziTby/dArWSThs6srDGlTlLrXOnXD/5Cs4zmj2Twpk\nkMko55BXRZ18ChLZWRpYWr06IRXeteBHcBZxaY+cy2FteJhHaUqAXrNJF7Ts\n1oT/LeCgVWihfAR7azg8J2+NHrSE6kzVD6J/jn6O5vCe5MfH/fSckRNiFtoh\nqepCPOKB0e7fYLmjDdU7qlCiP6hWmhSSbLwEgLKEF+qgnplRDtiUeB8cYO5m\nCZbrc0AGif4oJASw1bYgfM5qBjotbHJqSfbNmxAkbxjXCogivt0796tmLWcq\nlUCrypW1j/gRHMM2eeH8z1gaZqyZQdcJrjGo/pR4tE5UYLif9d5Mh6rHFU74\n8z0cx/Yx38byvFZoph9Ezf2hNbHphbH4OoX+ajvSHLXRQQC7FvXVkQFWd4hw\nIr1cFOFiKIl4ztS8yQ9Cy2de0t6/hknnHfYweGdlghJkcrD3ZZb9tHCq+1Te\nsaYqFLSG7Y2HbHl3F0wXgjZNb452bwo/Lr5i2xPAkU9v5SVmjO6E+Eu5kvli\nesFR\r\n=t0Vr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPIP7J5K3OwZvEEauj2rFAfwWVqJ5RvMltzeraBmM3JAiEA6xAMY6uD0wDFqV4Ze/TEVcOSS1+GHNqT38jdMBfsQUQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0_1623252154889_0.12594209700771763"},"_hasShrinkwrap":false},"1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"581160f7c98bb9497c0df77ba34399bde5e68173","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-0NhBQKWuAfdU6oxiWlvJprJ9oXGF3W+/xcCue1tg1uU28gXFHZ7nGOEVZaf8mQRMjpAJKoyfyXYQrp9r6PocqA==","shasum":"4ec0166b55ccd8d54df40d972d6df932631c53f1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwdf1CRA9TVsSAnZWagAAQ3UQAJkc1gPE/fW1k8FI8/h4\nnadp7qk1kqddrWRBkBiJSqPCIGTJgw7wRmZHReI/L5WI0pgYCgLFIlB9z+UU\nTl7YhbwqPTDCQbwqjpj3EFNpOe7IfmpxPNStdF6CAgCwaZqu1KhlHiihtabX\ne+m2haeL7PNyVn/aaFY/ZE4JCLes93LjnZrquhOurBKgMXw4+UFK5dq9sU3+\nMjpTAesRhTDNb6fYq2zoZJLer0lK2v9LG35jf3n14q3i8SmsUMAY2SwdAvkc\nEc9UiwNXQKtf8EbmFog3TsQKS5qXUpBSK998BBD7uWySlOi2QnmDM+a+z+OG\nAIybhJ45Brc4r66HohAsRV7Jd298HZ8Ud5ZGyfjQVyvhQxr0bwmSJ60ufP8X\nVHiXPLPkVDeoeRQuvSskAcjnXaGJkhWUoeqocT20maCkPsIdybHWx5ZPWJGS\nwqXG80CNQ1PfF4v3/xFiSNlcMN3SHTS3ZzRqG2iweQP4saTSNI198pjTrhqu\ni1u4XOElby1rHOZVvLLkap8FxoKXQAs7jub/6fhEVfBZWZY7XaUs/Fdbqetx\nlTznJckrx1p3Gaxcqi8rnZl1oiKaozBGamQUR2GCcVoh5AEnxOyHBTLicEmz\nNf8/+qR5tHtvfA1QJtYlo4U/X8wq7cvHKeuxes8vU7Y91Jp1jvv9hpHGb7Kw\nVWph\r\n=wxvx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn79lEf7T8e5P5OrgXfw5HaPTsgenie46ZRPx4kA3flAIhAInMAIqJdog4kLKV5rxvj9ela8cBhg1+OT/4HZ0rjalL"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0_1623316468868_0.7610167335253164"},"_hasShrinkwrap":false},"1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-YlW86C9rtjutC1/aiFiAQZ+50alUoSYd5sBXzmVzu4304W2K8UMuZr5TCrJM2U1Z/e5Y+OsXbkoqFdotumIZAQ==","shasum":"c37f29b9b27dddc237676645fb239e76202b08c2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwdy6CRA9TVsSAnZWagAAkLUP+QC9P/5rO3b55E8Wd6Iu\n/FaezcxtlyH0yqOlDtqjzWvZBdCteeyiu7lq8czAu4FB6fQdpBOE2O6UAw7h\nWnmNK0Tr297KLCPDT4UN06CAil6k6sxy1Fkq0K8n2gyIrBJc8uw+9OfiyBGO\nmPr+uWVp1GXZO9LPITkYKJLYwRyX0tqxN6Ztf2NXMp95UPkGQ6diruq5WhSc\nibtX7e0I2bEGwPVeBwo1F3DcxPCeissA+KgC4+Ecv2bEymVYtQ+YHgpcyIdO\nt5rFejnfKzmGhlh8vyxwuVHQ1LR039eNwL/YXSpQEZdQedfnRMcaY1jZu3bk\n9fJcZlD6kh6EgsUqBSv1BeJUy2VGmQu6xuaTFWmWwCGal7l+YZQy+zpofxGG\nrJhaxa5V2kFKmOB/wyYztjc1n898QWHKusPLc1ea8NmUTCGVv7N3HUAMfkYp\nRu6r/7PQsNniE1LLBbDRuLpHvwsBf8O27rJTax+6+JS8COkEBWsYDoc9Ne/J\nsESoS8LA2wUO4tEd7AS2pkNuDK0ZcDwNn19ejFf7KuWBgwHeU4ZRQBeor7oZ\na3tF8hEfHlUafnrYPiQQSWGIKT50lfmaT+pbROOzZqJM3lC5CUpL/92u/maE\nCUUKoJyMdA9AONwxIAp4jR/H7w5DYEsSQQsPbCaTNCp5WkQ3sUonfvLEduay\nWRNs\r\n=tZzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSWB8NzBAfA3Nl8QelbfQ/33uhJBKGdVDXCMVhhveENAIgI9M0y71x1B0mUpoOGcvOkjLcYw/fZaaHG+XIvxd7diA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0_1623317690307_0.2831022300859698"},"_hasShrinkwrap":false},"1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"020f8726fee86ba4688f86088371c1dca27fba19","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VwZ2lxb2KsMB65RBig4kowiaT1j/LabQChZt4xzXlw1ultrMuB3oOh8F8cBwTAzgVjWlwvruwBUUUIMDxgHyQA==","shasum":"63316a03c22a433fc633eb6eb8818897a3d6dfc1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgweOgCRA9TVsSAnZWagAAz2cP/2TqVSzpzGwQxEMKovdt\nCZGyliIRhMITH9KTBCkBvO9+fNa3xMaDIjMPrcOpkIgfg4ebP1A/IMME5AYi\nZMBFMUQc1MqukdR0b4wF2CLrejt9WGbiIwbsJvtSUZZqXU0v2oxUoEKa8udq\nSaPNeJgf8yF7LDRXeCnSNeNaHviQqzfoe52RLy7/UujLQJ4ElF3Pm1elzASL\nI0ZRyeoa3nWC+pdbMZ445iWCMo1X7t3ZBxPnYzv7XYDqXMsuYA7+QYb+46dM\nu7/6aea09htlfEhgU/SijK2t6HAGKuSHV67+vCKW9F+Rn+qpnNgqv1pd5AxJ\nAnV1k06PpHFxqSZIBHcLumym8HBW3Scb6IZiEGa8zA1s60QXNycm5reuEGB6\nhEUBEMNYTzWfPAk7ZWoiGerZkGeqLR37TVwmLD5KcZdCa/wp+vwF8Pi28PUE\nbr/WEMJ2Uec8haZEX+da7PceSox7EfVIh7xiIpDrx/M+UuxS0wjoUNZ+fZ+l\nS/jiHQGeip+lBGlhzOb5QSKeNkcpm0kJqXDvjkA733YWQnoDunbU3faqPK0b\nZYE8C/8q0Gah4cJXkzQ1PQ7kDc0uVaBtd5XnCv85oQmp+DjcZ1E+SsAp7sOH\nKu9mopKzoBpZC6I3fENevtBeHdydf14Tq0Qe6rlatovnpPP0jrKmaK7EaLuv\n0Bqb\r\n=VxaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo9wqnxFilMf/dd8KuYGzVkK0n1CJCMKgzY1mGxqyDiAiEA/F7zpBeygo/a/K0OLE25C6qHmaWnQ5z8tm2B/apATbU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0_1623319456337_0.7923548536743663"},"_hasShrinkwrap":false},"1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f64f661c1cd7be2304269822c7534079a2e50252","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-fyxg5lgxctkh/tT2wo1pKwnBRYPaYgeyK+ivg80f9Y+DHMEjCy+fBX4AnoH13QVP0dcMCJE50XEM6QRQ0nyRuA==","shasum":"c692875aba17e480ec0f61fc2d01bf6b311d112b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwfZECRA9TVsSAnZWagAA1iIP/iV/j6AxU8YvLsrYticJ\n4bgFXcHKq2mqp9jqyNWmbGnlYLrfVjf0U89hmoqZz8XW5+CdaK6ZvH1jzcer\nQHIAT7epYLEcjhFLE69is6qHfTsqfw3Dv/8nMuswSOMlB9A0YU/9WzMR4XJy\nlFF0y2RPLqxER0ziCOLRiKpkHy+MUbOh/uSV9RgMlppWvJ8Qu0XocyOJQTDN\nJG1FC3mzqjgerSbLnXjc2KAR12Ece4rtoyS9TH0Ho5sp1eB5CwYoCtNpYGSX\nH0BD7N1bEdo1VVFdzzRkj7zsCaUAiz6fFJNGxWWfs5r+28okPNLsyb4ATmTy\nl4vKWD4K4S5mczTOROOwmF3UBjBctp1zpuN0TV7oa/hzqUtA595dqLYmBuHw\nR8Fz5X9McAWXrzOZYR3Snq0eEE912HjwMh7fsqeFshqqMopjzwEE12JEW2ok\nmmnweGhWB6EQedORCOS08mO8RpETI3SInOGfxzINEocCdAG/0KeJ4BDkHTfq\nv9NNC9k1igiJhkkLOQ/iNz3Jf1bLbM6GB76SIsNCZBBEv78Dg6q1vUdhwc+m\nrhXdSj1CAtmgMT9Fsoa0v/Xiqzw59KMSGcPZAEvm04citMtMVNWHW97FmQJj\nRHJxbsAMdhB6puAUY7DYYJWp90g4xqcFUxm1D8m/+SoTRE7TqKpMiWdi4mYl\nKt3c\r\n=IRcz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn60DbV3hbfdCmX/peDHM0KCDHtBFeWKotK/dTKbRaNwIgHF9+llCEhwJfWZqtPe24eMspbT36Yl7XPJzVilhbS80="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0_1623324228174_0.03736265804872252"},"_hasShrinkwrap":false},"1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"637643c6b58eea8f13b814f613632fbe70ae7aa4","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-F0t+dmZnYSiuNvp67l/h+yuRRRJx72y1XqY4hAfS+kn9qWVT8GKztEc4fCr1Hg5qtMevbrQWq4whhIcaLDLKwg==","shasum":"3fbc400332c9f47633c33e7985fb7dde54b9ab3d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwgTwCRA9TVsSAnZWagAAzUwP/AjOXRgv9DtcSiqPHSLF\nZ4vGde8zt9F+H87rfK3JMqgiApYozIuxZC2qbRv7Gsu4081ydyjGNCJL8cDJ\nQIBdDYbmWr8Lb3daNxKUIIe7BvYlYHwuxhVS5+uUmPc0mtej9ScZ+4h6PVco\ncEfVkTEg8Cr13sIEOthn3kQJYtYxcgy9aFGfuSFFRs1pMM57HcPxRIHpbTyR\nLl4LKrbVsH4f72iky+P4VCM0ZOV26CIIXFHzY/PcDGRDpXvCsmZeHhq/3avD\nvpA51m0i6fBoQZYgl8AQkhiT/SI0PANc+UMOmrUoNNxR9yTVj599GCZckO5e\nDkOPekROlXG1e7c32WJiRnwDDysMkgV6Q87ZH+kwTI9GffP4nXGKtm9kjS4p\nt/w7Pd3XOpQQ4g7MpssaQFppkrD1Lx2zsOReItIkAM6g6nrywgkYNI3ZegLv\nqdwhPNtO9clfxFqlzkgy0JVdd9Y2tC43jRWiFqR1dhBrrcO80VgmnF/fPxiz\nYO+CRY4rkrFNNACtE0/8O3RWq3G7hCW7EtjghBoO+AK0aBQhvV3Dau7Sg6Go\nKNxhM9V7b581BL5I6XORAOqhpZpMZh1ecicXoFDQbsboApmPUNwj3YnPvfQV\n8//K1KhwSlXEavRpIfR5FB1rT2lPhhJ26rzoXuQKzWuoaKR6WGqhYz0LtFp2\nszo7\r\n=loml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5Juz4mx4bhVw2km1BmTorzOL3Zqyk5HC3num4nyubgwIgLD/HUj/3u/m2K8ZHxnYghG+hV64h1lZzcmwwi5jmGDw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0_1623327983832_0.2253561708327183"},"_hasShrinkwrap":false},"1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"112a15f547905ee8abcc5b007b0b30af3cb76459","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-SxnA373EqnA/MZQmg78+Vp8DVCif5AhEw8/uSmRd6pWaJ8lOAD2mHlimiKsEsDVOmcpJuY033IyD9l03TNNTOQ==","shasum":"d010ec7368930cb8dca5d9cca0c7dcd4c4c29e9a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwg+CCRA9TVsSAnZWagAAdMwP/2tSbMwKcSLtz5idzdSI\nBoSEG1mHBJnu1OHcIglEhlv6tflUqvSrkkj5Ylg32xisJ0oSxIdU3HaCY2aE\n3pMCRILKi/vCPRcXbURMu28DoFrCJrycrLUQODqPd858ufpkdguoS0e/U7zb\nLRawiP5Zt4GbSZiUXWx8jVVhCbCleyXFkV7e8fIjMcBSJ51vBtnPm42xiysU\nnVmpQoly5T9GNoITRewmy+sIMDk3OuNNGzZoLIs10nZxvc6dskI9Vw0ckfL5\nxQaVRfb6p7uldsngfshcvfM7ZJL8drYlU9uCGVsEJy6hkNQ6zKDdpZ9Vrr5m\nJlw4XNKoY5EbtPNxJQWepfYwN0rv0/2lwcs7sfKaGu4V4vqMshgYlMLliUij\nkPewqbrg2eUzAAYCb2SSywDijb1ZA+h6bHAAZq/XNnUrguU4UaNysjf5TSVT\ncVv6qGdmHaHJzi4xx4zzPrQfff6OnD/46faOGjnugygldHqIwN+h1GAyrOF4\nUDcWBcp2c9A5Omm4mOiGnb6MIwGsfghSjqlht7FU7gQ8JCwlxlRhiQ+RwaI0\nywFgiON9GYIUH/vOv+n05bHtBP3OJH0QEIDkuMNapusnZougFwMCjk8yxCRK\n5rIRA5MEl/DuPrEOBeH+v7BiS/rF7sisyoGIUWa7Q6vWN3wezClkSoV+ATJx\nho73\r\n=kdke\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbBEF2nq4iUlaxpERp8mG2G0TvIKVZidDLxP4zbYzjGAiEAlDYs0MK3QOldYaIVlK9DYLjFBgSO4P+XZuF/exAcaR0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0_1623330690563_0.22060573953760643"},"_hasShrinkwrap":false},"1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"cd40b13060db7c26fb134ee575f5aa6326fe1686","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-f/67suJJFBHLFsyBpxI4fUAi7cEVhiQ/rn5xZ4uaGCMTxoWagf36ctw2f5LXUVbc4G2F5D4ra5OI1tuwTWaeVw==","shasum":"888f927d790d8385b89304361e0dde27a2b81bee","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwz6RCRA9TVsSAnZWagAAGGkQAJJA8jKznRrKftsBD7I2\nWEZ9ZKNrTG6wU52dZS6xHh8ABEnQXMhZogPRKYr9hLHfs48XKegSGzmDbgXp\nWVJ5/ljnTD4fBK/I4oQwLK4OaBSbpv2rSv44EVeSoXuDeBWxo7SaUbGvCYFN\n6/+MVwPRhzGel5GC+tabGmoDjVvMqMQObBCI0eVwSErrAY9ngQ5SJ46KDV4s\n5wcVTNGyqwPLtJEFN6pFAMwL/RA7w/sstyyRho+kKEc+1eZ1WXJ0IBlDd6vj\nFl6W1gakpWW2vadNMmhUjN5tNysZJKFMmojvGtt4IufDoL9x3TxR5A4xKk9E\nlPw0bTpUuBIIf9HQwQOiuhHt8qB8CkQkjgq83IQVKhbEaPGFJNYrcR7vA1A7\niawkF1vKe2BaWz25bx7saYKZvaMgOoWH+Eo7orx34ZyQ8FhNypH0JmWHlomk\nxaWtsE2v587iiinAg1tag7LmzSfRh9QqMboSsjQJrtX6I312nrBkBbp4y8Gt\nRkCnf3e+uuc3Ye3K4k7uz8MsGGtjeh3GOXLGNLeqNM3nv+nVUw3jox++z03s\nOSogtQQ3WlhQNihbYO6eatPFEX/CTLX22m+eRf7BdxvkpQznBa6w0SlAPfVO\nG+nxzr0lccI11kwzEjYJWzQBzszFxLJSm+FgA1Q8FlVwv8ZbIfWTuu1nr2Fp\nErfB\r\n=UW9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKyS4LSrp60Ei/OFwNbkIwrkuiWjWjDEcecGIDrRldcgIgZsqq2Y5Ln3VcoeJISwy4FTadZwMNu0+UOCsV/+O1vbo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0_1623408273645_0.4695298134637651"},"_hasShrinkwrap":false},"1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"73f888aa2f534f6b3c7533d430b475877b006191","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-7CEgom0+XJ8hNq83qVC9jgOyzCWDlmbnWQFQNNyiqtTMgleZ/w9e4uenOJgAliNH64tLNBlzKX8n79D/FW446g==","shasum":"5653d2a02fe751b4dd9248fc91b1a5edf658c42a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw12hCRA9TVsSAnZWagAAlIYP/1k6JwlJPTbcG2s0nMFC\ndq9v+0dFxTtrWyN02RwtRI4nGbMTYUr89C3+Wt4nfO3TogP1yDTtBnVfkB4n\nWkHA63Wkyp+izs0g7+5/qACnyAWdEeo16e3CtajSC7uhwpMXl6/j+g0297Nw\n53n5cHCG/IIAQFnOr8H3XuIlkLrOvJwYB+vgWVW9QWxIM/iP8l/QegMx/dEw\nWKPT4hqEW2MEJC0ugeGUQnJ1XcU73yugEvqiZwnzkutZkVzBattH7+EhUVW3\n3BSW1PuOpuQjx2nK1Z3PMSadRUL0lcaeVsi7MCkEewhHglwMHJziooObpgt6\nvrgj3BeepbeiaR5nSCSuDXg2kkvKT6qRWW6co0zxMxB1uwVnooZPp4/R4ila\nMgjTAgtBYJvzfE3yZQ7/bGD8cQoZLWXgmwmaBQDcwzZtF5MpSMmxQCUELJeR\nbubc+QOCz0/VKlsGqSocdIfbk9mONfhCJ51ekDVVLFOl5eMLO16OsF6lsoq9\n17SgQYH4J1kasjTrqErRX5DzK9RzK4W+meuuAuq/k/GbL3kam+owc8jNf7vt\ncNkIxdvVQgJfuW2geqthPZt/pNYWyNzC8VmrAVEIGSRdrQaYdre4zfqZ2OUr\nnFpbRJ+B2KilBXjVFA6Rm/TBGweog4b47Edh59sRUjrwptA2WxKdgXHg2Oyb\nZvac\r\n=QIHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSdXHY0ocDk0CDyt7V5Q1zBEQQT4AXXGk/E0K2rPp+eAiEAsiSwhGydS2nL/1hK0pGKZKTCxuEvsh6ELMC5ViBLJlk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0_1623416224804_0.7938294776473367"},"_hasShrinkwrap":false},"1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"b124f65d97a4b5a5ca41b398a8745e2a49cbfae4","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qjBrtYNWRELGqgzVKJ2+p9c/jiWLyGCzLeXAmrEaLE2nGgovLjoW0g25wiXYCt/6NMySkafg8jYQ4hwDANlxiQ==","shasum":"7ee1923bef4007951fa08a75b8d4b2b22d2b8ad7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4RxCRA9TVsSAnZWagAAyNUQAKIKNEFtC/5a+WYIUN74\nyBbKxid5xVtLtXOGwPcHFi5F1zcDNztAj9pCW0Kq1KnKDKO19rQyCZMirMKQ\ncBVyssIkuH0xYpSqH/rlOaSIHSa3X5WVH8i32aOZ4FJ41nrh5NRUxnU3NWvW\nE+hpj0/hGGH95WjJ5L42qlWzHEEU/dtbWBAZLFmyJosK7TaGhQH1xzBMPjIr\nNkFx0jL02AAn+HTnLpF325JT+yOCTaiJsCXEv1Ol/m1EiqESV+zmyjCBwGBg\ntGucB5+Hr+dxWLL1R7JwendpmDeYUl/ZH2KMW8kvu58KbK3rvO94H9DIrqHl\nJxP3wWP9EZKnXyutvPF6zWvrdwuEaUk2rxRYIrj1fuQHpYEaiiKuLgICs5wb\n4IOdtXhw06MUNGNiHKpB072BxRebhQoKAM6+WxXFtJ2Zi66iismCtsasmYUU\nL3WLZO3C7G3n+11FDdkpolpkv6yqB1G2V+F7hfVyrl5UjJhXI2DVX3Tii/Nr\nub/x4T9Bv167bI6dYr8I1CErUG/XqHN+v66J9cg+yv3b4U7N8HMfMU32ZNK2\nkJVSweJw2dWWCSgJS2VB5cPfeWIJmyhYdZWDCYyvf/Ij/LluZtH/07Xk/656\nCvqu/fjvQDK978TPfWHy8NqHSQejw4PDceH1kAXf/J2VuZ6ToGmnrJPK9X/U\nB3UV\r\n=2U6M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH111WvcXJuv2POtgHlbowuE+l89r8hXh/ex92FldmbkCIBhUNx0HobWiU3Sa2wWCrj7yvgLEKu41c9V2j9GYPnew"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0_1623426160957_0.6413898972514764"},"_hasShrinkwrap":false},"1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"a34f92e1506b0a014e6d40472baf1dd25b3ede94","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-513HCclXU5PcOjGEd5Oo4clk8TwDX4n5l2c3+4j4/8ZyoiUHjs4jhxEQhYy3NPgNJgbzpKY3ldFWK1TR0d1YGQ==","shasum":"b109ed8f9acf1f70a627e859c9de29acb5bdc8bf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx8prCRA9TVsSAnZWagAAL9UP/0mdiogUUfT6c6A4F3NT\n2VUB9CbPHw293BYBQ2Q4PT2EG4EfpPhm4s3RK++kV7KU8aa+NNycbJnPKbQV\nqh+9Ap/xwsXbSUESf/jIFajXhPNpRK/sWhttAllBOgxEexJSMk6LxGYQKZ0m\ne7C2O4CaHE25Dez1snEeK3UnwFNDo2U3sjDIgDL8hSByO4efAjp7U3U8aHUn\nIQrSaN3jKa60+7fRnpbp977scN9rAMVXlUoS2ipahMQgczySKZh7pgQ+Y9G7\nMkX7lIxF0YP8K9iwgl3qBloBzviZDCcoF2Tn01wVyFBwkrPWe5yCzeqrCeSA\nAGkFntGxkHIaEaPErBY/wfP4AWURktpS6HURV2w6qyS7sjerEHxc/IYYRcgl\nY9mFswJU/hqzTbNEJRNliEmhEu7mZ8zzZWWcxk1p6ZtcSDILZEwzfnezDkyp\nkwKsxuUakECGGf6l7b1WAco3vUrE688rlOLrrCzSYhh/PIXpkH7qapkbTlAO\nd9w5BvLwS9cur3tHJ4l9wIBh1f0e+cpOPyF+1N35Yyk2szsoTlFD9MI8R/z/\nds/887Jf8tN/v8BN7ILMoJii7bjNnyNznK2pLPwAq3Sz68tJoogyIPDyoyqn\nMwvbQQXywxT8Vts5/SWKIdHvy7KWuvjjuMh9TGdPGjk2D4/KQWcFv1vV8zHc\nV2XJ\r\n=EeSj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4J7bmlmKlDa/WrDulthOX96102ns8fli0pTh2g25lZgIhAKMBFOoVN4f6YRCQHTSs+mOBsiOuohVPjSjUfyefUj6Q"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0_1623706218959_0.23667777908823462"},"_hasShrinkwrap":false},"1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-di8RAs+rpR/KkXxjfEp56eyh0Vr28VCsul8gZwAObPpiuTMnT5itaTXEwTcBwTF9vJ+q0SXNs/fGM4QExXVP6g==","shasum":"ebdf4f810212012fe542d0e843c0808543e4aade","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyGVdCRA9TVsSAnZWagAAFDkP/1JdAKYbXptDJ7dlNNMc\nUXyVNwY5sefQD4gXZc33Cti7+lgYbK3hBt0AYVNwRp+poDgaWtMRPfoaIWVs\nUFhufXEDUR4QIgYHQgNf7D57TcC1XiSGKLzkq7/6YOtqvRnwUqWU4ZkRk2YD\ne6wqmhlZNmnKHorFcqJ/g4aCUigyNoKsthRrHLMChyjB1OcU7FO8vss7YlKw\n5+SN8gRG44bj1kVX54b5mxl/FtVAXxkVxpc/iYpM5lcLQzRrsgL9E43ZqK8b\nwmUmJ/zp/AY4HxgVkVwzmUDOa7nzcADyQPCzY1JU7kLW3BbrQFiDEPSGKIQ8\nOpSlrkVCQcApoNcMWlM9B2NP/towfBCiE6lXQIwxs19lSOwBDrOAECmT2K3v\nJAm5LCXFTLHf+MnbjjbuRXC43f1Rv0SMJbxe2ph0HFQ+weSO/VOH9nxVn3Kk\nIfVqYkb4wDyclZUXv1JZtplj2PFemHS0Z8zgbTY/E1pIcqV1yIpKOWYupB1w\nc1fKiU59p4jU4MFzWz3vf/puCYuPoJR9ALxU5mS3WCA/SE1FOpu45RjN31Sg\nPaAKl0uVDkgmnAuI1IngCkL2SRxN1ew8n/GEt8j61bKb6rJBExzb3W3uPuYN\nQZb1KlAng7o49fter/0nKdyw+KVVzQ2oEA9o+YAZbXk68e71XyHdL+Twgom8\noTMJ\r\n=0Kde\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS04GeQKwTIF8j5ATaWqMHgKGARpSz+FQ8GT6idXNLEwIgYcFK92wGOe1FfgVyMLrgDZGvbXRDQY6HBHsB5cHjjUo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0_1623745884979_0.18560251457262322"},"_hasShrinkwrap":false},"1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"facf1d824d787c99d4f7536d7f98a5d2fd7a27db","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-2trBuSMeZcWxS4GEpdT57oUthb9GmxlQS7l3rPZY2yrqBUa9Cgumad7GTPqYZbUXyrlDn1sdsQxQF7hh+PnlZw==","shasum":"ea4b71c64855b06ca2e4f0e0ae7d086e1333ee32","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyJ1XCRA9TVsSAnZWagAAU6IP/3R08XEit9FwsoUpUzt8\ns8ZWB1G8hqmR36dMYko9gB0Y0Asfng630t8PfNbFlwVQh6ODiRms9IiyXXPf\nDr3AB74llbMmH5eV48nA6HuS8RmkwvbrKmtxTuL4kNOSXf1s3SY/HpGZKnft\np8+F/zlzTy/Q96W8+pOE9pnvAwo1r7XStbUVDHErE860LTYS1aGXKhi4Oiiu\nhXJm6+QTzAcinIIQey4OswKm3TQl1HyNZhF0khwHgWPFAdUa0JcukyMJAacy\n1e+f59wQvNECJNIrqCd5IaBLqifWZK1D9KdCUQm6+0w46PL46nATeGYBpr0m\npb5itPogZ1/hsEDnvgIKtlq2/XgAK0W4Dj9f/D4SOsCLWxeiIDYfXe0iktyd\nxSqS5/LAGI5E9eugmOzSWu1hkMTtlz37SzIjwWcRFWb1eQrBRemwcCQr2TQr\nf4ihZVkdPYJA9AeXN8uHpm8byMRGmDpRupLQVORsaNjOQZIDH2mAgrWh5Vn8\nvcOqrY6iMIFmrOL8e3MoyJyy8kDwxx4Xs3X82++braLEJaHPQK5F8QLbCN9Y\nTZWv2nxeDfyljd8FbTYddtONtc+YPLOIXrqcvCIK0T2kYDaEvX4rwGqcABv0\nikWPZTnjbzpmaFlYTXVUnbYiItozY88v3LUZd2zMiRAhXxosTK93ojn583j3\n3wkc\r\n=jIF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMTyz/TdWGTTBEvD5o1JW6hIhBpoiC4aLmASuMLUy6XAiBpPXEEFbDr+ejv6op75CI4Z2oSSTnqTtRKNsawwTl6hQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0_1623760215654_0.6141394890958787"},"_hasShrinkwrap":false},"1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"5d08e00bd41563d14d5c71c42f795af8dcec3f4d","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-zK3z4fziJhRBhvF9eZz3XrHFBPrmItgHfYWBJvVeyLu3sLzz7kFvyInky5TtJFhCn4kkmE2s3aUYLplACNrXNg==","shasum":"4ab88091d61fd70d02061f4446917be2476c0f2f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyL+aCRA9TVsSAnZWagAA5DMP/j2TNbQO1niyVRIxUL8w\ncNvl9Ca5C/gBRGJ08QR4jUbSchhaJpk7zJNCyIrVA/GFNcsV9KoMSAoIHKFN\nv6g8v1tlwnZ7mmCptDDtcGXHQH1iSrrqxhOt792Ijr9TvchP1NRfM0eSUTrJ\ntdJALtm/6kfVL4GWZKLsgacGG27mJ2IzG+73gsOx2uMrmvUmbWdAFE21OTuG\nw5EtPEkKlcTnxWpfv9vV8hrloJy5vN4GOW8EjHgB0MP9+VLucPCb6AphO0IZ\njayx+2f4uK/z7f2xVLxRPbMUcXAr+j84pod28jDtvY7wGVBoZLRSwm2Lj5L9\nycAW0hw01Ttox470NUzoXLWFiFlbb/CBydd0F7jI+AXJAj1T175yk18IwinL\nUo3g1vb6uy0l2Nh4y1yurea3Oz8NOACPg90Oy28IpSRZ62kk3Y4gOdu9bS4f\n7fv9h2wWMGihVJ1Tc1FCMxroO/t3juANovCTl49/378LgYXoITJNqddbW0fs\n6w2kyhPV0a3j74wY5Ag/42EW7lCAankPPSfb4qPnPwKnB/4Djbxb4hxhW5HV\nQk3AgNDneZ3UZ/ELZ28/6lcNbKafFaeVVh/yKXzFm7TTW14PiCVEj9QBPVzO\n99JbVdWXuvhoy1Y4C792PAwBBmLcJ8Fe5orJDNCMUcvdnb/pqOKwTb9eCf1m\nBJNV\r\n=KdqD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWN2tepF1sQoeI/U9oN3WewsCi5/4jsDPgTfdpt8gA4AiAYdQwvSDKzj0yMTF8G3KejEQ/Nng/oRIr5M4EM8Yg2Gg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0_1623768986441_0.21793908836515063"},"_hasShrinkwrap":false},"1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"529bbab82df9dab80c4df912436f033beaae0d80","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-rr4HCG/H0+rmzna0myRVM2r37+f0dNJCpDYBqWazPIqLILO5relnBC0lA+U5eVcETkqgBlEn/stKZ4jEQ7tgKA==","shasum":"425ade0129c874a7fb169aa6282a4705b4b48d82","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyh/tCRA9TVsSAnZWagAAL+gP+QDNgLRW5viuTOgVJ7xx\nAZLCbhyUgd5BI2VkyMzXolU/9wxGZTcHMeC9KiYlz4VcRm87/NT80y73zdrv\nlgMuyPdTeWMfbtNsLG/9SaXcZw+Axl+u6IiwaYMQ+4WgwtJYbPg9Rs3NTDIi\nBE+1mX3WrZjl1EaobhdttNBrCLVe7q7KG0ypcHPYGG0BW2qeJ2VHg/onleqb\nfUUKZTbGqJWZX/cxQHiHCO/zCh+J7wGS3A3sD6lhIznFawEDcUrCSc/jHXtb\nxtLz/1aJnQzG9YL78P7mrSp9n3erAi1ImK05RbYP2B0CJAwuiRkYCRG+mrYy\nMT2o1W+AAwmevcsEDOsJRqI2dMhq5TNftxDG9/zqRqCvgYbZvZiEgLmHryIW\ndQ8A+xIQPTr94AUc5QdpE39EVzY1Z3hEqkPznc8zvGQmEJpkqSWPyLVQunsL\nyDfrpJAzRQfhubWhIWC8eBClqhQA/qSJtE/IxrIlFEYNTF1TIHl0tWYwxUEh\nlklrgQOQXmnlJX77+VWnZELt6TOaKv6K5SyxkATPiydy2Ag0YEzYWdB5xJoO\nMkdZr47aE23PCZBjlVSearqfNEKg+FeE6v5io16PlFPaWowNQ+0/5ELzclMB\ncQj1wRwM8HKOCiOo/6KZjudqDTRbWi1F0fXTm99uUEqFBU/8K1KL6jPgxLY+\nq4fH\r\n=i4y0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyZNGR0vaQ+eH0X/GZRIOFLY8Kz6koh6LdOvr8YtIJagIgP7D3HC5z1JfkQuP2Z4e1/6gfSoMyu42o+JfVKEUa/1U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0_1623859181265_0.691388621324466"},"_hasShrinkwrap":false},"1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"73770fc8f9c019420f2ffbffa84d8224b5e754d2","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-4XeYJ9zaB2lgJnlSzfG9mZwgIzu+RRy45YKdPL98XWyx5B18YCT+PnMbe99rt1hb2lpD0cVQDxjlU7Ll2sPDGg==","shasum":"a149c22552ffe20911e1f3dcd50837f8e3a1d66f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0.tgz","fileCount":103,"unpackedSize":528518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyxNbCRA9TVsSAnZWagAAvAIP/2lzVRtd3s3L105prR4b\nN5hrkxDH4J4cNlRddW+yDToWcShwVvUIDiL06PL4wlKEnkSSw96HirsR393D\nEZmtwpVt78B/V9fX5l9fVv6m83XuTE4JY6qG3F0wiM1uQqmtzp71KbW37YCL\n8Xit51HJfHJuB9arIXd9JYAcuenzVyMkbT/flxnMidOqmzsX87DAN8HaRpG/\nEnygKVMmxxH5rqbTxvFTvubMMIbQS+2eTo5/G8HbQnO5r6S7u2n/3qvgyDwN\noq64Ipl8DbRfBWVplRpsQHtEmuuakqoUjxtNCoWwQtcDJp16PEcMAFXpRVgK\nbeLXF+Ma52HmQDUJN9pTqwZXLAtT3qce3sYTspolk6zBdVk1BiSyjOYPvQMW\nQeMmMMTcC5aTzvJXgh7ntBp1FTY3q94/RGHnYMrldYHtmajFKVj/AwPJAcc2\nbHMeKZqnqP0IlJZkMhCLB5RoW4g6C6eQAwtHc2IH7YpIHHAISk4xnE3ExczO\nVG/DFU3GyheqZtW7CkMB1zWLKVDvBVk5/4eggB83Ws7KjisM6IgDnfuwJAR4\ntiR9NWmUlZOC5FepbAmY05Qp7HCSGXQMbxinV8vBurgGJSVcBiRam9beJy/E\n8fiIayO5VNcnuleNGzFdSYJhJDb70NmYf2+EmLbzb4vIkKTlPR41d6KOtEFM\nylTN\r\n=MSWq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHe5Z8zO1TmhruNa/rlPyh6mx78iCLFlQqTXfj7gPQXtAiEAm0CfsAV4GanB/E7biX/4Vx7rLkHLPnSDMQpyY+dnLSs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0_1623921498571_0.6816531952817351"},"_hasShrinkwrap":false},"1.6.1":{"name":"@sberdevices/plasma-tokens","version":"1.6.1","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"336a351d928065490e2e87ee4bdcaeec8c7b7e0a","_id":"@sberdevices/plasma-tokens@1.6.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-qkbiYCp9F5YBfVY3XNUkkmEPnRiZRiVFR39hH4hP5okfnSuNq28hKOx9fJUd2gJPa+upEsfW4bOlJm+Sq3nS7g==","shasum":"b191c4ca511c29179ecc9f66589b753bd5b52c71","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.1.tgz","fileCount":103,"unpackedSize":528693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy0lrCRA9TVsSAnZWagAAfAQQAIGRVnAAZULcMAWeMQ4Z\n1amizalZXaCd3x/p/NxQM+yMuQL+ZND2Qph4Tcq/5NKxY7yml4l+XPFmobOz\nS8Dp5TrilI+Ff0/uMOEWrAKCBKw88ZvaihpsrtBiXOLAvS+y+DDZSHW3p9yV\nC93XrIYGvWphDFFKpuVI2em5eF6a9CoPsTRIWXQjyXnIo7wZqhQJlGWJz2ZG\nRXbXGDq3FI+Zde6iZo02K1lkDJe0Hx4X8z/KRH8ds7Xhu5yc2c27cbeDQlXB\n085kO1qGSvhwft7p1zb6qwwLYYUPIvpm+S2kW9HQlK9o5VV65EZfKjz9bguD\nPsPPwIOhc6fSS5hyTP1bXMMDs8rybuQzp2XYGTRjQiE0JoaDOApyGqBD1bv3\n4KDS9k/4RAo90H07gf7K2hfQE31PmJYISSxa1zKygiiEIVAxUNuzW9wICDzL\n6BA+spe1qir/FRTSk/SHLwffe4R1KCWKsZsdODw0+AnKv8BewJkEOGxkZ1Ba\ngWJ35lZnm4Pa5VWGtEFKGZxALZ9glsqeltmABzL1vxdGqq8g9SSxmyneUcdh\nN8vbYoIE8E/fQ9v3jQHuothUsxFssoKxrm/f6fjs+Ge6r3xIJGk23hkmcE3D\nURf4xkFrD1H2zRj4fQt52KOfi88au89UF1MwRoLtFLomNE5v48Fy4VFiv+zK\n76VQ\r\n=rTq/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZACygnq3z0Vqv7ntEAG5p+cPRK1VuxdwBbl+m8awgrAiAftHCJOAv/0uH/C8BgKbz2yzKU4JyoxMqqaPn7M2ONaQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.1_1623935338524_0.9711442992736348"},"_hasShrinkwrap":false},"1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"190151a2aa262474f2bcb99251182a36923e2ccd","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-dife2qh7HAphCnWhOooL15JrCc5ijE9DgAWbNiNLwW+s9UaT1euE44ctx47GglyUDPEUCgp1VZU688KLhhFEOA==","shasum":"6d117d9d8be459cc6a71501d5cc827c72ce27dcd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0.tgz","fileCount":103,"unpackedSize":527621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzJzpCRA9TVsSAnZWagAAiR0QAJY8TqpcTD5xbDpHEIxl\naN2aoX//x4abo2twOs9HdHmEN9uUOHkDQ2yqjeTBHeixjz2MqhvbYd0V8xE2\nvxeYJ93Co1oKHJfFzBBWK3qH2mWQyg5+8elH0xz1nfQlDuXh5gGIzajc9y8z\n/5oX1ohjAkYjx9EwC1kow4FdTAkAqNmEgNSl0yWUK2oG1l5IMoONvbXPaAGy\nLrDTCPVIU3ELYAuppuMUzJHROo6iMgKOXg384UTt6obDNzBKiaV69yQYdnom\nQkEbJjBVsSNwpDuDmLr3+ZrzfaGGg62XDv6ctEXcC7MPRGHGyWz90XcGnTPJ\n01htdf68CQXFD3Ausmxt8AQQ0KKS5+4kV2YTjOnKpwKIj2+h6dNwjjQpoFJy\n4P3GKK3xmTLv0Izkl0cBg4wGCaYs0Itr/JAQxKJt6rShcmWK7vc1JIQWjEz5\nzNhgYyBLzv30cH/2X6pYR3bnhfIbdXH/QRsE4ZDc+Uj8Hv9KerBcMbq6Uf2m\nqxxBCoCOeShlUCx+fVlomWZmcKjsHIjR5l71Lyu8x6FBKL6TeXv64ZPGv8p1\nHBXjJO2v1daSysglU++rXldMO+CcXoJlYD8bQQ1Q3nzR49iV2ch85c1czhi2\nvIPBvxU4M6dxQhaSXxSJLCWrbfmkiciYmGmhinyut7MeSXKiJIj1D7ui9jhB\n0vY7\r\n=ZOzc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvlhBSh8GonYQ8RpoxmauZ3nyA58THJq/jBwGoRb8bPAIgLPrF15AZoz4elLfhevbuoMhNGhv7wnDiINXnQrhLXfQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0_1624022249186_0.3745110740315305"},"_hasShrinkwrap":false},"1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"13a8eccb06fdd863a45e832c5e1992838ae09580","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-gJdu1nLHjWVl0DwW4g6a4ezdgp8YVlEmBJfls2ynvyb/R1hhTpQHCjlFhmgCl/cTEWdbQCKPSpmKJjh3QNpjMQ==","shasum":"b583b44ae63e1bdde7a21a081d28af10cdb7100a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0.tgz","fileCount":103,"unpackedSize":527513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLJvCRA9TVsSAnZWagAANPgP/2nSmnuA4gbCWmQ9BML1\nxDk1E5bqNBdl7P9kAQDmBpTEZPapjPGYpwIWOwm9Zt7jqILvafZeRmEJKGYx\nVBznSKupvevIJQPLO4Rpx4/hw3oE067lSahe3vSz5og/1mF13FmEPfvIWeMP\nDDa8DH88Sg2yLZSGdWeNebQT8QFZum20HtTQKPy9lsKL5+e+hjQ7B1bmApGr\navR+rKA0LW2BibzORp11zW87LeiPCsm5w4sVUKfYQwpzUMzrNExONxr3Kv1b\nnTnUzQZLUk1+jWAy4+7tiMKTzBBY6HQAZ2mJe1iu8Qe2L2sLlgbAcaz/rSh/\nS1iRTQYOzppRTdVvZUaIq+wd4m6Atm6nq46ERoobg+IaCXPd5OUSRdZdhO7P\nFX9bmczRk8V9MF7fVQtrkh/TNwCRXi4k2AwlHID+K8rL5E1NwNycrXrVaZpY\nmc4ZUq8dy00z68ZLoHL6kJSgbJlIVkWqhY3SbFtEKTkDAoAxP3hkovMy+nDq\nE+CKAaWPEHzF601ktzwU5WD9m73wRWFmEbC8doKrPJl2QXTgHrptQPABk4kQ\ns2OanvifyMTn1rt6zlNVwICvy9Py2cWT6vFNl0yXTa6qR9hQO5pqTaJ6rTcp\n0bTt/BPrFS0+guoIiG3kgCLgDqk/LEnli/eW2UiGMMRcanED9cofx9pDINtn\nnP+v\r\n=USzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1v6HGhO+rRkSyft6IXz5RvRtqKrWDUAgqCEW/It2MQQIgQRkCvoM0avOMszNeMJVWdjvs4LRqOs/iZAyfFZAlWyk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0_1624027759024_0.3714510174845511"},"_hasShrinkwrap":false},"1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"d6edb9cf0bf97c0149f9f32a99da95569ae5093b","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-1IAjxpsGnWDEvwfAuHwTuaD0ZvXH48GMP3t/01Jnj016gJ/hdkoGLdLL2t6ha0tMoIAluAM9z4Jke/vXRPtrtw==","shasum":"190b7dc068556877dc35feed968aa0bfc6618463","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0.tgz","fileCount":103,"unpackedSize":595034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz1+rCRA9TVsSAnZWagAAU2kP/i65Qrfkm7MFoGoCFayY\n6uxLOj+4cMOdlmKwYpwQUMiK6U3P6NxVod9LmQDPopwv4ngSPxgS/e+gn68G\nyu7T+zgPMvCsCkbDZBg9tntxeLw8x1YiAFnPRlV/KieNmSeX/+4aAptdW+8E\nOkoSBz0quOt/0dXhZ3sQdiGNNzyGDa/Kd7y5kWCJDKnNBtwyo7CKyCZR4Dsp\n1Z3pN1DlrYl3wYfibqxGtnWPMxskxvk/K0wfJhnVycsf/FxQZ36PdQuSOgCl\nU4VdrRVzpPRgV5T950nLS7J3DcxELFJzhcI6prUJO3oBvbjGTdoIksgR7qMt\noSu7N1A/0mzWbwhacLHOCCKYsEixY1pPlmfd6GkdMbF8DdeEdTwbnsX+pS2V\n87HI1/SXn+Rm2RHcC8Tr/bZTQeXuKz5AcHJsEDPJVU9+1h6VCbXndtBmU2N9\n1gtpZzygXD5/JtUpxtH5yFdAy3HCCrmpCJDA5sSCPuRx/9CVOC8aUqiCdSzR\npYcAxFJW2neIkfvD6DpRoEkpijGVscL/lnGboTM9QlDs8iCQk+W9glIIL2mE\nAdQUEyv8vMJ6y++WPjlRmSIwQS+Kyl3XCCKsil3LmjEu9NSE1SBKDWoJltp2\nf14yKGXtWJYX/31B4DnWft9svJVJWnUwMJqWJ+6Aed6bgo8aklbIyqEAtmxl\nrawT\r\n=Epht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbe2YOImPEzWWCHQLdoNkoB9207SKsvrVwX9ZTDFDW8wIhANrMTZrd142noQ7wwTf3D9VjLX89oX7q2CUYrTg4aSWD"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0_1624203179077_0.5424944810807795"},"_hasShrinkwrap":false},"1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"5352e5c0c7df06a8d14f45f651831c5eb3807c01","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ssbH7ZGzKQPh5Q+14i2f08kjnhnY4lan0CElc6xVGlDywHtokO2RJ0tTxqoAO9TmaPO0u6JUv8g8DXqiAs0T9w==","shasum":"870674372630a3fe7e5e2dddfb280343ca161c3f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0.tgz","fileCount":103,"unpackedSize":595034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz3G+CRA9TVsSAnZWagAAa3IQAIsEdH83n33+OyBMl1U6\nru6gJXxl9u/wnkF9mOlFPJii8GMrH37P1abZzRLFCZViVoycOsYPwfWXhGo8\nkQcauf+BdYioQqR70B2SJvKBWji+0KQRsL4t2SYfdGt9EfdkamK99myfiOu2\nGHHa10muU3Fw/1fDPNH7C4MalGW22CWpYUYGvnXNpZi8u3ONrfkdF7Fg5dzN\nszXlHSRLok7djOJhY9OjRrNgVIHQXotmXyng/x6KPpXSwvT059jHeYp7r/tW\n8L2Y1Kj2eSdo+898mNxxVrvK/2GPXzYrYFwP63DE1hviJZwdhIghLWPzaP5n\n9DtyQmeeNMtWl86hSyW0O8KouvaW6BKlnqq6/ePK8srEpghzLahN8T4STFJB\nidbz12sMpQUUIu7dW+GwLgMul5ij9KPVethpHmsSPca9EHOkT2BAtUyw/njV\n6jm3mCnUTAg7m+VvoZRB49WeRkdGOSIECzjkN3TFnF/GhHU3Du6BdflOsQT9\nrL7XFi49jTxuIayAYwitqK/ybBX5gAw9w25PQuiKDX1Nte9bOwNftPzTMSz8\ngPC3zybywNgdvIH2/Ts+JIat7HOJ3CwX4h1Jq2nLN2sycoPFhNi2dw7kr4m5\njW4LqqtdrbIWi9hnEmSpwZyfzLm2uNYdUMEkKokwLTYQ1ATdp7B/WIIw5ExT\nmCHT\r\n=I50x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1qceeRiLMH9lHfdp7rJzLWsdQpeVtmlPZF2VAhce0RQIgcToyuftQZgpSOj6qpidzrm8cEDfsiDjK1zKQMs9834w="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0_1624207805978_0.33095034393848755"},"_hasShrinkwrap":false},"1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"4529fb24244f15605e4181867e886f77ebdaa11e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Wbcs/pASZih1EL4rQHgzGrJMzQzrTVrvWTBTHgv0H1itXPcY5s64uTW79WUVvzaJzSXhC9y05hdr1q0x44eR/Q==","shasum":"02f83e7c0ffc3622d3a5e6ebb8afd18f733bb960","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0.tgz","fileCount":103,"unpackedSize":595007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgz4pNCRA9TVsSAnZWagAA6rgP/21RbiUnstRc/EcZKL2O\nGP5rLR6vltxoPqE/rS5f7iEBDXbzYQLBUqduOyxtKRl4HJyz9/pNCgmUckuF\n36ZizdQxxqX3X8CoBMPfZXcndDnF0VMEPw8H4gmxRrjPAfU5WDYWcLijWNRt\n1Ot5AdsFFfZjfjfe1zbgt9/hJ6eseuMvWBAHPehx5j0Et6uNXB4QUpt/n56e\nha5OVo7SsxfFaUGah9iSmZyZGheunO7JoYCx2JeSSFo6i7vSNbtv8gD75Nzr\n65kFVFN/SQ00TH/0czoM1ByCmMwEnEF1BboTnfD22pg4BUcxT/Qohj60M800\ncvidKhrV35R/nTfvPxk9OhDUkXf8dBFUAVv/oCjVr27hs5GQZS7jWrKmSy6N\nzoFZaY2L+PYMBKmSs3So0i+VDPUAiTld5h8i7cCEWAygxrPcGph4A3rxqOoK\nXU0j5BnEikDAa9QQf7nkCV1ODWJe7An2V01vY0BiaJcJV6upOppmFa74e/my\njyV/N3ga1TG3lk0WMDtrWnf3FpldUShE/57XUq3Iy7aIQqIKZrpiI5vxmGmW\nfCMrrUp+sqI2RjL2YnYznJoca4W8/W/lZ/TKPnSdx1yJhcpqlIKuAni07/CW\nlM5BwGhtHt4SX2IuVGu3JtKYBtmUBwhju73v6F7hilCJwmnP4578u+ZqxFLZ\nWnq4\r\n=EGOJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCypsq/i4xX45RlJJawGc7aMZ7azMWYNEuIG4LSrY0TZwIgeX2dHrTX+rdFKnlj2CgC8KPJ88qLakQP6AhpcOcwzj4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0_1624214093080_0.34402025601575414"},"_hasShrinkwrap":false},"1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5nDI75GACAJdtCZhSwb0L1NGY84TVFdOX7qMbHGuDTWX4Dah2IM8n16g80OxRrFsRFjoDYkql/s3ZVYTen/Xug==","shasum":"70cfa85242e0546154ba9ffe14e0e280264e0f52","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0.tgz","fileCount":103,"unpackedSize":595007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0fjhCRA9TVsSAnZWagAAmG4P/ReAbfA2jzMYdZI1lzEd\ngqyeXIEPyali1eNHFnOWn0pMdKBcJKhhHfqGrUIGTiGbqSOBMN55zFAbt2eU\nTkmJhOIzoOxIXeKMChFV/funmrIuLvrM3hRPgiL3hnwGtpQuVuK23jv9XYAd\nplPA4NsnCA224tYErSWwUlDhF4/TYn60rNwQ2rY/GziKuq8go1WSLFTcaW/W\nX10K/AIkLUy2FHQPZwYzgyRh3QvSDpONCpYmtt+ej8knWMSrfX/Igt8Z3jGp\nwO2t5BvKDEme3X2hWE97eKCvtNa0RxD8gh5zxdrGJ8RxI8s0VnbPMLP+nbsV\nPImpSjbTQYYvRiNrv+tsdapkMj5IRn3TgGUh/VNp7J27mIryI1aYO0ae2vjl\nFL2a6eyMzKxzBpYfiD9RbYhIrmWyTq8X7qa2uyttEHBfLLOvZJVIuw2m+2hf\nArN5hWc8MqJb8OhqUhcjI5ofdpneXn7wHm/xSZiagTx4w+bkoA3649oXz6OM\nPjiPZYhm2TLIiSROUc5px2KQS4wWAaAx69p+CQsj03P0c3G7ImJFLgtd5Lm/\nichI6SCwJ/CSDa8fx2uefsFIvg46Day9roLIqwGyX0pzMwluw6de/+p0qGVx\nF8KV3axoEYtANoyqgDfe1uN7cBnrpzgUR+DGfw7DVXFIUi/3Ztl0SRFFmhyJ\nqpgY\r\n=FMeJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDspmV8jkeMVTKX6N30jWBwLsU7Vrr3R0RxU697xhb6xQIgLRynVJIwLfdo12z+LZ9VV+BoqCDSHM/QejmsDQzyWM8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0_1624373473013_0.6921847357249067"},"_hasShrinkwrap":false},"1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"728e3ceb160b676372b08d25138f9c2002fc3170","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-x9wo7bf489FOKEm4WdqXr3msykkk01sRe2a3DrWKvXBkBtvE/vs2Pu7vKIqfQPAE1M6azZ3E6T7s2dBkE4Z/vQ==","shasum":"fe6b92d41002db4b7b03d5fc10de500b954b2c72","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0.tgz","fileCount":103,"unpackedSize":595007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vGiCRA9TVsSAnZWagAAEGcP/iYOTaEf17uZmfa0pzUl\nUt2M20d4rpg3u6HtLItx5K8rM6l2LNmUiP7GUyBkoZHil16y5V5hK+c+Ihsr\n+YsurhPx32GcFpEUpWNjyYp+WslX1azK1X1givaR86tljEpIdn3QYKcM9EUv\nns+Kc4G/BzvIuDVS4Bg55G89Abtqn4/1jl28pWwt/ECNnlxdcz2bZI0tgIRZ\nFAC7f0YcEH8wPOWmNNhdHELazkuqs2/6Lf7TDn4gB1COCirvxkrPoTkElFNc\nvzP531ZejbE4Q41hvwSk2p8wM3H4JKLwd0166MfkIsaEYaby8a56jwSstndw\nrH/Xlj3S7n5Jnq35sX5Ik3L/dd32m2HusiKwja6ZZzrqQEVoTNTvmZ6iXwMp\n4mOGjwisfmTsLijWfrnln/Z+ePU1aGS3VLdehjk5eN6BzbsmAT58/ToXjsN5\nvtmJCwLjDWoeAdwvBKuhBCn+sKHI1/V2s1p1i8sRqi/adpbffZgN4+or4V9d\n3iefDYTyaZCZg3EoQqLWwOCKYUJg3vJes542JTHzm20Nva8Js5hUgMXbGBTN\nJzbcrZp1/43qWLPbo+8/kSbVglsfFM84sNMnwT3Ghuas2wXIavYh36VU7EIt\nuER76LemMQH1AyCmH42KdBEjPVxJ0Pbq6Ak+3OYINGoyj9AO7sJWR1w58uo8\ndc3P\r\n=epgo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJGDuHMmE65AKxSPyWVZI5Q8Eka1VWJebFkWQquhfg6AiEAmoQZKBqynMlqvtoMwoWhPaw+cP9qNzdb7uyp2g8PxbU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0_1624437154315_0.4768472463168256"},"_hasShrinkwrap":false},"1.7.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"bba388609ef9b847370a39d642781a140148d535","_id":"@sberdevices/plasma-tokens@1.7.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-yMVWC0ueoDAQzOFux1lErokspp8/BaK9bVnNL6xDPUkEYf3buaGRIls/viDauXaTCRzSothoPFZVhrMl3bYyXg==","shasum":"b888ce61f3a07cbe4a3f61e958e9e066269e9081","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.0.tgz","fileCount":103,"unpackedSize":595185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vS8CRA9TVsSAnZWagAAT2sP/jvfuPM+noCMZHmTef9A\nDqUq5HgKfsd7a/fJP6A+LmAu3sGpgbyAmnp1TnbT7oTnlJtILWK3B4a0a0so\netyQCoKgdKNHGejfMmrWrlFaaqR1TjJtfsfOX+TinY1DU/T/50iIGiuA5hzJ\niwQY6W6MnWIE1wEfmQDA9A84xnSh4OC6KLxi4Q5lxwciPZbxXvZfBwfNjiCe\nU41FmJ8qVuvU0/0xrKmQ5XxUZbhCRhhc6VKditel8sQTklWxRwPRJtnGjokP\nsjTk2rF1k5YUfVTHukBpJ53gFMqNBajM5DNRcDEttPQ4ljIP4d3ykr/It8Gi\nATL/RwbiECdxr0dfVKDHSvfJjtBwJ/T2NUai6CMD1dngVR9uzZ71oNiqflte\nv1X0LiUOvUABnWBt3xlkij2SqV1aA35Er6d3mn3TrqOQcC6FiOc6Vf+LcpX+\nk2IMszwgc31N2wqBi4t2wDJLtn1iBWgHXzjp3ARpqSX61JhR61LJyfXADcFc\nQ7BFP9qQxK9k0VpsLpyfsEU/BHB4m88OV3046tqPcIzp5V4VoIQ6l/Nxy4Mx\ndkG0aRbXCBIzYW6mLGpnzTA3ZvmoZUjiIUkz5PU2yl6y8YgOWOyYomww4N0l\nLVIwCAD1Qy12fd2FSPk/CkEfYoXM+EJ7hN/RthQmnG10iSAxirq+kkumSyJo\nIE8A\r\n=yeXd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICt1XQN9lR0Pba58JQRuHbKPSd2u35axt/1lqOFGtLUxAiEA4/Zih7Eu6PRr2BQtxu3JE2auPm0E4Y1LikFgwARzMCk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.0_1624437947362_0.28042445427304274"},"_hasShrinkwrap":false},"1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0":{"name":"@sberdevices/plasma-tokens","version":"1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.4.1-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2a3716a35c5babe5f07c734d37bca85cd0a1c265","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#Типографическая-Система)\n- [Цветовая палитра](#Цветовая-палитра)\n- [Управление темой приложения](#Темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](http://plasma.sberdevices.ru/current/typography#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#Темы).\nВсю представленную палитру можно посмотреть в документации: http://plasma.sberdevices.ru/current/pallete\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-q3pnvf5brykogCm0dOPjxLBVb1ZI/Uy16DjRMN6e6xpTONzA5cRBCk8d8P88sgaXCdBr2uKtUEtFJPlvGGEXFg==","shasum":"d3d53f29934e146fcaf9719dc0da1ad5cb235a31","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0.tgz","fileCount":103,"unpackedSize":595007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0vg1CRA9TVsSAnZWagAAJZ0P/2Cjz/4Rp/BQG7gxs6IL\n2jbxfpJRikJrZiHWexgZqGxOof+h8erPnqRO+msqDRchtfnbjIStzmoD7hik\nTj75coJcnmA3gVYQeNlaLmKYyg6hAzKzKsZjZWVIdZDioV4f5wxZchOyG4Uk\nt7GkZqYjXvD7FLjkMqC1tzrqlvcYOzhJbdxxsXVA0LvcXH+tWgGQ+K2GRT5e\nSEcSHqTOIK6ACubY6IROGxGx1GNZLL1JAkVVDzYTFf7IGb+s9rcGSyjE/1Pt\nEPOfqSa2F/YXbZWffijWY89s/MGSn4GtHSRfudsaTRHs8l9oigm2B/s6HQUh\n49PTnFxyKa42XrSJEp50XRb0So+pypx9pmMpZE4CJu/gXpZmLNCRSiAPaVFL\nNKba5VMJYbhPeJ2fs/tjMKRDXVyPMgBwng8xDToa4lV0ITzMauzD8Cr5Sevc\nzUKE5bT/4Fft4tDhJ3JLg4G3DhrB8bLG7LRhOPpAmd4Va8A71P5Tm0jN4BF8\nMfBlfE003Ybw3SsCI9WFPoPMkMZ2Ku1kI3OWBITnVPkKozygv0+fOdW4ldJJ\nruVXyt8I6F720iKlaeRDqicD8+zjbSP2wYpNBhv2KbueIqf1t1S8zBTmGVmy\nNLKCAPYItVR5I2EAteIbeR/ovlK5D0fTXTVSnr+OcGX/HCtbLlaHz7d7GWCm\nAI6u\r\n=9V9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBZJNrRP2Vuwc2HoUBx5mxU22RU2eje8IQliGVrqZtWAiEA6EYQqUb6IZbdPTiH7wlZ6sMinp0N8ba82ZNYDgd2eV8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0_1624438836996_0.1343875926000595"},"_hasShrinkwrap":false},"1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"49b9a9eb68c395d35d9acc5dfd2039a15f5928aa","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-I+CjiAES4MyAo9EGvTTTVlQJ05hi+c6YMn2rYLvNrerFrK+P55rBt8He9XubqTYFoqXSHTfHTIYPRWyO8Dw9Ww==","shasum":"0ea48b16b87789c5fee9c81671d3baec56ca880d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2Zy7CRA9TVsSAnZWagAAC2EP/j+EAIzhWMw5Kp3MxcX+\n0LGhJyxOivQJqmaQlUA20DPH/VCind/s0r7u5jtrDYBoCbrspsQnSghJggp7\ngUrnkNPkayIqZ0RcpYO+zMSPb15Qs8Lt4eC3O4Wf46o1bzkXkr8SK1AwPDwa\n4OaiSl5Xjj4/jZ1L74i77vPZ24Y5eT/3EPFkVhxFpwDyzJQSWU4M3+GV0r1Q\nOv0b90+D8Zd+r2UMt4RC0WYh1CfHyaK/UPTUXAC3hqCFCqUOknh71sQ6czIw\nYPqGoslYGTaF+sx2+4Qxp1IsPvIXe/TSG7mnoBxJi/AItvO+fnynr+mq7jl6\nDtZCus6C0hxAuYlShDS2x1KsLDmJ9ulcOZmwQUTn8lpT9IS/uwCedcB1fMOh\n7o0IzUGdzc6M/lsVzmvBNMbX8UZq1r9txMuhoxFojv5VQubbjtNqVPLpgqcy\n68rIJYKs8iNC7fuhLbhcmK3uVizWqEUZacMGFAIS1mfxMSQfBxYMZDn2egn+\nydIeTwEGs7qSmNmL2hXc2STem+xST/ruxcl7UkpW7gGNmOjvc2XhEsPtRRB8\n3NHFQajakuQSHUWUoaofflKFHPHOSY+JsjEEK06sfVpoCzB4kjAjRC2B8wvL\ncIG8dOa4crAsVS1V7VuXubU7tOUG50EknECmHRID4qX2yZ8/fGHq1rz5kQxp\nhVBc\r\n=DOiY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsEIdwPhTsCGkcO3CEvaBcnGwyffILDmWAqHPBp6F6hAiBSw6yiRH8B1ynij2CgSoxye2I/szszNYjdMjOV9fKtmw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0_1624874171227_0.2941267309290605"},"_hasShrinkwrap":false},"1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2596a0e422aff836305b8e724f95a203969f5379","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-5twNXmPmIAzyGU9OgIkjyNY5bYz6ccz8giBprOFapd4tCK4YkZtDM7KPCLvoB7laU0FjAm67NyOg9rWkaaMSGQ==","shasum":"e2d98e530b13430c21b90f65d1de843ed5b9f120","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2ikECRA9TVsSAnZWagAA3+EP/jVagM8vhfwi3YT2wDXC\ndbA8UVkyKWv/c6JkHmxNThKp5sjPkTZbH79nhiI31B6/0c5IzG/iXJtHFfwS\nX3ulmJk2OVsygBTOdX2s0L5Nhb/q6Y2jTDCuHk/ZY0AzNajUdf95ZUtecksh\n/gdoei3B3w6KJw9Amoi7WJ3bVwXElsmzyAwI1qytmoVicYipyxeM6YogP42v\nrufL+SnzXLZpPpt1bfb24POM246b+9R9PZBsjX/v3agRmzkiRLryg9Zf6mQk\npEr4snWBNuM0X6/zGOecxZuNV+DsuEsgqrQatHDGOkNfV1NlH3wliSnlRuji\nl9MSVUNIh/YTKzcWN/azOITJFVkBxD65UmB+D4J8exvAvx3a4KEmKpkMrOjK\nK7b5KcFtkRvWDr4aUf0ImDeY//FX8taTYD4R1OjQfC7LRirlJ7pDfVGuWHAO\nu5fxuBrAIY8KNMjpnqmqXDnDRj5TnYZLoXwizFG6W/BgDQ66D4wcUSxAOGwf\nhmnxlujiZl/jZ1esQrxolTsJc2UHUM2R13xNm+PknNyZ2p6OPgb9f0YgsMOj\nr/9dCaR7xjGx4xkY2mCI6uifldDfzH7lLzjUJ+gX6jcKL3frM6Iv8iJIdbDt\nVUWcmTOAf/LiLLUZ/C4V0qOHTvep6qQ1Ph3jCYoYiDUxvB8WA0Flsq+DXa2a\nZ/T2\r\n=K1O+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvbkn/oSAyD5MAXH+Dd7PhW+brmn8xJjZvN+QHhB/2PAiBFPH8/hqlGT4wbms1JKPAPLT5fjIfrBq1ce4DAlRk8LA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0_1624910084048_0.7263060549588378"},"_hasShrinkwrap":false},"1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"891e00dc399b37cc24d37819cb7a3e5841c39d30","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-WWq+g5UNNlnAw/4Jxrq9C805dNDiecVygiMUl/SrJQ0A6WxVgW0OinhtFI0IhTk9I1jgFQjlifODKmHpMF6YLg==","shasum":"a17ca763fccd8d6fd540725385f4f3fc65bbd11a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0.tgz","fileCount":103,"unpackedSize":601554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2umwCRA9TVsSAnZWagAAlN0P/Appn+qQxS/Wd4gznTK4\nTSWgUvlnv3zWWSXFx/q7Uo5dsC+jiOwSFxOviHno/63RLKVNfUQvQUlj7PaR\nJ5nygieJ9azkswHLpAVX1bLttG6iwjd2eR4c/s1V54ggMT7PKLUGZr1jcUq9\nPCM6GM2PwD3/Z79ot+Q/WJpC5jWWduR+IExZHCY0I+foRx3xAzVjGoWK6I8X\nZfJxby7IrtJ8zWIzXDhikF0i1XKOY4oZ0iSSZpXlT1jr9nrrKIR9S31h9gmj\ntKSnCqcP4rbA7tX+40iDjbGWbGAHnc8aMBrvOThtvXEFGJg/dXNg6pWTuRES\niC6HfNhdMYWznR28Aam3rCQYHfk7+fbSHsTyILd/x9qyOkYaz8jkXm0AmaQk\n2FgesiP3Y/uhMaJhMGZtdvxTiF1od8pKO7WllJzIv41NHslCi+IaYjRhvcOI\nYfQj/9Gkqvqfh6TV2sqHYFSJF3bsyy07BfvnQ+LKeRcXEavCySkW7dDTB6P0\nB8IPMnelr5C3z5iSIweImX63Ebg5iEfWNIZb7lFra7jVxKV2Sv3yh8FC8gF6\n1+FW0UDAN+dWPLSRX6BE9Qdi0eFr14eHCQYjt1xypdkmUpPHaUTuUU/vEnla\nGe/PhI1958mFVVj4SDF4XfnBH9Z7v9v7SqN3UdZYWhj3xXIQ0q2+gFtTJAMJ\nEZkZ\r\n=g1dl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQbGhg9Nab01f5qUDjTTC7fEUkAy2gGtkbpz7SzHYxowIgf4bhQdmuWPDnvef1jt6eKurCMWmCRUz2AnMDuBKxZSU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0_1624959408214_0.30142429798421033"},"_hasShrinkwrap":false},"1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ff1f575153b5948de24d504553efe6001e71568c","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-KTHQ8P38IN/CzDTuC1i/ToqpbaQJXdhYeiWGh+PJwI0X4c03/lYlHALp+TnDYvpbIVjRZtlwiZl29Rmlmyxomw==","shasum":"b6caaa2b0980430a41c724b3fa85dbca0e131e55","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0.tgz","fileCount":103,"unpackedSize":601554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2z/1CRA9TVsSAnZWagAAQ4gQAIjCrOt/ci1HXr2kPNCE\nCJO34ULfC2aOeAg2cGqvt+Hq8WLCrrWCM336m/zSRh39GznqZXm5dKNBTm9H\nuZIqIc5RfAYnGSQmzhHsi1a4736IW15zz427OEMEB6whfzmAy1FE903sc939\n9QBZsKeQSZktv6qGYloh0XCazVVCbahiHdW60SZxOjkzILHX21IiwXgnl8QN\ncB/ATBNwACHfMOaCDnZAHGed9ljLFZrX7WJbid2Dlm+cnKV5m12kM1Q8gqKh\nluEmMBTz/HPf88yuzbCSzYr8+RxR3aDys/FkvwgCdwS2SRG0bF/eyGCrEs1W\nDpU15qT80y+wt7lVDeGTxaEwfARVMNoH09QNavxIcKDHN99gWou1OZIKthol\nIvl/HvJrySi4eiwch7R+Sv+TyUc1ULDpYQVR6+jNbGcVw9t4M+3DWJzYxZZC\nvBo5nFtTCe3/YTuECm8eWYJud6HW6gFM+GzzLqp1z2qkeAfy89UPeGx4fndK\nScCup7L76W/uBxgWw/bG8esl0a8TWp87CvVScDa213SyRRa3FedtYj8dQ+ds\n27NOIA+W+UaCnY7m/54QeksDkhyy9cYKOCRke/PxFeMGyCdqMkOanjStkZGG\nxiphrp4/JCnWQXmVkh7gGUDrBEsbld1A+XVJjz6X/2ihGoJUBbiy/hdb1o+b\nJ3Pg\r\n=JtCy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+Xb58m02Dd3D/6XNAzc2Ceu9eKZliEXEU0jc8ZqZ/YAiBTOw976g0Ds/cJAs9uywqEsqDQBMRBZX1IYkDxz9xkbg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0_1624981493052_0.07646299763409825"},"_hasShrinkwrap":false},"1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"720093b9de2035b3ee48bf0032417b4c74cf5e57","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ld16yxaNcbh7bgNHoK9UjTxJwnZiToapOZSzotr2Cn8aA9W47dRuYSY+/YVJZ0hXxDRmz5i2J3+luL1q+MpJoQ==","shasum":"e994d919f142066d37b9856c8596a4a3534bd55b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0.tgz","fileCount":103,"unpackedSize":601554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg20VLCRA9TVsSAnZWagAA+EoQAJlTyKpMP2XR7vRSP3lz\nuSLbUOg143SLocPuDxagJa0FjIJwZTrXqx7JT7ylXhhmx1PgBzea1FE/XLPQ\nAiE9Cn6/MLcWdtDrUjspm395lxrAEhn1H6PCRXFWDzHYJSGi9orX75gBtuwt\nbrtn41+qvD/7x3kJnTNHVP+hVzCEoghMzPofDxstuI0D1osbpqz7JhX4E+iX\n5oqO+4t56oC6ZMS3fzi+xQn0FA48bGO4JQLnZDr+CuxskBJ/OV3xy+LeMWyQ\nfEfxY23vUilutgPGN3i4KEKw6ERZlPetDqSwpWJjjiJhnzvkDRiH2JYY4wq6\nuJ1Uutbf160+ebIl+oCWNgxrAM/wftvnK+6MCFk9k/r/XCzmxMv8cvyCcNxM\nsH69SuefEM6cjc/JH1vshw+4kNl5dK+VFhRx4TvEL6ZOGwBrwfSmao+lPGC6\nWA6h3AOfo+oGe0fgDmrHFlu04uCfLH3WzNQO4TgZg/zZm26Fm/Co63Sakdfa\nNkaYjJamOP0pug3YFwvXTrwQjfywe5jZbDOw9fWh3n6ZhghLxYADYto3MS5+\nAp9sc3PMrJYcFbTW5z2S8UWcDVcfYdBgqcnE8dAoQ+AVtrFMFqngyI3Oz/d5\n6fHJBXWNf0hwTNsSk6rONgT4AhM37uWAAxp9ff0kPZb5cFIGIYiwd+qgsAFk\nh1RA\r\n=CTuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK3L/+hvLD47VrLjvDy7mUScwzugNBUk2g4mzrKBrnWQIgENdFpEHsjsR3qcXs6JHFMZ3S0hMfwONfnaA04gK2rdw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0_1624982859514_0.657433796026105"},"_hasShrinkwrap":false},"1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"61a192453adbc68fa21d344725ba167f6018d475","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-zhxctGKPUC2Z0iSJuSeKUY0JnoUN4tVdQ5M7YypcUTY4Z3yZJbXNfrviYuhVfEl6X7L5QQEtl+wxbqOI7vfslw==","shasum":"ccef33e20f061e3884714ee15ae7ef245834c17e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3C7aCRA9TVsSAnZWagAABZAP/1Qkqq8cAQ3ry0KCK2IP\nmUBjaxfcPIDQ+JMVOBGrGwPa/kKt/lSzFvAZxnPl/l+WVM0vhKGQoBiT9McB\nTmo7YjysihCPdRv8D6Htzz4SJpk0RVeI91Vr8ZcwUnGl9nye8Uy2bjTIG6N+\n3pFO/yXFF3kO8j7uZlpBbFLvtqiCqvTQ1+lMfZ38jIxf7FpmZZ0bZaG/EciW\n2B6G0bRrjUbJvOHeRcQNgyPJoaQRsM69Jrmg+sQCe2+JuUW2BE91mc86x9zO\n2OZvFo9mTd0LF9aabvJ3+O8VgwA7N8/ueYqDcr1Jj98qHt3jsLyAzOGHZCbK\nVTQkq2s5N87TwenX76Rediog0YIgLO+lJWI7pbjFaoXOZZe7EanS3VSOjsIY\nfWjwVlJxzRIENxwYPBn9uzOVmiXpPgTkI13v7Y2y9OGI2bbPEN6MymXhPKib\nNoLUBYXL7qEAk2pk3AVlH7XHPTD+SefEplAcgzrnaW5DcR/f/xg8G0Y7H9dB\nISjxQNLRU2waXGU5H+dPFRt1lDFE7bZtDFBwKqCJem3XJDnC1XEvSENZM9YD\niWYyaEHXaN4w3Yreeo2PUlKc0TADJqZ8t52oHp126V13rRloqqY108vLm0KR\nszqF2Bb+h+DirpPKmV3npYFaZCE713oCw1cl6XJucjCXGN5neykAXTOvAAx0\nfUFP\r\n=ksST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKTz2lyGm4sDlUlQKis00r8GpyDVOJmYb/dsaDJ9uxmAiBQRFIcmbU6mgaCHLAUPcqdMby/edLarO5JGkSSYjJmfw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0_1625042650492_0.7345802756740696"},"_hasShrinkwrap":false},"1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0fbee75a3d3de63baf01751a9a764a3414bb38dd","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-UCQhVdWE2fvfs/QRRDMYhJ6OxycPlvYaNF53jME+a7hoxNenPZmtjTAyKj6iFvhzHMF7MRk83t5Xy5DRtYYMYw==","shasum":"35145b461fb4ee615cff8963306b5686f1f6dd6b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3C+VCRA9TVsSAnZWagAAzysQAKAzrq7Zi4BXDt97POmz\nqgRCxr9bIi0GKwBSy4cFvfqHkVoCBDq644X518ewpa1oOndXUci2P0Q1Mdd7\nvQayZG3eQVkB+zkaEeCLE6tfpjrPtK/XsLD9tLW/ToVLMHJo40C6Ct0iAwTI\nPEcJdekjK3OuMsiY/O7d/y6PZQ8dGZ8rl0Wfbx3X1Qro2okJ7XP2YuCnTvE6\nrl6sgjgYgi6aeOG4pi4abXvvs/MciVuNECmfUKXiD7vtpMEjMfQDOUoq7A2T\nX2gqhr79cnsTDayanbUzX2XTKYU+PZZgKCPHBbwajn7ztTf40U9yVVrsHQhU\n7B/XPEXu8AWIAO4aPMNp5e++7aAvMi7NttNq0YfE8FdEOQ3LyHKDiefKO2Kg\ns+LHWCRsf84x3QuuaujrgSc8vHTKq0vQnG6f6lgj9cdqz1Sr+KHrLCIiGJp2\nYKM+DdMJ7i9AeuxORlSzo3bp8Z6D1XfqVv0PAMD+mcqbJ8HazRLSTlcdLf0F\nXSiJvDn0nNfILmng2Y9di/SfSU1hg7shOy14fr1xjWMHBDQURTrRbBmv8YbO\ny+GYnAQSxl0ht8hufSbawK/I1J0blb/FFdnkvCILZEVT17lol6H0jO1sl683\nqxy0+Ke1R7UNzHi8fawZTVExO2r94Obz530fZVU2xdl5uRrd2epZ8j9qQcB4\n+Rwj\r\n=CxaJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoupWKS8ZSBV5c4DOTYLe/157dAXL8DVejmMHF11x4JAIhALQOv5zpLqJQ495d2wYTXHGdXTBGGP2t8d1L5i2OWvjc"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0_1625042837082_0.3401901193260093"},"_hasShrinkwrap":false},"1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2701b961c731999e27695f3df1022b46421b519a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-ZZevs5EZeIMdiQAnKZ4w34E49X+oSY73FmpvDVH+ajnWzjwfsXULpsE+zrlxG+jn38sey9pQO735RvfDm1W9aw==","shasum":"9205c809701076b85e8047c5d784d087e135c34e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3DJ0CRA9TVsSAnZWagAA54EQAIbBdNP06p8qjuBn0f9H\nByJ5n0qTJEuxdcT09Dh0qgy9B+HxRm3PIktpVHKaMcP5OqvlGMih2180okH5\nOr3+CyQX9h0RuYq9teiCFUntHkpg4ktHGdIeQ+/0Fl77XXHvav3iPDN5SGw4\nTrw6c5XoEJNf1kStpHcleGlsIBjezqMP3/yOUy1iAzPAlaMhc+l8atf0OlrS\n1lkF1stlT1QF9wR5BbW4Cf2EcHiIqqvl69QVMvaj7CSbirCEiRMtXkb9Vj1B\nrrognuwhcbhwrRu9VrsxnSi1hmntXDsaSh5EiX0Y9LfxwJHkbs7T5Fkw2DAN\n9CJyc+dhrpdupdAoJ9M6p9fQP7d4DOp7Do8PDu1bdpEEzyHS+iABs5YAFAZu\nT8euef/uKdfzDBTHP4o4U4eaEAK5RPGYOVoHfOqqlR50h8RnZKjWrTerAg5Q\nUv0u6BaxxP2K+3tCd9w5SmVBmV1rZ9JZeKhLiHY+7sDXh6cy9EbOXpKCYSOR\nUE1R8HdRf52syK0cW9p6PTd7rgsrsyJ5dwWeji29et+n14hmsVrtVkOpN/YO\nVp/aJwXi5N5GreBvd8yGncnKPlKsOvf12jarb1VacVb1o97woRbUNigU7wxu\npDpJHD4ftovuR/KNtC0KmpOYnZQ7/DIkRM0xWH/hjhl+uWRwWKdYU1neeOhA\n8vwV\r\n=6MDp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmtFyQWmeOgTLEwejWmrBCVerZTnSD+D9ylztkPRkeaAIgDj92vXr3SCCf2txmFHNmtDEpuqt6NL4Vr7jh8PW+j0U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0_1625043571720_0.3126685926542654"},"_hasShrinkwrap":false},"1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"131ae1ab4d7430bfb431b162f622550e42e4a166","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-6wJJFDggVk2mxrKaBPcLQ1J30C9slU64nst3YC1/wNKn/ig9OfL5ghwf9iYu3c7TA9R3bznCFmMjFlAXv4fUDA==","shasum":"bee31c094c244ec705ef93d1f49a891b022d7125","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Ei7CRA9TVsSAnZWagAAO0AP/AxlYt3h2gscwoK4MhbR\nfmaVbez3H0b/+Nxkw66zhMFFnMXp8yh6mayL7PfmXPjRN06s2/6zt+ueL1nS\nCGUaK6rFcBJ4VobXcQ9i5xNvvuvg/KRQK5TKorSirS2+hsq8VqQhtd2bU/UL\nPV5sZco1lMGDp2pLZCG15VbOieRfDoOd0wXbdtJyTkIchSzfVsLc0Bkbm0fq\nI2XbOuVJ9WekoD2xOO3INWPmfbeOAtvUal/JCPtcWTTFGmcztRC6hW/tFyBn\n+dIdIFNzDuiHETocIsnzXSuIlPJXrFzscS2uePCNrvuYtG1u2PE11phZAtw7\nzwvzqTKTMS+6a0eupxBaoCY9p9SJ71RftxxJCP5R08hiV/x814hpl9WaNdwf\nwSca/a7G9uIfjSl1M35c2mB5VTh/1JyKNtAK/7VcZ7JmO9fCu3cdpylSi90d\nK5uLfOwaD7IbhYAI/QPeLqqKQZehM2pXrtJYl/T4WKRiXIB0PlKvIMVRJgDr\nk6RfhdcQAqO7WmRWSn9HuSqQu25Yz5rmAKFAPMKHNISnFDnFYEfk9jQSQIjA\nmZMnkjN2aoQai6qt/6uVJPOvbz4+AZWl+xGLUcMh3BiIvTEJPC7b4/eGyXAQ\ndbgYhfbJXlcQTUBgdB2Y57LfMv3hrr9TE2Q9fvXd1z2YhRGd8eSTDTGYO1MS\nUVsR\r\n=9VpG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEu/O2sq3xkf/01WKrTkGsedr1lI12wo2QMCGw3kbfHwIgLMaiSbgsh29datCTUk0g+BtTgf995DN4TP1ZRcOrncg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0_1625049274912_0.10752941605551425"},"_hasShrinkwrap":false},"1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0":{"name":"@sberdevices/plasma-tokens","version":"1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.5.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f9f9125d42f016165b110af34a263889f9497da4","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-Z8er9gufuRq4cSciXY+QLjkhUIxai341iaWRWO78WI78GFBHAZL8gmmJyuKiNYjYdzjCTDpPtCZ7zx+6rYFDqQ==","shasum":"ba011eb3e22affc7a0b5988d0785426a5350798a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3E/PCRA9TVsSAnZWagAA5E0P/2ZFIV6kfC0v9wD8FYp+\nWvqdxfUFjyHMU1Rtu+aDzf1VZHv6qHmwHkCs9pbUS0x41vYmRnceaYJPkmsA\npnY+rJKU7f5vCsdzJEX5aixBp4ValLwywxhyyrLso9ASFWxhmUejXQdlJYSH\n/f7XFBIxj04oLrD/sASsA1dLjFhH+9JKbGDxWvvyWg8R6C4wsCRhpDbylwj3\nArhh1KIGpgB0S+d2mdTjaQnMct1LFFk5v9iI9i+ASHHA2Dt7+MB8GSsON4jL\nKW9yuF0G53L0c+JrBMx7lazHPpMu3W5e4u+fjclmEn67/C3CIk4OkcLBdFsm\n/cmXTPqJerxrr4xpCzXB9ez18ZJFUvLOCO5em3bxVQPa6Epx2c6tDjOqvKdI\nsaHPrUcKyj2UHoPMeCeyfD2L5KOOIjtohhBVGXlxGYPvcTo7mie9zJxR/9lz\nQXuWwCYXUU9TmLJ9QcJ3zFlQ0v3Y8lQGXhY6XLOYy4gbAshbRWNz6CuTrMDj\naSxZcUN7EJSLOucTJe5oIypUoZ7RQ19zUjxOr0hYlKsaNBMbFBcKwk4Qu8NB\nwwf/NlQ7BRQ4ZfuTeaAmO+3H5i745rNIsb6+BtScvaLTAnkJR4CFk+vF5RWZ\nrexxqkJq/nUGlnkyfzhv6U1ql3XRWjesbZqqLhYUtkCVPgfc5dbGNKIn4TKN\nFOF5\r\n=ellq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeQx12zZhofUW0++rVueVQJ6Qtts62SKs1Z3+Geij0DQIhAKJP/fpadElIF1Henno/NKcnck2dyByTJOQ+rnGLQjXg"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0_1625051087414_0.9797508834516708"},"_hasShrinkwrap":false},"1.8.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7ebb088bbc6499caba1f7cb29d77f6904a78e77e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-hjEDI4T/EByRypovx29bkI1BQz8KGHkKkycNRfBeCRkNTHWQbFeKsHp9OGPbYZ/h7+Zx/qBJaKtp3mt7rko1vA==","shasum":"bbfa9a2fff27319740dd9bdc7117cbac820faed3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3IX8CRA9TVsSAnZWagAA6cUP/ijcXqLDmgOaI4XjgjQF\njcbmBc7AjhDjSsVzhqDDiPQaEZhYvDBfIrzUwZsuRLWLdcufgBHajKpqZ3PR\nzo76YDmsLhBLJwAFg1VvBsqnjSYy/KyAcWUKWFBOUM/myEYhWRJGSyE8jR6e\npYVg0WeXhynZQLeTnUYnsthbCupoAFf623k4aTjTEnouS7r+jXEMbg6m9DAh\nCoxwSfB23Qvv6U80nBR7JjaMB5FMR+U/Tt4yh7FZq9m8hl7X8QRem5KcREY3\ni5IKdWMUP54guTxv2ixq5QxZwR/JK8XEeFExV0OjxNfendUIde/5obyivOy0\nx0X0Z6msprjH+QlQ7V/2xDUy/S+UFp4CNm1spC7epbkN4LkbeLPLJvejoaBn\nVfqB/SvGfc6hXuS0T3oH1Nr9O2w/oh4mbEVNPDtU6okXEL5ZRU6zk6RAEUXy\n+zKWfJMTmnr3BOL21+yDHR0wpBcobKeq38gjgzepl/0WpFu4asYBEMBaEY31\n89coFQRsuqZhniBO/z6McCpShje+nm9EX1OXRmLYiQ+4YTBSeNja1gvT6yxb\n+jLiBwPulzP7VyETmSK5hR8Rt+Laub6z/MPepr7Dkw5VIGqSXyzyliRXOEWP\n8Rw22rjEDdOxjUAu3GuN6DwOws5dqxrPaw/WGfXgyaqEZPnxinvAT+EvBrFa\nwO6Y\r\n=77bz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHflNVms07/AeG/0eCLpW9Js0Xqi/EZHBqQJvv841LeAiEAmt9RqR0DCWbYyZsIYxnJFi9Adp/a8/uJnkWfIMrIgjc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0_1625064956417_0.006924655376377764"},"_hasShrinkwrap":false},"1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-I0A7dtohQ+3XyngXzZ0mU3ixd1QMRJSkeO1KGurF/QQExAU/n7aqN5gxz/gTmMVbjuzzH0QMkPhUIGU1di4qPA==","shasum":"f79a09ce2d4973bd79045ff0a6d67938e5eaf6a8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0.tgz","fileCount":103,"unpackedSize":595336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3IyWCRA9TVsSAnZWagAAmDoP/1O4Z9C6lzjYWqjVfHXJ\nVLAOB2NBAnVvJ9HKmdG/245VPWhm0UZYyVek14EjvMAAJq5LqrpyJSZeaQIM\n9RioY7VLI+t34egw24v8TK3agLdbPCqCTsTJt+XsEigF5CPSUjX3Rcsrt/1c\n8uS2Cdg8pTtSq9sUp6XJodhhhcLjmFtKWD1d2jyKyp62GjldrVv1F0B1jnmG\nY3u69aDuwMADzJPt0wVGyKQfyU4pVFwsd1R/H9n0NE2HogFiowbLCtxB3W2w\nFM7fj4T3/PxOSIIEl/Oc/gSEuLL9vCawG+ou9nbObDyzwKopYVx08vmRR0bM\nijcdbUv6VF2sNoQpc5CNjAAw13QgQgCOH3vTtkQVrwkcGVgurtXXpG9AUBAD\nJXftE67kVkyFzfQ5/WjS7gvkS5KUKRWCC15xeHJS2s4yvOCwidCVJy7s4k3y\nSz4GmDk5i4YRx/2NfWFioCs1igJ5cSIk1ZHbyOmLvDw3OXVTZPa7wDSXrLyc\nMgE2FMgkMXmNXX8u+U4/EKpi87Jzh6a1fFwiSDtyRtHEoMUl0vPqaiO4NZJz\nUXM7S2+l4poAmsxTwmEN8BI+AJ/oY491hBQO0J3aiDtGd3A+qMzsiTTDEqVN\nfq3SuTtKwR/tbv+XA2kWZfbNuEEl28li6JU98XLZBbiNJSFAA0yPCnk3Oaqs\nm9su\r\n=LWf8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc/Gep/71bfVjIt+RV2Ss6GR1zmnhOvARRKDnJnH1ZdQIhAOfPEwR0aTekzXvHQNlyHG4ayQ9WpA3Vak+BkygUy1xs"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0_1625066645911_0.7256066331480064"},"_hasShrinkwrap":false},"1.8.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ad573e183576d0c3ea1d0b1adf03a3852b9dafc5","_id":"@sberdevices/plasma-tokens@1.8.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-wlunEkJaZfgXF89VsnDCkCPwZgPIPS80gpvZhYiEDv5w1WWYnMHnxwaVjjSBMpI2uU8DYkeONaQWxv/GF5eiUQ==","shasum":"d21ca2f82621ff5f7d80b8d6ec7c4dc304b6ce66","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.0.tgz","fileCount":103,"unpackedSize":595649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3XGXCRA9TVsSAnZWagAAiwEP/3gMSzll4WxKw8CrTLMG\nOEi0gRLY8D6CKq7yKYf6vCHo/SZ5wm0Zw8CJAX/cUU8B2FGvFg6WQSayADLT\n654ULavs0G4cZ6owklQBmdMyQU2rxC3qJQXWOpRfdYqwTuHmsmnKerfQXpLw\nanPW9cIOQyxegDt4QooOGfNIGUHvmL/kQZidP6OGG9IPcPRht0FSyD2xjv2V\n975ecCmNnTCu0XYbNDusFTWa/d7HeBoK0oF6BvqDpGPCCWktJbNhyoepQFxd\nj02hnjlIPOryp9nu+DIK3W28io8bK3sQV8IoMVlWqj/DXOkRkqQmmIMbMqvr\nlEj3DoXWiPgALNQHkh64IIKD13sqrPS1e7Pc/KgZTxJwPX5B51O1gcMLI57B\nFIrndfTZnlJHbumwjaEU71C0ypd17FuxOstyRz6WqFG+VlTXd9aCeeUCYT1Y\n/RvngMAdVBpV5ssxSHiz0mINnMWsMkf34EzfjFJCUhJRMLBAy2LhTWyk2I8V\nd+Ow2ujymPKycgCWYXfmA8urijL3zRZPr0EgyxJOSzQK2PfXakN48Bffcn0F\n5HgatGDCLT3AdKAI1NAWyuq0TPtTMUgXXtlqll3w6GkKKUBiwpDEQrPyjX0G\nkTtO8PCpZXAbjVG/fk++y07L6wrbj5wQvzyema9TY7RrWB/WXuvW/zm8dr1p\nR9MH\r\n=mU6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtO+Mn9G7Xf+lfGALzI8c03rPOR/3l+ZDU8IxcZ2g7vwIgXgKva4wO6m6TvkYGo8U4Wq89p88rK7KV64zdBz888jQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.0_1625125270383_0.042423501977813194"},"_hasShrinkwrap":false},"1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"736e8e37d0f829729b5a0810e8d3c659ad09f18e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-KP39CCgtSOvwQuQR5TnEzm1KpoKrYljiwJF07Kqdh6BdhWZkU+5K0BP7EYiKTzYdG+hJBFAtRrrKIUZsix6e9A==","shasum":"2b0cc42d51dcee19b238dff6e4e1c56655d08f77","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0.tgz","fileCount":103,"unpackedSize":595703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3YqNCRA9TVsSAnZWagAAOrcP/3ddA9BTXdqGal7BRZ7J\nPKAKaTIwwTtYRHpFRc4Ph9ymI7Hz3hGaHblYNHZ3Jq/DmR6QLVWUuBmXurCs\nc/fflx5msYtPdhSGjqRemM8nMzeASyubo1TNdS0NfbHLrpHnpoxPtMB+7o89\ndKx0NArjsv/3H9gjcA+GAUVbRePaO2XNyZhnzKna/2AUDrQQ5e/YOtIrQ0lf\nXHmKJ3FTD3vW9gt/7LhCnlW2s7i9GUrVFDDUvlvqqKCEziy1NX+NowyuanVY\nNvADDr5japj+dRrHCdLKkysT6UGA422MonCS46lMgfFCtPnr11dgm0OBPiZN\nzcSCVIoooANe9R0WVNn32tiA8oA6toF2LzwiiEOpMRo4qKmKctQNRccKwygU\nOcQ8bqXhrRq4uZ3QyA8uzeSvB/L1DUOaxLVnMKxqwflxb7pkVJTtw0hqHu8v\nCZbVsjLxI50NTNNX1erpCi8IDf8t8eXK4Fgglv9dQ+vMbb3W3KK+yLXCdE/K\nKqS46jRoUINbdqduVgilegf7J04+UfRZQKGdIb5ftZS/He5BCq3fFSUafVf0\n3YBfSWRbeyL9nb7N2BGg0WgHp2VTDnKPkcRGsM6WSzB2iP87FE1BxIaPyDq9\np1t7Xcrqq2xDpzMYNZoGUuTJywgPtQeHYtTxXo5qOxUP1oz9nUi87LxA7b4O\n62tK\r\n=xhVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdNyDtn5CeJiY+BVtb0WkQXnHWRp+peKmIjKdTHSp3yQIhALJ7tdFSZePtwrCCQItXlLQdbU393RAwgXLzOWD6ct0h"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0_1625131660676_0.45812850394986615"},"_hasShrinkwrap":false},"1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"771fe62e1a344f85420ab3d71bb7c865ba53daef","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-M4SmgaZ7Tpsib327jgKfM8isC1lA3FDFCqyRngcOnwavP+/dZFa8ir8bX9lOxBv7OKI3NlZleLosk7esfUOnAw==","shasum":"5c0a5ee4a563e1829ac8f492845d782f4bfa7a83","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0.tgz","fileCount":103,"unpackedSize":595703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3ZA0CRA9TVsSAnZWagAAAUIP/j4of0zjPizOaDdNvdy9\nmhkCKXWUF+VccG9cVxMDmLt/w/mzyJkDeA1Wy1WSosihVTkqXxl4x1RtqzLW\n9B+cqh7oKALQb9KviN9c8c4ub+wIsfNWKEtRw9+sjx43HJ9ma/cbQKZYylmg\nfT4A3HmcDfWHoDXnfMMBpfJCMHXNOHorkJLYzGJYG0Xv6gzCGZAlf2HIJu7U\nmAANqaHTWb9f/ggZEcHDwd9vJv08PZeOb+vlBt9J7ePqZfq5qRtgG/BBwHMD\nhf+6v9e7OoSmya5iXFq6cNf3dv8g1ly9ICVpMZXa7hW+OrphTv9Et1u4+3LY\n0pC0NvBPgRqIyIbYpbvfJMT5Zfy+vcqb7IytfsXwrc0eLHIhx08sKuQQaBQx\nVYjJlPbzFuLQLPgXqkMadvpRJccGSr1L6FkIBbCRjp+WSdInnEtwxlLcu80Y\nhSdmf5gQeRQueFpkJbAXLE3vyEqvRIav1pqPYNao48CDmGPC/FWhbTpdGLYD\nsUaEBgYyl21KrAs6nmQErEub7MS99z1OkQC7Mmyra0jR3Av+Wmw9OcpqWhL6\nUGf6y8ds4MHt7k4qN8drvw0di6t7ZioB0gqVYjPq8YmdmzG4uWW8lShRIwoB\nzeZya5A0zbmVkQCw4iVZ9GbvvUQfsYYe+ZpwHnLNRRUmZm4cPm76CRF5GAr6\n9mEW\r\n=GdYL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAiS9LcyH5aJzpMq4gXLzgCeOtcOufBH+FEapg52d/+qAiBmtfNlwABcnIEQGDgeRRsQmX1hE87wGEFcPtYFoQ9kow=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0_1625133107952_0.6299388472402303"},"_hasShrinkwrap":false},"1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0":{"name":"@sberdevices/plasma-tokens","version":"1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"07c2557be80b207998657232d7649c4ab4f105da","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-3+nhUZTeoEvFu1dbM3YoPFbsHYX+x6c53bCQN4e+WYRWspGe0DAlFdPuaWdv/2jjBUnYpI0pW5/y71kZcdemvw==","shasum":"18096b3c7724199276657ff9520c44d8849041b9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0.tgz","fileCount":103,"unpackedSize":595703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3am4CRA9TVsSAnZWagAAvccP/3AuYdUtDwKIy1TVUa7P\nKMHE7KVH7dpJ540+5eEG2PP34oO0JA1xrnUeoOn9tYZJiUzF2IeRYSGtgyqI\naY/gLJ8F7JaqYeQ2tIPNVggsM1pAFCRWssAKWd79Op1m91F+xh5jQFe/6R6u\nlybcvcfczsCV4oVwIFQmfW5r8LlMzPw0UHhdIwr+yEjVeG5aRfNtqHPp/vsx\nKluFnMUsn52sBFj4zrAq1VHv6EKz/26IgVLJtbRD3HO9u27ZxHFBCTUCezlN\nSkjgiP61VDlilMYRJ+DzKJMQhTVY+itkHHFraW4S3TV7mdvs6/63gCRQU5T8\n2pJTGrZiPiRhfHU9kEoB0pT4ASp8B6JqaUpFiQaGjqVEUHFMDKR78Y8dELHj\nVjzVjwwivwuD6orCycGidGY4GN5EP/r5NYPb04D1G0uf0jIS5ZiwSfgYwc1M\n7Idjss2RY2ix7QMD4uaFDZwdePHca/KrQCogdZ1+3GROwp+m/nr+qZTmr7Kr\nQZm3SzDC6dqQsCo12Ri3KWrOErkdomKzzpokJe/uxfWTBq7bSu87ClIDNIfn\nakyK6+3THJsRUdro1ls2eUzyvUtJd5ixQkJby8rbTT5FFvVUbD57HptiLbb4\nYcH8kbJHE2zc/gGqPeN0vGTekCIOLeX8A6u//ZGfzkU+iles0/3lJlEae1Iz\n8fAk\r\n=Il5z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwPtxmQQ1hrfZOa1+bMd+JyLw+PM8LqdJyRzGYDjifYQIgVDCyKkndvDoHlAANStbMCA2QO6xLEkUv/Fwt/o0w5X4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0_1625139640068_0.3255283596339613"},"_hasShrinkwrap":false},"1.8.1":{"name":"@sberdevices/plasma-tokens","version":"1.8.1","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"bb4f2aef53af8af782b7dd7ba8b642b90b82ab2c","_id":"@sberdevices/plasma-tokens@1.8.1","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-B+M1ywpVVwEDcGS3kddKkJJkYuuhuYPCTOJY8aLzs0T5Xii0y9GS0UvdoQ74UT/M1ilDWb+grIS2Si8EsKoGOA==","shasum":"8700be58e63d094535633af5fc369b77cdd65ad3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.8.1.tgz","fileCount":103,"unpackedSize":595878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3a0nCRA9TVsSAnZWagAANJ4QAJqxF4cbPTQQxqpwRoc1\nj+iy0ayQdG69uZ3222GXc2l2K9tQgT9SmsLBLmYz2Myhn9AivZ+JkmTPv21x\noOEdW5HKymRIRtfdMvHxFrlUOyUKlPL28TWOH7A6PPa0Hvpmed8+twWgZkTA\nKT7Q7Bw1hKyTw5kjDlVbln0tP/o2IE3taSQc6tN5jlf1H86BqE29Di+PrUQS\nyEZpNf0oN9BrxMo6U7fcV0no5icpWEW/zE7oF8NP1sdCqPN9IJ050VQ2bG1d\nwL14Ebt19bKbzqk443Tu09oORJ2jUg7LaMdkJTMlWGdPIIK8C9qQXdSzlyOr\njWYgRIofeFqGpctug+/ZM1fnrPVEnFcelfO9Ik1WAl++/PeEOrqVZKg9zbI6\nhxU/C0xq9oIANg36P+RfXJlZJxeyNqCfjlZpsWCHiBVj1qMvMyXjhtJRRAML\n9EOY/jVQDwdL0jLjuniHEKO9EO0Qymq8MFRro+Oms+Ir27JQQwhllh4C/bDL\nAgY9kAOhkhIXi+8peTMSyOu1PmLXDvlKfdPM9lYyXDPX45ZDIVfZy0BYEtG7\nYdKxc7FVI9fop48JZjqzeoBUIJSh1PiNsKBqo6Dt8uS00U/Q4faZhqcqAMk7\nmvBzudXw0H7YjwD3Isb9QA4rhHlzpir6C8FnzILVtu7fI8RPrWseUG2AhUjb\n74Zy\r\n=xxkO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGa4oUXVlRKlNsPzwGsel7ex5j4REtGR+h1CPzlt71qwAiBpvysf2k0Dmb94BaGYGL8N4ZJ8sJUQHktybYYG39LMDQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.8.1_1625140518580_0.42892192959360753"},"_hasShrinkwrap":false},"1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0":{"name":"@sberdevices/plasma-tokens","version":"1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"762c92625b49eb4fbd6eeb00aac860f6ff13990a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-VnrnwpFBXbvqXAMZ+Bej0RhRpjO+0R28KyeHIVgHC9YfgS+jRu/UPrge7xRdQUOcglQqYAU3I7rPJICYMUh9IQ==","shasum":"71c4366fcaffd1466b334989063699f476be2e8f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0.tgz","fileCount":103,"unpackedSize":602625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5hKLCRA9TVsSAnZWagAA4P4QAKL9ArkExJ/wWsBvjJET\n8a6zyioC1mRqJuaI2i3yL9OQ1xUAbwv2gxjalcG8UcFtvOjgIrestqv2V6CY\nIeJ+WvhNYjaSMekS95t57B0dUIlOci5R8elJWwHS90rIRkgDmk1sflTxbRRM\nlRTCeKCjnhbeEhmxBMuxXPSCKAOJO859GpWVlJqpC5tmEF22sI/zju8MRkKh\nSoVzNkAKFK9Ss3dVieQCeCPoN9szADP6t5bh8qZLwtjEluKJDZxbshn9qedU\n2JR9ZeiLt0WMCbtlbzxUmqepjjoNbZKpTkTNTyAPl3IfIxz7kVfgTqilJNzI\n+m7gmDdmh8SSNPhE3sNgRj3zrrBZF/H/jxkKzKG2rYqKXblst6e2xW+9izZ9\nkIytwp7oRYRekiu5Ubo8AGbnWHzWvBkj9u0tFmhGi54P5ZTlygtARzZ57VeK\nzADJkS99ID8Hn5am1SLr2An2IOSsC6D0nQjMzRhQlLshn6T5LEF89L9/DTBm\nTr5jqG83QmBtnnzG2yRVzV00ulIC0Ft/TP+OXSxWM5PUprQYZRiJYV8SgVA0\nL6h6MoVl2zAQwldblQHjmi1SB/dX+++wN1ULSCsZeUoZkApOinnHTQ8B+PIN\nvh9+IxV6SJZe3BELiMCRVtyAm+wS8zND3Ocpu1wXRCivx0tDZOEE3uKUwopT\nEN3h\r\n=sHPe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpmx7oVBGYuwFFxnznkdaadOYC3u4dcmXcgg7taHlB0AiA8MySvNnIeFaWaxzOiEJnuaG5j+3VlzaasjqNQRm3iFQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0_1625690762895_0.4489010506150086"},"_hasShrinkwrap":false},"1.9.0":{"name":"@sberdevices/plasma-tokens","version":"1.9.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepare":"npm run build:tokens","prebuild:ds":"npm ci --prefix='design-language'","build:cjs":"tsc --emitDeclarationOnly && npm run babel","build:ds":"npm run build --prefix='./design-language'","build:es":"rollup -c","prebuild:tokens":"npm run build:ds","build:tokens":"npm run generate","clean":"rm -rf src && rm -rf lib && rm -rf typo && rm -rf themes && rm -rf themesValues && rm -rf build && rm -rf properties","pregenerate":"npm run clean && rm -rf ../../node_modules/@types/webpack","generate":"npx ts-node ./generate.ts && npm run generate:amzn","postgenerate":"npx tsc src/index.ts -d --outDir lib && npm run build:es","generate:amzn":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@rollup/plugin-babel":"5.3.0","@rollup/plugin-node-resolve":"11.2.0","@rollup/plugin-typescript":"8.2.0","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","babel-plugin-annotate-pure-calls":"0.4.0","babel-plugin-styled-components":"1.12.0","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","rollup":"2.42.1","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"e66fc61a53ef2622d1ea3d29dcb85ab21ec1dd7d","_id":"@sberdevices/plasma-tokens@1.9.0","_nodeVersion":"12.22.1","_npmVersion":"lerna/3.22.1/node@v12.22.1+x64 (linux)","dist":{"integrity":"sha512-GHAc5dUbVYlorFCLS30UXy7nQQZYmr+scSrULZNBsuuNtwB6fctCk/hzSEht36Q7dhW6NTAdDr29Wv0Y/nMrRA==","shasum":"f41945643262ec8dddb7753b621130639a029ee7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.9.0.tgz","fileCount":103,"unpackedSize":602862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5tLGCRA9TVsSAnZWagAAJLcP/ibCK3U97wTksgxUziJm\nttKa0XrWhm5Krh9ECqnbl9syM7eEbD1eNrEaQZKnTBIDRaFFJoyAzv31AnJB\nAkvV4GmkGdsinfsGxaBv8bs6OjR2gWajG1/mOSdzYnC9Mqe0p8tupxslB1d5\n8eloBURWK7eGjVFWXFPuKMDd7v0W7/ANKPwALBPwgHkJ84sE91INUbVsdR0K\nuLVWLaPzzCUTo+GMonJ9b7uSWnn0o+oejA/c6Ifr0hLj8GzR2Fd7tPhnnjLL\ne6JB/om9ZnckgODaPbIE9o5Ira5UQMCcWob7xVr0RAbkpkyhs0xZ0+EuAi5n\nil67ljCYYwDNCBU6726F+oziurh2qu/FY/aUZpoblrtIJh4856eZgMS3KF9z\n/E7H8N0urLkBSIcUTUASO0L5eDMge3TP/v8qRWrMunxZGQdKkr8dI9FaeXtP\nzGB5O1JtLGj4bmYBHHLzbyznLqORxldR/uw+uinPKAPDJDXsTKXf8piZWvme\nvdq5SvhpoQad+btSC1HDsvLOmcXo+meKML5QZlUcFO9ewAwHf75Fpi2IOWLT\nFHraHG6cMroUZHSvYcns740Boe5ySwV5YoaCeCsBv0Bj+/Y3DfGlcLH8kjDy\nRGzlHSUS0Us1hLFBzjJY6Jzx5rBTXNf3DrTo1GH2fgYrT30EpIbVf3/Lx2N1\nYELZ\r\n=ShP3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoqChXCDTkaKaXa7fxNL1wawppSPzPLtett1U0U9co6AiEA5iaVCMnAV+NCJ2mW+526/lHjLqrWNR2EOB6sXAONAYs="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.9.0_1625739974248_0.5391691045980351"},"_hasShrinkwrap":false},"1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0":{"name":"@sberdevices/plasma-tokens","version":"1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","postbuild:tokens":"rm -rf ./src","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"3e245057673a7388b29157bbfdde34c4fd16f614","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-2Ffn4CJVsb26/3y2Y43Ug2txnAqltXfue/KLQEMCG++0fHCyMjeEPN+rftd+PC7DfgPbe87nSUtaXz5Ynx+4Bg==","shasum":"240f5216d1ff3ace45d9620523b05c30b65bab71","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0.tgz","fileCount":185,"unpackedSize":407522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCoaoCRA9TVsSAnZWagAAbzEP/2Z1CyiElW/fkjSlQlEa\nL7fnVLC7OU/UTAtqViebnJ5n+djY4VhN2CrVLJBMO6rByp7RNbYmoLBIDoln\nQGOhtfNxw52ByKNhoSkvfKRsw0ba/v+cs5lTN4ghpSE7jjdhfEPhOn+GU00G\nRNU2ovpkiw1aFSQZ7qXpMj16DR/eZ4fS6RFt8CKFzZAoM3w5npg9FYjBh84F\nSR8ijEGu7bQisEx59Ut2QG2A+cdda7gjxzTi39FBK7Za51hvnv+KJMr1nzeg\nqGdT0Ywv1EpQA+TL7oj/Nk0AgVYJOa49y6oRZgWsMhWywspcaIlzDFfUqkSn\nJDd02M24xG9RHtqxYY0V3dGlLx2q9wPmBAFaj757SSfGvdTCIIfbAZKCfxll\nOxt0YQEWP70Ey3znaY6NwK4eL/tv9cWMnsZmbC0BVhBLVJnL7Uptvez4bPmE\n5dDrzBRM+EkqOyei0GnyiKjsPrSSXyH2Feu7+6ESiNy8nntS7q3DWq4XLMQ9\nW0HhbhhxdGjIo/WfS32XWtbisdl/bZ/TMTBwwI/eB7DrZed0PfbNemC5Bgzh\nZt2lhLxI7vBgWLs6BVExuA0WJDHCOrBNksXfexjVKITRZgm3WpJ0SU7Q6RgL\n/7f90yqLIBYP90UHK9/ZaQ05CucJtscsML64KjBK6u8AJeVoVBhl31P31bPE\nQQ4I\r\n=B6kt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeBLhDsmRVEFgnOzARWpQk3aCtOmHXTrbktS/7FchKcQIhAN9+HaqEdT4gtQZmSGPwRbWlrlVMBnv+1vxuHvkZ7zE9"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0_1628079784466_0.1117695872487603"},"_hasShrinkwrap":false},"1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0":{"name":"@sberdevices/plasma-tokens","version":"1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"e526f771f3316cb50dd73fecffa2fb97edee58b6","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-y8vQnIIu4I3YTqfNhuW1T9Rgp7pfjS6L4+vLCMMZ5N2owE+8ATZYbE5XXiEA/qf5mt39fiAw1wUCfwpXgwlu4w==","shasum":"9416b79ad1c6b1dff89f521f946fb11592be142e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0.tgz","fileCount":185,"unpackedSize":407484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC6oBCRA9TVsSAnZWagAA+bcP/234pwJy3agAI1dEnnZK\nvo1A33R/8muAPqZlUkG4Ni8gm2ELE9u2PIB3rBoP/t6IjbU6kVrQ+bucyR1E\ncS89t6HeVewCa725oNXPGtFbx9MA5nlK4wSEqKSRBuff5fpa5eO8urGtkJn4\nR9ARxYOiccpcaCusZ1wrxmsHJCv00EZu0ryURoMwmG74pLPI8Zy+KEyX/qJu\noxYhU3UcYrcc9CQQ7zIdphXLO54rKw7RxHDeCz6B5ViF2Yan08wpHTIHTF+a\nArqIdd+WN8IfimqwJzpa9nEz2n2zUxr6obWrnmi3GaET37mKQIaNbxqy3Nxa\ni3M0Y8q7ZOhDAgIzPrn/DPqfhOgrXxQQf8qBT6Nryh9u2Knb2V+jeub/lIHQ\nMtKbFgxnKnewnJyytDMDzdCUzbAtUjY/KCTjiKm2UQpny4x/3/geru8g8V4K\nDnfFSKZsXfn+VN0ftHO5hSjIP6JGUMCOsD35roRxVa8/hA0NpN5tQ0tFMNlR\nVfSTEKBZBcmOKPaGeMcLmHoABfLUeSDjc96twlJxbbPmCP5eqv9kFu4e9nLe\nLCz/2bo31kcuBwGb6BbRBrtdgNpoWGhhFEisD08+b3BQ8uPwjtlSZKdw02Bh\ntWrFXT13afcUNgdCRCeekWV6RY/XliniA47ze9WwukndQvujcUCxrEea8U0s\nomGj\r\n=fS/D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkN4WmcUipojQyOL+LTX2W3XvnwwfTVsHGkj6JWF2kMAiEA9sxNrsbMnz1Xi6QT4rdczZGMAOxXDFLBFaTPU1HOwpw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0_1628154369684_0.3102546116188727"},"_hasShrinkwrap":false},"1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0":{"name":"@sberdevices/plasma-tokens","version":"1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"008f304ceb9d660f0e3f296f08ba83d76369a6fc","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-/3+mbfwSnW5dsecmI8llBMzUI/9bFHOT+URz6jqyGt0ZdlcJvSTbYq8Pv+LCia/qFYBJWBk7b84XnDuC2xuYag==","shasum":"894369436d38e6025df892f7f9df1819409cd6b0","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0.tgz","fileCount":275,"unpackedSize":562120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC8KGCRA9TVsSAnZWagAA7qAP+gNgnmNCVe1J4YdIyquN\nplgxAUXFtogkn+eLES87ySdlRxH15GIBBf6yz9ghxy479IFg6n/yJQW/+W0n\nguVkGxgCjDoEsFt94eDPIkpdd8kQ1GjbM1Ql1HKDXIJlRVXwNiqF8kjeFzqh\ngeX2GmsjNwuGfqfgw11F01wc7Z4T5QaO3TEAypIk8W2l56hSoxe1sEtQEd9x\n2TJ/ry6yVbpynKZ5wJynj5I/iCaJTocHpDfwGR8N7hhWjTzmHAinEI4TQPmE\nCVlUMpKs9av7r/QNdJIvKWUH1bjFK0Nlxtzl5ty8v0tlh+Co14FSmTIgiYCS\nbtBxcMbuobiD7xoCH80PiCtaQAhiXByzEOjRaZMWw/KHlsFzzEN04xKNhrcT\n/6Y28qeKWxH3EYhQQW8F4K3gU34JFDDduWiHeKxSOoezDBdYq1pqA9hNkG0V\nTdknq12pnBwl1B8UFwGv4440qqxqurLbgrzNtztXd6i/VEI3rsgEGsaBnNys\nLytUAzNGoUZ1rQuf3F0yuPSGmd3s3vMrAC9khlLQ8IO+ojGrN4sHZ4OZ3dac\nRNqUZytcTcTk22/3lzyKXT2V7Js96RaLFMH8EK9dryrvFzwTG5YedDzCPoG7\nbFfuJVWWW4lrg5+z9A+Ns4KdTSpla9Cda11EeBktxg3n3fkVhs60YQkgUGun\n5qNM\r\n=GhS5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4wAGGh61XAd+HjC8Z13i/LKL0PkbpZt4S6S2ufzBCGgIgUzh2G3Za4hySS0N4Y4VAA/YJP6Hh39y90BUSFXKC9nY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0_1628160646655_0.3369340591357368"},"_hasShrinkwrap":false},"1.10.0":{"name":"@sberdevices/plasma-tokens","version":"1.10.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"bbba84aeb9a5dcfa411a8157dc80698be3b2a611","_id":"@sberdevices/plasma-tokens@1.10.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-t8JlgGalL9yembvX8pyxirsTWgMeafN0X6gB87PO7w3JbCT5UOfwoH6rhR6kpCTtu4ownPeoGyxB8EcmWl7V5g==","shasum":"b12ae48e7f51453120337b70ec98fbe2ac71d1c6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.0.tgz","fileCount":275,"unpackedSize":562340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDP0kCRA9TVsSAnZWagAA/ZQP+wW7Zn8SNguLBb4c6WGe\nbVLTWeh7jvD7wG4VctDRwophQN4tQf74MeCWCQlCEw/IS6uEATA+QAt6fyhi\ndxbPBgQ8XxF9gSDSeMMW51YiEk7S2pMyIU6RPoe4Xtdj4VO8RqPQMSHq4sNq\nUw1jgX2EuTaFSWPtwfeJEgfqH6JX5Hy55Ii+xEJNC2IlVzyTcLcPus9JEKFU\nsxyB6gehGKFl1CcgnIMZtvrLsHhLvwN7Q9wpvxhGyQ0WaDM8hyO5z6DXVR5F\nt03zZWKLkT0e7Z+wwzYCxwAc2fOheE97TZv3m0jqr2HyukssjUQAswxkdJ4c\nmx6/Rf3HKjezw15o5jUAf2gAQCjf1Cszsa0F76bol3airlQfWVfxumYpjhDD\ndEqfinJmBG9AkW2wnnM9WSrTeCsWVCw7Rjzio8dWgI2YA6fUflsZQlqvyY5D\n3SuVJ0pCJs2yrUJJNn0gt29ye0AbTlJoSn1E/szKV0hGYjRUpPk7tMIg5Qgz\ny6JzaaQkMoMSIOHvNOcrpPw92ZNPI3cyv2j1tk9LCmasaoZ/obFzmDE2hkiH\nnrUgdc8bNOaQPp4cRG8vdTd8rsfmgnd5Jl5zaLK9crZ5pgVxKfsa/oSVy7r0\nt/0ythkzwA06gMnKfJIyuHKNIPGBWsp0SMp7kDf+20Bq2WNHjZsq3JMJosPX\nSmiT\r\n=q6Tp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwKh4TcbW+elc/LVcPxAJcpkBu8gCCqNgjNUrD6rfq4AiEA+xmpF+ZNt7JaX5tjUVznCTQ6VrZkIq4NfIDWu0NRea0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.0_1628241188409_0.02682849301511836"},"_hasShrinkwrap":false},"1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0":{"name":"@sberdevices/plasma-tokens","version":"1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-WcWibVd7+nBdQ+0Tus/WS+9Bj/7bNVtbUMg3G+wi52bZGKDNLYyrlh7bdlCIMLt4OJlstTXf1/lPcKHDK1alfw==","shasum":"8df77f368d2befaee18710e93a8fb84efb0fbea5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0.tgz","fileCount":275,"unpackedSize":562394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRI+CRA9TVsSAnZWagAAH0AQAIbuXhzBWfoGKyrqhD4g\nETNmi9sZnTwhjvfycXANiZ6cDrato1yPUInh1c58Q4Zlm9sPOekNz8Lx98LX\ne/Lpi98Yk0bOKA9QqQ/kUU4IJpVwq26UZb+SVZDlzVaGAhjm+4h19lX5THBn\n/NrAgMMU+Px94x2rUKg0Soqlx5B/qzBGMlFnatbfKVsEF/QBJKi2FKG7cUMr\nBCw2geJmT6e04L9jtGFToMJ+zaR7K9GQS5yh/TsxqXNLZQZ4jIbPGTPcmYAH\nCmXZE2u8wYrmIZPogNX6+ZrDpa3AsIBmdYACx2DMfOKYvtcOSLw60qKk4+d3\nrzCMScU/9cnsjSBVdNe8x9zuKPQBU+srdAjbW10+o1qTCC9bMaLK2ORr18H9\nY9x3Pv4w9V9ixSzWMHoKf6BrntYntpogsitLSm8OMTNSTmLEJtBjMWKfKOqe\ngDlBd7C8M4H01du1qJZCWnvddX/p2Jx44t6q9MzyVt5Ex+zQucLp80I9ga+R\n8+JsMj5aEVvOl+KfHQpQEXifEI7kMio0H8tAGHQJ4EGAg48zmRIKhJr4hFQN\n4UDHz3hU8WTSx3QnbAiCdgQbo504BGlXDcc8H1LwUhZQUgaf3NtGeoAShJzf\nBz/lC6SAYDOiAfC6sPeXyE+xZmc9sDr/Qq4tsRCMJCh/On+5eysBW5p2UHBV\n5g58\r\n=0xmy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDps8pvG6Kz6ZXjvBloPfV7KT3TQ1Qw3dnZpC1mi3PugIgOGe5gxKCpP3Q0QAd7aN5+hSMyX1Yt8nd2OiQPpCjxUA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0_1628246590112_0.09428210362155443"},"_hasShrinkwrap":false},"1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0":{"name":"@sberdevices/plasma-tokens","version":"1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"90449a9d616ada58f690d4ceaa49d67aafafdd7d","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-NYWWva+5qVLRfWiDr5iEet8syUzmvxp2DOg0fOJ+y3EkSBsp00cOtvyQ81v5OmH27ptRVFdKWGabhv9cjxNH/w==","shasum":"c39c2fd358ce43855e32661237c9a832860ae772","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0.tgz","fileCount":275,"unpackedSize":562394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRWYCRA9TVsSAnZWagAAZykP/3PY9mIyJ3HjdBlx+N/u\nvU8l12XK+/sQlg5hYLgpMb9RRoLjlUYTNp/2zoZd5ntbkVFfQQJtkCEsOvHg\nyfZMMW9OItEljqeWdLMsGvgHq9xKxeofp+6iaLdVY5QGkVDfUtY+Kb9gAQan\nmfRD3GDhePoyhE7zy/zuL8qYa5vn3Abup+7ZwvGJsfsaLyqNspmRN9XKpF0g\n2wngSX22ahj2QQW7OQfUph8aJ/ReUBB0ddawt4L4tMPxDY1pJUtQAn4DlOCs\n6lrqPOUixxbeKEbdCeQvxWqmu/A+6fB4gAdUoBG95s1yDWvzZDRBBVJ0o2UR\nNLkz5tv9lhlK+ymzi1Jdy1T/BefSLXAvLUTyPwZ7X5Fn19aLofW1Wi1qH5IQ\nKPPBgPtkKOwk6QxywX4NHCW3hZHTF7xmNRA8OpXdaJOkYOdC1BNWd6pqqEMO\nJKKfPwXaOCL7WnUSHYb8MwTGP36DfN66HYnIAubO/a6r5DTPJOqA52yUeZln\nvNsyohSI1xtxbTsn4TJtiexJf/yLpgXcTd95QcBKPKkCb2k1uIIA2muiu5nl\n+tudQ7HrrKPViqJBFu9HZYfoFX8i6gatiULZROLLkdyWrKDnKcau4wW6B8lP\nV/ilkEdHK1dcoKc9BtV0gaaeqrL++bQU+tox9GWMeVKAA/seadCfSfVL8Eli\ntY25\r\n=ffbX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgTDiE24y2M4eQRVXM9YoEH9UsIeu7Vij7UCSRjemT+AiEAzaVBkWP54fSSBxpQSH1Felh1v0o11psFfd9RY01WYGA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0_1628247448332_0.8664586468675946"},"_hasShrinkwrap":false},"1.10.1":{"name":"@sberdevices/plasma-tokens","version":"1.10.1","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.6.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"439a2f06fb7a92d8225cdecf19bdaec47b979d36","_id":"@sberdevices/plasma-tokens@1.10.1","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-vXCMWgJCXF3fFofWaJXPmOsqDy2Q1q5KPZ6OhH4ABbFne4Zo0ZTVW1iFDJiOwmqNFft0bERYTQi7gELTjqCUQA==","shasum":"8607ec97e9251b02305d06c12daf3e5f00ce54cc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.10.1.tgz","fileCount":275,"unpackedSize":562568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDRkDCRA9TVsSAnZWagAAX2IP/1I/hOSxQqUDwYbdHEtl\nKuJaFESZUtjMYYRd73qevgSPxMrsYq+KAAjon6Exah7Fxnh2H0+0P2hD2jNP\n6bKBZtPI/zEAkVQcJQxvWTgyWUCP7Qi1ettqouxxhwducMQKQl0s2suSNbDF\n7TU/x6FWLFXT+cUJeYi+WfDjUAaixRKLBCeUzgssvtw7hrEQFedWGr1+zEbn\n59Vej3+FAvS+lW6IrP4nzAEl37zAkMvoeTbrpOtQT02kJXJtTlF9FLem0I2p\nKGtt6C1VcyP7i7bg0VB+Ep4h+EDhNN/LkPQw9LdMEq0CKbwJ/nIMLI4UpVdK\nlNZEIaDO19hsxMh072YKMzO1u+ghP82Jttmu850tENVO0X5r6tbd3SvhNmAm\nmWi8scDl+eIB9XMpcF/F7Wh92V4SFlxMlZvkFP0xjIxnwPzAjFDGjyPKtzUU\nczri8DEMa41IqvPK3u/kSXeSSvhLlitBWuEAUfwHxcOIq/aGnrXm7pIoTOF2\nNcZupH96JBJ2KMJ7FHMYu7jU/21PHvMW9rT3b2hfTDfIJfFHk5Yw+YryarAc\nT2TQyMLv4YTDnFT6v2JDH4b7jUsqx23sEDq77odV72Z08Qotw7CGv15cfER0\nWQM5H7MxYbnJuPOQHXhJYIwcAj9SuxeM3uEkxJdPLdYhdIwtsaCwk0mhtz7I\nycbh\r\n=iADl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUMuCgGId9+n0v4cYLgpPLXFohXCsS9SYA5gkgBGY19wIhANPll13ruNqQRhrK23M1jQMOMh2+b8EDoGaPzL3oI57y"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.10.1_1628248323810_0.9965784770843671"},"_hasShrinkwrap":false},"1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7b95e9b232adf3c4024bbead93a8bb8c0b59d79e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-OTRy1cM1a2dYoSzjFKFFBPl5D6Ge7GTJZ7dmMNP6EoevnAh/m7oU8Nu33/go9jpSxREWlzFsd0PY1MQdr32lvw==","shasum":"3c8f4d7bd81c8710d4b99d0b9a45ca31f6cdd40a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0.tgz","fileCount":275,"unpackedSize":611442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEYNCCRA9TVsSAnZWagAAq+UQAJdHvL2e8dT/v06zYdGk\n7m+bWWhJOzohM2PSbMR1i4RQBpTbmIOrFwatwHoCeyln0UvU/2aDe1hmI0TO\nkJPWVW6Lm+8ya7hTBXjwxtZ0ieq1uRk4hlCai1smHyWASfFjLgBhA2lq+yWt\nWnMIAjmMVKy4Ttztoz20RvEEXAeGSGDP5JM6bjdk55EGlAc6NtCTVJRkABNB\n7QU4XavY1ZHEEJtyz7XJPvVJtO6EfpnAFsX9H+RnoE0KuC1Ef/EdUS2PiHfv\nTUtIk+HghRgW4ccEriYsynNySeCsoGxzhEbcKY99+LmwOETD3fZqQFhL9Dns\nnUzVjPng3Fvxi7300neKswHI6aPnWa+VPJkMSIyvfQuYgAA189Jy+0Xwem8o\n1gRvH6LtfBKHjNb2Og93/lnQMVnoUY/eAZAKZ8Ov2//yVveXRQ8eYSnAgd29\nY8YK86QmIAhIe0blT/XBKMj3GSGOncVZSwjrmyFzOF/Iwckf+iQYceotYk49\nY1QlRYqdRDtPEmO9/S/uzlactW5c/zpo23SYbksL1k83p7yEM4Ofx/eg1jOK\ncOFBN/vXc4ARsYvfXf2MXOrRxwmfi+7x5OzWjqGxNHH1YbJUXDAUABMO800P\nbxNfnvzpbN9iN3WDtP5qQLCSDmFJqHgTzQv3H/aMcJCTAWqJVu0lA88vSZsU\nUYOl\r\n=YfGY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClBsJI4QFx4BhgX7QYfag/AFJd8KLKxS9pea1hFYTX+wIgFoIkqi5i89/eQTtptwV3yZfXlsztJJOGfNeemv8KvQo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0_1628537666005_0.28725754243124246"},"_hasShrinkwrap":false},"1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"548add975f5b266c622c82c7938940c34dfe04e7","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-2+bAAUy4mAMBPPvcpmFIDBKvKgdxAHsaDPZHfjVZPsgsYihkmP0diEoFJitk+Uh1vR/1rNOs6dpqmKI6vlHbyA==","shasum":"6d35a663b838d51c17d8850d1fbad1ff5d01dc3a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0.tgz","fileCount":275,"unpackedSize":611322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFDxsCRA9TVsSAnZWagAA0ZkP/1oWzEq+1zdtA3dnIfQo\netl2EszS8Gs7yfQvDXD0a0oGXJA7nJpZG5iF54tWP0wSVC3jS1yaurBVbNP/\nB8/QdZuBkBr45g6LobWguBCBEBK5tJLD5pcNpCSZAhjnJPhQzHcZe9duQVDW\nnenC+cjzduCb+xEZA7Ky7+2kOJ5UGmaKAMuA2KzZ9VAqP2ySO89n/NvgjDBc\ndBlSW/c8plilnM/rA047qgi21uEpPKrYZd2HZS3HgVRJWMwT1MSzMWL9AA1k\nd8O1kqSEnX9Pc1+8qbn5SlSru7X/qy18Br3JgWWOjMcLFp/VhBqbKbYRQmVt\ntI/ABLkq+Bi8jf9jK44T7ZCPuVJgOwnqpmMiUWPgmpHOTMG5/YYQU6hF1mCS\nFuP+zHsRtqzaIA3DkYmOw9j7KEXeqFz7Fz+ECQ1rKxVDahz7BDi59u39gZ9v\nSbdi62rErS3LPzF4HaSscBMvDzmkRsGTh1A0CUxEaOheaRlONDglYG+UZznq\nurZ2KGUrDj9JPZ/Q7JcBd0G2NalJIFsDm9dUpPUw2hfFAB120A3gyvKSpqg4\nVyxH8/n7Jp6K7cLEGNdumzPZoPIlr7dbMQk2nxO2ppgBQgxYw420DLavbuqd\ninPggdQNGdmnNz6A7rWhefA6rDTLT8i+urKeummYKkgqYQmmtoangUANEYgM\nWOo3\r\n=w0Ef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF5LOTP4PNGy2RJkVKTM2L0d+gsBJI1qZgZvSSorI+5wIhANcOCv0Bbk4c6P9/ErNVNoM6tLkjTQ9bzw3qoG8QI+Gn"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0_1628716140076_0.5827633984253004"},"_hasShrinkwrap":false},"1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"9c62fdb39631aaa19bbd38555657121510cc7f3a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-3VzptgxFSLGoUMgtQvqEoM63qxFgw9bagATKi/MvtnXq1UEqBE9oHSuCeSHBPH5BkeYsXYEdQJxVevKMHdYf0w==","shasum":"69391ca3dfa171425c3d90bf35a04bc4bb1beb7d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0.tgz","fileCount":275,"unpackedSize":611322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFYPlCRA9TVsSAnZWagAAFhIP/2AI332exeBMH/YIXS2A\neD3JS/hkizAVho/88zHye29uOJT49/2GqZELwdDoesPIfUukl89nHFK72zJy\nDrMf+qcx+xwz8UfythhLlfcNl2sOWxDbuzxTEvKiHVax57vRAeFInBYRGzra\nUIWJKX0Mnwdgst8VpzQf7xqCdKVyT5B2uZJtb4yhWp8DStqHUn0C2kG2zEmU\nKr7R+OQCg5ly8CYTtKDmgKRTH1NMg12jR4OjbL8qYHXg+RbSsVBOFWl9ECk4\nhSWK2ye5BXGCGTf6bW0KfT369qcA0mck2AKBBVNm/lYLqo89HIq1KS4+7LVV\n0Pieb3096DE83w8D8vxALfeLVsA3llIvBwdYDLJGV2EKehDKmdUitwo47doP\n8MLDExk+er/TVH7gwXecykOuq/9kFmgDrrSgdkORo+6AkG9owxn/wKul096Z\nNIAzVDvOUy+t6mKi38w1vTqwxW7j00+DyOmilzPn3S6VTnPY8HYt9m5uldZp\nEj2BAoUjXLB2UtKTKKi+bwNC5HpcbAMMs0I60cS3NKtTjKglOs/z41+YR7bu\nULCTd6O16TeSNIOI5GLAlNDDkXOXejUlrHsdM9KtRib10wDOPjBYC0MGLpQF\ny0nRx10A8D0ShKSArcKAlWItnhkVGQyqXRiDThjWKUgo154sqGxdoueYFi+R\nqlQf\r\n=cYKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD17hKeAHjfT1uYnQfYMxtqq7xjUj1lL2jUZ+C5DKKgHAIgHXWRxT2wC7UuHq4toKgFQJXhQk8FaoVGLwLaYthqUgg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0_1628799973254_0.2959729376544791"},"_hasShrinkwrap":false},"1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"640e8bd2f0e4546f43609a6ca7bd075bbd1ad669","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-k1Hr1MVugXXLfS20uHQfcZ5QdOJQ2Bov1VTzFPKXc+WsRy4UeVWxd+KRSnRg81xlYXAiKLyoKHiuXh+xS1e23A==","shasum":"4511696c48198afa3b97de538de1fe56cc3f883b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0.tgz","fileCount":275,"unpackedSize":608514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHN6OCRA9TVsSAnZWagAAG0IP/RD0AUpzKRrUhRoJlUQi\nfu/jB+dft1VVYu074Hmz1HngWamNZtMGAmyQJCksakr+OzfLEQlPmfZnDsZS\nydD6HTtfELSVeeKFwA1ZVE7uFu4e1nKSgEA8/jbI+gshaUehkTcFsBEpg9DE\nEmb86wPJ0/+OO9mp8TyoB+ObytgQSJXT1psE6XZMfxNBUYf2chThW3nLg65n\nMiZgzsO9Q0AGsRNPJT4hEvujpXfNCf7gZqqQ1Ho6Oj0Oq8XrLqqT+93tltBK\nfklr7ih5Huh2zgUUvNLmWNrdvhU/NnX2xCzXV0dBq70+x8VJkTF1n3jD5owQ\nxeVPSb9ecGPqk3fg8wtfNtK0d7BaehIWgbRCwspz6062qInhpd1HySoBhyAh\nzEATXQaDR/bESFHF+Yj6qLo1HRXylgV7I3J229WRJbmPapxzMj56/G+5hdMf\n7Wy0zGyMoAwqdGHjBTe07/tQ35h8q7pa5OLVxAAPnApc3Hf692TnLqymkq5q\n3w46k8+5qFPREE/dtV+M9BwMVOnRa56jDjph5vlf8LahngtAdghOC5YiSSBN\nOEyQQvXHUOpnzaEmOVUSBTcNLn6PhfrfnbS43xPITtBlUpceH6jJp+oCzgNB\nLsszBXJ+wchykoW7knOgL+M4oL8P9pb+gO7hxGgJjhSkD6jm4UOb6xsqIhin\nziif\r\n=DHDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYu20IgFWe7SjzZiDkcDbLaRJHuJgsHn7/wnz84DTDYQIhAIiQvvhWYqOxTmlF6I7HtS/kJhNjd1nNrHpWrnfcwes0"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0_1629281934358_0.8904743343661112"},"_hasShrinkwrap":false},"1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"5ff380d5a6c3de827e29a3ded1f45c292d64a22f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0","_nodeVersion":"12.22.4","_npmVersion":"lerna/3.22.1/node@v12.22.4+x64 (linux)","dist":{"integrity":"sha512-LDcSX2CBwWCKa5pgVN+p9U7S4J3/3CRj30VYDcNnrrN4S7erYdDrcpn27m+Mpt/0cSmkdbVKGsQftKnoskdVpg==","shasum":"9566bb01590eeb6a6e8914b2a93ed81df3d1083f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0.tgz","fileCount":275,"unpackedSize":608514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHO+7CRA9TVsSAnZWagAAz2kQAIYWwuogvCCEt+RYcq0K\nIYhiRWHDuKsFXYb+mAP7zxSgNJRvyuusS/pilrX0ERMxYGziihsPUf2y5VZA\nyqrRd9/QmiUnrkMO2WhhpQAXIjYIQTT6U35xroqCTOE9yDFiPZW59ZtuOgnz\nLwpcnwL9G/ZalZHLnTBW7yp5+NyLoYXhX+OKEZW8beRjNlRJimBU6VDDJhCV\nGDglRzFLx50ritRYQfiaWWzd3HVxR1TEKc3wWnJSmdhP56bv7FB2NwI7KWtV\nO9RJ0zB4hdvEcjRnKl8eGS1VoDtFlxyhlo49HNwpHyTaNNwnozXn7i8f97uB\nDQuQy45MH5NkyKn6eq3nl4/T2js15bNgCbgiCdKkgjqRhhvck0JuJgnZaAmR\n+8Xp0krpZckYT7iY8D1uXu/wMpCQpwIid0VElM4U+V6d/hDD192qAML8zeWb\nv6WwmZkwl2WEkiFGOqdBbCBY/QooQEDaP0m+3Mko9I50VdGz0tqoszyknyuZ\ngBCaxprpbzjHnTyKv/wjRrCF5uomQcAOkchjMtke5L6U5BvFrbfchFyyKNG7\ntwiPwD3UVfHAvOudakTWQbpxvR/RrAQtSMgx8v3cQgspfYONpDZoWhLssR0r\njhuus/4M4FvQ3nbnAn7GJIf8CHB5wcOga+viwV4aknyVVTzzBKMN8RlX++t8\nRMEt\r\n=zMc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIFbhZSytZGh0VVZFuDIcw3osFX0q0KZXEBQsjcM04tAiAmLrbgUgfDNuiftF9DvLASfMAPcnJ+Y8Iz8GDBKYmFFQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0_1629286331625_0.8751800060915431"},"_hasShrinkwrap":false},"1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"9529cb00a93f0ac3a5421e616436186a6f04b29f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-RhoC6Vpsk0SFvKVg1QGIRg+SLWlUuuGJptDRDjFXHUFr25DlRGIR/8c/L9na9lxr7EC4UXv2ZoqLJHROzZiWZw==","shasum":"15f7a797659afc5b1f2b8f4f092607591d86e6dc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0.tgz","fileCount":275,"unpackedSize":608514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH6VRCRA9TVsSAnZWagAASfoP/0YlHcMVKCjGp4KA3cYD\nzXwb51aA2lWOgOca5XmKNBw/01neLgJlb6XzgLRPqcUilzM7Xo7WYe7pDviY\nn1vBxeitKkaIZAZ3XlDz3J9JlkQosFrTAxOP1hpDCDbGbQ0ftnPGslle+OqN\n26fkF5FMMU7SuciFTHdhaDppAEMJNWDIevwI+Zh23Z0Vks40wiBy0f20vp25\nVrKk7n0WxWsOXQXFxt3IMP6pSjptlA/V5iyW3Li6LrxECNCZk5lRf7v5gS2v\nUjtWzwbAcgBwxY7GZPrFM1fQBWghnOqMz45G8+5rhWw0aQypmIuhu9e1g82Y\nv6IrMSACyTvpOqky9wexiVXLJx8zhkuFXWyLuo5cJfDLxl7J5fC5BrWxXh+W\nGqZGarsl62vCtfefrIP5qqasNP4julYfuAWVndlkupw8auZ3EcNjfm5rVttA\n4voQr3WBy4P/8IQK/+XHRocEPyGPnNQbbT2BdyApGj5UwtKtxy99Wfn58s0g\nf41p9JSQO3VMqoqqGqPl5whwmpCVCGcHMNFbnOy+wU/wFlWX+C/yRFTsU45F\n4gL3WD60wcYDPu1rJeifWf/TfU6isgLHzCWAIvymY4n2z/uH0rSrvTbHSY7F\nUnP7cZSBa4BhDXFbpA++NgjgYpXgnlck4vEUQd4kBuLZPWJuoRJIdR+q5hyQ\nTtv0\r\n=t/+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyT8faodEbjg8NhIkzzHp/FLo5n2aY7qZNCjaNVM3G0AiAZ30QIopVuABdLVch3Ck0wkNw/VP2WGTbxnLahBDMZSA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0_1629463889450_0.39732198896756943"},"_hasShrinkwrap":false},"1.11.0":{"name":"@sberdevices/plasma-tokens","version":"1.11.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"53106051d3ddf45cd7e91240196921ac2dfc1b6e","_id":"@sberdevices/plasma-tokens@1.11.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-vJkvhq9l4bbJiIxjHbhxk6JEB8roK3rRp4G1wq0mpNrqqoMlGkxputJnlDvSDfQHJTVKV9oCgE77dWWKoya63w==","shasum":"d5ef98938c883ce03d1bf69bbff8f05fd5b2aad9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.11.0.tgz","fileCount":275,"unpackedSize":608669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH69cCRA9TVsSAnZWagAAnpoP/i9TMGfi1M+l2Rx0sMXB\nlWDWI8mlwnz/4Uy+JvSTLNwvLI5HNeG/85hF5ZpmqBY7xZ+45L1YjTY1lX05\nKHZ2lnjh8c3VurTZlYOl4EIrfgEzvEkCRjP5yGx3dpntzt0zkkvZp411PoLf\nEYoEEK6NPhz4LTcOvprt2edIACGcWVYfL6t6fSaOUf4uKpjeLPzLRymzCpC0\nJOxIsAZ+F+fnOMaqop822p48+f1CVfXOaucm2RD+8cUROjhY7eJFeWlIQj1c\nBzV6cn6bGp2O3ws41EAYhwDmeelv4bNwmqobd3wkJkaEjLmrSLzGtR6+YxSO\ny9UHBp9sCeioFu2bYxQon0nIXJBM1+EuGR495MRJCpxgRktu5c1c1zSzj0NB\n35kn4//r5DmvcS2yKpHLPoKwtMyzTP8cNfla1/xUX8BXvIXl1nKz4QXRysWl\nAjtYVPjoseothBToUTyqPyJJ5QzAkTEzeTskU2dUzJ4eqinvHSeRUiT8TRtF\nEicp58FmVq1OvXctdVoh6O2W6NSfiKHztylArMOrJV9uDO5sg/jCZTkwlNU4\n81Tt9GszFxDaORZqTlntX/lkAvezmU09xwYDcLMsHRA568YAxkUqig6idEJx\nvXGCx+IRo2eqlTcshEKfAQH/Wj+KU3AL7Z8mCdnEba3Ubu9cajcyayG+XQsT\nEgc4\r\n=yl2r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAm0T+SR9bFRpgAOviudiaJbXwtAsBt4jvFeYpM4UBR2AiEAryR2pI2tQjboolTp1lBIU5fFhrNEXqCi2Njuh6RSanw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.11.0_1629466460785_0.22837668616238704"},"_hasShrinkwrap":false},"1.12.0-canary.650.21de578a613efc6d0922dcc8224f5bf23ed4a34d.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.0-canary.650.21de578a613efc6d0922dcc8224f5bf23ed4a34d.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"21de578a613efc6d0922dcc8224f5bf23ed4a34d","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.0-canary.650.21de578a613efc6d0922dcc8224f5bf23ed4a34d.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-eWxPBnntZDYg8D4YMMb/pEi3medvAaHQdPF5wrIRobS+LjI0iZj3wsJ1sAgI2OBth3cPOn4YdYh4Wmsh7Lq0Aw==","shasum":"d73bc93f0926e634ecaac8f1a145af48846b9262","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.0-canary.650.21de578a613efc6d0922dcc8224f5bf23ed4a34d.0.tgz","fileCount":275,"unpackedSize":608723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI0UrCRA9TVsSAnZWagAAWiMQAJ4jt5z9SL8REudXJlox\nbSP/O0XHDWiPbMIqxnCIX17nq+j5YoKK2UsSpcritDXbF4Q1xtuCjNe2N+z1\n49qWJPfp43oWDhN7hyb19vUGT6Oq+Qwnyk+RlFGmnWznivRlJ3iRZlhWqBpx\nIMNL/xrjhoswWT1yWMKqnl3gZfA12Mn9PVx7zXK5SNlMTQ6KG+USpU81pS1t\nYuyp+kGMwYiCsqT+fynpGjPpC1taFFULEwjQCQF3nj9hXivKWROH5D8qPWqU\nPKtFNsHDpsdvYRypgElDOHXJaNYlFKLnn6wlyhmZBVzpo1LSKBaxDOaIqUwQ\nLvS8Ks+fe4Um+Dmz5/BcpUOf4SF2z0HjEvDjTVJ1Rae6xDVPz8r6gJMdZXbW\n9b4hBrVvs0lnQxyFbHvrqdtFO68CFKy9BWSSUtIQle0Ri/uIZ0RV1jcmV5a3\nbVyMnYGrWpQMjmVdOw6AearzC9FuS5ASShvMuxl668c3V3uS8JaDkDntKQ7J\nTDAnYGdIdK5BM3som/lOzYPtAMjgAVvXLtxacif4YUMqSe05l7tm3loxLm75\n36U8HlaDI3LGY8iv4N2jguLTl78IEozrCbYIVuyrceZc0QNM2Z4UvLh4Dcg+\njkYnRZA/sW54hPyZJ+D1vX3TYL3G2uXx0H+2PVJC/Gn1Y8rkkWDRbKCJdFOF\njyBQ\r\n=YjNh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBk/1R0+lguXDTu6izt856q0phqROH6gArYEl5HKnMSdAiBdsjPvhiClcWemdylbzR+QWKlxDcV0ZzmIsDX4xDIrAA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.0-canary.650.21de578a613efc6d0922dcc8224f5bf23ed4a34d.0_1629701419729_0.6807029813769794"},"_hasShrinkwrap":false},"1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"301116efafba961f20ac71b158c7dedef514f793","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-rHwbQIQIkc3oIhmN/9ml9wvxPXiLGevvKfkw9cfCunIR9yiEtGlAVO5XxuiCWw/FPFCmh68y4Djk+YaXz94ZhA==","shasum":"10c4a6868cfec1fe569b1b69ad475751af61f791","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0.tgz","fileCount":275,"unpackedSize":608723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI5j5CRA9TVsSAnZWagAA7eMP/iqrtmtdw9IHiinSgSRK\nkj6AZZUofCwS7UQnBEowZBfpsJuUsS6XsfGHouAFG4MuBDyzrW/Zx/rpHB37\n5Ve897WKi2nsAcQUCtFi4/quu1jxCjwYGjPeCpvDa/AvSlCiAJPDTsO0KT1o\nrOpxHDkIEpZ5AhnGL2/1NE8haYsDMW5nnovEidHyAtzuL6SKh71/605ejHFt\njodi767s0CVjyEOCcHJCIzFja/0nzv/+4GkynUE7Zwt76Jd5YlwckjGRizVA\nRs/W910+fLy3IRe8/ShlNxnaFswK8uE71+fLn0Y0D93HgqUgYYXNXAc4hfeo\n08zqW4G804UkEA8Hl6GEiwQHLJwf09S9tu+vSCCLJTdt7WIuyhUiaq/UwADw\nhHXC4UbrgRfIimABVugRwW31DhT3hQZ2diBD3U2C5ONzj3sYrwSsiFQ4GWkm\nTwhB3BW8RNmeq0bl66rS5uTI38UHVt2+5lpKbla92Z3EUc94TarzgMQvfNUE\nxodEoMpBAZbz/RdhfrYtr1J2rCsxYfiu4Nw3K2X2UXDduQepTKdvRUARXr8V\nn9r8xjJ7DWx+iqN2/zYheKjJYdCSLZdqi2D9wcRWrK2cs2HbVrNYgoqmIDM0\nMBRjhc3+kFPIuX2BZ5/3EEKJxwAFrrWvSAbY1G1tlyAt0y2M+AljCh3k1mHO\nIl9q\r\n=6bb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGUz7Sj9/9BLzMIJTecz5k2vhfon0M6gCYX7+NJHgw5QIhALkKgO3v0xF9stt9bhKt7SAKeStFcaX5ilkTAG5qOOwT"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0_1629722873799_0.6877066250612711"},"_hasShrinkwrap":false},"1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-Ejd4Uwu05HcDnSCQ35yKOtlhS9MLdorFV2e2agJvl1iRWpCtRY/ZHiiu+auyzqAAdZNLDCK7E/lcChHN3kNhIQ==","shasum":"d3b36317d1498450546866d4bca5aa1e29661c88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0.tgz","fileCount":275,"unpackedSize":608723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI6XNCRA9TVsSAnZWagAAnkAP/ivbjkIZ62nIWmk1k6Y2\n43IDbiwumvKTixa4IaMQzNmr/9L/dSThE8vy2gbkmp0XAJYCGmE/fIufacij\nJtLomRgSqM1ffxBc0MCc2HGvaSu+y6rmUm0zjkp3F6C8pog365xPlQicSXqV\n4k+zILyeXBsqzw2kbYTM+mAFn592sl7Qc9Xo4CAFEvIdLQEwh37s/X6GR/rZ\nv3vEvgLmwTDo+WkKhMaZsVK0S8H4jeZTQ60iv026jxkuIuQo0CC7Ilejcuoi\n5IGcXZ2VF32xC5X4f0hzFKChLJW3Bpr2ansWfJF21t+8tGkQEHdfnobJUYJA\nt7DVVKDGX8+nnKXfghkwvrWa21reRai7bEtdZ+Ymass+GswVgCUOf6Hv0TYx\n9WvR4I6rhBozYnXeBrIM4QMSQftZjLTMhYAEgKya+FYyBL6bCf2VUf412iLR\njMnX3efK0ekY6tZahoNm8PtPdkkqdQ/HE5eew0WJKgh3Qy8TpluqSi6xjCew\nd5t8Y5Zpsk7qYBkxpRjVS/IHxGQ60vV7CDTSUQMgfIkYybLzAVKYZb94unVP\nuT4qYzTfgMW/usoP7Ldd5MZ8zmYB0paj9AABkeZkj0mH6lnd2k6ZJJSuLfHe\n4NGKY+TmY6CFQ5vgWVokxAN5zips/oDxFUbGMN9eEhzawgknt+JEMZTQU70S\nNsCr\r\n=3SSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZqugqXIsClzjbUcIx+Ded4YcMHiVTkSKsuaMeeBm7vAiEAhTIA/o98WVlWQGGfJceHiVnfezG/eQJDNd/gPvus89E="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0_1629726157165_0.9002302728394163"},"_hasShrinkwrap":false},"1.12.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@emotion/serialize":"0.11.16","@sberdevices/plasma-colors":"0.1.0","@sberdevices/plasma-tokens-utils":"0.7.0","@theme-ui/css":"0.3.1","@types/color":"3.0.1","@types/node":"^14.11.1","@types/param-case":"1.1.2","color":"^3.1.2","csstype":"3.0.3","jsdom":"16.4.0","jsdom-global":"3.0.2","param-case":"3.0.3","style-dictionary":"2.10.2","ts-node":"^9.0.0","typescript":"^4.0.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"739452c3fafa849a731456a009363f8b7e920d6a","_id":"@sberdevices/plasma-tokens@1.12.0","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-VUnws4EnlmoRy/UXR9VQTA0MloAUe4YvRXwibeMWeOs+lRwaK5UpLgF8HSPQEiR1sd+QIwddmwpDidCF+qFaiQ==","shasum":"906e6d3ffd5810e26bccbc76e7836acccaa012f7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.0.tgz","fileCount":275,"unpackedSize":608897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI6dfCRA9TVsSAnZWagAAZ4oP/jPIMbtzbcThuX87R/+h\nsDFsF9jW8Xx9mjkgZOO+0jkwIX9ajKTAmH3hpA7d24LLQZkOR14HWyyKO0R8\nBYOoqVnZ9Yx1Ts5d2VWA5Vv/fI7AcDuka6REaskKZlvK9cwWKq1BXBbmBpjg\njgWmf9y0GGh/r9FKJHja8sIcKLKJgQHiAytM9K4vwKsm/lFW6IFDPEsETjK8\nLjtf3Vn2mnBNocdHWWYD/Z0fLZQSTwKxpXrH74JpHpzyXkXXTmDWwneI1tQu\no7S/xQiO/r5xS028wIj30aZvRwwdAsSvHUaprDBwnQMouz/XHxPpD9JTRrFI\nQVEjyLvHzW72fxcpe4JhBMv6xh61ILg/Lq0GVRuhS2T7J9RRH9eQ05lfCeZb\nAWghX3UE0cR6nZtH9SgridPJyofFI+ODUcXFMB+vBPu23Hj8I1EjFg8cREja\neBRilBPZtoc2PSFIhXpZ82c7wPEG4h81qFb2MIWtAnniRVC2RLT1T4ynF2EZ\nJIn8ZuTB0J8UdUgyOIxX3dTJdvgYgwlvkLaKNqIJ3d1ayAPl6efAOkQ1300F\n8EBEJICsOvn7SHC+bPoKX6TzErfGra5VQfI9kQZllOcSENVzBYc0m7v8r8q8\nIsaK0oLkCedtWvcaETz216OpOQY1x87NR8Y4vWKQ1mQ373rBUha4uEcBhrPg\nUyDH\r\n=/74f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjMGFpilxEv+296b7H7YJzCeapOAf5hmvvBof9zPswpAiEA3nj4PQyfLMSeMglRtd+oBY81Vgm6oSMLvfVJz0uJxVo="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.0_1629726559569_0.24353400071929987"},"_hasShrinkwrap":false},"1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"5a0f534f32b9edcec50d44a1c84e9b543e903968","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-yJJK1RiNyOsmZteTl5P4XHPFY17pFTxBQEtEoS2CNyFMuziaOeZJQqpWdeITZU5zHX6URlgErR1W9c0kk3ZYgQ==","shasum":"d519bba82df640ac3a5081961ca56f7528bd0a53","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0.tgz","fileCount":275,"unpackedSize":608780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOKIxCRA9TVsSAnZWagAAvtEQAKG4pYXOJBrPGHI8Yy3E\nfUIQuHDlT/ctFBYWvJsdeb6r50De3yCEO/h4xtApED+ASkttX7IigJaj06O8\nlFlbzCPSRqMaNulZZQ66MRlDkaWAbNeQqhU+1fBZPyu5tHz5yQPvYfqsl2NG\nllVDkQKA/lMb+7UqpQ9/x6fIOKNv6kRRCQjrOJkOcYMMxeETtolQ1ZvxXA0n\nuxhvyRF7UPXsAvoYCNAJDa59Cn2d+61l+rjVCgjlG13mRzQP9P5a2K9PfwLG\n5b+M1QTrtVN8IwA9/6iwcPNDDyxjOPrrMncRG/UqURYqJxf9tIj5YyHcUnFG\nsmzbdWx7seDeWxkZFFY0iRrSZX2UnjaZwnq2yHGZfe1tts4fbv3HoUWSJebd\n5CUDz0iWwmxNCLJk1y74CSNwFHgoFI7d7lg5AyENE8uFeVkFaxsfIfhU/SzH\nLpA0Sts3AWW9I4w29A9G/9Fsap/8P9Xwjal1VDbmu7rxzFxdUd+DC4oFNs5a\nEeO+PH7Eai/ETPhN3zlwBTxpelds2YJ3rcea74gu8fUuEEmbEtVewgdk+gUk\nURE5+peXGJDM8alvoE9DNBktuoL/CaBJVDDW9v0Al2ZDWgQexLoCXaGfhlnX\nYXHtlU72FpF0GDvp/GxkaGwJDY27499FaSQLjIY4SmNQUwLohlUR840/hef4\nuKpK\r\n=MA/T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXL0x+8OHzsrrmHGNWG4DmLEK5hzBN8RI37CQiawqERAIhAJJ+vnVYtlDVjZGjDgOroIB3IIKq38ogab+PgpBeXoHe"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0_1631101488969_0.47490363947653713"},"_hasShrinkwrap":false},"1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0":{"name":"@sberdevices/plasma-tokens","version":"1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-h047bnkofZM6UBlJwb121PSbTlnnPU0Ux8YAKur983E+r+GCAmSOTxd3UYAsb2Enb+EN806rZaLQVHfEE/LI1g==","shasum":"a3298d0c9cb529c27c9f636463e80ff05b859c05","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0.tgz","fileCount":275,"unpackedSize":608780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOK6fCRA9TVsSAnZWagAASpwQAITvnGNiMCEdFhkH5xxk\nf6sN0Yg0FWolhC3mkYzOxTNcY4R8lWxfE619kgUw6ZC0GExQmDo1OSF9x5UT\nlqZR2QpZouEQkdm1QxwVU+5hZNRGpgDNQWgXwQ9zxXAZrLTdhEHSBqzTVKnF\nAeHLAmPWVKsDRw5UwTQnmNXapwnd2L3kJnILgZh4ees091oBmPOTHrSDeenA\nDmEvBThaZPAEYP4g6ZBSwXXqnWuP7W3PJcO55FuS6Cwe89uwJlnZZjJYr+EW\nqdJEy9DR/glCsQjZ1WD2Y2uwdS6h8qLCPrMc+Bn02jNrd6lN8AgL1k6is+Jh\nILJxvQ+baydpr4Gah1Xf11TV7f0j8AIq1r2xcnKsqEgqz+yOOtN+mLQ3gF8X\nasgMDlDZwTBTPclAh35EQixnMfBDgIyH0R84TsEMfcX595ygi854liBGQomM\nbBzQ8Pretlao/pi2X6ZqteJ3ljdLCZhw5Rfmq4tr7ha0aB0xffGtWSgBNgOj\n7DE4BqK7tqhdKIo0dJYNQPCriPGKFAtHiKDfjH9xCZcLX+KcXV1JYkhQHtqb\nIZk6ZoJq7XbC5f61rlJEwKc6Fm1EglfHpfMq6aRmPbLV7TNL1cy+2BbQIBoT\nTiqZ1O7xJzS/3a/00NsOsSxcoHeO+Od3rcUIj/NiRkgTRgrfo/rORADnVuPC\nKJ71\r\n=iGrZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZmayfLDtADZrjGrr+nV3GoKvBVls5awPBC7JwfeOO3AIhALoxzusnDcpvHFkQ0KLBa078FGRG/gAKMyd5kwTv8EQL"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0_1631104671424_0.3143622514211124"},"_hasShrinkwrap":false},"1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"17c898a0469a150e1ceacfe320b24a4e3d21d860","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-deOzZwGYzVyzl2EdoHtkApwcHioARmGqDHOVLCIbNFH6MurhRUzKs8Beri0Hrne7JE9Tl1UW7IozHIv8ev26SA==","shasum":"0edcc191a66234346078ba01cee98154fa43ffbd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0.tgz","fileCount":275,"unpackedSize":608780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOLQaCRA9TVsSAnZWagAARawP/19oIBaClvZSZhQfJWVX\n+kXjz5Q+OYbxcbtZHLaVUAvYBwq/tQGmqZ9cbl0HdDZsxRQDYAwCzj2gmajQ\nsrWEtyxdLwN3XnzOVrb3AwdkEEsEibCtEtdqn0VE6xyjGixMdDhxdB7dgQFb\ndmfoyjXJxLGcFcANmXcOux88ZASqxxhbgDfzg1nii6mvRmm7ov3I6KP+vpBO\nfBzZrohq5nI771FWtMQhjzz82HcAnUG2RwVv/OzwRzY4gMm0o4mTZFvcb0Ja\nDQ5Wmac8hUA8CeZ6OvzB6uCsVL3a8e68hOzDhHBv1+438Ilz80FyYMe81xRw\nsYHHrf9cWQcOtOwiqRmIq288793uNNpUJYjsp3jzhaSIWLfKHWu/Sm55UEQv\nP4MqFRgN2uflXqpmZzSjkxvtfZuiLN507kdZY0L910QdhSy5bKPyEp/Bsnps\nSmm/Q+xOp72ilBWuimuGaAN0barKdTaHvsbV2JcjdbnFkXZj8wUlo9wxXWaG\nIX0wZmy2nX792YstRHYMhVO0pqzl+1PnzmN/rti6Pfb/gr55OqD6n0bC1faf\nXAdadv3D10hmUWXEFwsDkKQpbojGhAmh4TEhFzBVLLFli8lg2RaaJ1oNMh2E\niUmy/7dKHdkkXwMfD7S5z4rJ+MaTeSb7GyjqIdJDoaLTzOLYFIwryp3k6004\nhZ9y\r\n=KMS4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdxsZoHWJbhe0bBGPGuTTvjxTJnI54bR/CYunTKKiZiwIhAJI+Rps4DrYAUILfPUww+eE75e6emriU/jimv4bj6E5x"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0_1631106073961_0.6962137468651282"},"_hasShrinkwrap":false},"1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"800ed930e0f10c104a3b34100f173875d756b9db","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-xtmORDRq7gSnrwPwuQ/gtPp6EPwcheYiTYZfoNzZNab4E1qR2vZ0qpWkLkJII3AJwD4XguUgJg9248ZmrjHTWA==","shasum":"34b708251991b61b6b8cc14d48bcc21f16fbff55","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0.tgz","fileCount":275,"unpackedSize":608780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOLf3CRA9TVsSAnZWagAAriYP/ieM/ke5VPTLi2ZdbBB2\nXzdBA5UqSKJBEqoXzOKGq3KQpOnYepUWceOLVpdS0Fd+JROK+DBubR9Rev9P\nkUGtzR7pvKXKTn/3cLCP4/8T6pU93i9SSlYLQ/jHMqHk4I19BNfvwtnKuZI3\nGLllUtKjenlS96FBZ3YZOh2rMlVXWsaikh+hy1WtIG7x40z5PY70isOfvSqP\nIpjM/zqabNgMqWHmVDvzyqzo8nbgRISydm+SXcMz2cKuaLnJ5CmGUe8tkcEy\nZssbwbYYSAiGh3NDE7JAvUeww4RVgHZBnWZynVZgfRQ8HZRrDP3Yc8I2uypT\naMP6EbdzcVdquHIcVaajCI0xaDgc60nKVZxjov7mPNJ8OJ4MQmDpq5mU9ouU\nu5MmmoU31wDltxwlzCrlIWnRgbrv2Pb7O/m9Ib7+TmA0APWZ3mvrRSM3H7FL\nXnnwh4yV1cxBb/zAJ/MW/MZmi6nImmXDRqRw4+20mC1DRyC1YeL9YSwRkZwX\nV7O1DfLS86JYQtbx7aks/0jK15dPD9k17THyO0OF58Gnrc+gO5b0OffuAGY6\nTpj7piCY0bTuyQJCtMsn6YHOk5L1xZ8a3BZtBXVvHocmB+0fesNl7VPr1AVP\nzSrKu3IHrfMGf/svPImi8PTddg00/bMBQWR70Emw+tEhJLqAqJyNWiuYanzO\nHZfD\r\n=d8SH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEkQunYjtZJ9N87KKss7MwGIkItaN+B1B2DAnLquyO0AIhALFf9i/wktBuqmXKSiMyPcYxuKTbkMsfvLF6N65HW1kV"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0_1631107063835_0.8975870961440076"},"_hasShrinkwrap":false},"1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"bd14f09af0dce2d1129d455a0ba66efd9a7f3fae","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-eDXVNsbfnfznrt7wzzMdgfjPg+rhdVq0ts+1WMq7736MCW1q5Bo7gPYYFcsf2LiMHfg0xPN47eByZ3EWZXjv8w==","shasum":"177bf47923a19250d9c88a57700da5c3543fef58","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0.tgz","fileCount":275,"unpackedSize":608780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOMDjCRA9TVsSAnZWagAApc8P/iWe5G8lmTw7UnLjGCUM\nyyaHZsP5JpBUChURzz2H1uswmuknwP7EWGK2isU5Qpy2cKnUMe1sx4aothSS\nv3GXSZaxMVo1g2lR57h8hj3xYS3byI9wwC5UfjM6284EroGob4j8mHJaSKT0\nZtRpG8frms3KpTL/sU4TDPwB4bOpBJwsmHjHWrAL31iOFS2rnoal08sczK7e\nemwCzYsnqlwkDwrbx/Ck4bntOY1d0lJcL48olkplwSzXB6OdeyA7j6Fq6gWC\nZVnzb9FXc/g5UpbfOKFx9oGZ/D8tNHTdHzanZpzMYzOwfL5u4zJ1+t7jm2YK\n0PFQ2AMSBF3XjMD/g/OrQg7LHpWDXrhyYkbdiAQraUt5jcdRP6qgREuYwyvq\nTQl3Dp05TbXrJGral65XHGYmeBotxi7AfnoJuExnrEmNErqvlS/M9YliAgvM\nFqYKWYrYMpwIwdxHnRYkBERgxljMmwg6waRyvSuoIvsB0qRbtSEh1Oe3WXQs\nGmDv1tclwX1L2RqviBq7QAZ030YeHWYYO+rhpAHru34nhxuYGEdieyLLNs3j\nAfph5k5ctJahtVzxua6Ei3/YrQ6KKnZo7m/IVe9WwVmDIHcNR3w67hrAOPHh\nFwtRL1mwGCpe6Ao7k5JfPSLJtNTjegNDgC+CkdG5J0dh5lvqk6gAatH6kHZD\ndz7L\r\n=vKb0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDapjTTnq5fmp7e/f0GQ/PkWZLj9Zc/cSi3ahlhsSwrzQIhAN/hfDgpgO6UphVwvMPx3r/cjzZuW5E1ezh93XDfQLvy"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0_1631109347414_0.4030042122671931"},"_hasShrinkwrap":false},"1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f84a888e4c657f75afa8e78e7cd9d1cd58515067","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Oi4tT7RmhAwn95sTlNn1HKtuxSe2LjSY0X4cMl04++JUtnoECho4U9hiFp6vCmttgEs+OTRE2u5c0pEEZrxMyQ==","shasum":"12eea1d93cfbb5696b4456bd296d9a69b7d5fad1","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0.tgz","fileCount":275,"unpackedSize":608780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOM0JCRA9TVsSAnZWagAAQlIQAJd/k1TirUd1Z0F5lsBb\nXSTA9SNI6RhljYqDjcSvT10eRHtdU64ukx/NCycEP1FE0jeePV0h0N7onu/+\n6jgKzz2Vl7lW0X8ytw6s9vO/QsbDrDSaBcOmHG1/eKN1H36PZ5ksw7s6l6GM\n9mU4UMzUh1OvQlCH2C54yr9ZR5838k4L6/brPJs3oDq6V/fqZJXINOqygoS2\nRyDuKxJgnON1yv0BN1GlQffPujhYDtXYQfCZR3grcgdbNY700znv74xsQv3Z\nzt2vLAOocIwcAYlI4M2TsytVf+IiJPuDRgdlQZRWpfbR8aPXfGPh0bJBGUME\nGVVN2o1yGqyJ123ftQSQUM8VAAVmIPkQA/KTFPDG8oHfMb7oRxjITWPJ0cEf\nB90TyIy51k4E6SJIGITkixj8zt5V56AhzZN8VZaYITfJ2vd/upjgyoYcJTmh\n4n936aOUKQDeh44yGSgkKFezprIcWq2h6cIFrgIJmMgxzdB0udjSATTZX7k9\n14CYUJ3ARfJnqhXUIX9ezGN/6izjOnlEou3jOVKSQUq0Q0l8EGM9LWGlvu+T\nXjrBOdJCZjJBlMs7w7juqmz7YeYsd+IsqIlqECYdxqjAcXWVY18rgYvNETuR\nT1kpV9cCd2PjHKTDdCGML6Y3EGB5EywYngf4zry8QRbOUQhb/YoX12asvp1T\nWuC7\r\n=Y4Qu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHivJIoM4EmUFQyFzOdoNIp9Y0FI9HsRQiHiDb2YaNytAiEAqBj9/hmN0Zfe1bRk/FWyYuopmUf6r5krr3GGjQqupQ8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0_1631112456865_0.01712665901666477"},"_hasShrinkwrap":false},"1.12.1":{"name":"@sberdevices/plasma-tokens","version":"1.12.1","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"4.4.2"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"a0389a16507f6b50a07469f85785f537bfc42e7d","_id":"@sberdevices/plasma-tokens@1.12.1","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-wCiDVsAk6sa1z8IH5sPPnUE2BBBg4JXXiK66b1vKCAiagLQhFdFeLz5Bf3FdtiWH4iYKkXKTGsYlVOMd10+tmQ==","shasum":"ae86bf578337f3db811c773c574ce9241ddc01b8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.1.tgz","fileCount":275,"unpackedSize":609137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOM/2CRA9TVsSAnZWagAA5HUP/AoGhSK1tr9+xP5YHFFW\n0HdvONRQfQQndCWCr5M3s3YfkpSDJUaS2WyebIjTDcmBpVE6N7g72tvBqJTL\nSymkI3e+HVaZ9F3UE+AseIaSMQ1irxQNFRJiCYEJeVv00zC+nXHPrGmzSEjZ\ntbrhUl0Ew061d8yrwJRb9uBigmW78yk9T4UzDXIEhJXDmvyJW76zgrZjQhg3\nbvwzO9XuaXPze1GGktNNMdcwNervseophlulwvMTud/sAT78u+hAZMrg2uWa\nwpWiaKPmhN/Nolw4cEso1cblLX+ZS0AlEjXDEyY8btjOkCI9LTwxuDCxB+MA\ncX5b6DyVKNL8P7UyMMTJEEpTiMeiNji70mm0C3caNskkrkH7Cl2YnVRZo+74\nPKqkD77764iVx8H34r+65QJD2Hm/FJHkekXpfV5u+Y+RFf+5Y0qremLOqPH4\nE/l0e17I62QhBNQcr58QbJNZtq5c28CMGU3LHwo9dd/uXs4Wx4kwB8Ruska4\nmURxHhktlsivqg9y3Ju5Teqvq9kU+heEQP28mANnw7NeQmZVqfjmqhOdk2kH\neV4zjqAjcrFZF1be6ZAtpimoh9+6R/8tX67Y8u0FOMwg99vYwHsRDysvFtZU\njprWtoGnX2VfhLqvak+YpZGQjzX2xbv4EwSEciStPF9MeSyrOPLS0tZS161B\nJwE8\r\n=BoEE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrKCmCvfOavfvpMMScj2CSjPPCRGcEQMm11Og7zxBOzAiEAg68mbjUrAAas6ao0hvFEcbNLUhIsxQgPAhBAMK6lZJU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.1_1631113206767_0.24125349842634947"},"_hasShrinkwrap":false},"1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0":{"name":"@sberdevices/plasma-tokens","version":"1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ce1456091c00199b123252da70d7bda6f669350a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-or63rnRVgXhp3kNGjjma5OH2+NqPF5xTtY8U6rzTF702jSY+0voQt7bUS1+UkxX2uL6129US7liL4Kxq16xlZg==","shasum":"a04e3e2dc6a39d5094dfe2fd2a984cac9bdcd8ac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0.tgz","fileCount":275,"unpackedSize":608490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO2QzCRA9TVsSAnZWagAA2vgP/A+L5U1V27qjUamnKBOk\nDT3di3DwSxwItH1xx2sZcceZZ96qx35J0AR4oGil8H0xbodNo9MzVpOjUI4D\neH/sTF42ZWTH4myJrD/BTJbqtxF/nB0KzCcAEVzTq5G8Swj9C2/+yzpQZB6R\nJItugSQknah0UcuFB7dyjXFaOwOQLGF9jGCqTG6ElB6qA8lX60FzPdtDxVFw\nzX69xys0oYk4LNGsynUWSrEnB8lngMB1d0rugBkJdvOr6RBBWw8Fd/nTEqoB\nPTMluQ+YI2/zijgxW8GbC6MrfJ7lUus/9wCLtA/OsKcoJLO1o5BWogmL35OO\ne3y8d4cW1e+fx/LzCK21hRvB3FrDu+sNDZvpfTodGiDCQRzpNYZ8oCzkGMim\nUx2MDKVdT8LIWfovlj7cYJZEW4eBp8TOEXsC9DSPg/0t6QWJt6BuNM6Ntrok\nGwDE1m0JutMGPobz+bPJXe8v2vh0rLp9rsJn0nO32ow2t5o62sozM6Qt3uP9\n65aodpI6MgrUf20To6NhtoRY6pEjWhuIfMkrfsgCr/Ejuh3/UgQtNAwAboA1\n34jg3QFf4yFCMQNfAhipdm80vEjvT1vMmd1gGXeE/Fe4W/OG20RmA3uFVd44\nF8UpuP8vnND0w7igEpDJeOFhzLSH1fcaoNjl/ljl7Vj1jm7CFCrIxysyU4H9\njvHY\r\n=A8wb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1gKdysZBW/LL6ciidGpKNe6/IbVUx4YGzgWfYhUHT+AiBQtQZvqisSmB1IN9p4/LVUT7xbvrF9afl1bW31do5Esg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0_1631282227210_0.6542006506837115"},"_hasShrinkwrap":false},"1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0":{"name":"@sberdevices/plasma-tokens","version":"1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"597904e9119cf14a64cd187ba7f662665e09448a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-TVujry0fOHU708TOWBCaHtbmQMjdYr8hccJltKOQp03tjjWK1C0igSeKWxbPUw/HxWFOsZ0uj9Ao5q9KrCrH8w==","shasum":"fe206bc580af9690c655bd9d4ba1f3b0f0c42da6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0.tgz","fileCount":275,"unpackedSize":608490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJLACRA9TVsSAnZWagAA40YP/iPfxxpCQlZjikksDU9z\nwFVdkYt+bcNElEDrRYEpwqQiGjxViJxCKKRZnsCmpz3H2eqKTdxsHaTfu0+9\nHNm2V9un3/WkybcBwxIzuAZveOWLT2w+wOwaui6Xj7nGDSHKatmJCR86L+PO\n1gZwW/zQDaVp1VdVFeqem2BJ1LOlJnC2VPbGadxSzwMPshXn+HZMeKtqeqP6\nbXKn/cyTFSJIGr6ljinz0N7tdTkFYSGwJ5wTKM6T3qA1N0GJehejeGP9+cne\nyYf70kcucYPZc5giJULBx7ZiOt6DNJNE0AglcVcMFP3hOcdJ6m/ft7YmaHOr\nzoyFwtnd8q2g4cUQUBd8Tg/NE1Xx5yLtEa2CSygL3PP99DKPrCTW3XKKyUWE\nXG3IRK6r5CRb06cdfbm26IQ3BFEf6Rcge+s97LRuDI56SXsVeUn8Ci8L0rQ9\noIxKu4Susa3FqYFMMdYNwfL4xFVWckUqxU1O4oXTfZtToKKTBah8QyZL1f/v\nFdD1w61K+frKD+ZJYqhHqX0Ga7Mq/7JXYh7NvsROlDo5UTwCCbC6JLjHL/AC\nC0MwZW7uT5k9Snm07owVNJ8Kb84rCXDuhY76g7Bip6vEk0aYhOanU2zo6IDs\nZxH8PcSGc7AUUldQaBkmBfo5Loc3bqCKGyZ3CUS3uHIEtarmdnVTvlPSjM/a\nKG/n\r\n=jfGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCg9eQD1CHRaHojTLGdiumY0lUOSvH0YAxs5NdDIZGuKQIhALR8akHKU1ZwbJLVOThKw4/nAG4zEnRZiNNNrrqYMXqA"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0_1631621824183_0.28613858324520614"},"_hasShrinkwrap":false},"1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.1-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0a3c2d6e68764f8e41eb82d87cf61236ee83b258","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-/91aqvqdYY414Qs5IKBN6GWTHSzYT10F5WhUTssn0WVKF2ULmIOgRCjqDrP+UlYCu187QDhVBkEN6k8nMC4Bag==","shasum":"82814e3ff8f292f70fe34762025bdadb8ac0ee7e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0.tgz","fileCount":275,"unpackedSize":608490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJaBCRA9TVsSAnZWagAA/7QP/16v2iQ/QwGFMGqKH7PB\ntMHz1M8f3zFTB8D4AuNmAlQfnZHLxH0M88BUTqzNXEYnnxb5NHP4Yvk71Iu9\nbVMvxTT+YbLdhr9mp7BtU6qSYpZP8iB/qa6ppb5aaR6goRdCpARn0xhognED\nUzNovuhYOhl/L2GFDTwxQwa1rM8WLmjxbp9zHIzc0A9bJHA9uElQLIjXaXxk\nlXQ6E2yq9Vo9RPLZpjcEYAxqcaGckm/JvSDKC0GsX9walntOtG33L2R0pxM7\nAics3/lNrPCFG00A1pwvvyLIkD+ulnryRT1wSfCNDGjm6RCuCtSWpjDxyDRp\n1+ciO1T8PT67bbzdyMFcJ/M6jz1YY3/XulF6RqvU389bfAnlBLqyeCjS+uXI\nvoz7qdNVFzPtF6I0HUu4lH2zSSDz9aWLzolEfPJEL6+LXNYBbShjOXEfoNDy\nh6MU3VmWFqjazStJaar24HBHdkyyJDcs2QWrCBmNxSGNsr/uTEfJjEb/NwNH\nckhL+bOAEDWgzzE008ctQk8gBU5MSm4Qv3c14ItjRY1pCpPDicWpM525gieD\nbkqeFqAXuYMlDUtQGWG32FnheS13Wg6YdGsFHfG8tZD1KAWZxU3R2DfAdtK2\nqzkjs45FshHrWezt7D6tkE3vIGSjdUde/8Ycmp+vF1+qXDriDObSY4DMtoax\ntNRy\r\n=S1Tk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8w1MDTzeY2RRKBMCukBmcf33X53M7bscqev/6vFDgvwIhAJmERs4h4sCEQQadePWBOScdzQlJnIFQKJHbxTm8vhRp"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0_1631622785081_0.5034370573571354"},"_hasShrinkwrap":false},"1.12.2":{"name":"@sberdevices/plasma-tokens","version":"1.12.2","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.1","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"db2c927aa4a72a8bf12bf67baf2ef31a60c11c7f","_id":"@sberdevices/plasma-tokens@1.12.2","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-es5Nv1ldDGw2Fw1q2Z/X61xdtCeb1f6OWihmoqNfOLCX3RAIqHTaCWm09xcDi4Q4XGEVKKCQfFHfdO9yTMRtiQ==","shasum":"71b2131f407820d0c673aaf19c069754283ce690","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.2.tgz","fileCount":275,"unpackedSize":608784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQJr6CRA9TVsSAnZWagAAPXsP/3rR1TKiDlJ4sW5dwO32\ndlX0Eo0JkUDpxDZU7zaxwYeLijyz6Ghwc1Nhns4dSpl0e2gr8OcVDrBEZH4K\neVZtNzWNqUGlMZgnMMSALHvYD3VukyPkV+3ftx5wMuz2iwt8twYvvLihwELr\n6lUOcVmk92yz/K7HttnTSJVTRAIjvVIo4ehZV5PjxbxLXMYjliy80eDMOfwa\nYtUsg6SF4nT5hGtKqnrKt8E7rFpjBBSYVlpKsNLz4zUpGuIMZzcOfjVjVDm+\ncYKZji7pW77pqWRn/BK+p7T2pnve0rRKLNrr2lxKahWQuGd7DD9m8q8pa5kw\nbdoaoHRj2ezRiOS4LpEKSITApHNWI61RFKwwqLMD6UYyaC0yATdf05nwwQID\npe4A6ow3+k7KF6LpIRJeFVuI0N4/qMIkKmgxtypdZtXNZHOKsoQaPJNKon7m\njwy5x/l27xD1Di5VbLs14wD+FkjM/MzB3zeVTbekT4u98HUN5JBtzhPrCE5W\nQnonIifzkfNYRyy/om6p9bxS48fo58/ObW0bQk0UzeL0/xJV3gg90VBodkW9\nKFmAsgB8jweedN0Y6YhdCBqc8vb1227pg8y3LHylQ4pNBSuDCf1zJrqeO1iY\nSOuDxFFhPa2dK3fi4Admp4HIiGpZJYU3/JybZSgzcO5xeb2gAfN74nnECp6k\nehXa\r\n=o2F8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZTC1vJ5NjUxDd88DhWrvDwKYpy9mw2XAJyGUOiU6NUAIhANMjzOSPdSyVMNdxuk32RxqfAC7mb7wjgYzel793/WFp"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.2_1631623930701_0.907622199026705"},"_hasShrinkwrap":false},"1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0":{"name":"@sberdevices/plasma-tokens","version":"1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.1","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"da5178284055e4e9211d1a16c1317193d10b52c0","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-RcjUZiu6UgKHP3yrmfdl+R/dyEfxlikQFUGbvsO+VrMIAQG/Q0q6ZZ0y1MmIkNSkVYFf4aZrg4G9SL+7Ao1Mcg==","shasum":"bba4254e90320eb539fd2fc9292a7aaa1cf2f351","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0.tgz","fileCount":275,"unpackedSize":608838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQKuaCRA9TVsSAnZWagAANnMP+QGVttIxqT4LXd/qAcSq\nYd5V+Q6KXNO0QGO8j71pau8w90j61jf/IVvMa9A8U3gmFfROYNqHOI841uTg\nZ0udmZPJ+g7U1Tdc9esDsKYslfArpibF+qRHrn7POus/wkP+ZXdtPeRsfdh9\nPy8nyZWjCa+JjSczh1AYTxrfAPM4uYQQ0/tsKAsvfRtHLrsXQLyg7QQIuRHb\nCDoDvrAGIA1g4f7LVnwohO/VNaBQ0mk7Qb6963b7JPxHLHMCNR/4RsZp4A82\nngPQNWzSbL6DIgyxuCbDlgNEBnxv1xtZxu13mKGq6RuA7K8h+lsrhbCAOvR3\nsYB39Ruz4xvRQ9oSaV0Dlrlb1nBIOGXql8iHWhJifPHLdS3Yuan807rrvIPg\nhtyn+XzMdmEt0rKfNqZKI3K+eRk2XfPkOiQfmz9PzOclEIrulNwccE0b2aPx\nhaIer7Vl4N/VcX1wldJicW3ZQpQGC+81P2XbdT1l3BJ9AMcWBS4Hk7ohce+4\nH4+6psn27tHob2CPCAWcb2WiF2XiM98gnP/lkTen1WXJ4/lmhLGLdu0oHI9i\ny7ir7lyDSicVLtUpcvBQ/vEyy9DAMzUKYVniqn4tZzFbbhA+I7Ra0fYDzAJ2\nUWGZCafB/43HHSOxayKqWgcncX/mwh+baWOiO9U688anMR2UIXGwif3G85j4\nCl2k\r\n=CWNP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL2z4sWEtMY2aZeLrD23tVkEVU/ZhS3xUEjy5bJoAvCAIgMEeXIMG/NcVqjzVSKxzn5GAOhIg82oEDvidrDY+g9/U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0_1631628186616_0.012447713640502345"},"_hasShrinkwrap":false},"1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0":{"name":"@sberdevices/plasma-tokens","version":"1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.1","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2dd65444a455f6fdfea3f9072686abe075f52062","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-AWN0r/3xWb7nyK1e66sStyepoorSfaPYMmc4aPxTGFildF9YpeL4dHA/1X34EyGcrDH8Qbm8+EZRwhjmrqJqNQ==","shasum":"0dce8210a1bd3bc47fb5e75010adcea5aeef3f83","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0.tgz","fileCount":275,"unpackedSize":608838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQK6cCRA9TVsSAnZWagAA/M4P+gM4XPREZ6JPds9lEva9\nw5yfKAE+HnasOuQDvdNBOeXUXFbCK3nzFWYPJ7r1pjREjBFBHG0V5mpUHAet\n22JjTAAEKMWVq9hmQjSenR9ADUkjkLuHGRLxX/fz0dY4wmUQf4Xs+1Ecq0jw\nFioINyPSucH1xisQzuCeMFpLpnSSbml/hJu7bWy777oCld9u/btcYE7QqR4Z\nxuqR87ucURTkmIuYLVgyiDOAvo1nYnJUUJylnzeM2XKbga0SaG4TkuS78QjD\nLMGSW5SlA3R7QvQg28YzzDRnLZNfA06UjZs1r2J9QDFhM8oA50udrMJHU5LA\nNx5jlIf0bjnH8W48CkCSL6VANXkaWqsmve9+jVMJKLXzb1+w0r/vOJdaCLLi\nhDRLkxfjyz2CaCrdm+UBUwax0PTcXA0qxKVSb0VU9vqbthav70zrXHEMrnEg\nsDwyCij8XabUN1800O/xCZoiYtK9YEScElFQrGkL5PC61Mw0lGYphbG8NF2/\nVg5Yo2TvCMdt7t9SCTBs5XHyUjUYRdwQ2oKLPcalwV4qV34awxztMhajqifN\n1IxOQPkpqce6dDyu6E1RolkbMIAeU0lzSzcPdbkPJRKqdudDVRUsVnT8KyIx\nsUcJkOuNCSKAyWf4PzyvBQfreJZNOp8RMmUNg3MAxyqcM36FvxpCVXlki5Lf\nmcIr\r\n=KyQY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHjbwD2XdBa1yHnOzdyXxUM9spuLuMLz0oQLyyIwSHZwIgRMvrjQuOTyYEaGm8hLXIPlGw8z4FaFqBRJBjgOi82cE="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0_1631628956185_0.04780191127619715"},"_hasShrinkwrap":false},"1.13.0":{"name":"@sberdevices/plasma-tokens","version":"1.13.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.7.1","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7639644559125dfa752cba538f1c0f58edc85735","_id":"@sberdevices/plasma-tokens@1.13.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Upzym5GOjEzHKhx0hyCm3/vL5L2GViKIfHxgbgIWVzvcko2XAJ/us8Z7LtT1LYlYISMEgCkDBrQFv6aTL1nSoQ==","shasum":"b449cd152f846021ae94308768ccb539cfcfa70b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.13.0.tgz","fileCount":275,"unpackedSize":609012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQMWXCRA9TVsSAnZWagAAxWoP/RxuBgCzbOraoyUNSLLH\n4eYc3ORcgy+F4qqiUVEY7jQJ4enJqufgTUydk2JjheiECcPohFz/V/WPPRoT\nlAzAsMGfKIaR7j5q1fqyA4xLIS9+sn5jc23jreJfvRjZesqdkFFmzWpQLNRS\nS3XGxrXuEF/GeJcDjs+pLtVqUzaj9FHou4Od8Xsc7u8ZpXJ3AiLKr5pcmdj+\nJnir8e+dlR8ALemc6Nc47c9s4nV3QT78QxqKjHBD+m+eyDPOHSlC+TDvbQpv\nMuoEkE+1Mx+0JdYBV6bysG5tz6J56VCEHzsYmHxpPfHUCKJW8d2GY6dot4X5\nrJ8hW8s7uYhvehTJrBIUYzBIa7gJmtVH8Xfm57/ruiXOQ6fT+0dXa9eVXaoO\nZ3ZXklSWP3gNinF3An4Gey0S0F/rU2YZD0LivNBd1Z+Z5poJl+vN1OJIDXps\n0YGZZtF6EnXRdCwiD3/dN6x51qm42E/JPdet/Hdl7o94B+W4b93+OqSYxIHM\nDCqvMQ8+hCQle6KVA8NBP8IBWWBf6NaAyU9U89qhSlEZ1bEUQ6tPffbLSgB7\nr8xJzJv+EQPmT/BuIRVy7M89PllK7JMmU7d/nHxlLIv3axYMgeZTvX++KaOe\nOVuNFLTXctsR+v+ch1beDxO9R0E+Y0qCyp4r/b3pznQOIZ/nrF1gAdpHOpib\nJS7V\r\n=KO9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5t2yCCrGZEffn43pE+u5FJUI2fXtlD16KOAV6w9SBzQIgdQf1Nuj6NNBjPMYFHlq/9V+cN9ESy+qRWXLyyGvVgDA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.13.0_1631634839433_0.693015638040217"},"_hasShrinkwrap":false},"1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"4ec9968e433568fb14e944af3971417b3467b815","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-TLLAAXBSk00KdOuHU1+Yu7OdzieiESlaY1bwTsWSgxf+LmY2lwBuk5w0H3r+2fjeor6bJPriWvsjfjQs5SlD9g==","shasum":"dee5f2afca6e17630cc7432c7fca8d2663fe2030","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBXe6NdovIi4zysYnNHHUQZzhtLyoOAIC4BKNA5Y3aiwIgZ5L/oxqQFfns6O04HpHVBZxZRGVqwqKxzksnpPy6jxY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0_1633335463865_0.45054872308713634"},"_hasShrinkwrap":false},"1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"d1025a0a2184be446a493c40a9b1038f41cc314c","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-MQL3jXyHJufPeuxRUeqCYWCQ7sMkHzsXrRZ7rCkR7zpPO6L7nJmTlVTfBlI13grHgDiJVIkNjb1yc5H5dvbq8A==","shasum":"f79499a9d87ae733d8f293a57899e78dfc6c50e2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuslLprryNc8cTeHkRaFYkJGT8uASHS6jfCusx0xa2gAiBnZnA5fHrQcjd6m7nrTk7zc79J2UNhj4o/LIsr73zd8w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0_1633444568781_0.23555081659231858"},"_hasShrinkwrap":false},"1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"dc42ca9378d040228a532d1e00e78a3242cf0345","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-2Kl88XxTkGCRVXqrMwt42Xkv7/hn2yTYGjS/yJbFL6rOM8X2lmIETFINj2jtMMmnNsNtX/L5Ehy7qOPKgYCnxg==","shasum":"4f7c6cd811c798651739bfef6b8ffeffbbc7dbdd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzwlDgOtAF1oH7zdmhFT0TNu3iAszSGvuaDteeP1mImwIhALZ7VP5AG0GyVFNNGwrtni8S4ADZg2jnhH8VNqfjLH2C"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0_1633511135454_0.846744529742447"},"_hasShrinkwrap":false},"1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"b76de5b752a3ffaa8e663c47ce3e057300fb2c53","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-Z47QTa+1VmDQZ86VGMw7w2RLzDgnSWWHzXjMpZe1t/Tyxy0CEdW/xo6p+rPR+qFF31UwDa6jsNCH1VVtqhwZHA==","shasum":"409d4921ad0e8e37467554a7e43332ff0a78f0f5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2UcCBZ7FMcPenMuoSC769W8+BsUVkuTw1qChyR/1r3AIhAPX1N+upteMG8ZtqNc9yDNuLC90FGyAwUEq4iuanVx71"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0_1633518760054_0.4000066348887914"},"_hasShrinkwrap":false},"1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"9cc0b92d09ca66f61628e0cabf6870b2cb80608f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-iu4g3e992dzZPZKoEnchINBy3IJtT7sbiDnQyDwKGArweLpMM2GLWxX4wcWcIIA/e2sW1A0QVOiGl4dXePm98A==","shasum":"432fb794c50f50f3a9129e24564021385b446528","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk1YgC2DamTv5l/NcHeGiGNJxAH6UcIUeAIxwgGClx+AIhAPGIk+Yl3iVIbLWydu0+TxktN0I3nN3QrNu7UCLJkHcp"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0_1633599438009_0.4940856564781746"},"_hasShrinkwrap":false},"1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"a622d2a7270dde4969f322746df6e769f6d9ed83","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-hYCS8jS4QhAtwvJF/5XOaYKWuPuBiV+lgw9xlz/S7x8Daxyol4zF4mhdFHs9M0FtfsnO2SLIZjQJYzUyoFHX/Q==","shasum":"ab773ae1f92f41cd997229f4389bf3405af28715","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjajhv1G95+JenKhRcXiNx4UoNNcpVW7mp8kGFr4na3AiAtnEfH1SPfeQ9+otVyRlpZw65regV1EydReUfR3G/Jlg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0_1633608338287_0.015211027519835163"},"_hasShrinkwrap":false},"1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"b93cad00110c4f0559506d574c996e65d952d58e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-eRtpsOhb/9KUSlSy3lPjnxi2O/uj6IGI+fupFOv8gVUd/evGfhUZy5m3J05M4ausukZemL+t/vQdB346kJ3d+w==","shasum":"30f0fb7159b5ab0be35b610f0dca1911b69cafc3","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYlcQIQCPdP4q164eZGw2xQlCSbhGCu/8ueSm1UaTkfgIhALfYbQ1NiGbU18sJ08YyPyNfSzOjI0qStDvYRupm/YTK"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0_1633618240573_0.07880645697267963"},"_hasShrinkwrap":false},"1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2a17ba7a82f7971fc51534b7dce642c7d15d6d5f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-M5VBubok16zcZNLu8oesc9E73WBLpanPKuaRxm3qM1iWQxpmOZSE4hczyMa2v6Zp37D8pNGtWjsMSE1QrPgEyQ==","shasum":"f3bb866cf2d06515f57fd16f18a1a2d47a9ce33b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaCoFyU81QDd8NtfmZPJdR0I5SqNU+mGupD6RFyHhnsAiAqNneWe/tXskXNTcbsQx3fe7jUV+zkbXErHElwVWulyg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0_1633618300757_0.8049575913009459"},"_hasShrinkwrap":false},"1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"fe1681084f6c404d3256c216b9997cc79e3958ea","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-FAjNA5mclKSvKK5GPCPH4B26kBOCcwnaTKXu+JFGNVO1xPACcaqOZNyZbsIHuDjZOjXj6FJfztu12IxwsIxjHw==","shasum":"d1b7941224dfbe07b568e5f5361e7bb66202816e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQh6MHrJiC9pI7KF2b02YH6jZPjyNKk9Hippz8idPpXQIgFnGbwaoci2ncE2w5o7aEQ599HDiFb1BewqfZhv6AwzI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0_1633619300180_0.35056374984020766"},"_hasShrinkwrap":false},"1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"97d33b99871031edc06ccadd90ff283c3d98da34","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-+QiS1I7lWkNWv52Sl30KiYRFGKoVKHChlnYcjmXTEnXFvz9HydNexMH7ptDyVlhsVgXkSuT1H+HnSq9ILY84jQ==","shasum":"b02ffd2337e89e28674e75c3db3ec257588bdc88","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChBULa1WHbFUbHVN3uUvAuB0bMe/O6HOLsqQqk1wdvvwIhAPVFTPVDjhRoKpIUvhdDBnLU4efc227K5rVENfz7obz/"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0_1633619398643_0.19837111637559013"},"_hasShrinkwrap":false},"1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"5168a0e896beb170445f03e448c3c473ef8b42bc","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-xi/77JRFauIKYwBqV2suQCH50XwbjF/jaJRuwKfvxFLVnCeKJ87tqAFEEagkLyYTYKnGIXkPB6B9X3sD74FwPA==","shasum":"9061d9a582a77cbf6955547f0fe24f384a9090cb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5QnYvpJ4WGVHpZ4PfRZXWqxe+09+Rz6rPu+KsmtAU7AiA9C3PQO24s+e4e2IiJl5RVZukc47EXYBGsZioVAaDTbA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0_1633639199540_0.7159936968516529"},"_hasShrinkwrap":false},"1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0ba8f80902ebeb5f00ee0ba8044943e3056f859f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-4cEGAA/uPYthZbkgai/tQ0rsLf+VacaBs0YBc/ovWBcQeb2ZJqOOI4+D5TQpRXFagfLMIgzS1CNPvO1IcIPLAg==","shasum":"dd02e0641d77f2c65800991c6a1bb97ba367609b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClsfyvTjfvIceEWaA2nr8DSvsArR+FWNmGtZB/E5omJwIhAO7/HefC34jpsjwdga63cYm9BCigfjkOEcbPLzj3j4fU"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0_1633643962739_0.3881983006932215"},"_hasShrinkwrap":false},"1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7abef9421e8e6fc03436c29eb0deb3cbe9e1791f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-kStioodHbS8vupT6wVR4gltwXcZqyiru41OilqZxyofehyzd+5i44IrAXiOAmUP2iy4tcyvPoQlLTew7fpxejw==","shasum":"7a5c58b167b24fc08dc987213d2dd53c54a0e8f5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsPhokIV5XAfekfbVZAh9ZmGYsaMWxva1M1DYAoupw8AiEA6IKGS6a3qA9+P00MLpo/4CCkxatxnqa2WQTnxQXGMRc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0_1633675189808_0.4243620220577673"},"_hasShrinkwrap":false},"1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"6d36e0cc9bdbaede64eb238487cef6b7ec777ff4","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-g//2yrPg1xklMpfLtRfEUP8IZjkuKMK8DpFu1mj+CCewoz4KYAEB6pQos0AdYYjdvdSQkGZwiML9MZhuKwDdkA==","shasum":"c59b67e75a71046327ba4142818db930dc569afb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEzSWY3fn+wBls31PWWo/7pI5fEuAF51T7WkNJUdSh63AiEAm8yLX6YQSAjoF4pLMrK7FoWqpwDYSQC2Ie903mKF3VI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0_1633682418863_0.6226862331469449"},"_hasShrinkwrap":false},"1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"23971d0b4fe793802691e0c294766778511f69e5","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ikHgqKo9EG+t3X1XK54W71Wq6si4t+lbZYEoytvtJt/CkXM4ZafjmjYrTH15jA0INC4be3xbGIaeB6z1JWLoSQ==","shasum":"595eab8c00959c66dacfc51c5b50e712ad1b5a9b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1wxLZJdAqpE5P6I7RnrIcKQH1rTjoE2ngUIIKV56zFAiEAgHe+KzvPtvWNBEtN+U9E4xb8BvOFEPgk9A1m72GOSRM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0_1633682997893_0.3615917897547134"},"_hasShrinkwrap":false},"1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0778e27b3a8d0fa7fe627d05385d468faec59458","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-CQLmAiaS0lgH+lhEXy25hMZrg45HUd4DpQJ8h8o7uOXI3w9/JC47hEimgLxWO+QRC33siOJaq8mtkyv9fN1fcg==","shasum":"198250dc3f2f9dd51a43134d55a44c08247255bc","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEd+dXowZXduMjn7jJ5xfr09XzF44vJmAT1LZMF73SnfAiEA+Pwrc5EtjnuM4T8C6UbvOGT0CCuYOL73e6qSZrsKZMI="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0_1633687209047_0.10081382991968346"},"_hasShrinkwrap":false},"1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-d9q7SiH1i9rH5RPQmqQFjLHiGpMu+esdu8x6amClAkDjcjnVYvrDEmKnWwZutxcwagXvs1lko27h/yiATvzGrQ==","shasum":"77d3c72042331523638ec2a400cfc60c09e8ff92","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtyzH5dg+RTUMOyeHr8/ig51YCaq2HOgX8bX6Xc3VQSgIhAMaHLcws1kwQ43Me3U4KIwLzBuDzG4GfkgNmgT58I39C"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0_1633689232640_0.6458944490687037"},"_hasShrinkwrap":false},"1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"4b69e3302464b630149e5126d297dea92bcb9319","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-lJZsicJ/SVpnFucLXxDgVp754pUflSci38VYC1r89PMMcbDiu1xLrhCCEWFRQNbBN3nzgqzAmn5mOmeKyAtvNQ==","shasum":"11a3ac01afa2b6e13e179bd32da581d38b6ec3a9","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtq17xlgHRtakiBhPRMNEpiQGH3RZxVlSKap0RJ5R1jAiAGEonVqF1H5LMLpdPLCehplD9oKCa5wEru7QSiduahVA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0_1633695770620_0.1777019112246594"},"_hasShrinkwrap":false},"1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"374bca91998cee0bbadc4c0cabc57f34ba14234a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-ezL9cWxgXc+QXuBSj9n+4eFvB5Vmm89s3O6tnidbOnvgT/YdhcADAjKEG8x9B8nt4JYljQL4jUDAB/83A9RisA==","shasum":"5ac38cd0e95b4853e93a3dcb617c620821d0509b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnkSLZ2a9YjS6vBU24KlAG8hDSwI62K0ntz+ixhJKe7AiACWu0oJNsEgCO7XGZjnCQkS4qSsMWcX43rsBhVSZouVA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0_1633696742737_0.4761726408514393"},"_hasShrinkwrap":false},"1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"90f21a26cc86e650740158040b7010ece9ae73c5","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-U1LKm7ycNevpT2ktZq39uOzbyux8CVWTBUVoHHJ8nkBc/bR25vSy5F4HnOaCPc7aVYDgvL8m3tgsINrAMBibGA==","shasum":"228323fc9d746329ac0662144f0e828a1300dc2a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8lsytXamr0SChr8XosvDdGK0T92U2jE6fn42u5M+ifAiEAu3PJj9v8KfgKAmIFfZDyFhnThQLjEXAUdw+JRTtsU5s="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0_1633698684513_0.013842128132812936"},"_hasShrinkwrap":false},"1.14.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"33393855eb5a70f6d7329609e2abfc7911c03ebc","_id":"@sberdevices/plasma-tokens@1.14.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-slZdDxu+VQ1t2ARGIivqrKJDleu47mkoPlAAyT+mtRPjMLTVgzQCcdnWtRsR43HiCA5i6TdoQu9ItHSZLHmh0g==","shasum":"9a81b8d2b3fba9e6a8ce5dc4c0588274bd46e550","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0.tgz","fileCount":275,"unpackedSize":625523,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGD/XUEwC2DQfEMHnXoQNXW+ij/muAG4n5/7/GwDHv7ZAiB2gzSRamej+VNzHVlxJohlpDsWL+7IdmqLRCR0nJceOg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0_1633699296496_0.47775210405447677"},"_hasShrinkwrap":false},"1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0":{"name":"@sberdevices/plasma-tokens","version":"1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0cc18735b4202b9485a3687b1006bbf920cf579b","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0","_nodeVersion":"12.22.6","_npmVersion":"lerna/3.22.1/node@v12.22.6+x64 (linux)","dist":{"integrity":"sha512-iiRW8gnrfBs7NTq7ziJxBqix5ukBuO95bks5JFtkSpWbQBpzfN3wHdPxCEPmDntj1mxB1reaWpS8kdW2etaBww==","shasum":"decda1b1438cc672fef4f8ce93427e151e7554d8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0.tgz","fileCount":275,"unpackedSize":625350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHN/a1O9K16zYnxrEnxHc7f6WLK8dS1uCXpC7Iysn3YAiB2fqPbbpUCk9ZEvMf604mnpQ2shDK9+6+GBHyEMosJLw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0_1633699503873_0.037843033640371226"},"_hasShrinkwrap":false},"1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0677bd5e9d06d023ead51717c1cabc04ecf89618","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-kkIQ+ePls46QfFWnvR+3H7yOxnsCDtPrmafvjR+pEq5A21T0wy9zv6deUcUZ8jd+eMh1TC9T1x7MctxDPfmr/Q==","shasum":"72ed1e562a1c8870218274933ea0019167a83b95","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0.tgz","fileCount":299,"unpackedSize":721055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzcANCRA9TVsSAnZWagAAfVEP/RNQci6hXuLdUenCLWIp\nJLxAGcCyVuD3KogqkndRkimOZufvMUfA3/MIN0A+Mr3lDRaHhZLnwJNJP48h\nyWmSpshTMpHRf0ta/kFW8ID15H4+nB35ZRxg08nEttANjBcsUv16OGt5T4wZ\n3LmUuVsYM+MdxbZcZeVCGnTXCgO8CEwXJExEpLgbt9veHV7ftA86VnND1Z4f\nrrduB2KX1/1ZqaqB9mkgAqgxSEq4EXRktSrqwST64u/GLYskVy1x2HY/8KFO\n/uVhAUETC+ew+yiIKtFgW8zTCQ7ECj6Lx1fSvh0J5TFxHETAkbhzoTMFiaox\nJdpblGfkGelz+jnCpYzIKoVnB9QqmUuKgML2CWBzBSpO3sLVkMQPsVOx15JZ\neFu4ddTS7TWTJvwMdPZtHA8yOHujY6/a0Z9QtAG/9DiG+T578QnCjwgvoB98\nV48889iKyncbOO53Nqtbj59xtysraCdK9xUuI68jeooxkmFD+H6cAlJou5Xp\nKzPkgDNJzChmnN5LKDzjBa6ZHbj0YH1iBSbmH1WM7R7yszEKrFSCtJMarMfu\nSIQpzLqu7GNMbCgrpv/utfz1VezcugTYdvc7sPMQG+sueCSo/ZLNaRn9/QR5\ns03AMTjD35XafwGUYMoQD+3QWCyyh/MujT7hGxvlyBld41OaQgQn5W/BNFXC\neJpX\r\n=/HAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDViK6/DEpPpO3DfGlJqfgp0BIQ6OZhLr5DWIK/hygC+AIhAOG9WGlP12CDtIJO4q8/ruwhBCb5umyM4tkkAO/o6ZIj"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0_1640873997696_0.5386948735303188"},"_hasShrinkwrap":false},"1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.8.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"44752525dc4ed2ab3f80029f7f8b4e81ef124e87","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-NJ7/QVfNHNYmNAJu9dCE+tzJ/Z/9bPg6IvmUL6Cvj1aGCCtwn1lU9vksQiDfSD44NyvcUtIQBcigPsj2Zswbfg==","shasum":"eb8cf220beed0ce69981393f57b2e3fc987efda7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0.tgz","fileCount":299,"unpackedSize":721055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzcPkCRA9TVsSAnZWagAAU9cP/AnGyvMcwN9iLWOt8ywN\ntcnrtD/BFzGLxenOxzNZAyDY0Is4Y4mvuZ82DHIGdV/xRT7MUkE4oM1OJFfj\n15bSXNw7zBsBJgSZIicflIhf2i2gK7DOW9LVkUb6zJnRdBr0w66KZWBJ/wxL\n3RWmq6R0lkAEwnLhq4eHr+Afg71DTj/qDz0MWBrJeubUyPIkF6FmXujSINkD\npfhk1l6u/3uJ5U1KvpI68y1oPMyJ+F67slEC0eNV7hx4RLtb2v3TCSLo4ZmV\nymq3MrqjKcWf9hBweZ+XK20XJEmNSw+vqTS7uMAUPU3AyAnxVjm1DYanZsBF\nTiArFjGxhh1L9Td88jZerc/tXZEqElRGCWw3wFMT6JBRx3nwDHPoKGsl1JgL\nnXFE/Bv2nOsB7wIR1BLuNSgps8JF82a2dmkb4rSrySAmUYy6zZrUfouEj62F\n4AJGud/7cQgOvcz6Pj6R0PPkijsm+zqOWTKYfYZvUCwCV756esYb+j7FvTBk\ntQIb/+yaLoxCucO2Avm71+LyNAGqZDvi6ZfRP9eG8mrC5YdF9q0I8eWOSDuw\nQuNEouY3M+n2Cza2605cDei6hTkD+AvbBd6BwH51LsV43Dw6VFQMlexQ5qTr\nxUqge8VsLNUNYWpdow05JxaQu3ziHMlFZgsqZ1blV/HdcbQWCq2LsOds2w2+\n12mO\r\n=j4yz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJrdSdo3TdcO9B2b5B/kbAcgWDqiYOL6dKEAgXI4Dk5AiA8MvuaQ0Oc9HsCoiiLK5n5XHDTK4YBDOv2yGk5sCxHJw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0_1640874980185_0.8317334615808643"},"_hasShrinkwrap":false},"1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"3cf3be1036272ad9dca8afc994bbf8131f29bf45","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-FeJHpdSJijka9+rwA8x4ilWhfjFx8uv2W3pUV+ai0+6J4RMg0b0R4DU/wMRf20zQdZn7ld7D4OWEgp2xMwt7WQ==","shasum":"320328f4319e8d3406d2f276277ad5e46fde4c4c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0.tgz","fileCount":299,"unpackedSize":721673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzdA/CRA9TVsSAnZWagAAHLsP/RY/Aeh92F5wJ7DXm2F+\necacuxQUIe90xQidudi4aBJbUJ4C3RiWpXVto8Fr3TTSaQ887uhryIsOgMp4\ndWmjVOQKrA9MeZMbSEtDK4Hzbpaq5ypB0S/7QpVUmMYIzoq9tSTrSiDtw/J7\novnSddFdAiz/3N86qPw2OmkQEZN+VKw/GXzOaYKUhvbs4hocbt3f8MPoYQkM\nItN3PRIFWAS0OqIHbVfWARJPW8sLa6UvbTNd6jLYlMHn4Lo9EjrSextY4k9W\nF569MXmToh/O7QUraM2OOV6snSo8irTp++C7144WIaMnNlUggRRE2Ai4Oc77\nE/RwNXnUdCxVwpQ6NUWs32TLna5KO9tnnu4wA3/eU22IFngjBk4KWqVXHWet\ndYhZImbTnPhrSqeyUSlCJqJQAjpyqEF3xf03I405AKUmRnwj6eiRvNQax/Yo\n7ueSfWQG94+qsnebUhPqwBaA/LI56gOVURQgdVrkQxPokxoDGou58l6KDRfw\nbEQMWyBAVbcIcVHoV+ddn2N/gBParz8CHzZjUc7uXNK3zJkodEfudwWfwHvy\nEwtpZN1BlrRxI/kO7Mmpebcmpe2+qUKOKBvmeRwxVUISfCYNdDnVVB/h/B6L\nFYY35gYiWZlwuGypiE6EKTrK2vyd6cTjliJRyi10MShcrbX27PJKrFx93ejx\nICE1\r\n=aN9Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT+hrV8EBrotAT604qJeBYp2rXYnCGUiKx8cE2As2QkAiBK6LJSKeCrRuyenxJeyS0BApEmwNMbsqmv09tXP/liGw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0_1640878143020_0.6484956434971278"},"_hasShrinkwrap":false},"1.15.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"59be6eeb22f1e3648ef658d72a7f8e67f32a9fc9","_id":"@sberdevices/plasma-tokens@1.15.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-BRrTZi9W2SlCN08GoXpf64I25qArpYUofGpUrRntRFd1S2xztv3+ilIrePCoqcri5te5FTkh4b6Zzs8Jq5ZrnQ==","shasum":"c9631bd0131c3c0da720d18a0639cb71f161bcf5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.0.tgz","fileCount":299,"unpackedSize":722152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzdx2CRA9TVsSAnZWagAA8cMP/jw9gArmSsWqvXdxXcRE\n1IoY2aitaLsyZ/RPRAJa9gHS2x4jJ7dDGgMytdoocjvf17xdG3daNdwu76R9\nYmK9N4Zlrz2PQAWGO0AwebuAiV+WfY88CsB9DTRh+cuRz75MJGuz5gXvFrPM\nEiPwToC9uovw5ylv6bHy95NZwLVSG++lDzeemuiNMjMdbZKja4OnKA2+z6SW\n5X9hBqZ49mdG7f3bhcDuXE/YZTJUJmRYz7eeQSIs+uqutKO9/vlErUAYLr54\nXMS4iPjQU9tkh/Vv310BWQUo6tHjWVwIYRwWCk/Goh9gJtv5Xr8RysGzEq38\nEnJGJRN0VFmq8NGx+vpHc8Ffevgea/utQguSrMTuO65We5YJeMY7VUZ42dET\nq8IP7UWUumdNjroAIV3L6mBGrytF/b8d+thXerfiMIDMnzwKTDymVSE1EJ4e\ns59e3+4GdIyd6PiHb6LOayxYAZDtlTlk5n0WO29T35cOvraOJ0EtyubP2vOy\nxEju48GPA1eGuXaV6lJiUSZi8YCQtg2NjIwkvNgu9bcmDMEW8fy2K7xcBYSz\n5pCjwn7lDz1t74Rbcv3xQVe4M07PD8EJhQt7XEdRDhGBYhnZDqEuGX8X5ABj\nmAVgxZVKpXSYDgzddox806cVIJYZLZ7bo6vIZu9t8ZBvoCkaU1DjkzEUfT8U\nj+JK\r\n=WwCv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsahlqqRpbbcNpMpOhVG+ExztCunhN53ddwiGM7BQjfAiEA7s8/aiesDFQZB8uyA7i+PKH379W872nTBoFSsdk0pgA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.0_1640881270114_0.8096805242846898"},"_hasShrinkwrap":false},"1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-V2gaYs37uNNmlTjLRmSFz9GuOcTTo5S3tBqKx2yZShdDQvBwCdddnVKNBrike7ItR+nkf6YuqS1++zXPPr866g==","shasum":"e328fd2d0c9ada933753cd16852c5291bc4ce794","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0.tgz","fileCount":299,"unpackedSize":721001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3D+UCRA9TVsSAnZWagAAx9QQAItjVn9dJCDTd+r7AFRX\nQRiNoCtCW244LiBugFpSNRro8lCe3ZrFMXJzTRCLEaXjlFfHcMxFgt37iUJS\nEJZilAd6AR0u0gdvu9Wofrz/WvWeSOH3IM4emRABe4pH4AKE0IU52qS67CWG\njDRWOcO+YPFn1hGaYFhVwnl4eRyrSa6+hcdz+6k/Hdo2NcTJbb5q5IVd2aiH\nq05ZUnb439j7Qm1wZCaPHq1XOKJY4j1im4FPSG7BJhaq8dXARMqxyJxUg0po\nA+QFvHhDMQAWZt19fDBSbZwBEdxXvgczaeD+CVOfNs82I6q5/HmjQu1oF6DB\nguE/daiAsAQLnjmBMA5D34DO8BTA+ixQNmnDywj9dZKkke21czI+ynPO7sER\nnVq1sJGwbHtKwidWzSIoxwn+6BfZ5++4ZuE+md2eIGdg9HenqDe2q8KwkIbw\nTSQXYObi4gVf3p2rcKJI0vwJ96D7K304g1LY0eg3sO9+R41xRnvkG3s7Ftje\n5OkONcTl549vzQSZERglwoVvCAWhCVSDF+SyIhv/hjZyFZ3kYC2y9zP90aRS\ntIgu2Y5fVqZhDfiyJLfBCs1IfVg1PpWPVOLcUr6ux3xMnBZBBNYDnNCfz0Nr\n6XO5W2Jl8XfkkPZ2TtR2YHJW3MHWxK3AIm3qsfN8i4D/5/YYUDSoA5XaqH9f\n9qpU\r\n=YOt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGCwPPWbjuDQL520zxZWL2iEjQ1SEFjL+/O6uiklOJfAiEA2UeSUxcMe5yFYaZfTnjwPyk3dS0LuVdvZ5G8cfdrgSU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0_1641824148666_0.9295088940657714"},"_hasShrinkwrap":false},"1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"90499615ab0dc149155c32e50688c3948da449d0","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0","_nodeVersion":"12.22.8","_npmVersion":"lerna/3.22.1/node@v12.22.8+x64 (linux)","dist":{"integrity":"sha512-zyxBWp0OnUumkj3bn3qwHvY2vNhYrHrhv4yO/L95iYhuZQ4IErO908KsQAH+4fqmTozx6jLykhl0DVMhgPKDtQ==","shasum":"e770d3c4dd899b2090a02037f680b39f259a7a2b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0.tgz","fileCount":299,"unpackedSize":721001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ZNNCRA9TVsSAnZWagAAUQwP/0yek1WPiF9yhaN+ldt8\n3G3mqijnLVt/NhXhic0o4FDV2Ktgj4SAKwOAy+OVrVTK9tyz2Q0XV0wwT5NG\n33jgDFLT3IynYAk6Ze6TZAVxu0hPNLOYPX3NDpYgDn5IpuUwXbXy+S5bOWTL\nD0BPotZuoaYjKeZi3aCCr2666ImgWjbD6/mltXDwXYjGzM9YMO/fksGiJYrt\n1PmxZW5DfNaJ/2RUWli4/d4/1sI4NizQpgoiXo7wG3Vj81AdFcdksHXQ1EaR\nnoYvHQ95AthXMIaJ2CVWnYpDaeZ8DCoTQ/7l86D8+i1yIpN/GT1Pj+9GKN76\nWAjCSRmKuMGSPYpVN70WqxnvTKLOztmRNP1CT9bGeMBOoS6QiJgpl9NeSSEs\nt34jYVA7M2Cbu2eLLo9Rf/o2Tw5sVxx3XdVoxH39VIoGG+BJBP0Ufd51X0Ob\nO+7+/N02kh40TURKj8hsoGX+9phSFoQsNOqDPsvEuOEgEQAozDFxOGmrXdpl\nfHaZ1VaVkce1RWprigV3bnOcuzGziRmy+8FitZ1eGLwS3zoibqFuf5cdhnpV\nMovqI9h4UFCWsAz13WlYTE+n6IASeQOPx/HveH0DCrIJIaHMUTXYq1E86o8n\n4gIAZb85jwbBcqHjpLZ7S4qLOMea01qyevWzaOQNT3AH7tIPN6A9tbohTxh0\nxCQO\r\n=MHXz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmSMMK/qRhBWlgiW2ofljkgSXp7vv/FtlwQlL+w6j0HAiEA1WUp0FY5Q1TQKks05HuIYATMHXW6QEkRMDEJ/YU5uCA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0_1641911116905_0.9555474986374224"},"_hasShrinkwrap":false},"1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"b50246f5c3cfaf5176c75d130c074d2b66d193f3","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-uZ/2JGha/EIM73H43/bsTZr6PZUwyDlTEi8kRCjmUmBO2NolbblRK6o/6hw9JRZUo5yZb4xorq7jpiBGggXxqQ==","shasum":"30cb6b1cf4bcb5b4005d9ab5ca4aa5793ad013ab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0.tgz","fileCount":299,"unpackedSize":721001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4BZsCRA9TVsSAnZWagAAnYoQAIECw5kFd8e/FY71pxh4\nQXD+T0Qd2bTXtu0kPK5qsqllIT/l9alCJ9iTOTCHIM7X5+2n7ouqybY5r8KV\n8gf0fq500LJgDcCqM0Kc51zMDbZH9eEehTGpgmpyTqkmivRJEfNM7RHFL+2Z\n6Bd9qmmh6Iz4cym7RtQdrfqSUlPsznMq42oBBvGyL0458BGFNta5dqN3zBXl\nF/QXvzQtxGx5hPPF2mWPHcRL8q+jcFzpxob4XvI9zaMR2BuW5OwpEIvaBUgr\nh0p7IUHUAzDWp/Vq+VDBmE7WjacL5N/nDIVBYkFi4hRX2vzpe1omdZVWKape\nY/HZWPZZ9BQ06Vv3GuMgtJm8czJn6FA89H2F9tuxNW5rO/hX/8xbMKdHDb6o\nnvIa+NXOmMLzqIaOTnC25/WiQkonUpvcFmUZdf1TuOqZuY33AR2sF8jrzCdt\nP36nd8FOw14k3unXzl8UUXeg/EVCyQ418TKAum6+KarjdrA/qP2eHLcz/gT/\ndp4UgUDADLGTDBjtzBj3PB1AwnqKpCufXuK4NbHsgKRPu6hpZmg5EUFfsZpJ\n2mfxLG/UtaiStOGucbYYgGHbglJ+2mYLVVDZTdPC3hGc+KBI2R0EtOb0xeXg\nnxsoPwqfTWJhjjqk6GUeJWESNbgd7uAJ+gTjYPGuHZYOWN0m93iXdDVKrDFb\nMNgR\r\n=LJE/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7Kqvy/ICm1uW4cIiqYyZppQ8N0IR4gB1CoWaOiEk5RAiA4VJBhBL8+IN4liFrwDlS9dSsIx9zX/284R6tbHqMz6w=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0_1642075756321_0.384281058747747"},"_hasShrinkwrap":false},"1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"767de126f33086cbf07a44c7cd78ba2982a1c138","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-GzL1XAjCnfAv5TAR4OhkpMmmp6eCUTIb9a5nvpokkFRuotBDpbtKrdlJLmTtD+JWhLC+IVkMEt9MCB034Lrjwg==","shasum":"84facd853e262a33038e2a4f9b527c4c977f5994","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0.tgz","fileCount":299,"unpackedSize":721001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4Cf1CRA9TVsSAnZWagAAAG0P/2yXhvw/K4uNXKLKDkuk\nJR3SjIeengXObwC4UFctPpVFw+vQ642z55lFbsg6LWNfC6WuyyI8rjvipqZ9\nWk7D/KnYzFamk9ctbRiyawa9RdOPCNxHDnrfTFm/OZ5LJo31zZAvsiT3gALW\nHExTnAsGBXfqM9Zl6kC7yosmStzB3lj8fwqK9UG+XCBuKQvaMA8BqQU+Dwy4\nl0z0h5J5VFye1E6k58zEFCvy7YMBD/9byFNXuQs2LNjw2F7sCNzm/cgtoPs7\nb0j13GUuMH3sPxFRiqHUawmlz8uhUVUHTM3S4gkJSiBhCWqkKaphhsJlALVo\nKtsd0HrIlfriUtZ+ModvVmjWxQI6A3W0Nrgr7WwArQddgtcTCfGCU9VZLRTg\nWjAP9A32EMxqZWmDkcj5sI6oVgYFSbxZ61B+gCe68DR7sSpglm8xYOogdyxo\n+orrQ4KTA3LLNP3CGvqkoasCPcIsznBM4eJATazIv8qbDhz3lq5hw95Rdc6j\nk/kf+t/zVkZfM2MyXP2KalTVShAtkbbrbJ0L+22ZnBOfRnTCpr0ilanxRjwJ\nhjaHqAQ1kbkLfufsBm0TQ5klahWmJUPErD0pot9ve/BUZiGITlkCA9238RE6\n1a+WHIj6j5mhrFCEq0Yqto986RBkSvG/WWsxKZr7PpsFoyWtzWoV2qK+wzUw\njrbc\r\n=OfiG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQedwLDtg5kh1kDExZAb9QK9dbnJsdJ5h1GpRpjFOPogIgKEKzAmKRsulqHfab7dw0rKEHFvi3/xSGuM6Plkwey3U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0_1642080245226_0.4765257512006478"},"_hasShrinkwrap":false},"1.15.1":{"name":"@sberdevices/plasma-tokens","version":"1.15.1","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"386d3de7a9cfd27ee131b1598f01883e8ce285f9","_id":"@sberdevices/plasma-tokens@1.15.1","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-ort1Nh5twEsmdERmlyudVsQz/X7yc8mSBkncE9te4aXFetWiwg1NsyIELnDIAg1fKFN+hvuirqMlOIAlKviGaw==","shasum":"b1b0df81fd8efc58cd4957810fe50de8636b4a32","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.1.tgz","fileCount":299,"unpackedSize":721220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4ClbCRA9TVsSAnZWagAAy0QP/inPmPLekOCqRbj1Un+i\nBqmhjqUFJ+wzCxsOzlXnWTBb0TLFLtrjrV6ZiggMPm8AMpl3hY0lzENR1X/O\nN17fOLkQ7+mAKUOIQ0TqS8GWkWnTgKtjPA9TBrUvsUkHx146ngtS/awtkFsL\nDdtvvOz5Aoi9XUkGZNtJXRPcvbamQs3pRDuV2XF4wdqX9avZO4VxGvs0V+eE\naaKU5Qup5nlN9y1kn5JwjHyzyugZxHOWcKCmTxQ2h66P0tw1djJ4p0woUcHs\nsB9dInDUMeTa5vsgCPZA/ViFSem6RyMcnHPnsqNHIPhxOm3m1od7iVtNNeK5\npNMbPO0QZR0dVH6wWqyFTM6aVMHgZhheckNWRo990hOAXPQifMBChBsMGBZ+\nXeZOU2P8m8V2HgjUKJHC4FG7LdE9V7PEo8ARu2TrEbZuaBDoFYrx03dXYz1m\nNM5PNNh35iFyDEUHyR9ryBunJGJD6UYmHSA3BlbLCAdDGnDhqIMrqHnpKaRT\nFt6MFO1FG2MSVCHwH1zSZTiw99R8wLu3GMmgM0g0kSKr95Fu+BAHnsnFwaU5\nZBx6qVlrgathStV8/N0VDfMx5Bh+JPcWSObDRRay2VkE+FBXDAikfXEJ7I9R\n98jPwQHFwqCbX+60pxKX9sJBjRh2d2BSa1p4GNTnkzzhsL1f7Kl+eIimCYwi\nPI5l\r\n=Mg7/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDi3j5v/+y41rXzNDPvl3VpBwfhwQw0/b5sfvk0O5HKuAiEAqVzQc6Wd6ymwwVom2jqSc+JBrQhyKzUcNiY3ykKuzIU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.1_1642080603072_0.6865133704239432"},"_hasShrinkwrap":false},"1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx type-coverage"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c9151fae3815205ad55a3f1179f708cfd6a2e092","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-NtC1FD3M9jl8KQj+KkIZgpRdMcRbizlW8GlFY83S1wVzN4BWswedbOx4P2fYn7FqoZpJ2rspA8Biv2nDCkq+MQ==","shasum":"5f9a7ddebe260c0749e8be91b09fb28f3f06bd19","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0.tgz","fileCount":299,"unpackedSize":717569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUk6CRA9TVsSAnZWagAAhYsQAJfjg0x2i0coWUx/9re9\n/dXAiCqvG6ZGacLxGTTn2RC8Uf0HnMS+0KmFjLb1jAMRrV+di2e9lRVXZ02m\nsQFIhaSOJcA+pYCHw9p4dAJPRgn2HQvCofX0Xn7FJChKjP56qyqeRS8hdhJL\nVnR3aNmhswdIe4vwRV6MhJaej3l+xefHXgRXwc3x/ZB9oV/xCrgb1PwymBzK\nho+/oL0CW2i8PYINqE5OxUUQfF0E58haScJDP0473JvIAHWuMmn+b/FdFWkW\nzq5aPmL8hnvvThjwL6MIo3lOf+csbF8XHP9W21QyUwDX0TC1jEsZQvP7bwDY\nvcptA+mqA7cI1Ex7ta1MCMcBXrEyPNWrAkxFoTzMUZMmzMR7PLAZWSedGqRv\nSQJmFA2K/t0WXDnSEB4F80tUmiF9honxpgxZsm2gR0ZuwgiR8gqVr33M8gXE\neR7aL8eZPjpYP9UR/pbt/oIrbO2D9i+DKmCv01279vWgpiBSXfieusWS9Fkh\nCFi8vhq+GKNxjzuUx6GzEp4VE7uxuj06EmOiXVyo2UclNFED860/yDDJsuON\neytIEniqiMHVzmNyGbLwJYr9g9X4kcKGi0vZvBF6NU0uys0JPGfQZYv5E7bT\nRXuGg7ndGxphbUL92qYsxz3oqboA1p9LGINH4lDVJQbSyndN0j+vGY+AUcKD\nLYeZ\r\n=aXzL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCmAJScxUfjxdeT1D9jVU6zfc3/p70wqlkwWEdu+/8tAiAELF07z7FlztunveswkgCKuX1ibPgJ92bKF/bnAv3q9Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0_1644251450181_0.9254484037382398"},"_hasShrinkwrap":false},"1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx type-coverage"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"cd8e92ded348b99e93be9526a6ba62afe1b5617a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-26dnMp857QHLbmlGJIqAdZfQJlL1CLVbFZse6oVGLObb4f8pZZ/GG/k6SYYcZVKuJCkJ18BFRaZV8VU85pf58w==","shasum":"6adfcde3ef387e5a7967017f5921733ea414de27","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0.tgz","fileCount":299,"unpackedSize":717569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUmHCRA9TVsSAnZWagAASC4P/RdUZnVkDqUdVXUKUy2+\nOhtxD+UXO704IJ6bJN1XjhPnXuBbmfD5gSqUEv3ueMZKY8Eii92easE6IbKx\nuCSj2/2tB4jneMtSpdwmx1BEghTI7Uf9STiev5V0wFSic+MLSZYmDTEgggVw\nQp9qUgjCCgOT+Av8WDejHj/dT7gsM77+Kmy5Oa2zCLhby3IxF+DzQHtV8PTq\n8XsdfDfPExsPtmNSH24wqe5AeJhhWMuMPfb/leBm/VYqADPP62YKv9V+17DZ\nJmxceYXCZb5LFys/MWk5QVk7CGAz9c2DsUD4nVLBbE6vBMeoMWaxHoNCDzSZ\nACr+Teczx6Gyzwcz8YZejFAu+0WYMXRlfa2FCM28RPPJaCUNLh47fhIRmMce\ni7TQuHzHxfmgs8pFs9Fbgk9AIATmdp2EYZcXQea7aPtiiwVjb+RwUCRgPRCr\nXK1ymbyDNKeBTT9TG/2ZT4W7qj40aASsFRD/XKZtmo+ZmbPt++1DmMjkdCgb\n6u9DlhNo+2GT3TxQqbwWsHNiTTdC9L0q/2hZiSeXjh/ImuUSMQOIapLHmB+M\nycDf+nRD/xHHU3yBxh4fCjnGaZLjqbgjVS3Y7TXZxfAunWze6od6Oq5Wcz/W\ncbhAWBrW20zB55WCP2+4CZXB7wTv7Do6kvzbvug2aaBfbH5uUzJEdXuAEHa8\ny/oC\r\n=YWnS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZSUGT8putjgiUw4WnPzuhFGymNtSiZyJvM56KHRPtYAiAtfspZj0ponfHS4c1oLYQgmkcmSNPz+JYiv8aIkQVvWg=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0_1644251527452_0.4162816269839624"},"_hasShrinkwrap":false},"1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx type-coverage"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"6d27918d4d3e976dad88c1cf93c35c27ca43a449","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0","_nodeVersion":"12.22.9","_npmVersion":"lerna/3.22.1/node@v12.22.9+x64 (linux)","dist":{"integrity":"sha512-eA2ymKR6ehjY3Mh4o4yZIMycrJWR0ep8BvIMiVG/gArBECwtDrZXoMG7iuwVYfs6QUc3lLwYSQvnsM9s9AF1wQ==","shasum":"92ccd72235617a9837a9d3c7dd671ff9fe318d64","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0.tgz","fileCount":299,"unpackedSize":717569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUtfCRA9TVsSAnZWagAAFCwP/1lbpdti14i7MIJjRjJI\no6GEh+R3woW66VL2bYWOGK6jmKRZ14DrhHt9S05IGdw+urGI3gcHXRyh/u1i\n5vHsFtlRWVQY9hU8lkmXn8edZlyCeURJ0+TN9ac3hwqGR0YNL3C9rw1c/f+m\nUUUAozuRBaIhsxfvUKlxGAYKMMtsyk7N8v4OMxmfgCmyliwetssXXl/X4niJ\n/XrQQzko/Lj2S5dnj7rdqFth2GJAxVRkNtivGX6urHeKWzAt/htp8TJG/71c\nXcA4mIrUAGJok+nx/LzGuCTi0AbgZ/dd6koPmJ/pW5bwVY2G58xeXGmkbW1h\nq9XIgQXQuiT6WysUxbf6zqfAG4R3O5aH/JhD0G+j2g0lDBMswZOWq3dB1ar5\n48bWzGaDCoN3/gk59wC4KeKrjlYV5aA9m3qsg3yyiF2rb+draNCx5bAbICqF\nihRoRxGWCggMtAKUZQna+n9PTLO4mNr4ywPtXrBXQGY+xbC45NEPx3u7r81L\nGd5abGrouk0cEg6lDWaTgDdO5jiNsZqjj0CW+MtZALfr17AwgIU/FIjpYOgI\nKajJbt3iMiRNCf5YfvwxmK5WWH612kMCYyBNfuCFmfFYHlO8i7Pe7TaImSGq\n4UHp7Q+mqsGDz7HL2QUafbZooX1CchrfBpXz9J8iZDuBoD5/6XFrK/kcN0nZ\nlGCV\r\n=eJcS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwNvcdl869pf5Y72HsNW/Tq6GLV+N+W6DO2nlxtxF2vAIhAPeVv39NWG2bBajcWoSUwxwwVjnplf/zq5CbsAnVgKwn"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0_1644251999385_0.9515001027577106"},"_hasShrinkwrap":false},"1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"4a331a48c8b8d18094185b00a4357697737f37d0","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-iqcM322+w98d1QRIlixj/Uyygs56+EzL4rNhEsToKOleMql/oJTr+W+RNi4dkLlPKz3qS4WsZDJpGwLGlOrVoQ==","shasum":"5c1b0b8a56340ff73319f94b0d8d712250da6e51","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiClMxCRA9TVsSAnZWagAAtdsP/RoWdBTd31Xh/BnKMsJF\nRaj85VZrDiHzaPFE/y17KQ+lmO8WYTQduRX1NVn0+tr/dxcSYoJA+KwdWDGU\n/WVs7h9y+yODrmJgw94kB33KXr0Rsx6LBj2jbcBKCzrGjl+FoIPVSyhS1Q2Q\nI1/uSE04BwllxuXyOPS5bakMuuDCtMFM6bxDMXdzvX/ZcS/BeEvSjvqcKEV+\n2qt0QipVJFHKIUYZG0KgW3aaci6QYyMEKb4OGTNAvPSGjDNpKh0i7hplRhw/\ntwI0sMBGOG7Deobb2GcU2FHsH/KtqVPCH6DPnOMceGuNzuiMID08Gc/242j5\n7enlBvkcBUrI30CifidEN2ezMFIHhD4t73gUjjFWtXs6K4sIdxLO6A0oFTva\ndPHk5fnWO+euCPb2iyFSa7MBD2yho9MTyCzq+L2oaN11ooY3Lmj+MD5NHNbL\nBM8DE8cU2kkTP0wRDVR4jIPA2LlbViA7r5vTYPaOg/gOpd0eX7kP6kdFk06X\nmBLFZ2vkB9tBe15pKneOKFEwTddwtiXfR3VM7aowTekTjfIiZofg9ND//BfQ\n6D+cc+ECOYzD86tJ7TVtHxCm2AvGXdVsyRLPHJRfvYStrMDivT+fC7wU8ThT\nJpOuD3VtGAtd1nXpyIstipnIvfNVLa3BfhpTd5Aq3pnKyGa7ZyqpNyg8E0jL\nWJSz\r\n=X9Pm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsv5m1y4K0JRhVG4u9f4/FXd39o/oZGV1x7ckCZYgIfgIgLBI2KenbJLaPTYM5tIL3zagGY66jZif1GloEZj3JZgU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0_1644843825644_0.02736931269640075"},"_hasShrinkwrap":false},"1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Z4wSnaIle/aVWBDRhZAcPsmk32nA+Gf19N0p/eJXU25VOUZk7rsJJ51mNlc1Ob+/i7OsbgYywnFZbhwIN4kM5g==","shasum":"840cdffe0ae852ca74800219bfca050976fca3ac","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC6yECRA9TVsSAnZWagAA47wP/ij4c0F6aQkgrLlLk0hl\nU8BjLieQftO5tICb+dp8BBjo7YOCgAwxn9o9PGtj44bdelV6BaeAYoGJOLqx\nI12bGx+ghP06TWIuXl/KjUutADcRnkMVx7dE1ObxPar8HYEazdVtQEza6Mo2\nsVIDa5Rw11xTZBoSL4bKykcvZ2B+JryQPm6nWigRJBjQFyvg3D0SjoFoRUA4\nBVxpAbi3puZjSzV41fALKnf00RV6Hc9HVJs+aXPI1dR/U+00JE9Rx4+DQc5v\nlzMuR7zsfIQCoMGYhnHQlJ3RsDANjTOv5j97me5R3AubA7UBpqAZQOr8JiTY\n/V3xHpATH29E9utYPRx7vLoEnZ3URuqfwcv/KniM4dW+uWOX3OGQdtvX/z+n\n6dEjf6erlqmMrhsKaUnTvgmWodXW35ePbIWWwu304QoSY3VY9tjCOKR9rwT2\n8X19PcxmLEDJZGIgNWU+j29HwIpzt/F+ylmzK917tV5ocwt1yrVW4Qv1UkMv\nbIzVheeeWS3gHo5YE0gU+1oi+z7yLWep0+MtkwYZ/mIR3CWVAzwEJOK+OxBl\nlnsfr3VheZ5Ga3FQlvN2DLmB59W3wA6aMH3H6jWzRKfPc6I1qMPCrL/EIY+3\nst/BDzBiA/m48qHmCV691tPpz7CYhFQjA5pf2aK5dT9lbHgupkOVu8cbyZHS\n0JAD\r\n=FnEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsyapwWrCXm6bcip7VLLSAX4DYw6X9z0RDw7nFRxMXJAiEA52I+hNcnTYFZ7TLz15y7qq31CYKWKRKq7FaodtZ1+Jg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0_1644932228523_0.8868637502044157"},"_hasShrinkwrap":false},"1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx typescript-coverage-report || echo 'See artifacts'"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"22081c10e97d43462671865d3b7d8ed77d9b005f","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-GvlRDR++2fyz4zOWv2yOuA4dak7fx/6gFylLUjHI6Dmwssb8Rvu0aZJWgG5raCJUR82ThgNosyzb8k0qqlQUKw==","shasum":"694a442bd3c2521e01bc3e7248d96d64aa972a69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0.tgz","fileCount":299,"unpackedSize":717606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJPJCRA9TVsSAnZWagAAe6EP/A3FHMjjW4/OfUHngnT1\ncv/pIDb2+kxP+13b0K2Cstb/d3MfMiSQobVEVFM95+qoO4w9wU3/ETg7C7xK\nsNqYv6gpG5Im/xm4jGj6v61jsACnZsek3GLGgtCLxD/rnWa+e2qLA+5x2LVd\nbZ1JmWJSY2WNabyHOFdqwumYlxXKIPEa1Jpx/sQoYTWbelzlMRsbAcalw5JK\nETxW04TgjXKsh2+Jo8T4UJO9We6EHcpXEBaCTnck7Dd3TYb45qgyIYR+gHzl\nHHia8I5B0CZb7I8GlbFz2oj0N39IGtftoiyVsjjj+lrUaEyulkdwu0cS0pJo\nw6QY1uKMZ26NXaeXEkkLfEeYlFO3lj8g41QXz81jfznXv649HStilK0lfN6D\n5CZ0u+VfXVR+ya7ZAo/t8Bxo5r2636/wUvTMpoAd/cEYx0cpjq/mPMw1OUzg\nWeTbrchvCPQ2cuVKelhn4MgpyMJxw8M3ZjB9PFHhW03w8skcKZUYmxEicT1X\nbysSdsm+Z9pgpOegc80U7Q53vQZFMkzKdSY3D9uc/JHnHpwnk/MC2E2roeFA\nFEV3+x/Z/nvSRH5HpZX7QJGyKMFyrLyv9EYBaY568x9VNZBEch7pK/D6aoO2\n6rLkEgIf/tsr9DElsNG2Nt+XrBQ4eL7GxIt4ERpMzfK/YI56djdoTXVpmCgz\niR3P\r\n=Y+5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4iCz1U8yivNT6yTaSsRrBe0fYDcX7oNVraPcnZ2LDygIhAIkDCGLkOxLrl6xBKbB7DYxW9fFQdfse5KqNbDmazFgu"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0_1644991433092_0.484069549653414"},"_hasShrinkwrap":false},"1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx typescript-coverage-report || echo 'See artifacts'"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-fa6RA/87bvyY8oKn75sxr2+IERczwQKrBaYAdYcpXCYf93n169lc506GA95WGEUlGy/U/2wfLR3TRZ406y3Cxw==","shasum":"c4a3946dfd14d001dd198160f5186ae13ed6a169","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0.tgz","fileCount":299,"unpackedSize":717653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDJdRCRA9TVsSAnZWagAAwhUQAJxpW/MmigouLfgamUaZ\n1uGniXMDl90ZEBaMjnI8O7ERp6O5w/a73jeIIkwpQX604OjRLS3lIyouTYrd\nR+jMie9EFSniec7uESqZaBy8MNRSicjpFs2nCOtkYYGhiW/0NajyDI6gD1av\nFDyhPGyuEpy5hJSxHn+dhG3oPNDTgx537FEKhNpFMk+XtjwOBTtJDzYNeF5b\ngPjF/NpMim6BUdGBy7I0ct917nUhcQOkLNww0ZQMGwPphzkCNEh48xDU9aSH\n9ioPqlU9syBuTkNePuLtaZCPHwWGZRKnm1v0tG282p4Ct/9XqSxI+cFm6REv\nPoe8NON13A9ZNPOiBWutn+zjmZsMs90bA8cirNrjSbyhbC00mAJIZ+6JuxE6\nHMGC0n/cINhmV3mJoP6Mfvg/cvoeDc0aJNApzWDBnWQDBRwoeotQsilmHhae\nU2SjU5+ZM4rytsrQLoanRRUH9AewVNnAdcY9mrnJp8Y/NG5vaebvshyWXx50\nnNzdtkzH9oIvntL7KYmPdY6+Upu9MDyRdNztgfGeUIvPDCFblfn+Vy2AdNMy\ntCXpCPxREwmxWDPyR9r46LnbZJDsPlSQUlv5DR1wC+C+Gxft4vmBUwD2xN7R\nrOK4p+7Ukvn7kNdeMdT+tBHCtY1oGfuzlvyEG4f++JbTe7Dw6zNogulsQqSS\nn4oA\r\n=yfs6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwky974w99MjLXDC5tdRbbtf7PsuIrDI19ZCyPYi/dbAIgHI9TdlsTAQsoHALo8BVQOEfJblQOJJQAJ2d22Xz7ScA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0_1644992336845_0.3676915336655062"},"_hasShrinkwrap":false},"1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"310f151d902a974a935fa5f11fc7ddf38b8c281a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-PrLaNnCqqZvlX2guWjF+qp9lnrwv1QTrmFJyyZLrbu5bw1m3qFMeqp3XrraqK2n+YjTj7m7WBWbHb5WCCAQdQQ==","shasum":"0508d31475f9ce68256909fff7775bd0955078ba","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVHkCRA9TVsSAnZWagAAvJsP/RgEATPyONeCcxak4xwE\nFZ4hVlylYYvnr8b0Vd4jqGuEE9l5UflIi3nvDzcE+mzr9M+GHIai/mKRo7fJ\nLgHbi0lT0OdvWnpHIk7wu3pVzhS+JYwiHzkb/puqpUqkWudKvmvP9AwzXta6\ngYJrZ/KoWRtMb7IaTZ6W3nrX/RlWUCOQ7uP8lVpZ36r2Yqg+7k0DE2Ee8iTb\no7/bxWLns07/B3XJgsPv7sbm+DQG8NIecuiincnfVSaqyFHVdibJoubBifvI\n6WEdrczlnSiSdCTCmecuixYJndvt0XGSOQ1p+ciKVQEV4ueq/6Swt/ExAe+M\n7SpN/Vtlg5q6/P2/WZA3tHQctXYOs0XpNQdHMbztlo+7t55BuMHx9iq4WJ8o\nLzHewe3LKPVaxoaZ2EL8nJSTQ2Fe7Xv2lHtBjAEE5J6965zc5WhZlZJK5LVM\nyJk5qfZnB/VIBMeTEtlCp+uioIvNIEiTBNwFDRtyfmcIgtUTe5CKoG8i+UBe\n0MqqwrfVjiMK+ulh2cbHwYiHEbFdDMZmC/n22gUNAH7NnUDnMCm85Yf+tLCm\nPPkICbVZJKH4UESD8kUqkcVUAG4m2CoUYWQC3U4eiHNxqhDT6lwbuXsW1pGK\nKuazz/UW+xBmlO9cPytCvoa20bS8ywGou/2xq3NEDqfdcAWjbt+GvDlEkx8p\nF6KE\r\n=zdGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG7y9cq0F9ae5KOSsIe4GmW1yhEtqCGDe8xcMiJYUgGwIgAQXoNR5amjEXAo/W/4wmWDzsOFqPLopkbaLpyGliXJM="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0_1645040100203_0.19686990057530607"},"_hasShrinkwrap":false},"1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"b80011a3264fdee31eb0e5534741d2c1247b61a5","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-iYhRrNEVpd+JQRiI0VdrRfwUs2KSJ2R/22I3bjZZgQyCfz0pAy3Ckjvxdu69ak+HxHZYxsx5NtnKqT484xYi4w==","shasum":"f6392d1c9b0814929719e10b8672b3beb0ab665a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDe6HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFzw//c13dzWo3qBAsdnqIMFxdOCVA4aEgDJItDqpriAezJ95g8odz\r\njgkytYjQlCDmH3AYxnfzAKxbuIhFi2os37zmcnRW+3+0ZTIJgE9ww+37qksw\r\nIDZzychlNo6VuASj490IX4pMNMz9BAPF4UUKtc6qw+Q6iw1AjUGB91pobZ2V\r\nGVGPzzZNyJ5Qbin5jFCfQ7unDoKXS1dNAVjdPYWPSzO/DdDHucus3/pNJ22y\r\nS0y69pYq9gL4dBMxRN77LOxxYuYeGy3i06lG/Ij0lZBE7dM6T60o5cR63SVu\r\nwGl8U0INtO08CzdsNTfRR3kK6DxnHnSJMdiCzI4rr4m/FfYsa5unxRnl+BEn\r\nzbJ+NY6V1GrRHvYvDxmVn56rDhD4VkXNmnU62lczGC/ZuhoWUTQANd2WLKp1\r\ni6WqTf2FsUFmDMWsmMNFh5YrwcLUshj9Gydxtvpqa3+I70lhsX1Hk3CERDoW\r\nWbMBlPj3zFp6io/+UG2WVVY9JtcVEoLcuGM2bB8nyqY2um/N/p5MNBul4M4K\r\nYZ1WSsxPGKU9AzbCMKAJGz02h/XoFlTyYyXRDn5fGfNKE1cMn+dVm7P0Pohs\r\nuNnctlJoJf6MyyA3KvrtgO+lviWn8N4GIuzyoJfmEqbGkYD1NNuo/pkhBn8j\r\np7t1XMIOv4mkrPy6SU6IBPBd4kgfzb5mL70=\r\n=gb9T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSWUepSVBrNfjnyEYL1JPkVeYLRAIkqk6Vcq4zAuzDHQIgAz8Kiwe3DMfGYr2bN4nsjcg8YjY1XOaBeq4KSkCSoyU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0_1645080199342_0.5951420849681859"},"_hasShrinkwrap":false},"1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"94fe0e45b5ea1a1625883994032742cfec15bf32","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Mu6szT105fMEU3BB339IDNYMnufdKDBht5KiANzHmYba98i4zqrzTyVzbQaOhrEDPMq2o46+FELd724t8cVbwA==","shasum":"e86b1c678950787a74902b778ba4f2bb0b23533e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhgpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqptw/+M1ha3o5i/+jwNEcPzb8rK2JJSIgYsW5R95GNH8IfZ+xZULkp\r\nwPk3qqqyYUiBJ/FyCjApqPPaaQlEo+eIfuV5jyby0XOj3Pgu/3JEbNx3R/9L\r\ngVqFLYqWNsmg3gUhg0GCn5xHvVynDpPJGw2rBlj5wrLDfcMFEamNfwcynTUs\r\nof5Bek/X4kgsIXLZI0wuPEdKwElWvQzWA8jV1sghRp5TJ6coE396iCuUSwXs\r\nOJumsfce0wepDU5NMmYzuQPmhZAy8EgICAp2r8FS83/Dy8RSPzJfamixMT0y\r\noG5U5At2SlKKl1BIqCHwgR7qPBSIVhnHZl2I+IxaEKnKmdOAsSpQxVAY+Fnp\r\nR2RY+tdK5i9PpUmS1VxKloILacy8A4fdXPraKTbUjej35+ygfAidmYPmDM5/\r\nJH0XGrzz3fIHkX5GQVKjJyV2q32hAX99bHouGUttjLogfHcYwEJRjIxI8ObN\r\nvU54jYWs5wPKHiPzzW2abg19Aj7oU14qXsWfJ2XyTdbGYbAn7tNywbTr0u8Z\r\nrq/AL7AOFjIinWfOVDc+mn8fgttjNvZG1pJqk+k6+oN+fGTRHdC5HXeeKJ5C\r\nfuUptWnTY7/434AxyyjUcgQCxew8KkSEhJKFzO/M41ulpY5kZ7yvouDAU5Cr\r\n+dEfIOBkdZaNYNrjySLVCbOgLHgWR2B9u+U=\r\n=cQAo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICu5GZ0hKgrwfKSs/Z3UQrcrAnKGavzWsBhzVd5284sDAiBpjf4eDhvX8a7tAIy23ckrmlq5DmNmvScNTMPj0Rj53g=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0_1645090857043_0.38506208935989994"},"_hasShrinkwrap":false},"1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"cfc03dace31c7cb6c6107c724d1496d827fd1981","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-fL2Rv9xdSyv2XmbaqqB1OiB3G15ypQcko8IuVgtNblzeNFFuqmAi91YO6yDSnwPuBfYy9gnl9TXi9fAWPtvUhA==","shasum":"7cf166384b78c438de546e36bb8211e75408530a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhxVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGJw//YVbruFKKcTFWfDmK5U/ehkLt4J2HCBgNhhEpEgeyN7waceZ1\r\nQD30GPinEXquGZvV8QkQChQ5Ea9e3GGbmJhyEAqTweY8UDEyxu0MducRHWe4\r\nXxut6wlgSMwGSVGJJuwbNBeAaUlmvxaY8mKfYnhJtS/hnp5WvaYvYCVjaXN5\r\nMRtF9Q0pni3cc/MwebM8L0oGN8b6RNQCb67md0f4DfoZBxToFYQodCDVukTQ\r\nyBp3oQZ9poVDxprDMI3ttkG2j7ENlyZ9dAke5eve1laY5wZ+ReT7qcinrWYN\r\nl8VmjN+S2qTH8KQDon0+JdZjIzYX/04uhIyzLk+6ff0NzevQcWiJAMve/IiW\r\n1zfBCMh4EP9rq4S7VSmRpYf5SRs+2dvrPkbsus5AeMaqkNV4mwOFcSHdHTQo\r\nf1YrWaqHCuksiGoORVU8vIcig5fwB4+cMm736EwRYqDNbkyNYUw17y9nfPG2\r\njPWmz3Py7uykNUTSBAi5LXWGPLoYgN4qVXfIls93+EP24MG1sepfFbyf+Ue4\r\nPNy7xewMifiEddW2lNA3OsPy1QdVyZadgxycaFR01ksKlbwIn4iKiEMw6m3O\r\nT14FMaueKxj52XKV08C6PSl0ALciHbrlRHZT6tAhF+0B9p3NjR6a0Xy3SohU\r\n2yYzhpCv3rCtOa4luialNMCKSpXH1Y9xK0I=\r\n=LRzB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcHiaOnD8v6I5t/cB4rQCiqE/wO4jwGywyqU+2EkPXgAiEAjwzDJ4VfFtV4XI+uKiGx86kwv1pdPqFm4CZyhqzXe0I="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0_1645091925199_0.8544570591163669"},"_hasShrinkwrap":false},"1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.1-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"3832627581dd419cdf60751509a35625be54f156","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-bFcH9pyzyQY8ffwz+GKmrX8fclxc4xxdqOf4r1cxU9WNkPhI2lnlTlI6EEWv9K6pGRDAjECkXJgMzopxMsKjxA==","shasum":"79721037d88b3aea558e56f0e358905673d66fb2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0.tgz","fileCount":305,"unpackedSize":763086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDh0PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpn0A//QpXlvmFqw5/3TQWE/Wwh2IbLF2ngsf/p6NPPMkhKzZ3T93YT\r\nmWWHfmkBE5YYcIkmtvZg9IQeWLuAs250/85cZjW0B12gxN5ZQoJnn5xuzbI/\r\nLFwQjszvpIoJVQDkMxShr0fZ4nUnULXDKWOlxREvwwiQQDAjhyoDqb2URuLG\r\njzei75Fw6Sfhko8Fk96BD0m5jH833/jJy3S3HOy2l3uKdTjXtpcarxJNzagY\r\nMoOxpC9SIPp9lJ1uxKDGfqRl+ZIeE/KTn7IJhz4zGqBjdReEt0n2ugyWNMtf\r\nFWfKq0XJrjky35azkhaxgzuZSg0HR3oWS98PSpKs5M0is+Y+z3KU+XseKmuK\r\nLrIk2ECvr2qceXyKW+Ck17+m1SDr9DBpvl4087+fL5RfumK+3OrIi+Xwsybs\r\nQ6Bb2bwghUUcMRvepQJO7HeTM7233tPbSL0LmSU8qkLfQDcfqAmcPMM96jvT\r\nik58Bobb94d0Z7ICbdMAWaFV3pOYExk1fdgJcclQ+l3F4H074keHt7mcYXW2\r\nGPSjkORiVuBMHDw5fZlIj74SGOk7nEXanikWfbYo206Byx1W0sHRD5IMOlYH\r\nG6l0fHtTB1F0FIgfHubMrgK4dhZ74xHVgvSRkQEC2At5xczsgORm1K4SVwYj\r\nch3Unyg6zfyRCzLzt/1fyL6zUMMeKfV7XU0=\r\n=51ei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY9GwX3nfAg0Ck2wjF4DFGZLpjOu+DEsSkWpcTR3V2zwIhAP47D45VKxq/jZMZOm6hrBYRiCS1/umRF4iPmHJJFJxq"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0_1645092111208_0.5929729121342273"},"_hasShrinkwrap":false},"1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.1-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f6f9000b5272fb033ab3716b0f1fa25771df39dc","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-yLfx9vU2T/qUYinRCIAFpVJnX1+1MYhIW67CjbZeuFtuF3BeaT/5RwMxuZr/7RTZ815zKf/taexFNRrg/w45rA==","shasum":"e343d6835863d69a9d4fce49bc74fd5a5de7e9c7","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0.tgz","fileCount":305,"unpackedSize":763086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDiGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSHg//S31IxEaIzHlpYo2rIhBJaOL6h97TlogZ3K3XrWT8mZSAGm7c\r\nwWRFbWVqJMl6GovFRsmVAB/JHiWtnIpgK+EuopZw0Bo9EUhm7lJs3AlwlgTH\r\nDJ5Jb60SC7TJNyCt1JPuWUiOesIy0tCHYhJv8OMpN6TpOL26nPb5e2g6Vnb6\r\ne+kV37Eq8InGPeqtRYJ7LSQ2kEfyUtdEhY81Vy2czyP4n/mHVSUzDCCfiSc6\r\ncDZKJjQkGD1BswFMhMP4ldDgi8yA/VhaM70G4nlAy55Ha7JPbCPNPFBz1P6k\r\niZ3AWQ2oimaAZh5q65D43NWr+fRQtjJzct3Ulzmxuug2Cc8puaJvvvgXjQ7A\r\niiubs9vocvYkKraI2cG6DhgmcCeJCy8VKPXsPtpc4hQoUcyY/uSn5yCDTSPi\r\nnVY6+W9ufwXJ3Tzt8Da68EyYvQXjNhy2IXkPkHk8Eeg2SvinvSHtu6kTp6Zy\r\n2LStncJCLs9IOk4pATNu3yKTC/VpbR+25jY4yYcFz+igooieJB8gqj2K29s1\r\nKCe4cUUzBKhg95gMGAQa9Bj02ZZ5JtoSFP+HMyIQk/GKiXikxHgJCYoSeFVj\r\nOOUkGT8E2njEtXVyk2S8A+35CsNeWyFNrQ+yVVYRrrcRxGKn4ysE9Kjml8cE\r\nDeK3LJjpN1Y9JBh1hngVtzVHkor3YUJsPNo=\r\n=7VSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD83lauxQXLqI8S8AH2BQZbfgQnLvwp4m4HuRwjGZjcnQIhAMfse5Z3bJgFAXde1obvt9SnfBD9jAnPjCsmf8+HixEH"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0_1645093279015_0.2588525438735678"},"_hasShrinkwrap":false},"1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f1221c960c807639cfb6f866381d38a066d40737","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-lUyq63T9iUkDYHcaH7s6VhxKches5yqr3LaWPgCJTjiLH/WaddReJFnKrKBoewF4+A8zqquNR4rgVMdAUzf3Tw==","shasum":"490f7600c3c08d18d097fb6723dc3b6190dc680d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0.tgz","fileCount":305,"unpackedSize":763087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDicjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkFw/9FbxI38rlaQHGg+5lVUaXATZwJQClfUtVFOVD+kNeDiIpLpe6\r\nTuQR902Sz0wDheDANRo8Sq0qhRz/nDGySErrLlvHihrh/cCeJQocvQzRnooM\r\nZQUm28saepm60MfJO4f4HPtmHPKFgdmkl6KB11N2GJXe1ldEd1ErGybV6Hna\r\nLZ8RFXKPzjSwLegcAPqti6Uhu7PZlQ4tnIu0SgKjv/lO+B6Ci1wIsn3dTu2D\r\nOX6599fV1HLgonXs/jdE+kHUDvfUfkC3PXiTVKI4zF7/LPVYa+V2a/TsczgY\r\neQy5NybLVquetHduXTT1JKdmIO/9CWeUhF5uDUsHsMC2pB/AiPr/KZFI1lay\r\nPmtg7uAeC+MMVdaR/IE7JrWU1zYivd62BoB14XewvbxZZlPGKngjtf+S2WC1\r\n1mXyhfucpGr3tpZ5XrkIlLASLefjSTmXRV7pU7Tp8GpAsqy82AbyaLLv6RkO\r\n/O5JlObGhCqwkzaoMpEr3oPUXARPsj65DMTOWp86ehhsH+p65pwJNybMlwB+\r\nl1Cfo5qtZUpqEyis12paE6C6zNRstR4BsKwV6nuHku8ZMSeZCgsk3bI5QwZo\r\nNSHDPeaqP1+w7dTdzTqUUqKHCy8b2/HqKY5WAwAbX0hj35ZTst2dKj+80Fk+\r\nebZbtARondzQHdEk7fdLKe09IXU+VTLMkFg=\r\n=4h8O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuTiOQpSl7Ez6C5jO6I/TUnrv+pJUYqw5j3p+6vdkjPAiAXpIpx7p3lCAA9MDBjKMd88Lygy0W7BZpFpTIBzIknzA=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0_1645094691400_0.41976293608648696"},"_hasShrinkwrap":false},"1.15.2":{"name":"@sberdevices/plasma-tokens","version":"1.15.2","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.1","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"d8c5a0be5fbd504a7c9a0131e15b591a3e962d1b","_id":"@sberdevices/plasma-tokens@1.15.2","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-RWVqqZxGwIOFkO1x/dxVYbeF5G5XrmU5C6Puih2T1rnc08J4VLd9EmOakNOLqmJt+7jkpuzy57dHDS2ynbRdVQ==","shasum":"7a067594b7faf710bf9f3c6e33ccc42ec7ac3bee","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.2.tgz","fileCount":305,"unpackedSize":763627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDir6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLnw/9EPYV+zWN/b6YS/qul1ohy+UD52Zao3c3Uc1QAaPaGho2s7/1\r\n1k6U/TwAk+Byh+ctRdZYTpSg+iGHjlLkkEclAdGf+K8kLeqzC60Zr24voqTL\r\nJNd5QWxcfpCnjbuOfD5huBxxPORsuv4J8Q/tGbSKiWJtXrwEMjf5NbG9DILe\r\nNHXu+CMSyav0P1fw9FKbGMrcewkriFN/NjDVU9Nm91mVHv5RI9Gj9tUBTDwd\r\nATdLh32ON47lXSIzoV7Vdy/pRL0FrL006pL/fx1PuT4LnDNh9GYAYir9llE7\r\naG+FGFARNnAXfQ91it1N8cMuPLwcL3ZeRsI9D97Rj+sDU95V70Wa6xJ8DY6A\r\nwBeCgKwsAyoWbIUCPU/EMD9eXPX7Yy4PzZQrDoLpVoBXSLNf6wtpdOo6RPHs\r\nAO0iSnSoyf/htXoHCqh8XZvvl1Zl/4koAmUDoIbEnXADt+LCbf8SjW+ES2CN\r\nK7thtO95mJzjojT+jRNWG0tggCc3hOguu1G03bitARf2qCkpNoV8KmgJ8r9K\r\n19iZ1lYbxz/Ro3Lx0AiZsXY7zRPdl3zi0/yzOY8TlOG5FlEJaFBU43cqjkem\r\nMHH4EqrJE+TI2SpJvaWRcVgRQuF/c+c9iz6XWSA/4CXnTE1IbvD4xIbilTUi\r\nyQIhQTBCCNU4tjZJaDID9ru8yI/u3A/vMDA=\r\n=Sh2q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAooUuajGsIRFZ4QaYf3YTR2bgbfXXx/sIqiTBUDqfEPAiA7Ip3eihjs7qmn+u6eJvlc6ZmluPaMuyZMvGrsnJU9OQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.2_1645095674266_0.9855476673858177"},"_hasShrinkwrap":false},"1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.2-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"e6f30cb9f609a09b3c0683dd0b67ace4ef84c579","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-9x7rV2MwQ3U7RZ2U4JNJR8GknftVLOSBGfa9Y7CjespBza8T+z0v6id5GNRXwGD592PVMAzwy1IwqSexUlCMGA==","shasum":"a0344eb62e97470162e1500bf99e7f1eca9bf170","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0.tgz","fileCount":305,"unpackedSize":763737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDj/aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIrw//QLn8qSn1wYaBDOXYLogBf3uxREGG4UFwOaOrB6/vkJlw39pH\r\nEg9O1ghQx3liHKVgRc8akpULeoRDWXivBzl3KhZ83eOqZt9kar/woO4T26Cx\r\niJujfFE8TDRwnmWCvnfM+eoOXmbL/iG67gXur4EETnJ2tfpgEBKT3C38PnT2\r\nr6wETnKuDVjsH9lYeBqtAi186iBz1bSkdKXbCIWI90A2/Ba6JnnvsXiOeM8y\r\n9LZ3MCa+k60IbYDQ3fEAizajZJUIT3ScmGpLr8/0C2vwOZwqz4ISuuoz2prX\r\n/txj8kBhBRFK/iGm4+CaZfZXBQz8MD69oBSjspms+2S7EmYqBie2tlRXpgho\r\n7AJoq97qW/CYnn6o3pWflsVDNplqk1UQvbMNwE3D0VqsY2vRnkiMvBNtm8a7\r\ntOurEQJtPrXhzoNlm8kAQ0QXhNp2MJF9ji3gcuhw/oGC9tgFGavbDymmnuwi\r\nBlQgjN6s6WVQ/TJLRIGagIiO13wrt7Sajkvl0sUKvXETvdQcMPs3XxdbYNUm\r\ngEIrZbkcVdFzgP8BKSoMAG0B3wdwSZW2MIcsNAw6Laz/dj3xbUmmzn0F/T+9\r\n5aa2SUJB5deIuUifEQNv4ZBcdcxd9E5hcXZdAtrx/8RlH1ORTobGoEPCEiBb\r\naqK5hnC6PNzLE2h8FHoqy4y98Q+vRbDQZ8c=\r\n=dDzh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwwr6Y9L7vuuDKOregryMebeis7G51t0UkwLgAsBvHRwIhAN0SMktrKDwt7+GBGS0Pf7OuUigPgua4cuNfwAqX+HVB"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0_1645101018442_0.0537269361141548"},"_hasShrinkwrap":false},"1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.2-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-A6dvmc1YVJ4KLJhpVDD/l5DBGZq6dJC4N6ZD5YRSiBjG46MlXkPwqcDOXrgPPNFpzyJXw+4msKYve70hQBl59w==","shasum":"b3199e667d838dbf1ce1fb414a346070328957d6","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0.tgz","fileCount":305,"unpackedSize":763737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDnCQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqVRAAgiGOsefpGenlkTgMMxSXPRbhJsCFQBwVkcU2Bwa3RHZ2C3pA\r\nEwljcu4qYIh3HD/kE+mKQmvZf1CrD8STU5kZLOdrv3jEL1/sxQlsTLNT5bhW\r\nz68msHb3vZJzWRgrjaMEZ04iI0NOiMT62Eoczyl90x/HdLr19k3cfGh2z/xT\r\nxz/rjREYxphw9ObZmAXBjVone5j5z41ZNl6qMsNznWDWovIseC7F+5LyjIBJ\r\n4LTyF3H/tbTGZ9BMJAZLAVz6ayS2ah8C8UnEtWLtU/wbqMEvzTJX4XfJVQxq\r\nYEjop2xek0Ldz3ur1CJkWv6cvzCiVHrLgcHl1opmLX7ooCyo2i474Dq2j9JM\r\nlETBbc9qDmIsewHNNc4ezYddcn7XhoBTaarmXxoA/6z6HkrPxVcxGR0blCo+\r\nCfK+sVJGFt+eDSK5QL34NVNHAWdQfx4CutCNGToaJwem/GK40SmTZp4jJaxy\r\n6cNMXZ9M8LRjlsam6iz18TlaKBmq4R8c5rIV+3oj2fWjpDvFI/CBuCVRrhhH\r\nIUc2Loj4NEFDb/RQPZD9JsQL6Bi63Hp7IKZ/qFTRIBEz2PR9slVwahXWkWpi\r\nE8aYQ6fuipnDmpiJup06maOzLVZ4Onspo9BsKDI6JZg0vRv3IjU05qaYuvOB\r\nf4ecueRKssfRyhBA9t7WeN+6/NIIUNqz41I=\r\n=Z07z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl3kFwmA7AwRiXzyoPD2T3YyUzjoqs2aD7hKaJFnDsPQIgd0C2O8y4kS9kCwiDqXlkkMv9HGQ5g4cNLCv22Il711M="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0_1645113488503_0.7739890737260684"},"_hasShrinkwrap":false},"1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.2-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c4874ab89f4285777d721759d5db59584fa3b736","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-pjxIzg4j+jZ4y0GltQAkh37fWyVgTHbfuDR9K04k6NG3JeeguOBWRGpWKnJ/YPXQkm7FqiCAzrjX1/fiUlZ71w==","shasum":"e464ce9e2d155e10c29dbebde92e72c2c68eb701","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0.tgz","fileCount":305,"unpackedSize":763737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD3vKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6dQ/+KLYYJfjrSFDUkCZJHW2VIC6NnYqxIkvQVRrRuYbMwRYPivdH\r\nNeyeTzFkasqAbUZ3xGRIO1zpmkeBXGeK7R4/G/DItC6AFf01G2JJ/CPUvnrR\r\n/Lv/ZNiPaWyQcbQtK4FJb1rsbNuncCkfC1yNU6w6DchS5+lMmEkhLnpvY08c\r\n7ic5xv+x8e0eb7OUWv8od5MlBE5IOvyNZ8MAq7sFtxkk9Mm7Y4U5cmFdm0Wr\r\nKh2NQ75WznBc8Pt0dPyfYgMvSC74iYeY+uC/GRXdmy6tqPy56hn1+lACO+nB\r\nZ8ICf6pW+rmNt4Q/1iH4rkMkJrRIMWZFLC4xge6Je1Kp/MRWiQcWpuptMQHn\r\nbInZaLvEWaPe8JRnaKugQDMx+KgPoEB+5MHTO+mK4n1U1ZSbx7DxvVmuAGOa\r\njZ313euWKSQoXy5OOD4GE/S/taAmW4FUZuNYEv0pr4A9+Ws6JdVg6DOwe9tC\r\nqgIwGswioi7dJPXBjCN6OCCoC17nHrkKycVFTmFRkS8yThnPtMB2RIkeJ3yM\r\n0yalaU3t+tF2h+eq2iZnPFI+Qam20TI529Anli1qxhUR+tYEHWst1VjDyiWi\r\n9c3xHXtYTGug4/QWkHqcfar5o0iqhMpB5lny14+oPbCVkAVmfoiWN247IR5V\r\nN9qGMEleY1UFzx5dhjMNvHpA2M/rZyXtDlI=\r\n=sID5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxqXgBC0GtIpCAJYQpge+JpHC0BwIv6rolmt6S0qIfugIhAMv28d9CwdiwwbWCLBGrpLISiMoTCQdghxERdIh/AYS9"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0_1645181898767_0.16150466042004208"},"_hasShrinkwrap":false},"1.15.3":{"name":"@sberdevices/plasma-tokens","version":"1.15.3","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.2","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c2db11758fe173bf85d32981be5b15a534cd288f","_id":"@sberdevices/plasma-tokens@1.15.3","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ZgqGzZnGl/vVHp1MWRmX2Wjx8oJaJaKH+0IHk+QT/Pqji5wGhdQPGtS/ktMElYSiSZGD1HN1lwcP9AXprHz81g==","shasum":"24c07b1a64e92471926589c796da24b97ded4b6f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.3.tgz","fileCount":305,"unpackedSize":763908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD4UBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0Pg//YCZKBN24SppU25jcZlSSzd9tUEU1GEv0tqYXbPzf0UZPcSPW\r\nZHYmYDCY6/yP2a+580gomgShZcD0m3u9iAGnx+JR+ojVPORkChQgr5l4Bbrz\r\nYMMGQH6G7zgOMx2iH8QsTtF0v8D71pOf392Lh2PbIiEiEO2xkRZmgDJONvnF\r\nnMeT8xdHmnT/fDCjuG+amLD/Way91bbeSN6+WAd0gyeNXGvryX6y9Be5Zz9C\r\nejfinC5RU4O4ZhASSj108wO7e7ZQ9EKXx6iJnscFknl06A4/tV090W8/sgFI\r\nF79mzgGdS/PhA7sFkGEnLJPAlFI13t4Phoy96YgJf5y3cV84q/ZvC3L1E/9V\r\npbiaBt8sks37IfydSmgnJi3S4wIHWyL/y656pMc+awc/OKSLagyFXiE0iYxR\r\n/dm0nJtlbVY8HFK8//l5z2no8OjnKEFfo41dm4IfdJy2tDCBDEy20+wddQ0X\r\ne87A5hX5b5kx0jWyZUaAoVN1R8pluEaBpmATSrlStC3BroD12BLenRuEcQO1\r\nDdIuucfi6XK48PsYymYKpaFRWU1Bqa5hEv36RUWTZ0u4keQngH8byfH4jzdh\r\nejBfWmUT9bAhzab3xGjHQa/gSKZPx+FLfHTakCwh0GJ8blLRG7UzPzT0SHY7\r\nk3Yz11oA/BJes1Lvh/oQPMCVS8hzTbW84fU=\r\n=XUjG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDT/PxoG/TX5SLuY5vAiMvOEw2LjtRWYcK4Qw4K7YBjuAiEAyoUuGsCWKn0mgG9N6/8TMeYKxoXJd6BQ7KRw7GihIVY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.3_1645184257019_0.15764302535308072"},"_hasShrinkwrap":false},"1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"53b28dfdb2e047b4692cb3fdc75bc03f7874eab5","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-xFTCZ71W7dI48ZtKm+A7nTd4wXBvkmrSN0rNChLdOVLaG6gAIR7ILLjbBgpsr4nkbHPHBEfbhhbsNlG3Y9Kk8A==","shasum":"0d4e66fee313d6ca455770adb0d72bf0071cc5c8","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD6ZYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIPg//VMg6lcCOqReMjIesv+kukCyjN+LkpVB1F8EtLZG2MMBXP8ys\r\nxUchcJb64u5dQ/M9IiBrFwnBnTkB55Pn9L9P+OWvLJrkGcUCHIQ4GigFACuw\r\nAgzkISVmIY1zrYoCQ0mgyWmvaK9k4iScPaStIMd9p/tHef/OOyp4Ji7wfwTm\r\nGiiOP/kBr7pjrndbbAF2nIl8DYUnzkdpmvJV11DvCVaKNVIusL8Q/fkIIM3z\r\nuHPw4siTrOfHNOS+YumwWpkK/EFt5A2LVi+AiW9oA74vUTNcPqdQiGn7j4iL\r\nQah32b9tWDq/cGl3GphRZWWlzu5AIcWwyBIOgErH1iaUNCXMf+daGrprmw8q\r\n+dQsfBjXcRtYbUh4xXrrxNcA9j+lb/++ESQgFsFo/feCXM/aCjAGBNaAKa15\r\nrAQPlhaJxxtWgU/c2GGOimI92qnnp7CQsC+jrbVutTvMYhaGS0JN1e1jujHs\r\nIygqfIpVBHTczu1vgHF0aYqOn2nTH3l7caFCZKz25mSYMB0O3eqvwNCeQTYM\r\nPMFFZmVXHsx5u4vN0pXRadJn78cQ4X49rp2KL7IY0ZwzrS2Od14qZAcsTZxf\r\nr0aniEL8DguxX26iyJ44gTecwNWyMqoNXQe03PzrDnJQEEUHWUf0vL7Mrg9Y\r\ns4gLu0OeEczFlh8tXoAMiC0lPIN6BiknUMc=\r\n=I5EA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQNO9ODYk4+54eTOAcF6C/WYkttHymrwjCfZBsb78IfAiEAn1idRPJ9loAmEyOOrlmDhCIMUYcMV8co9ceICCn0wxU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0_1645192792430_0.8488227123795025"},"_hasShrinkwrap":false},"1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx typescript-coverage-report || echo 'See artifacts'"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"103999b8d667fc9bb7eac350bc17ffb2313b1d17","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-WK3Rvb82icaxByV/f7um8lTvDFSPxWw2nBk7nGyaBGayH4j4UztBZUtinCzOcAowsYnyWdIhuIXAIAFNrD5Rvg==","shasum":"2660adfe445d1eded8968d89f2631736623e15ba","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0.tgz","fileCount":305,"unpackedSize":760341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnlWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIdQ//Tp9FitjQvyaiCwR0hB/jR/kZdhxOix2cO3ZF3eZeJVDqF8eq\r\nbSffwt2KuDr0hh6nYITMdwtDOpFtMKxpVYJ23vUd4BI0U9WeX+MuIwYGoi6N\r\njHZCAAqIpZcSK/4HVt04WT15r8zpItBEMgFu6n3dVOuDoNDULGWZ2+3k6SBB\r\n4ehyD3Tle9jaI/wzMLUyWRgiXb/m2EWV4UvLR0wiNAlF5i3sx8qF8/1NemVL\r\nFTf67tyXJJbDDXwpMqsjDxj8GAQYFFL4Q0VrfwUSddul19ly1d7eVu26yOnX\r\nIbtBoiEbvGcTnVuzpEfT0rLgB+iJRMzJKFXhIU8QMnvxnvS8GmHlWfHyposh\r\n7FFDP1PO54vPYmfMBHUK2hoMyosTIlX4MO+xuIBMyf22kXrlUgW2zpX7yFKV\r\nPerc8yM6tMkw8Uu7RK1LQL9RTAqDQR8e8abGa0wYzMQKpT61xw1R2h4uv6PG\r\n5lo2+7AHT4ZC9K4X8SluwokVZF3JwAq2Vg/W3DulZxJWvFYOyrBiINORYI+S\r\n/CL0MRl5suitzyriPtjqMQiY39A7Kf1oZ/5mXkZYIiaANnFy/h97ctktktE5\r\nP4P1W1L7QX1Hy95mNoOtkLQoGJV1kETWeG/D+8HjSlq/iK2AmmEwBNegfrDY\r\ncoTRkfYxr5DyoubJY5txhE9Iitm1A7wrM+M=\r\n=y+Lg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmxEuBYgaLymrqcPGus/gp9ANse/50RDyGuUiscJ8FaAiEA2OMRO8cKWl/e8moDnBlwWy+lEQygowgznfBGq3tKemA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0_1645377878234_0.09818052586786741"},"_hasShrinkwrap":false},"1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx typescript-coverage-report"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"e5e98edf231b3d5074920c63f323ed2060e5da5d","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-F71ap3UTJ/PthfsPSxfpvZmIa2/N2BjbBdnISVKlpAtDSQdFYb0nFTuHI1bHMVrR9liTqjYpQi43fopxKxU5/g==","shasum":"501fef1a0e7ff030b76752098f5ba2f13e59b1ad","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0.tgz","fileCount":305,"unpackedSize":760317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiEnxmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXaQ/9EUfJeCUykp/zg/DfbjK+8kDrQWxvyYzONFH4eV9WFOPtmYqH\r\nH4A8/dEtKxnEw8kS5ddl0CrRcnWf+/Oe6hrrCKkib301VTLufd77ERNP5B5Z\r\nK/3xR0sRV369nYlEFan8ZXZUvqIYwOo0E6OYZRsHzu+MiIeogFeEXuDnk3ld\r\nt9FpC45fk01Pn8lbmMClMd7cNEDQ+gwcm1PnebM28XtJ47NwDlLEGqUJGRhO\r\nR6S5OQuXjxzLUXPMseygccl/b4t/0hHmP56p9++qpk4chscoeyIB6eqNTunk\r\nLjvdD2KakXuFIpi8NtbK3fcx1HETnbvk2ocFs1xGyxG4cw1i5ihBTUXvOpqw\r\nXSjZuFRwdlEtGlC5+nKicOyPBf+MkfPRmLto2yUTBgIDao7RMBjl50NUcgBs\r\nOdY3B4oLh1kEy++fFH/GLVQgdgkPKEV83szq3uBI07mak7MSwgbX32S4InWe\r\nSjl+HLmHMMWqHztBn5n3Jvpq+LTS/2vVgDIuol66yEa0Ms8hVcEg78SZj1Q/\r\nrGb/f9IFeo/6DNVpJr4BEhzW8QSHP2z63l1MnDRUkasiJIVtpU9qiCG19zpJ\r\n/TY7pGxyBIef3XWCqrhSU7UP68d9nuqos8OQwSLUDnFyFIWH++AQ1Gi9g2Zb\r\nOz78H1eLVcBc33FBoVO+Rib+fLY0LvEiG9k=\r\n=B/Ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqDoXqiCvf9LRGrLDoBV/PSaSl9qStN16jk2IqD7EhTAiEAwGfdEIHznWUeznX9U46l0uqx0wPyb6kJHbwcIXcv1Jc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0_1645378662227_0.5292568864889817"},"_hasShrinkwrap":false},"1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx typescript-coverage-report"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"8ad43dede2b75a5c85f80def2f0420774b7fb7db","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-YPADUNu+buMko9ZASDPJT7Nn/uJ25AghuA4LhjTMMstDxQSlTJdTNQkLW0j35ZRjFKBX4Z1HwHEC5KiY+MkKdg==","shasum":"c28d93dd667e2128500741b0989ade0bb742c76e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0.tgz","fileCount":305,"unpackedSize":760317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE8okACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbMA//e7fafNISWvJljxY6uQuys2XaLjK2oql0S4vRLJa1ojA+mljJ\r\n0l/PzrR5jaFR9cacGuhMA4eyPer+ZAGvzE7QY3ExbAWIvfrRzYoZvNqP8VxU\r\n51nKSYSiqAVW4mjMXhmWjtGUMyWhhLnJYWTM1CGNiBZk9BHqDB1I90heBphg\r\npo5Q/kKolV7cD5d8MLuIWN/0UgDbjvwjM8Eh4ATrTeZEzFljkWax9G3q4MAH\r\nM/ruHLcdLUnkn5pTLY26MPydT0sQAkFndHR1NLn8QPxp1boyb8OghFQF0zTn\r\neHQ/rcPNgYH4mdJR/fZq/AhOOIrscgQyrFeNxHpEzDMcNIaSv95J94HzkEJq\r\nMCJSa3vvv6TxG8wXqIxLxyo2rNncKZlHdtaShX2rGSpz8W3cjx8096gnQ/Zo\r\nIszd3rA9qpT8PUNfeC/CzVzhryU00imvu6KHci2W4Pq+8SW1hlDx/R0JsjMY\r\nNDtu8QnBGB13FuZbqCmOqEiMpo5JxFqvBOiCWBF5gjFCm58MbOBvvLGo2MxM\r\ngWIxC+JBqGpsBITLqktZ+o1CcT1TtJFOjkrjqZ8L8aPDF6V1mpeOuidgu4yh\r\njtpdOqW91jEmfQ09A1lEfAiw1SJQXS/I9nZZeTZ3aT9NkvYYrLPbP1EPktMi\r\nXnr+H6NO2wKg3V14+JxMV5eUQ2H/0qjVjqc=\r\n=1wx1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID75GW4mfeQV5diB7k1gpAfwA6sJznq9RbyzM3UQYeBFAiEA2FA5SQVWsPU1sM/8A8cxip7+Me/xBxZ7xMnxHqyMonQ="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0_1645464100701_0.6096139445562776"},"_hasShrinkwrap":false},"1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ee10bbef179d76d259b8dd30b8bbfcf786aa110b","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-txU9xeDzBWQRSGBrKtgRhhdPr+8MPIqntwhBNp93Et7gSOrbJmZ93BWCwuxUJxTOS6rBSg2HYrzsoYEfdaiOgA==","shasum":"394e51d8ef1e1028e92859897c58fcb93eebddfd","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFJ/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHEw/+K6ze7OOJbSa0D/043uZp9Qw29Ri8PzxQaBTSxXQJXsPztObE\r\nVqWiBznfOpdV/ZUm4GDnU5VD7K/4qW4/mm/OSxIiv5jN4QlqVzh+DSqAhAHC\r\nhDxsYDSNt/qGyw4ch+LK4eR31qVQj3enjaqGeZENTMaBC0SB1S4Tlcx9yDTO\r\n5kxh4R8hiL/3SAY2z4Qky/bS67fGesLHSkEu0WAO+FxYjiKRfwPZUlTRifKQ\r\ngrB+1gqI78XXJzufR9T2TYjjmHaf+Xp3bDnEngEKZzam+qrk0cSeG9OBd1Z8\r\n6/A6kdHPVyvf87NDgDSsI3pV5JuL7je8wdn159FFevErSoKEGGbYMIAI54o3\r\nkPV1ZM/5RuGMHN+AcncSvD+lTuguoxHN59TJ6BAl7s0hI/huxAPzNYNedjq1\r\nztFBTABG382jAq0uzOA20sbYHLRMkqu49noVpFEyqtRmvLXcyrwy4V+Aq9Gs\r\n7pQGOCK4wYOedX1a5g2W0ZXqnT+jaEdPO8T8WiYzeXuA1hoIR/XJDqOmfSkZ\r\njP0FehEzGysD7UCFPBZ1HB4TDUtUxpjDSM9eS8M1b/fbWBYRTAS9iHwxJZ5B\r\nc53LFGkqVNL8+FCaay7VbYs9F3kcHVc+gb2yHhI1LoC8Yd1urggOjrp/fPYs\r\nTUcKz669iynPNIjHdvm/syDZ0zZcdo73CFg=\r\n=wwFQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSGW+ICk3GEInXAo6g44ZDsnJ4akDSBeD+mF1IGqkiEQIhANKxx7lsVx5PD+sJItoCJ4UAvDCEXEA1esBRfrspoQYm"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0_1645518799419_0.031568492762318545"},"_hasShrinkwrap":false},"1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"95285d8b65f3be61d2f8692520464b1e42fe0bf9","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-IYQKJGWExLnuInuGfQS/XMud9yKqrVb8uUpUtSIcH9/cGo+L2GuHSm4fUq4wAFX74+rjySe5LBziLjUY+xPG+Q==","shasum":"f001644e23a5f8506f4bd1c2f3311db6b6736e2f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHJHBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+kw/+NEV+gDaIk4pvrcLBfofG4m4JkFMwBjlgBWRh393JWNVoyw6v\r\nik2ohU6BVqTeOiJ0sxW3k09pUxN6xcQG0nJCO7GGFVHrLRPmp0/VAtK1DMFz\r\nRFMF1zsx9/N3bNuo+jovAprgesT627JOfQp2cV2mo0CvfNgr8D6Uzu6nTaiL\r\nCTmXCQKUSjGk16vdJBFsfasPvjiFOSflVYluRPGgnbT1sKv1ss+von3e5eyR\r\nn6bXfSQ71rirbQypJyJ8veuCA9salMSOOSvxOQ4BUWZ3GkezIezLp2eT1rdK\r\nKrGWCDPSO91ACgIxcOYEi2OjtDEj1nDU3c4+5JnAWiFpRMyTFKNf9d4iSu6M\r\n6Zhq3/g3isjIg9NYJzc3vRTdIbA3VLEihwdszQbU5nru8OchOLwQn/XS9X/u\r\n+3FveFVj4UDTXwIpSZsnnHxslbTlt7apIHfrSbNBXji7J/v6ooHhqEW8Bu+v\r\nvZZ6pgHStbvEpkwGwqP+Bqbe2lptNyJgxJ1erX9/ELhltFhP3dQrGfdHzE1H\r\nstSOZsJaejNBkrfBAx+ytexNOrXyz0QBOuzpiZHb/FmsNKg5vgyABNr78XzW\r\nb1wVQmWkQxU/9yJW3XRPT7fKSggWmfP7ldn0EhTy30Kfc0/ijG1NH/soLUhj\r\nYRebaKDua/ouobOVnsVPOXoVXOGanMVcr6o=\r\n=KG6P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPH1hHV2QeSZpK602z5oezPXjFEAVAATfK2ykd08R2+AIhALS1BBeO/u6RrrWxIQYrgspKXAR8kZMpK27KJauwy+Xk"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0_1646039489742_0.7253906435891293"},"_hasShrinkwrap":false},"1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"df28b667c46b24f81ffc616a9ee27d1999775bde","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-W5jaViubAA1ffjxl1SK2jpog/7R0IUiEyKoNxP+S6MgHUkvtsZ/Faxgj23R5nnu0CvImkD/JsfQbAJPLcV/itQ==","shasum":"7f4986aa19a7e2a3fd3f48df84401ea506d8a26d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHN7EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5pw/+OFRVf6d/0RKfsMqEkMI/IcPnv+OoNufoDBUqNYFOdaEsiCOr\r\nTOT0sEQ9+zjmbD5fRud3NllX9lnfKaB5QgAhEGBWy6ZYYjPv3LKxp7rOxe3X\r\n9Ly+i5utnEvX2BtG0KQNGNjrTyXw+edOXcLsMQY2aocDIRMa+hD17LMda/EK\r\nk5C5JoFD/sjjbF2f1tSWhde87RF4WWpDDrInf3ZVY7oEl3H44h2AAD0U2dfj\r\nH4yQYrv7OzcnYAf3Trp+Kf5XRHJwae41oEepRAOqBCEg9dyj5+xNxf/kPlPu\r\neORCw4kdWMijkUG0PErBMMamQBT1zjonilK59TKSfVvpCfOM3wthIi9hI12r\r\npz8XDAkChqSX80kxraP/zg4jzVgBjruZl2OoeYyFPJTfxyfUo9o1Ku8oeBNx\r\nwR36vm7d5k2uW0p4M90w5oMsWtT+mk2pLPAJ7tPCskwcGhZZTjJvlqtk+PCk\r\n4/hiRayCVQAc4D6+OtXzoivr4Jlbef//6qpokZq1b3+atDwPNgO7Hui8BT3S\r\n/ULsSHqCfomqGitmgwsx1AF3NFfhOKzH6XuBGMlJwORG7oYmjPstap2ZVRPI\r\nyLI2Sk85n0EfTQcHiqDrOaqeerovLZuWPVkZfV/D3XnLsZBbKdUJ5u7UXI+g\r\nkq2CCOXcOZZnsG4iPSOZqwHc+3b7WYpvhGc=\r\n=a3dI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOxXrgIqwDTpGfls6q0B770rNiVOY2Q7is35u5jhw+zQIgIOpgXNdzynd6FqOb2qTLneFxyculhr+Ma/GpYYbTx5U="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0_1646059203760_0.10884757999268357"},"_hasShrinkwrap":false},"1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"6700921bdf8c410f605f56ca5d62dfdf69d38d05","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-3XNpJKhmjuadmmqvKLe3+VejORVjLFlm2JNl+gC1zULPnHUQIo7i18ccOTz3u7As8jPGySTuC9wbJErgw0QVqg==","shasum":"5b83aa3fac6d522afe1596c5d5559eeb2e98de20","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPTAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZTBAAjtQSv+umoKtg2uc7NghYe6G/GGKaPqs/ltSuJapmlj9uz3L9\r\n4OomcZ/DhSOLSVq1MCmjYkSRYTP++QoxS4Ith+qoujD6D7N8vL5fSrQYP/7E\r\ng3baV4gG0Pja30cAHuugzyqqaB0rnWoUMhjS60op6Rlzf+C0ufamON5qRMJG\r\n9vuSY0Bd7pW3so/B3FwVESbCKqPaQ9VGYUeDTxqDuKm/n6CLnqBurklMfOiC\r\nZqC4XT+YtWACrHLMM8rseEz1mjxruepK6w/lC/HWN60j00HjxBHtoduCacOk\r\nXT0nLbVvhbPEFhnN9zRJoKqEN02x34fb96m3yKXE+EEOiFFMesN8vnMbGF+q\r\nx2S+PJ8L6MyInxXPH7+tdTMzvUbrCd88yHhYUVtQgLGW4Ir1kVtL1Nn9/n17\r\nYbAedlnqutOgYBCOpD/UI2QIBlxdJ0r2bKw3wqtY3BAcohyqNnyjdSPCzx73\r\ngTNoRdymB+Np2nuX6o2+yYS4V9SqAr9RUH4NS3D7bfIE55nsfY32Mz8qH4uL\r\nUO0RqCYBDXJZHtQE0L6rMxwg+tZOOTaUGZw5p4gsijur7tbbJlyy952sScQJ\r\nQD3fLED7DiLm5LWDNdaDCPN+8iGic0tNlg4OvPVuQUUwjH9S7lYXidG55GH/\r\n6DUoLfLpHUkjM1AkCwDl9ICrYiwnWygAyFM=\r\n=Sexh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuHbZVssFRTMxFwnlzhvdNJtK2azRX2erv63WWKCahxQIhAK7S4RvdjbXaO2fZbXILjaHlcocwDDIDJuU8W/xOJdGQ"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0_1646064831954_0.4015658984623083"},"_hasShrinkwrap":false},"1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"00c8c631453c339092b02e42260056aea5d341f8","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-K+vFVKDV6DuPX/JI4PlJ9R+bV0io2ubItwNmiitD45HnnlL+A7L4Zw4xlsosKc1afR8cj1Shez+Hg/m5auDONg==","shasum":"72c4a316256e9819f1dfecb7969165ef5e642c8e","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHSDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo40w//WobEUpnjgQWcfQ1/M1kLjiBCxph9Y4P8+4dNY4O/5i+6Bh8n\r\nEBqjSjFY+vK+1T8yiAe5sE6yjVWQVOe6NKxQjvytrGv9qhwpJBSulS6oGFlp\r\nTOUX0OvmOVTfA78pKqSPc1pGfAxvXzrLL00JYuWCmOzLNtqBYnVH6DTUQqnb\r\nbDWChWeMG94NFNRYDkej1NtDCnm+cXNQ9uxgOenb8mfEp0afaP2RNKNgMgtr\r\nNAoRLabF2dgj2AA5Cjl5Fa9mBslkZkyCuVO6HuSogmas0fLjD1Q4K0s2NbI5\r\nJoZeWbpxLyyFwGcFU79fvv9JwszD5xv49GailtL8df+edAN2D4ShwYZK7urq\r\naalQkdO1txeWVH3Oy+3xZB0F9ftWvym4212O0QibcSmHC84z+NjQNReVWNnb\r\nsAvfYM5UA1HiEbjBPAqh1KWG40YQH79byi89GPAADRZ355+/VPZXFU1mYePP\r\nb6ws178shz7Fft8Dx4gy0Mmd3ooQWIICzQYf+KWMkKQ8vpR/MJq9brxJtwvh\r\nSlDVKlzsaZvhmDd9iJRRfiC3qHYo0rLV5bTHHtZCtfOCCDyDHRoUldXcD+ed\r\nVlS+gFhggGjkm9AVRUECDu7BVhY5DgkmQN+Ko5xZxXe7D+EU2asx7+A9aXXX\r\nGNzMIdeJPsk9kbRIup+KIP+ph/Ye1eOcXKg=\r\n=qFRV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3fNE5plNucutccARnPRxBtcdMew07hkm77tQUFeinuAiBkAXj82SdOR5vXnn/WIBSZrgLOuDoCFqbUQmbeMyG+eQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0_1646076111941_0.44255230652095223"},"_hasShrinkwrap":false},"1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"3620d9610d2e0b694ab3b1b69fc935fb83e988df","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-aEh8b5ePW2Qhhdr2MeIzGVY7ZSCMp+awxI4gs+8qIOqwrasqzXmLn6DJtuENO2yVD3Fb00HiZHbMojNuxKjdUw==","shasum":"3c91780a39d190da245780190e2edcd40093042b","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHS17ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9ERAAis7cSxVmvZ2KhIM/C3bpjg/yazcqdRVKbmSSkYyBMy/b6QdD\r\nEX6Cla78MGiHo0qkqBDSw84iRk/k+QA8Qf3HawQwZO8vtFA5sXl0HcrxnOr9\r\nWQPLjMwtK1gVOObmsbY45fe7CBtaDM9cJ+hTbu7nX4DztdMoTbRiPw3+JbUN\r\nk6ROzlGrFtqDRTk0ytpOwrMztWg4G+Z0e/IhmCC+BIclh8/bWGs2pm21tkTj\r\njVJ+ljsYCwkl6zBSuN4a0tY83GhfALzMk23fqMYNRpT4ZAWl2hK2iCWZvzFb\r\nUHMLlx3Gnn/6FbVlORMtRZczJ2TYxZOgK7YZLY9GvkmIXNiD32+y2+RRWYQG\r\nU9wECVJDhsfEssTde/y06vMs5AI21amVfwwNho0XimyO+EFz2KUX1KyYjic4\r\n/RZXbpeZpn7M/OXgU/LnHGUnJv5GLQ+yG5AVl3mskiNTOq/nljNlvgTLtJMs\r\nK8DVrfYpryeUH5lAM0GlwPa++2gpqX6HSf+DKM/6LqQcSf8abjWDQrGUPQSA\r\nqUt4GtKIDQ79GB+StVwSmXQIYWXG0NZxUptlR8EnXzmkv3DCsglpiuvarqRs\r\nwiBTCZihKqV45VzAE7xjK/KMIs0ZNz5XSfvxYuKBpTEvwQK6YziN+YUCNURo\r\nS9ZbKBwg31Tad8UiMNrxvZxp63TKuk/Dyuw=\r\n=RIaa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdkek+eawU/TrbBMTV7fegftcD8ODM7K8wZE5zZ6+MRAiAY4IDLgR+SwBlRD19e9g0OW5uesgr1G0EUtroB0yPScQ=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0_1646079355201_0.5869864624025345"},"_hasShrinkwrap":false},"1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"0ca5258b15342bcc7a35a966113ceadbbe7dae20","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-dTrqOUecFyLJAV+1XvjZA5xdOmla6YbpHIq8QXiF8aN9MYhTAxnThs0YMNP73XFjM8ZnSROawsL4N3jHsCvdfQ==","shasum":"8e283dba9d9c95f86e3b64d4ae9620edeb2543aa","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHTqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8RQ//UoFYUhLgQHzPSJkAPm8qghl8jxcnfdHXsh5l24LTBurlA3NI\r\np7ZGEXavhgX1/CITiE4cV/OKps/yD4pyLDgMzDhlBo90LibbriAf8ctN86T3\r\nARKfy0g0wlvw20pJNepFsv7NbbFUERES60lQIwl74u8yOwgTNaaEUm0AKecb\r\nBdh+cZh8fNEiRRuPD/sX3kfgeInH/w2y87nr8F2PNYQeQhDlXAo91x7S4TEK\r\nuX+pE/jpMkce4tyizg7OQCHw+UnVc1K5OIsVRN6noX4suSy4t9f6vvUya4Cj\r\nHgCWY+7CUFsO9aQ/yzA5lIXABJ1QlwmgIYMytzLitlYhqD7A8hZvwLVpFrcK\r\njxzjKaLnc9q3PsoWpojpA/HWx5wgFJD4FYt0/jxJCUMnhCqpLNJeMMPr5/8C\r\nD8V0e5laMi5T9Byzc6CzFURU9q+EU/0h74H770+BG3aEB1VO8jebgxjDpZxl\r\nMT29NMwst/oqea0yNZZLzxl5mQOabKb1ikBMKhqiS19kq7kiiaEhZV1m4V47\r\nCpSV1aftH9ccCV4/CyQq0UWDotOKMu/GZtTWdQUwcuGmkYQp3S2IpWPjY7Ix\r\nP8So0eu0L9hmjUDJnloP4/h1aPGH+fMxwxeJnamnkYxYG5KSgD1CHoKVEOhd\r\n/p8VyY2vnxsPB00w/EyJGZSOYvg//yBmuwI=\r\n=RSsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfA4jOze4udO2yUGyLX0ZXTe0l1Dz95CLRSYthzDONwAiEAzZbVYm6pp77SMKGC+fcYIVep8PWFuZFiReNBzrltnP0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0_1646082694955_0.20314660689960173"},"_hasShrinkwrap":false},"1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"5bece646bfba6da2083d59cfd7344647f345f2cf","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-8/KbOvDhv+SGWkxFM2EwQ6uTrGek1lLJflpPogLt76BGZXGhoB3KHP8oDC6hkedGzITvIR4SQg++onPyhpa9Og==","shasum":"095bd817c387ff0b62259ba928f902d8e58fc1b2","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHcpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0WA/+JvMPy1RPX1PbwCDxJM/k6ZhUWZTi4fLqkzzpgmYjxPD+V0/i\r\nCpzUPDm9CxBRreLnPY0VYKKyaTARlJij1B8LFH/W+t0OQ31e6EOWb69xVp//\r\nVeIyoGXPFv6wY6xtkN1vNZbizxDvGj3HyQyTn9pxqZSSndjhi+iR8Lg/2v+a\r\ndz5SagsPv2/S7660IgAL930ZZ+Oot/YbdkTLtwqBCByYW984fAWgX0jhScLG\r\nky5OnY88r2JqERjFlsWVHsKePa7OO4DPa6teqXDB9bhx5NpuLRPtGl/KyeDM\r\nfL2BJk59EX2orYNekOT3UnKKCFWuY9/c6/MELfYgZyuCfDWnNfr/9cBeMk2+\r\nK9S2znqU5qX3ykK5U/sXxP6XwDFoAfiWij7goo/oj1s6Ig0UXgLKXGh2pu54\r\nl9uPASIc1MngDul9t4uU/1Hg3rVU/8hKZD+srRJbyxMcic07XeYZRmek41LV\r\nzvgAgyLysnOYWH0zA9I9bIhenthUN0YQxXzWM7nlxVkyQOgyxGyZ74yW7jtT\r\nmnqLQDskh5GYFRZSilGD/ZYGNLCaku2S5zu9ZupxezM6RiRmDkIUfUcsVYCJ\r\nylAYAIMwI0hsFCMY7K1Pb62ienD+R6obRdC/YPafb6eaVYABjLy59mih89Ga\r\n5iYMRBI3eu+AIKP4D0+UNnUfs6bJTaNZmrg=\r\n=JVnN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3dmAxPn7vC3m/l8z6GuQ4oNjWCO7K8M5OQa6E/DM/gAiB9428VgvR8DHtYd9AXiUNIW15PeRX1ZomaXOfeDY4g+Q=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0_1646119513578_0.4475959698610885"},"_hasShrinkwrap":false},"1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"fdc36875cebf8c751db1c308227e8aa8666c5c8a","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-kE1OpYN+TtrYDBb/Z7drURg+V7cjK+Bo84YKFD1CIsgl/RqUnjLSv5CPDDnReTpF4M72NKSHXpHB89xL55qXvQ==","shasum":"4aa3185c7651c90bd7f25f05a8fd37834d4ef4cb","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHdaZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfqg//cKBr4R6GWr/aprtdtf5vD5Y23j+bjC8ucZKqJnkz0kfd0jUd\r\nbSYELFVqvPQNuTi4IvR17EDqNyaIsS7isZ8EeD6CZNny6HPQrgcRbF8QuJ12\r\nli6NFTvlWOgX7VEwCLdfaSPP4e3oeXbKPVVIWE76yzZafw9ivixTEiG8gRgm\r\nzVPRiVuzkHVizR1eDavx53rnHfg30fltV5dnttMLmQFtDTp00ltRVfOV4Lhe\r\n6mWFZkDElW4dlnr/zvs1qHbm/lHSzWv12OEDW/jT//nPaWGK8aR9breF1Ezp\r\nPY5a3sjEsiebXKgnRRCkl1v3mz2PnFK3cUfT8Wh5MCE5kmbptZo8Z6Gt3R3e\r\n7YtApbUyaRoD7BXPMlJVro0iqNp5loBHL6KUrynRcGTHtPNZd1bMxw4sph7W\r\n3PqlYUKoBB3Ver6h+eVW2R4EuiODp5cXeo8JqfaX22WBV28PZ4J06bRl28LK\r\nl4IB553bGvcws6wKBD5uT9hKibyKyNaGn3KXAjV9bMP996MFBDg0AmkVLswC\r\nz3Oxvu4fzafN+jwoDq2zfXfR1OIF6pl6roe0tgu/yWOnrs/buvl0T4PfZLSZ\r\nEz2p0YV4mfJnFj+ibpoWyq8d186ivq+xt1rtDNQ1Lz/SaAXNNsPMdNTBWn6r\r\n+zzuJIYdNBxqUZVc+tAIDbXAOgYcw6pFs2M=\r\n=vdp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD56WeANGYYkvWS4WQCwqP1o9VH2KzlogR3cr3FiLvIfgIhAPWUYqG1ONPMs0sEHts8Iga4wRQMrDKYveqMKBnirtvn"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0_1646122649429_0.6181251113243673"},"_hasShrinkwrap":false},"1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.3-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2669fad2cc5e5449f3dbf0b9da7f80d1b371b152","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-Qhqm7BsNJI4dlr0f8aVbQo3CtpE5Tesm4rhk1M9DFmiOiiSu9a2HgBLkpwcZZXvGJs/MhBhRv40sRMM7408FLg==","shasum":"f48480ff9bb9a2aa3ceb359b28bed72e6b740887","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0.tgz","fileCount":305,"unpackedSize":764018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHdarACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxIg//VAvyTuaGKBfTrAUqjWxcbUP/8B6qKFdtMZsdI3qSOhz5RJhq\r\nLZSbaGn35KSCLNQeUaoNCegFLOUvE3dsuxzHa70r9FuyU0ata5Q8cmdcQN0H\r\nFdv08JBoc2XDmHV+/IUqWj3x3tyKKF3uRkaS5qZUUJLKgxBLy/y/twj5sAK2\r\nJWOmYV2x8i3RnvTHpJR7PLxM19Z8d0lILR8sIbdPCEaICShTg+SOHPn7Oby4\r\nlEdMofXJkVaey4pNXv0Gyjuf2gh4/iwjqPKGdrN6P3Ms2+3dmGyGJ9kA5I/w\r\nU7cGHPd8pyeHDPnBFmqGUBQI+itQHDkQpr2n9IBzj8rVywg5XDNptsX8GmDi\r\nLm84ELK5ityiC4oTRa17xTMDYwvI9E4QqV9mL0LKi/AvHqmFLHZuMLzon9Ur\r\n3PgZnbcAc034e20XhvE377tZIUCMI9Qh2adwxxsH7KF3DrQ5ltSt1+vUCRZV\r\ni6oBFJ+8LveuR3RAnjvdicxHi/rLBfbTJINYAQT6WENtDgHk7uesa/kwk9bx\r\nuC8MxoPnRKxwZ4fTwwj179jw4DPEeFLyBI37+8aujF7kJ4jbSlQ2D7Am1M9Q\r\nQ8YZzCGJ9ALVw+O0YIODo/cfloEsA4ncsoWGyb4yYKZzxq0w3NYde+k6svlL\r\n1pHDiKtCiAcMqYY//XRr9oiVQNHVeGTGZD8=\r\n=XMJ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm1U/+IzbbMsaQtLQPpoCS5UsTe/uly6Cx3iol3Gb+NQIgJGISb66NzAJLiGr0REPePShLMMhHM832y1vrzWxJ3k8="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0_1646122667094_0.657262110634959"},"_hasShrinkwrap":false},"1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"17aeb7a222f749f03f64f328f07c7496b73466b6","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-TSr2e7mXi2UsZ/2BWJkMTs+24KNmUOap7ZD7+dpl0XVD1FmeN8UbbmvVFiqn7wOrvSwqYuJMa/vwfwqo1Md/og==","shasum":"f89cf28a5c63ff667f22385bf71462e1fc76fa1c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHeQ8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnFA//SLFxlAa34HLI/9F6TXSDYwhgM4WCOwJYw0uSHVJSTGuEdwD+\r\nwnuwsS/rR1V2Hr4bcspQUQB60lmHmaYIBHFDW17GXd5Y2NGzK8DV/OfyqN2a\r\nauLcYvyZvBhgH90JqCoCMk4SUMTNZmoZqu2lZFEYrFXpI5EX0a+GXF2oK1jr\r\nHPAwzW7cVIFDz4StuTxXi0qcmBmg6MEG7ATLdH5qCepyJQdomw4k7OCjCTVG\r\nMfHuqAYTyKLpcqL7KsBnsbz/J4zds8DsguFNsuIhOMr4QEXqJVqh/ZFUZRmQ\r\nBAIrk+zNAVAua3EwcdqknMFQWAGKLjJjoN6r0WPHXUg+yRHgwEdOz8gjoy5n\r\nr4PWcTfL/bB7cv/sP4k1dQy3aFz04UFvLZaJp0YX3p/TL8jVBA8H2Da8MJJi\r\nZz45mZOMMXOtNicvXPysHbbDlgzk5QuZlfX2SfhJfh0kDazRUJgS9Oprg3jU\r\nU301COAhMLR7pLCNvKVfr42mbwQkenmVYqum+s2LB5ZXGQoqGjvzz5ewX1bc\r\nZjL3S6J9l/fz+JfngGMhPt/D+5X4BABO9DgCtGAP92+kegFNRK/xIA8GzQdU\r\nU/5Z19hQozwHysSCoqK5TFJMP35TaqJwyR1hZy2VxWuhzIWzK+QoF18JUOxs\r\nCfGJ+RbU7MxurZ7GBfF19kjwU3E790aa/NQ=\r\n=+txX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnC3o0TwjFCxOsCpU/SgSyKKNqlEuWQWUK6/K7e0fr+AiAtrJyQYBn9m3nnU1DKGLOD8JDlxNhHQuhxZPaA5EJGHw=="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0_1646126139977_0.7021455325566965"},"_hasShrinkwrap":false},"1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"9668e807bceb68aa6c65a39fe84f998763aaa2a3","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-zLXOPOzTBiLXDbpFQmQ6jxAjcsILTud+GzST1aDxx+JxgLES3RhzBh7m2XdMCK3+uK7LzQW2zQovwyItOxxunw==","shasum":"e493f02c40686d02b26978e098302b7f29ab1c6c","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHek4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKWw/+MF8WYBfPktR4j4jzsJNaT4Kel/RpEb8qc5HFOGzSHvj0ntMH\r\nkKAwCqE+LHJ4G1dpuiW4qTOxlYRPbtAHDjYQUbfw1jjoWxwjCPWCRoYH9VqB\r\nB4fbj+em8YKx2XQU45hQRwasXoZ66kUVEpaCxUV5xSzvLxNGF/YqmQE0up74\r\nvepdJh2K2IbQhReyVW5FxS+OBXkC/Z1R1hu6W0fCVRbwB4CePJ026EoyvAxX\r\n1GG1QAPaL/6h+r18GdB05nnvwhegtr3Ghoy+4UtoMADbSt6cHAyp08JMOQM8\r\nBhBZxg8SN74BNj/uv1MOOpDtM4FkX9Sz9EKW+6+qScRDzBmG+iFx99wQDOR1\r\noKa56lVO0tEYU7Nx0G0S/d5QiFtkeEuZXyhXWQck38kpbcucpeFmsVWKklgF\r\nInj938tqsuGw/tfColfD2xnM/72zcpfKlXxYMFhhk/BlhJUWSbZwMHYNXXdT\r\nn6soUSkptVssaxjQlJb9zn+Fkql+jRSWrU4Vrj2YUiEer7kry5GsmjK5HBDY\r\n9896yWKATWzKlk8mQ44HuKorqPriAhqw5lnoIcC3Lk4zSdeFojwqx6csLNZ6\r\nQ0OG7V0xllIyfdtYQx0mL2Z6mFFTn2eIscQ5s+4d587ycbPYjdkmAywdQk6/\r\nKXMSVGPhbj6uvtJSKXXBzozg8arOCEKKZjQ=\r\n=msGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJeuc2CX+qPumkyzE0jKilCez3iLwCqzBTMR+50kQWhwIhAPfdGuf9RtCFU+ZWd8miaz1G3UN0fkIyVK7KCYnF1idW"}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0_1646127416515_0.4585575407416633"},"_hasShrinkwrap":false},"1.16.0":{"name":"@sberdevices/plasma-tokens","version":"1.16.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.10.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c38fe0fdc2f8ebad9d0b21585ea4486f949de08e","_id":"@sberdevices/plasma-tokens@1.16.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-sDPXUqCE9NdbIH+9K6f94EYQprQRl49H4QhwRb90oUhQkNtK8on6/3sPFlzq8BINHoRMG7xFWOMXrZXyD8GkZw==","shasum":"cd18016cc65681ace7adf4f02ad0dbb80a87862f","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.16.0.tgz","fileCount":305,"unpackedSize":763909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHevlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDpA/+I5VRHY9WXQKJoEH3bwkDguc/bYXR3T9Z2n5B0QQYcgWDqSP9\r\nz+i1OKYnTp/AcwbLGTxkeDMhMxtfoWztKvux3qehHtMPE9vOFHsrqdBvMCvm\r\nbO5FgVhinct9GL4Z3xcFCypb/SHioiNg4r3oCZH2jdhMlBNcDstrU6MY0Hb7\r\nNT0OZZK5Sws9I+7Yc2sVAoC01SLN11fsJZzIEyHr4syq3M0h2ANVIafSrfpm\r\nQ2LX69QZPA9LUOj9p2k2jGxUk/DgMFqopvlGN6ziWw9qN6vEIjCtDRO8BoVw\r\n1ZMpPPsuYhA9yJ6uNjoV+K4t0IpMC5D7vTOdX2JER7zoI1sdW/Uzki+1dTUp\r\nHF2IGyanMhJXhcSDgr/uU8kL4i8NC+Kp8sDVYBuKmSsuJLntyAJcILB7/To3\r\nsEikbCoEFNFUfU3MVVeNR3jkLk0+KbdU2qr224CpXGKk6sEpF2uYiT3eNQSU\r\nbPqC+WkZcOQpqPZJqyryQCLe99njAZfa4SEKhj33QDHv7OLbFUxEzmy1Y+Bg\r\noiNpBPP1O7oxiaYXMCFTEi63xnPyqpRSTz0JtEqAZ0hCEmH71Ce3lfK/gMN9\r\nn3+QN520b21CwYoQh7si1QE5J2H6/Ht8iYW4KGx3AqwS15Uuz9tG8cBDl3FY\r\ncTlRDoSAwUuaTy98wRb07F6WEKpcZ0Vrs5g=\r\n=BgPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgnVP/wttBFskewgLYF4dKI/ObLfl0EEi+rglKCv5UzAiEAjiQs3bh8pH5in45IY+J/YBpoSjk4B3AHG+3AEh4HBcU="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.16.0_1646128101639_0.4719649848127745"},"_hasShrinkwrap":false},"1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0":{"name":"@sberdevices/plasma-tokens","version":"1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.9.3-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7fc21de2ecf2cecdd09b9e43c051a290a5887557","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-/iwBBNEw29A04yyv7cP4f6fK+Xz3szjd0Syy25GKKvFNAXZ23XvnPGkrPmJc9pWzPjrIZjsEbGmS1i51AaqRrQ==","shasum":"3004a7a695f83b958cf2c457defd21f863f9f031","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0.tgz","fileCount":305,"unpackedSize":764018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHe4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMrQ//WKzB+Q0DlE9pYVL66pHKvTggnnj0hG4njTTN/KFnBuV968jW\r\nT+yDmMGkDUrYUgnrutC8r5cKhlaOOClaSFRw8C9TheA/qv7lU9JrqxGc4yfh\r\nHegsulSBp1ZO7ZIpZkVP0QxhbpUZHDmiF7XYF7t5Y96Q0d3jYgOB6zeFbp8j\r\n86AIAW79k7lvBDItmTJU06m4wkjj7McWvGgIbm7OClOrzRbJ1Vll8XwYKhUV\r\nxK199I8yWFsOx5pbYuG8lM+HEWWbthvudHjBGv+wE7Cd6PfGRFJdKwrLH/a/\r\nfTU3PIagddpL/26jeq6QHBDnsRTiXW9TXKF4y6WhsMNT2hLIUM71YtS9WtWB\r\nLPQGErdX9PjvZA5WBg6eZvm0FH36/Y3zEAIJthdaptsDz28R11fUj+zNh/hi\r\n8guQNKxophOvi5lWwO7mgpEUaR4ePsVEWalk6yTOoiTtIHQev6o/a5zEBNmi\r\n1aUg5SSSvHpjObXBgsXnLFj+lyeym2/DOx2/7a2mBlp3BYYIrlEhW5QUz/tS\r\n7IqKRj04FDuDSASQYJk18YZ2C8MXKKfXfzDhtOYAmw9RH32sD+TLiC7gabRx\r\nX6APMdyByXOluZIZWcU5ooIbY6qlRI7ajg+eSPuMLu1ma9MDSmcSn/H0WUTn\r\nVCvyANMM8KYYEyhi/vNcUpPDBIdBNvXXfCo=\r\n=GdqA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ2JJGfc4Kuk9/tGEWEzsaU7iBiw89VbmlBPjYwq8ZEAIgVln08nDmsmr82HuL7u4HqLUm/XkqYdsS3nWPtImClOc="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0_1646128677295_0.860184091419854"},"_hasShrinkwrap":false},"1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'","typescript-coverage":"npx typescript-coverage-report"},"typeCoverage":{"atLeast":100},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10","typescript-coverage-report":"0.6.4"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"32e535bee09652b2a12b19ece7aa2d3971b451c6","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-QsnfgITFksBalRb39GKsNLY8JHwCEUHugbb+3UfVW1oFCxH0cSlm0GZMNnz6vcHzxkW+YfxS81zb3lxktFvtsQ==","shasum":"e692b092551da20c85f96c3eaa7f4d8aabb23792","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0.tgz","fileCount":305,"unpackedSize":760317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHffOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrduA/5ABKhc5lbOpZgAZbYkH1E0w8I3h2+i7n5jD5Sr7qFVhegoLlZ\r\nN/P/Oa4Si3aqdgZvr1mbiHixGOFLdmkQ/0SNo45G8DufTQSZn+jOawTbUwff\r\nNMQbrI5Jdxj1AICYA8jQM/qSkkRec1MiRpkjtznWjDL8RbLEvU7b9xD7bo02\r\nP73lDynG5iR6awxAfA4TaEzWt9+luujFW1kpen5WHTkPRV99h/iDJEL+jYGW\r\nH4LEj7N03QhnkQgVux6eR3I/hpxY6AsulEzmVFiu+Tr1ooTNPBHK6E53so3u\r\nk5ehrqYMs5oJKMhAMx983R5iccyR84gVfjbDgGCW1SH/MdB2NSC8ddjk7jeS\r\nO4rsoMUJvCyvgnB8JyTwtxApDY/DWdk0cqboN2kGihWptnxSm08/3QOOAHnE\r\ntHO6fjtc5/KD25cKqYlNYgNhb2J726QKDnMiHYA+vj9QmlgIEaVx4H9HRR0E\r\nCQwseq5KRFOh5Ze0mLuc7yaJIAKc3ulzR6cy74+YMyYxaHxvKMVwEyTixWaT\r\nc49lutcZHVNeOZJbEIOQ20N3fT2rg8Z4wEbPqZsloI60P2gEw8zN7/6CT+5O\r\nWshZHjibPRWmBel13S7lLaZ0Ki3SW1GMYbnD/FzEL0ZO8MmU+EtXD6sCyuY3\r\nISTUJ9DpZbKn9o2qXeVHt/l5CQkw3dXOH7g=\r\n=5FLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5oqozD4W+7vejqwInd37iuQmsPksITESd4ga8ayRGIgIgRe38TMwj35YufD6/FqDwwhSinXN5G2vKAmdPK+FeOH0="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0_1646131150232_0.6990086845915986"},"_hasShrinkwrap":false},"1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"92dec2df61b77342872f5ca4df2c770fb1c14108","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-ZOnr1FL7DQe9zCXLe5XBYmi/lYdMFtnSOJF5W9OwTa0kvCa7gVtlI9VyghKHQ7JdpoHG6zhf3trYu8GbF+pnQQ==","shasum":"40a56f93a8d12de5e237cd4c09ee16dbd693da90","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHf80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAsg//ZaHIHWfqoUOU6PvD8rZcKCd2F6BqqQVHjCcTe9t9ZQ350HdK\r\nNpmfXhe2JwGoi2sxkxv+LoBsZU9eYWvTiUhfW0eQxkEnE3cUbCg3UjPZtm2u\r\n6P8DiUwR4DGJhjgbfhgL+19tYUwRVjGpfaPD8+oTYGNaFu2ynhBu68FL0rfX\r\nzvMr2JZH7D67KXvYbqARWSKaUV2A04wRnyYrYkYOMBl4U38d5WYbt5g6ccKS\r\nlFG05FvXzKpESPr5xF5b1qio8m+iEhFzv03AO/kYb1jgR3TlFY0HRX7UF9Lj\r\n+B8V/oCWtKboopvcZaaj0BZ4dRsaZKdVOQzvukzwitHIhjEdTgDkKLRmP3wO\r\nk9gALWu907C+cUzgxHuuz4ViHCTK6W36BMMrhQcL8H/XyC0dTYSSTokgLhQE\r\nFUYo5ZbfFWt3fSI/UmLIGKzHe8ed+kxvBGE9yZQj3ecgR7/lYTPUsQYY2Nbc\r\njbaJSPNXA5DVTw9LIL9JaQOeBYW7cxJynRbE9hFm0OdX6qPqjNtOGlplrf9B\r\nP1jJtZgm+cUvgpz4SX6kxAnuag7yfYRiJO0pT156TriF6QrOIszrAcEz9wgJ\r\nsw23wiV2220hv4mM5SuvXiqq2GYv4rUjVzC/zNUf2uK8R5S3VVJmUxaa5XlO\r\nJ38Here6Rcb1sJyDJRlAPnVyzzmjjQE4bBc=\r\n=WTow\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtRG6hhAly4gRx0c1/goC1QHoiQDkLfmXiI1I8ZAdagQIgEBQU0RIW1JHnud22379OY8gO71up4rD6xrjedm47kfY="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0_1646133044094_0.039374192758800275"},"_hasShrinkwrap":false},"1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"2ef5299a76809e25ab892f4c2b60b21f4a132580","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-7eqrQuZqa7fLEO4HyIvOl7pO1+mMhFDGqq4SdDC1YRIV+eIVx6P1Y6AJufXvuNPMxIt1edh9W2kU5hHtKT1CAQ==","shasum":"919a680816dc76788cad9b04d4d753f85bd30a3d","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH0RzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxWw/+O6kRzXmGS0h+6usmBWlGwVYnnL9BhV7yXhULqd82EKUxN4uY\r\nh7u5MAvNICtTR+sJ/KAHWK+nX6ybSRrdYrezf2y/2/LIIx7xHhRUmwio2ERP\r\nlHBK5X+nqu8Hsm2XUHlegfibHYKu18/rD846N540cAQN2vpLIXoGCu9H2SbE\r\nlXQpgQFPUaGUVPNjHXeYZT56ae2IkYAMDNjIbHApb6TabSh1OM3rzxsQI3c+\r\ntAd91XyH/DAljG7p2WYae3hw1W4PfIKEZ66mGrIoENVeL/V4rLb+/Nparz7H\r\nVMxwHO60ruEY695dlVgp5jSGmX8SMbmtFd5kz1wxAlZGjep8ktZ7Kc9FlzNo\r\ntcS9ygqnEgUIFaEcltFfRqkbMS9q+o1n0Gie6F4csQIVop+od0APJ9HQ5Mhx\r\nbT70Dq0Gx5XDlClNS7WhO40IsDvyaDqLU6NtT16Z3hiJCnnLikQ4h03edP2+\r\nlHhltIrgJJ3rjwsZtL41o8K77meqbC77hKt4VpolXTn5AL+zP9dbk+uA6b3d\r\nZOyzV+6c16XHZfQwZSA7ZkTZFSyAPEKD7m9WEvCpYDkH+As9PO8HMM1+EB+i\r\nm9UUGbukcHoDOBOOREiA/U6SBcoifAmjLzhgALya/xUMyFoeCeWzonPC1ifG\r\nPc0zjNxviMSgU447+uQHhBKWhbRh7vc9CDw=\r\n=1H1r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiV8OBc7xD+H4/84TKD/J6DS7miCLZOlXeYxpZ0j06jQIgc6nYxQKI/Y6gqZXL+imQgHsBYXO+QOx5/MuLh6pK39o="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0_1646216307589_0.8971326939113518"},"_hasShrinkwrap":false},"1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"f77f166ba7753147c68582fa09988192640a6194","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-EVGlh4kCNZiILN0GK54k0giZ6sNz/SZsNKjUy2OOgXHUjhl31D6fBvedRS7eFfSC6+NbFQCqfIoy6UcRoANizw==","shasum":"2d8172836fecc40f2e150518747e33ba52f79c44","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH2UQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiDw//SjpTeiprFpZL9RSCol+9q/7IVqcfaxd43uCS65Xrjs0pLSMQ\r\ntd370qqeO6LBngoPNNSkiQB4XoiYNrmVj5vIB031f1bd8Dc/hj99mZFHx/LV\r\njItSey4VLe92LhpZWujg76NwO75TuPyvyndXztsWv/+67PmRd1HBW/NDDQQv\r\n0n61FO3KXzJmGv6mBMPCOprJPFTWZ4xePa/PUl71EPHjkJtNCVPb8qGZXMS/\r\nADbbnPRyS4ekWzwLrpGm8PtylvYxQXbau3zLkZ6lydORcI3CjFRAWQQVDciI\r\noKXJiFRi3p9xBX9WrEcehrrgggcWg2AAemCPcuKya86T4Kj1W1JRIyTLyoxQ\r\nUkopxnkGNyys5n0Wb9Qc4IzzZD8Djcne2Qpv69fl948FiICa7bNLQG3am5Nb\r\n4iJoLztkGnjW6s3bMZGtBPtfuNYEvyEA1m5OtKLBeWcS4yl1Tu4xowFUjeyX\r\nTfXfXFMogsZZluKwP/51CeYlO8dPiR5BBxJLKQ9UlsI/Zb9JoFdT9NYImCg2\r\nVbztwo0Gdoh+O1uq3O2+oLyJZ6tIgyM7EyySrQrJ4bS5MuTCfMRZZlZtkSxQ\r\nlIEIaC86KzYgDW3BJqLg3xedlgEBzcF3pRmSXuMt3LY1MSZnkuii9otg3LCB\r\n3yTAxnnrRG9Tu/aXQIE43uMOpDjOEy/C3Eg=\r\n=BoaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOqRXu4poGczUqyOPs8DLOqDV+qyMGB1Da+nw4BDjlAAiEAmqodW6vmoNBjM3fe99FXty3L1VzWX8rJga3X5lPVJuA="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0_1646224656301_0.9751693520259594"},"_hasShrinkwrap":false},"1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"55268db4b86c8f52454afbe28299083c55bd4b98","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-maj6MT5pv9Fns+w2AtB7oq3kBauT+Cdppts7QH6UFot+Pqwt9aPem/wx2ae4EgviKOSrAA5IOygHa8/neuy/ZQ==","shasum":"2aa1554871591297fee0a58495ebc2187b8d5c69","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH3UsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvnw/8DF0/M9LeWw1AHZCiLK3Rm2OgbacMJyxwjZNa37p+n2xIFfdG\r\nto2g5jjvAL3zzZ7UyYqXBGXL3mcoMX6+5VD4JD4WkrhoXigiXLT3zc5wMH7J\r\nrjK1/kYVuxHqfsF4Pxk8vCPGVqX1BteaZ/nyjiku5enTcXL40nYhtSYuFdOA\r\nSKJyggeRT3P4Gt+Cb0UtAjfu4AiAYO/gt64P7avPVUZnJXxhKqtrTGngzUDF\r\nA0fmA+56Gp0hZjMjSB8/QlyzvMPota3wIduLLNB+DC1SPcE0tTR51oifJKYh\r\nkRyhDDb75DSPpBorSVtQJKn16UFnuX9QKrAKj7ruP1z1cp7kBzThUU7unB3Z\r\nXuhmF7C+5Dl3cVMjeKBdfcHKTHgVuMA7Anf/mFkk6/OnbrK0ZW08A3dECh1A\r\nTSoeH6LSBwDUySvC8gM710QoBVYwz48c5B9dzAYf1l0u/vA3tmSuEkGm46V1\r\n40NiC+GELjczhR9VmlcJTt6qvR+8CsM/P3pyppsrkyrAprDiSwti1/HZs0yd\r\nDk7qn0dHYh4J6RMY/DNs0iMrg0L++1tP425A9nnoOz4TablNAsmn3VYufCRs\r\nBS91e9kuwQhi4anhbe5dnQV4LqZ10SFA8F0FQfwK7DOM4lpQiZB9ak05jE7h\r\na3PGpmrDCoqYwRqVhonJ1W+Pmi8CfHaGR0E=\r\n=iKCD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICF2SxUxz1jDCDL5vWh1RrWFDA7ATWDNANwOtNmqqdyhAiEA/IHnoId9Feg9PxG1I4e+HebF58B1LngY59fur4HY7ro="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0_1646228780002_0.6704885948960886"},"_hasShrinkwrap":false},"1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"544938b9b6ef80b19e3f220744259207b85d4f09","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-FHTQfC4ilCwIcGLDJCJvABjqDNJsPub7EJm8KKrmipNz8jbo3AA46N7g9ofgKm4yMpjjFGDh8PPc0pfsSnTufg==","shasum":"a6628537c3929f7f91a6c4f12163e0cef42faeab","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH4DSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmox9Q/+P/Na7jVvbSLaqmZcGQxFUanqdXTO7ozo2AjSpvOpi1oJSoeM\r\nB5V64mjQW2uKlY7RyU1EL/pDDo0GCrUCM7WpY6Bz+MMKcM3NfNZjIojpxPFF\r\nywoRYvsFQNUvMXgmfWD1i4rZ+xusL6YsyDrHhQrh55DuwbKyvUK8oAveb0HR\r\nvnQ+XuW61vYszStI6olsSbfW0zhOZEWO7s7Lbxa6aOZ85BxWvvYnA9LNwBUS\r\n/L8V0UtHH5qrmDv5nfjlB3IY8yZFfLZ4XGiZznavQodQDSgIexmBFeaT8rti\r\nqOP1gwfgKlJyekRbAl6QQtsomZD1s3QjG5GpZCZk0utkNnH1Woj7fawiRh0L\r\nz0QHArDXLkMXxwPGlJF/GkMbkONV3ocqzTAHyjRVyh/hIPs3ti3GheleUl6l\r\nFWPRWxSmlrnjZtUIgfe/ysMDNoVqhLAhgqJHU6xlIFeqhjFEQiPMxkj5i6IU\r\nzeN1+AYTKUKbgIhImsf0s7lHjIDvAYY+tTTRtsWsCNm+GtvLfQAzPK9hprfh\r\nEE4sVGP0MRYH+bdM0J0JEphABzPcvjaPtiq7YSkU0jVF/MzB74OitnQ/0Myh\r\nfeDDAj3j0YNF8kN/KXLwCnlJkJLL75eMwquQliY0RXnwmjEUTqCEW3CydB5r\r\n3PIc7YQ00Iv/vD929u1tlA9U7EQY3+aVJKw=\r\n=WfZx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUPzmDq/bzIEsQgbSjNqSKQXFS/q1jQGrWBCPn2qwhBAiEAuGYE3rblCxOPiocKp5KOEVudlhv5lo6Zy//ny6TR2Y4="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0_1646231762333_0.12339361833487916"},"_hasShrinkwrap":false},"1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"80a6bc7e37632156027857735a987f6f3368a312","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-rtxCHaSRRjEVVw5fxaVGid1AEXJoqu2VS/DpBQzvLbZGkve1iX84Cc9TynwKmqsB2NpbOCUY4YA1OPUnhVLkRg==","shasum":"462fea3c014075d0f28d475079f6dd9863269bb4","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiI3ZrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDkw/8DzFQqIRK+csnJ+wAHzxn+3AP3hfiw4FE3mSC+FjGuZq+9m4O\r\nUIYW7tAdf6zlyhfIk6kXruIdFfxPyAmySWiIoJVnSqfpn0ixdlcOsyo1gkVo\r\ngiwFhYhVtMG+a1kWvLO0Fi6F+Y5WLw6TXkb7JChIMHYTJ5Ej/f0OujeXmkWm\r\nYvKapg9qc+lmaYfb03uyv+2BatdL34SYNgDKhDChx5dK/Vhq3U8r1zSlXsJU\r\ngyQY+UqidQv0U/zK1lQaQ+qFCGHGOx6Oy6N4hYE11+755xXbki64wIVvXn79\r\nPx/l4HbY3Sg+TEBvwZKDFMSCjNN78G2tOxboIWYFDGdFVEteIdoXcrGK+bDd\r\nKb8U/FIoQXx3ZISnYn0v0CHhOJWjJ7pL/EbfORZpc6Jb1JTTsXee8Wa0S1Ro\r\nYLyA3AC3aM0n8pwF8r0/wl+GDRGqQLPnDZF4JkPtKyu81TcJ3byPn6Wb5M0P\r\nc70eY8ZkImooW6fN4DagfX+0VVdgH3mPJ5syMGafFDiqGFB0OglqK1RiPQuZ\r\nuWXwXV28JB3USNxPivGW6U28R/BEtto4i/x7js03pJYQsK8KYBUxcOpRAIyr\r\nQPGX1nt4DwPYFzvUNNmudSC+bD00zbPbiyPWjuYN5OMMDyUQeFLPRJi+Zj8P\r\nmNlXnBYQ/stmYB7MNh1q4I2gQ+SWQTE0Y4U=\r\n=Ei3g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9HZ0lcbae9IXSAgNLNtbv4iJ4Z1UcvLHUU0842TAb7QIgCklPOWUpOwgXEEH9GsLu47Sd661FarK6tLG61ysefkw="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0_1646491243096_0.8485058255535955"},"_hasShrinkwrap":false},"1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-dkp1i2W90iWEsJJ3gz6RlXFVt85U/zbb9qLcYt73+oBukinizVvxP5YzBixUQadxFK+Gy1pWwKhBAxaLT842Pg==","shasum":"e5d409e2667875c8223185cb3f83723472282e7a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOafjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkOQ/+N3bjSLSvGrqYpJWGGxF/Pid++5GMD/HKbiVQqgasux90KIdK\r\npo/UXJ6OSlAQMl93cjucEArszJTMJjJ/C/3nC/a3u4V7lc1nLy2Heei0bLPA\r\nNeKa6+tgWzPs3T2CVUoELYmPtGdj5oiHEJjlSBoBx2VanRMuwTjRJd9B2YyI\r\nphUQFNLAQvgL+y0xJfKLD0wwgY/4mSv4WNLqvgLAgf61zrCNDxjYv+b7PN+r\r\nWlNERS2UJNwqRgxcDTsD3if/vTfsISx+IdFtZrgLCgSwJS0Moj4nHad9GJXc\r\n+68UlTZvhWVlZSgqUrmCiF6HhMFh0Ub7tCQEE8Mm/m00dI/VwvGTT613pzzW\r\nrezCo8B7NcEgrRsSwjqcsn79GFnh4PJfG0A2LzOgwYAFF9DxS8P0sjBFVZF6\r\nRvVT9+YLOmP6e+WD7T7Wa3t3Q4LKdK1La8ZaskDAVJhTa6F+rzfSnyUGrkoi\r\nHQE0RiB829RdVJf0DGpTO3C4hToDi5ps8swgKVabOiZ1X0oh4eo/uUriGNR6\r\nW/HOpow9N6g6VVbwvAYEplnSkJajZ95zncXKgAvTvEKP4p9pMd5/Kw1vtRax\r\nABSZdl4fxgTqDwqOapCLnw6tI9clT8Gx+PC57k4i0snyoScc8UnSzxQVyD00\r\nWp2uFkUG3phUFzDgnuxL0Ak10ZMvsV32BCc=\r\n=JXkz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDndT+rVGXp3I2m2TySLWTGjAbL9rJYsJ14BHVeVuaItAIgAzzqp5aw2Vym6Goy6odJstXeyoUueRi71Gxr/BG/URg="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0_1647945698971_0.7800710601634107"},"_hasShrinkwrap":false},"1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"ae417991372b1f51360a496e576e6d92ea36c875","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0","_nodeVersion":"12.22.10","_npmVersion":"lerna/3.22.1/node@v12.22.10+x64 (linux)","dist":{"integrity":"sha512-cnMG0z2tOYTu8RUbD2J8rPmDNwAIB7kSnIuMKF9mZ5aThxiJA+dbY/18RL2N9c2sA7aa5AhC7fxpivo+Bh2q9A==","shasum":"80cea562abcfcf459b15ac5c1a7b42dc7249708a","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0.tgz","fileCount":305,"unpackedSize":764019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCzXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZpQ/+Not24w4qa3FpLl68HiyT6PHm0PwoN9u+lcooEvpxHr+kyJXp\r\nW2Sl3iJtH2kNGhjNH24VyMbln1TroTaAN3FN9oCu0qg7g5u6B3twhaEHXLCS\r\nZViuYhA37CSdsaLxW+tWBFJ128aGTKF5YL331Z0Z5ixPiQ4OKKqlcZiJavYP\r\nGRL26Epb40P1rTZJhNPkUdZij49QSA/e48rbDJ3kqE2D+hiKyVwHSmE2gkHl\r\n+cAjWQ8vqWFvfO632K6XWnA9qO1fTAEjuYwa23GPW7dy8DHEdvBNf/PSjED5\r\nSEeCWGNQGRwiLFc3nMHsPX1J1nYVdA7eW7Vy2LQuWIWpc/o3kndey6m860mC\r\n0Bhg0MvmLyN2aQSG7dmmQ9o+OKCtaKOwfJJ1wk48plLiQj6qv414etiqcysd\r\nyM1AkR4H7dJJEoZnrqCg2MatvpLfYeMgEMZU+Eoeu41ydhyOjC+oMNJa7zGK\r\nLvqapPeBquTB3R9M1C47Ys159a23ZLD4FzX01/EFEtcC5GcdHjFWJmF1qfiC\r\nsyqtvrl1SQf9H1owF/Vou4yEvxMuey0VO5SHonkwqWhClEdjNz03V5AyAzK4\r\nD6k4d7FW4IsdZ9vp/4H4Kk+LPF88ieJqqKlrzZr0+FCLWy/fLeMRg/PnMfIl\r\nX+ytbOs5UrXSyOfWpIAjeV91vJwdejpaTsI=\r\n=yL3H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzYixD3+PL7JAiqf4q+v+LE9lnBAwqazOzYqOUPTTrDAiEA3NZcaTN+AR8tdHK4erR/ULIXupjvi7dFKWznLWGcWgk="}]},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"andrey.orlow","email":"andrey.orlow@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0_1648110807646_0.5002529550883934"},"_hasShrinkwrap":false},"1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"7e49272d5b635e15470b05e6d81a00241dc054af","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-KOkCeDJ51EvXm+J6UhuHjjar++Sd6rVt9SJy1rhtu7h6iVWDwEz1BFpTywa1g/+EKssfmgFNkiaJ/M3mhCuqAw==","shasum":"e353134ae6d0f2e8c8fd8165ff061717a1a6dacf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0.tgz","fileCount":305,"unpackedSize":764019,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnxX3IXWAvb6zawGfrZdWftul1kQr6EnJbby+YYHvMlAiAgLHm558uOMln5bnHP6YjEuJBV/LCd7LOsBBc5h7K83Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTX5hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOXQ/+O1fQtBQfzmoPIsOSePkS+Zimt+d/3Q9+3Ys9hwUOqjCvyOl1\r\nuIGfPQn0TWOQ7pBoVSLnoT5ynkL6pJirMv3vJR1s5zWsqAY6JhRQSQscGi4v\r\nEvTeX4Uq8uhylQufm6tQ3LgwhNGj6yKaNvx5JcsoLNfdoJuKFPgZX1qVOeLv\r\nmBV2pVtEB7Y2ZZLNg4tgd8zemog7vPCsUjfobvpoT7U5crIjk8EvM3W3RfQV\r\nw6SfkGWkkGUkZoToeSJG+DuFaa13ovO+AQV3Me9t7GZlYNeZrE4nuvbOWzIR\r\nDhzUvJOuNzfs2bgjHg9AXY49sURqACoP5PHA3IJW1TwjuWzBDKGF1nvIv3wa\r\n6ap6zNTFd+Cj/V1vZxTSX5F6TWjHohbRnUsc/Q9vqYF0wwvI1VNaWiaGIbz/\r\nMGR+/jcF40NWJJsMhTUtGzSpnBG02NMnjZ24G4n7KorSa3K1WRX+wPNTRPO7\r\n+BXaiIAF76+DQJUUkC5Gri5A0FsuloCRgMymh0GAMDbFy6qSVY2Aa2q5CoK/\r\nr+PjRzfGOy25HsjCSKqjnMIe83p2X4N4gKTDcIkNl7t6vqCtjNmMHODoMzHU\r\nXVXqGnhMnFmndSdWgImzmx3tIGoShWk4fD1MZ/nOvUAMSuCtseDxurnxHjz0\r\nAkosZEbNJYLS1WYufmIpKV/+z29OVb2ONEw=\r\n=D/BN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0_1649245793207_0.800673878927604"},"_hasShrinkwrap":false},"1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-i2pEOWnwvWfxk7hOwVMaYXhn6NjRQTzDpQUBTVhi6V9BdL34CHEfqUQjbZPWwiUv+h+2x1VFaMu7JpWNwjmf3g==","shasum":"bf7c89faf5c2c8d50848f89d29ca10c0781f43e5","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0.tgz","fileCount":305,"unpackedSize":764019,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFv/Sb+eD85ENIeYbue2DTxE4+LLnK4OA9ZJicaMe7ZdAiEAhUsO3RERZcjDUY/tiucthel+VSOUNLKJZuM+7Frk6QA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTbn9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYhA//dEHyV4/8AkpmnbR3P/4ug8taaak63AXZyUgo0GF8NBcPHplv\r\n6IAqzA45Cw/kecVmWYS1x0KntWVkcyh3fiRBozgCMKE+dyJgvCLvY2BAHP3y\r\nevAT2Yk92H8+Mp8hNN9X2/l0e4SFdxI4CTHmRQJPwSwkywrwdlWnC1JjK60Z\r\nzTNz7ExYg/6XTb/xDq2FvylPUe/PCCZ6jbMHAWI6WTZvhYVJcGg27RdmKZEI\r\nOl30sAPIlG6ZrLBOk7bcdIVNY6ZtQ92w5cQZaUsR/mDBik0trA/R+NkGqBN6\r\nxNqYmxvNTbEV2yBwbkkMRkbWYbanZsHfeVTD+7KaKC/P3PUm2GqQ4CPmNlbS\r\nHabMSJxtzp8KigIlElbHu6Ep1p4YmnnJd+7wNwslYSRl2oHVbDDESQ9S7XDf\r\n7Ce4iGaR731jsb95Wa78+S56c5vgYgQTN4ZQ/x+I5Jp5hiY0fvqN/ojfpg3n\r\nA4pNMufkuoR2yp5G8/dQwqhQoPEyVyxJc1P6GeOf9yVnks38UaZt/Bf2aUJE\r\nf7hu5Ieyj2rwMXDzPCMFMOnCfAVOh8I6mm9EvCtDVC/XfWjJvW8K9azwUATw\r\nLgZxII26lRoo9HgKpnjwkNP2Hnm8QNu1n7jI4P3giIQC5fYg7C8BOqXeQTQt\r\n1a9OwJBGzze7ZP/Cfv54iva9oLLwlP1qJUA=\r\n=qvMe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0_1649261053340_0.9712680399941098"},"_hasShrinkwrap":false},"1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"21e811f12d17b0a558889b91bb32973ffc7cf4c8","readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","_id":"@sberdevices/plasma-tokens@1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-kh1PCkijvQyje7E3eux7vJ4AI0icNs2EhUAF/K3dJADizbbB8lBJsLRHN1G6ANmuQroeeqRQLaLPSsRwVOrY7w==","shasum":"5a0c45990c03abcd78bcc71ab4c8e4a6c58ee5bf","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0.tgz","fileCount":305,"unpackedSize":764019,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5CwOq8873fA6GXC8x5z33njKvVuRyAbWQObpH+RuFygIgFSbKMgH39pkV5IVuc6PoYRra/30SjAERiMYlR8/qLfY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTtqvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdFg//V9TIun779kVqIImkVD69BfaE8CuI1ozxu5+xi7O6mLZMSTaT\r\nY1odscOJNmu7PBicA+LZfxxoQV/lWi4CMzeENLcLuHZnHZyvhxjWZl8zQzAU\r\njJzEXASAYz1+aFJPZ1LJM/CRiAMwOn9gw5T15X3eW0zWZBgz+NcSv2/9f3zY\r\nnYacNKlWF6nLXHQuG1p1fyzk+lMAEaFWSgmuw4WgN9kycpFCFoXz7fuzVZc9\r\nM6u1XhYyG1J1dCDsFpjpHpyLNa0MkJTDk9MZtLAgZRYHO6LdJkDpi1U7z6Cv\r\nOpYrfLcU+ItwKUz10jOfE6IfLyIJg7Vqe/TzkRDavuwHPQUfFgIEMk6rnnD1\r\n8cHn51oNazaYjMa+OeCSf41i+QVR89B0IFLUZ2xiXR1K39JAK2Hc43LHLqA4\r\n3Bpc4ypP2j7Sk1/gNkxfh8emZi2+t1xw+zb29j1CvbULpCbeR1zGFEVpykQt\r\nyxQ67A2ojudg/MEmvpnKccdCKSipoa7LER991OJQXmfTShu1XBn8Iw6PVvzX\r\nvoOdAg9tShj9ZdB1Mw7QxmZN6r/s12TCt3a/dtkdDtuCz+QBRpNjnCDNK7iR\r\nSUT4GOL9plDtV7dl3csKRDmtU3UwTZnu8GGd4TkP72CfMo/c5wYRDdS5PQuD\r\n72x5AVu67vM0UEaSoGY5hXl5ooPHo4sfXnw=\r\n=u9YH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0_1649334959557_0.13365740878445131"},"_hasShrinkwrap":false},"1.17.0":{"name":"@sberdevices/plasma-tokens","version":"1.17.0","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.","author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","module":"es/index.js","main":"index.js","types":"index.d.ts","scripts":{"prepare":"npm run build","prebuild":"rm -rf ./build ./colors ./es ./properties ./src ./themes ./themesValues ./typo ./typography ./typographyValues ./index.* ./theme.json","build":"npm run build:ds && npm run build:tokens","prebuild:tokens":"npm run generate","build:tokens":"npm run build:cjs && npm run build:esm","build:cjs":"tsc","build:esm":"tsc -p ./tsconfig.es.json","prebuild:ds":"npm ci --prefix='design-language'","build:ds":"npm run build --prefix='./design-language'","generate":"npx ts-node ./generate.ts","postgenerate":"npx style-dictionary build && node clean.js","figma":"npm run extract --prefix='./design-language'"},"publishConfig":{"access":"public"},"devDependencies":{"@sberdevices/plasma-tokens-utils":"0.11.0","@types/node":"16.7.13","@types/param-case":"1.1.2","jsdom":"17.0.0","jsdom-global":"3.0.2","style-dictionary":"2.10.2","ts-node":"10.2.1","typescript":"3.9.10"},"contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"sideEffects":false,"gitHead":"c835d72f98579851743bbfee8daf9f44706c7ac0","_id":"@sberdevices/plasma-tokens@1.17.0","_nodeVersion":"12.22.11","_npmVersion":"lerna/3.22.1/node@v12.22.11+x64 (linux)","dist":{"integrity":"sha512-m5ERw9iWk46SRXRZkRtCXBhmlEpHbnBeFQzsAwj7Bnu9rny2BDPxEXJnRaM9xay3CAfkTJRnhj68hXL2uHG9bw==","shasum":"96302188f3026262bddd5b62ce80ee4268925898","tarball":"https://registry.npmjs.org/@sberdevices/plasma-tokens/-/plasma-tokens-1.17.0.tgz","fileCount":305,"unpackedSize":763909,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAlgFChiiod4WUWTD5aA6f8JC6XZq8ufpycTd12s+FsAiEA42xZpTcPKPHiUqdh6fEA9JU7+T3z369zdIj63HBxmwY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTuUaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSsw//TxKnp8rdAwGOGix7aRWp6CpGIGpWo1s+e7BcZDJuqJxsXcmJ\r\n7rRvrpKYzkXSzaD+6dRniGzGM1uGD1Tqa011lgbgvgl/MlykfitXXI5N75Zm\r\nuUetm/FjqexYZyR8IX9+YfwDBkT5s8x0TBG32uRGrbJfuw/y0H9zpS0hw9pi\r\nQNnQJOtptHrkf/NBsgI4unOYvHIyGayFN7jOVpnxqeG6t5nxakemcXxCtpH9\r\n2moraRbEEbiGlSz6EqjIjiubk2rzZHIhgGGkgKGFlevqd4v8RXVZQLJHgFeH\r\nHq14MMIlciP8/Os9TU5RdjVtQIndB8xHELtvVTSmSCfjOLLPkFB78+5JiWm6\r\n/Fpl8udiPAFsxNH3v3/mM2H14ephhGnfdWkhur4NyS6aYkW7ME95rCVHIOLJ\r\nXqr7Ca+9GwCLmpCOKGIVDRsDoWZbPh8PsD+7FTPk3GfHmEoq1faoCCVeKo0+\r\nVPveh3zQaSFq7YK0d9xnl4znmO1b5IreeHeTFqPzBci+sQE8vN46Dkn15KNM\r\n6G9vJAhlsCInimlFBfxUBnJhCoJe5nBoWnsmgSlCxkDZBjaVAJ8ZQS7JNmcb\r\ng98VDjEOJQiQdwwPH/1QveMAp4t4dYU1+L/VQUUkvL30DVwdFnlvvYjLwkY1\r\nfRkbLAX4oHvEBnUUtFj8224q6g9DeN2UHxI=\r\n=Bq3+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"},"directories":{},"maintainers":[{"name":"awinogradov","email":"winogradovaa@gmail.com"},{"name":"turanchoks","email":"ipuncho@gmail.com"},{"name":"sberdevices-frontend","email":"sberdevices.frontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plasma-tokens_1.17.0_1649337626128_0.9101822505634198"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-01T10:32:15.793Z","0.0.2":"2020-10-01T10:32:15.919Z","modified":"2023-01-13T10:34:29.170Z","0.0.1":"2020-10-02T13:36:26.109Z","0.1.0-canary.5.a91d767311b8b178ead13301b21cc118133079f5.0":"2020-10-26T13:52:51.023Z","0.1.0-canary.4.7b068b6da13e65f2a99cd45f6abdd2e403fa4bd4.0":"2020-10-26T13:55:57.800Z","0.1.0-canary.5.ffee3ac311193cd995644e7a9ea87cb2c6cf64dd.0":"2020-10-26T14:07:40.342Z","0.1.0-canary.5.9fd481ad82cfbca1cdeb0f46c5bd98f8a78a2d31.0":"2020-10-26T14:25:21.140Z","0.0.3-canary.6.a4eff243cb4e4c9e7259cc0f402ab21865077e93.0":"2020-10-26T14:36:33.064Z","0.0.3-canary.7.8333882bc403661d498b9fce815b603d8de02d6a.0":"2020-10-26T15:10:53.304Z","0.0.3-canary.7.5bf5291340f8ac07a653bf230b663221142ca878.0":"2020-10-26T15:12:20.702Z","0.0.3":"2020-10-26T15:18:40.015Z","0.1.0-canary.11.30fdaefed8a59a637d7d5878bff04177c5a1a5af.0":"2020-10-26T21:44:11.615Z","0.1.0-canary.3.3790010350104e46ddc642467541f7bf5ae495fe.0":"2020-10-27T07:08:02.838Z","0.0.4-canary.15.acb97535528c2aa58506424457a9d37f469c7b04.0":"2020-10-27T08:55:25.759Z","0.1.0-canary.1.2cd286a75c4c1027b441f1ee32ce975ba62a84b1.0":"2020-10-27T09:22:32.779Z","0.1.0-canary.16.b154e2c5efe96b3cce488c7bdc40bff9ffae53f9.0":"2020-10-27T09:38:09.552Z","0.1.0-canary.16.4116f0bf83b6bd04416d16333c71270772739727.0":"2020-10-27T09:43:16.718Z","0.1.0-canary.16.cf53b3af87b2cc64550a9196454e266fdb3d432f.0":"2020-10-27T09:49:12.887Z","0.1.0":"2020-10-27T09:52:49.206Z","0.2.0-canary.36.e56ad85cf98b4abeecaa9cf98fd39bcbdba433f6.0":"2020-11-03T10:14:25.665Z","0.2.0-canary.36.6de99eb9b539cbf7db634f9bdcee65700d58a418.0":"2020-11-05T07:51:07.360Z","0.2.0-canary.36.4125e1db5c2063108642983008195286569509b2.0":"2020-11-05T09:00:40.977Z","0.2.0-canary.36.a4601b8c64d75f2197fd807afd568c02415a8b68.0":"2020-11-05T10:12:42.487Z","0.2.0-canary.36.06fe92c1f54c34061185aa1c0c3e435cf65bd616.0":"2020-11-05T11:08:27.806Z","0.2.0-canary.36.1cd239993187abfccd0b233054aee04a59b47a44.0":"2020-11-05T11:17:36.212Z","0.2.0":"2020-11-05T11:49:58.663Z","0.3.0-canary.46.989807093a01d5e01de0b1ca63935b10a43e83cd.0":"2020-11-10T06:12:36.388Z","0.2.1-canary.48.1949fa595ca8554bfcd54b9994a6ebe80cc9ddfa.0":"2020-11-10T13:20:02.745Z","0.2.1-canary.48.7bbab3f37388064c199a517ebcc9b5e347385a4a.0":"2020-11-10T13:32:05.071Z","0.3.0-canary.51.736fd78012958d985e41379703fa8fff9f811577.0":"2020-11-10T14:04:26.341Z","0.3.0":"2020-11-10T14:18:30.740Z","0.4.0":"2020-11-11T09:28:52.372Z","1.0.0-rc.0":"2020-11-11T09:55:31.364Z","1.0.0-canary.63.7e5877b7c3bb8adaa6c378f24a068fccc71f3c49.0":"2020-11-11T11:29:34.614Z","0.5.0-canary.121.fa2d050e85a703a6c379b9beb28d65f1100306f6.0":"2020-12-19T19:21:07.600Z","0.5.0-canary.121.4ac1b1010bcb87c759b0b971bf62f12dd1107cbc.0":"2020-12-19T19:33:00.218Z","0.5.0-canary.121.30a147f9730b8a87eb5ca20f611c1bbf4456b9b7.0":"2020-12-21T08:33:29.286Z","0.5.0-canary.121.15c66314d72960b2342eead8ed39de5771c755d2.0":"2020-12-21T09:13:59.314Z","0.5.0-canary.121.3e3b1d38bca76a7aa0ae575e9054f0a65d6ae563.0":"2020-12-21T10:24:38.459Z","1.0.0-rc.1":"2020-12-21T10:49:59.734Z","0.5.0-canary.138.67475fa66fec8b231aee22c09d945be9e3e9d9cf.0":"2021-01-12T08:50:07.399Z","0.5.0-canary.138.72b4cb752353d7d62710aa786549d8d1ec3cdb65.0":"2021-01-12T13:21:19.372Z","0.5.0-canary.138.a2e920370ecb7ab2498d3408ad32506826262335.0":"2021-01-13T08:33:15.590Z","1.0.0-rc.2":"2021-01-14T08:57:25.373Z","0.5.0-canary.159.db93da82140a30e7b1d2d482ce44a729f6a4495b.0":"2021-01-20T10:45:52.846Z","0.5.0-canary.159.482c420417eb42655006372fa5a02bd24b283985.0":"2021-01-20T11:01:03.621Z","0.5.0-canary.159.0c57d15f12fdcc4f09c051750fdfc65997cb272e.0":"2021-01-27T14:53:30.128Z","0.5.0-canary.159.9191d526a6fb29cd0912d4d41fa771c306a12b26.0":"2021-01-28T18:36:03.623Z","0.5.0-canary.159.16a028c6a076e38061ed42666d051b3126687810.0":"2021-01-28T19:17:01.110Z","1.0.0-rc.3":"2021-01-28T19:29:10.195Z","0.5.0-canary.218.ae10cdf247d912a7a2236730a8db184979544db0.0":"2021-02-19T15:42:07.238Z","0.5.0-canary.218.f81bce74a8e1222fe6a1b9af392c9e7c6be80574.0":"2021-02-20T07:30:23.066Z","0.5.0-canary.218.a7e1e9fcb826b0b7d5943658dd01add2819feb81.0":"2021-02-20T08:07:24.674Z","0.5.0-canary.218.543e6fe3068d732d7faf97e303736bfc489ff624.0":"2021-02-20T08:35:41.735Z","0.5.0-canary.218.330b4ba909de1021de68cd7e30d9ea4536d4d868.0":"2021-02-20T09:33:07.843Z","0.5.0-canary.218.b7ad88ff27d592a93132efa751b717196457ec74.0":"2021-02-20T09:47:10.494Z","0.5.0-canary.218.b486ad898d3012495269b64789a2146031ab45b6.0":"2021-02-20T11:09:04.536Z","0.5.0-canary.218.010deaf8ffb8bf6b6a16798efed68c19b7863e4c.0":"2021-02-20T12:08:44.578Z","1.0.0-rc.4":"2021-02-20T12:23:02.273Z","0.5.0-canary.229.60827b2561c4180bf07cf6186c434b2705c69d72.0":"2021-03-01T10:55:02.155Z","0.5.0-canary.229.62ce76bde7c3aff931cf93be64396ce6f472f3fd.0":"2021-03-01T14:39:32.167Z","0.5.0-canary.229.6b996242ddcb888c552d96d9dd132e23d21d5eb0.0":"2021-03-01T14:55:09.072Z","0.5.0-canary.229.8cfb093d8a7f2c882fa4d471308a6245db058d4d.0":"2021-03-01T15:11:12.535Z","0.5.0-canary.229.4a030e0dfb04e751bf3c2b7504122ed33a2c5f6e.0":"2021-03-03T09:18:09.732Z","1.0.0-rc.5":"2021-03-03T10:09:37.538Z","0.5.0-canary.243.376b28fb13b847f21e01d3f3d493c2518c95486b.0":"2021-03-09T20:29:44.171Z","0.5.0-canary.243.50fcf66c6e90e4139a39633da01bb864528353ae.0":"2021-03-10T11:20:38.426Z","0.5.0-canary.243.59cf6d9a4e3847c62197a381681f6c80296abedd.0":"2021-03-10T19:52:00.232Z","0.5.0-canary.249.dacb313cf10fdf9aef4ced541f5bfae8bef2241f.0":"2021-03-15T13:04:54.053Z","1.0.0-rc.6":"2021-03-16T12:27:20.833Z","1.0.0-canary.275.e33f0b1ef55c696675618fe9e2f2f537ef9406f7.0":"2021-04-02T06:13:20.102Z","1.0.0-canary.275.ae045a36301f89b5f78be0bdbb47bee4c538da53.0":"2021-04-02T06:19:19.909Z","1.0.0-canary.275.324e3828827f11a2c745132ec044934c1649f16b.0":"2021-04-02T06:36:40.602Z","1.0.0-canary.275.cc409c347f1f5b5689a712faeb9db5cbcc3bb2d6.0":"2021-04-02T09:46:22.114Z","1.0.0-canary.275.64fe5b603c18b3864833a579246f9915874dafbc.0":"2021-04-02T10:26:44.163Z","1.0.0-canary.275.f949328febef1309ec809f81a999c516e472527f.0":"2021-04-02T10:45:23.534Z","1.0.0-rc.7":"2021-04-02T10:58:13.803Z","1.0.0-canary.279.4f18a0c9ed1fe330682eab63cd041bf6da6b4517.0":"2021-04-02T16:11:27.123Z","1.0.0":"2021-04-02T16:21:57.025Z","1.1.0-canary.280.a4359d086b8ffb16c904875d2e69f1df6029714e.0":"2021-04-05T10:49:26.500Z","1.1.0-canary.280.a4770ed68a283f8f19dd765acedf60bf80c4aeeb.0":"2021-04-05T13:55:10.813Z","1.1.0-canary.280.419cf937e3949f37df904357f6829fe95d8a9764.0":"2021-04-05T14:46:49.958Z","1.1.0-canary.269.a75632abb1e369a58ed5037f8d50d8831e2986d7.0":"2021-04-06T14:08:42.693Z","1.1.0-canary.280.731aa8ef905415e2650d05e3b7a6932241a2280c.0":"2021-04-06T15:30:05.183Z","1.1.0-canary.280.b2ebfb269227d181230b2464edccf731550e7427.0":"2021-04-07T08:55:20.506Z","1.1.0":"2021-04-07T09:02:42.704Z","1.0.1-canary.283.0bde571ebc983edaa9381587b81297f5c86a6595.0":"2021-04-07T14:09:57.515Z","1.0.1-canary.283.82516ceed6073ba1cf0a3ed4ff9b6aa48a0b1ea1.0":"2021-04-07T14:20:43.818Z","1.1.0-canary.284.a163cacf340440188d48cd6a970c21815424a13a.0":"2021-04-07T20:11:16.675Z","1.0.1-canary.285.6fee0eff6573053d5401b7832d09982d37446977.0":"2021-04-07T21:00:18.754Z","1.2.0-canary.331.c41df8e1125f562e60e45f2533956409bb88fad5.0":"2021-04-27T08:59:06.299Z","1.2.0-canary.331.fff02555ddc6c69161b041253e120a32ce3d8d81.0":"2021-04-28T08:37:57.241Z","1.1.1-canary.338.e5b52993a3e8a0e23819e59f5ae5cb236d60abb6.0":"2021-04-29T11:12:48.186Z","1.1.1-canary.338.23f936beed878a0ed569b4f7bac460908f15a2ca.0":"2021-04-29T12:12:07.974Z","1.2.0-canary.339.ab67cf258bb5015222088fc047e905654c5178c3.0":"2021-04-29T12:16:07.201Z","1.2.0-canary.340.36534ec76bc28bd91d4295b189409e5c99c86513.0":"2021-04-29T14:50:07.031Z","1.2.0-canary.340.6dd97a26405020676145327e9d9ec8bab61e8861.0":"2021-04-29T15:36:52.852Z","1.2.0-canary.331.47e80fe6fbe310a9dc653548825b1c9fdc4b3fff.0":"2021-04-30T07:26:09.953Z","1.1.1-canary.338.4c7dd1a77ec008f9dd655364d25d5d9eb4742a24.0":"2021-04-30T12:07:34.207Z","1.2.0-canary.341.6707fde038271b0f0a045745befb44ef88c38c90.0":"2021-04-30T12:26:03.833Z","1.1.1-canary.338.8596b23bb3e6ac68db248403043331b7c0e3831a.0":"2021-04-30T12:28:15.071Z","1.1.1-canary.342.fd5dbe0777f88b88971c3a016f77b43e3cefdf78.0":"2021-04-30T13:19:57.410Z","1.1.1-canary.342.14732c022b293ef284c6c35a92a6644a0fa0bada.0":"2021-04-30T18:15:12.834Z","1.2.0-canary.326.6b063673dcf43ab604ee5c3b14a32ed8e031b176.0":"2021-05-04T14:17:35.675Z","1.2.0-canary.339.86b5edbdd0534b60f691713e95275a60edf0eabf.0":"2021-05-04T15:14:54.559Z","1.2.0-canary.339.b8b5514776d5ae38b112ddcaf73e7b2d829b35ee.0":"2021-05-05T14:11:10.403Z","1.1.1-canary.342.6be5cc9de361df9628f22ca8a521f0ff899ea73c.0":"2021-05-06T07:31:13.078Z","1.2.0":"2021-05-06T08:08:37.640Z","1.2.0-canary.345.9519086778041bb35565677afb7a83d1ea0afb5e.0":"2021-05-06T08:10:42.898Z","1.3.0-canary.340.6a4f5f1479188533ed161f58e0b59ad6323527e5.0":"2021-05-06T08:19:27.611Z","1.2.1-canary.338.4fafcc543cf1e5c7ca29c4efefe97cadbb1b8783.0":"2021-05-06T08:27:24.502Z","1.3.0-canary.341.a47b852c1a24191c4fbf8986db3e0824a5c19439.0":"2021-05-06T09:02:12.852Z","1.3.0-canary.341.a8bed0e3359a118914fa2e593d9fd4a63133137b.0":"2021-05-07T07:50:30.819Z","1.3.0-canary.339.9e57df0010325a0cdc178e8171177be9cbf849e8.0":"2021-05-07T11:39:00.631Z","1.3.0-canary.339.233711a5862c44bd85ccaca0a5165ecc83b4e195.0":"2021-05-07T12:51:24.485Z","1.3.0-canary.347.b4b4553948c05bb942e506b1845755a59c4a0864.0":"2021-05-07T13:29:48.243Z","1.3.0-canary.348.21d16ef749db95645c6e854c4cab16b1f0b3a6b3.0":"2021-05-07T15:17:58.183Z","1.3.0":"2021-05-07T15:58:53.552Z","1.4.0-canary.341.8a407eac692ebfcab06fa67228b9a54a2b206c05.0":"2021-05-31T13:22:59.609Z","1.4.0-canary.341.81aaee2901f8f5c9e4c6b90ea07769eac0e59993.0":"2021-05-31T14:16:39.516Z","1.4.0":"2021-05-31T14:29:53.954Z","1.4.0-canary.412.c69a1c0cae862f8a125186d0e117e5fa21086915.0":"2021-05-31T14:46:36.738Z","1.5.0-canary.412.8c33948f19254ff6d6ebac8cda1525a758106134.0":"2021-05-31T15:56:02.037Z","1.5.0":"2021-05-31T16:26:08.494Z","1.5.0-canary.392.573acc4e434c923a19b3b5bc4e76ea253e2530ab.0":"2021-05-31T16:33:26.009Z","1.5.1-canary.419.9a1f60abeeccd399dfc2bce83a3aef9249f07dab.0":"2021-05-31T17:29:59.010Z","1.5.1":"2021-05-31T17:55:00.055Z","1.6.0-canary.398.eb64c1a1e3d379ff39448c3587c44c5674b6957c.0":"2021-06-07T12:13:20.281Z","1.6.0-canary.398.fb58de83544a87fa5dd6ecfc71ffd3a938fe009d.0":"2021-06-07T18:48:43.179Z","1.6.0-canary.398.0ec13e0c0f15234cc43d5930866e12a9bcdc245d.0":"2021-06-08T10:44:39.720Z","1.6.0-canary.398.26bc2d7263e1aef2c2090eea60e62575a71d56d3.0":"2021-06-08T10:54:44.522Z","1.6.0-canary.398.0ac5b720bf762387b93bf268a2510af37330ef9c.0":"2021-06-08T11:52:52.725Z","1.6.0-canary.398.8ef7aa1474368a606dcfb4caed0c5b37619b3b4b.0":"2021-06-08T12:27:56.041Z","1.6.0-canary.398.ef407160949cb5beac59965dc385cc6a72ba0deb.0":"2021-06-09T08:31:30.999Z","1.6.0-canary.398.b23c9912d051d0e5d25640c461627c7eaddfb78a.0":"2021-06-09T09:14:50.085Z","1.6.0":"2021-06-09T09:32:22.239Z","1.7.0-canary.438.c18aca7d5ecb8881f355907ea0af891d14f00be7.0":"2021-06-09T14:46:49.747Z","1.7.0-canary.438.27e31c2796fa918820eb8a9d1fd384addf7d62fd.0":"2021-06-09T15:22:35.077Z","1.7.0-canary.438.581160f7c98bb9497c0df77ba34399bde5e68173.0":"2021-06-10T09:14:29.076Z","1.7.0-canary.438.771f9559b5d2bd32b3bcf5e3ebf12b8f0d392cb6.0":"2021-06-10T09:34:50.505Z","1.7.0-canary.438.020f8726fee86ba4688f86088371c1dca27fba19.0":"2021-06-10T10:04:16.532Z","1.7.0-canary.438.f64f661c1cd7be2304269822c7534079a2e50252.0":"2021-06-10T11:23:48.374Z","1.7.0-canary.438.637643c6b58eea8f13b814f613632fbe70ae7aa4.0":"2021-06-10T12:26:24.021Z","1.7.0-canary.438.112a15f547905ee8abcc5b007b0b30af3cb76459.0":"2021-06-10T13:11:30.800Z","1.6.1-canary.437.cd40b13060db7c26fb134ee575f5aa6326fe1686.0":"2021-06-11T10:44:33.804Z","1.6.1-canary.437.73f888aa2f534f6b3c7533d430b475877b006191.0":"2021-06-11T12:57:05.030Z","1.7.0-canary.438.b124f65d97a4b5a5ca41b398a8745e2a49cbfae4.0":"2021-06-11T15:42:41.078Z","1.7.0-canary.438.a34f92e1506b0a014e6d40472baf1dd25b3ede94.0":"2021-06-14T21:30:19.175Z","1.7.0-canary.438.0a9df4e2de8ae4a2b4306e7411af8080e3f7ef3e.0":"2021-06-15T08:31:25.140Z","1.7.0-canary.441.facf1d824d787c99d4f7536d7f98a5d2fd7a27db.0":"2021-06-15T12:30:15.820Z","1.7.0-canary.441.5d08e00bd41563d14d5c71c42f795af8dcec3f4d.0":"2021-06-15T14:56:26.593Z","1.7.0-canary.441.529bbab82df9dab80c4df912436f033beaae0d80.0":"2021-06-16T15:59:41.401Z","1.7.0-canary.441.73770fc8f9c019420f2ffbffa84d8224b5e754d2.0":"2021-06-17T09:18:18.699Z","1.6.1":"2021-06-17T13:08:58.736Z","1.7.0-canary.455.190151a2aa262474f2bcb99251182a36923e2ccd.0":"2021-06-18T13:17:29.317Z","1.7.0-canary.455.13a8eccb06fdd863a45e832c5e1992838ae09580.0":"2021-06-18T14:49:19.232Z","1.7.0-canary.455.d6edb9cf0bf97c0149f9f32a99da95569ae5093b.0":"2021-06-20T15:32:59.281Z","1.7.0-canary.455.5352e5c0c7df06a8d14f45f651831c5eb3807c01.0":"2021-06-20T16:50:06.132Z","1.7.0-canary.455.4529fb24244f15605e4181867e886f77ebdaa11e.0":"2021-06-20T18:34:53.269Z","1.7.0-canary.455.841f9040bd88a928dcc7f66c2a2b4e2039c8d6cb.0":"2021-06-22T14:51:13.187Z","1.7.0-canary.455.728e3ceb160b676372b08d25138f9c2002fc3170.0":"2021-06-23T08:32:34.525Z","1.7.0":"2021-06-23T08:45:47.712Z","1.6.2-canary.458.2a3716a35c5babe5f07c734d37bca85cd0a1c265.0":"2021-06-23T09:00:37.128Z","1.8.0-canary.468.49b9a9eb68c395d35d9acc5dfd2039a15f5928aa.0":"2021-06-28T09:56:11.338Z","1.8.0-canary.468.2596a0e422aff836305b8e724f95a203969f5379.0":"2021-06-28T19:54:44.232Z","1.7.1-canary.463.891e00dc399b37cc24d37819cb7a3e5841c39d30.0":"2021-06-29T09:36:48.329Z","1.7.1-canary.463.ff1f575153b5948de24d504553efe6001e71568c.0":"2021-06-29T15:44:53.248Z","1.7.1-canary.463.720093b9de2035b3ee48bf0032417b4c74cf5e57.0":"2021-06-29T16:07:39.651Z","1.8.0-canary.468.61a192453adbc68fa21d344725ba167f6018d475.0":"2021-06-30T08:44:10.606Z","1.8.0-canary.468.0fbee75a3d3de63baf01751a9a764a3414bb38dd.0":"2021-06-30T08:47:17.202Z","1.8.0-canary.468.2701b961c731999e27695f3df1022b46421b519a.0":"2021-06-30T08:59:31.854Z","1.7.1-canary.479.131ae1ab4d7430bfb431b162f622550e42e4a166.0":"2021-06-30T10:34:35.027Z","1.7.1-canary.479.f9f9125d42f016165b110af34a263889f9497da4.0":"2021-06-30T11:04:47.608Z","1.8.0-canary.468.7ebb088bbc6499caba1f7cb29d77f6904a78e77e.0":"2021-06-30T14:55:56.531Z","1.8.0-canary.468.1f7c3d5ea9a69c0d20d4436e36d86a03d1f69d65.0":"2021-06-30T15:24:06.051Z","1.8.0":"2021-07-01T07:41:10.730Z","1.8.1-canary.479.736e8e37d0f829729b5a0810e8d3c659ad09f18e.0":"2021-07-01T09:27:40.788Z","1.8.1-canary.479.771fe62e1a344f85420ab3d71bb7c865ba53daef.0":"2021-07-01T09:51:48.095Z","1.8.1-canary.462.07c2557be80b207998657232d7649c4ab4f105da.0":"2021-07-01T11:40:40.199Z","1.8.1":"2021-07-01T11:55:18.693Z","1.9.0-canary.504.762c92625b49eb4fbd6eeb00aac860f6ff13990a.0":"2021-07-07T20:46:03.072Z","1.9.0":"2021-07-08T10:26:14.365Z","1.10.0-canary.608.3e245057673a7388b29157bbfdde34c4fd16f614.0":"2021-08-04T12:23:04.681Z","1.10.0-canary.608.e526f771f3316cb50dd73fecffa2fb97edee58b6.0":"2021-08-05T09:06:09.857Z","1.10.0-canary.608.008f304ceb9d660f0e3f296f08ba83d76369a6fc.0":"2021-08-05T10:50:46.855Z","1.10.0":"2021-08-06T09:13:08.585Z","1.10.1-canary.620.f5ff6cb940c9a64cd60420c9ee3d2f5b9a05334c.0":"2021-08-06T10:43:10.279Z","1.10.1-canary.620.90449a9d616ada58f690d4ceaa49d67aafafdd7d.0":"2021-08-06T10:57:28.504Z","1.10.1":"2021-08-06T11:12:03.998Z","1.11.0-canary.628.7b95e9b232adf3c4024bbead93a8bb8c0b59d79e.0":"2021-08-09T19:34:26.202Z","1.11.0-canary.628.548add975f5b266c622c82c7938940c34dfe04e7.0":"2021-08-11T21:09:00.297Z","1.11.0-canary.628.9c62fdb39631aaa19bbd38555657121510cc7f3a.0":"2021-08-12T20:26:13.437Z","1.11.0-canary.628.640e8bd2f0e4546f43609a6ca7bd075bbd1ad669.0":"2021-08-18T10:18:54.515Z","1.11.0-canary.628.5ff380d5a6c3de827e29a3ded1f45c292d64a22f.0":"2021-08-18T11:32:11.778Z","1.11.0-canary.628.9529cb00a93f0ac3a5421e616436186a6f04b29f.0":"2021-08-20T12:51:29.651Z","1.11.0":"2021-08-20T13:34:20.981Z","1.12.0-canary.650.21de578a613efc6d0922dcc8224f5bf23ed4a34d.0":"2021-08-23T06:50:19.925Z","1.12.0-canary.650.301116efafba961f20ac71b158c7dedef514f793.0":"2021-08-23T12:47:53.977Z","1.12.0-canary.648.a0f1daf0c0b1137e5e4c1d3fd55dfa64adb39bbd.0":"2021-08-23T13:42:37.397Z","1.12.0":"2021-08-23T13:49:19.780Z","1.12.1-canary.698.5a0f534f32b9edcec50d44a1c84e9b543e903968.0":"2021-09-08T11:44:49.168Z","1.13.0-canary.676.a95fa63ca3393a0020c3afec9cbbeae9c4fa32d6.0":"2021-09-08T12:37:51.572Z","1.12.1-canary.698.17c898a0469a150e1ceacfe320b24a4e3d21d860.0":"2021-09-08T13:01:14.137Z","1.12.1-canary.698.800ed930e0f10c104a3b34100f173875d756b9db.0":"2021-09-08T13:17:43.998Z","1.12.1-canary.698.bd14f09af0dce2d1129d455a0ba66efd9a7f3fae.0":"2021-09-08T13:55:47.575Z","1.12.1-canary.709.f84a888e4c657f75afa8e78e7cd9d1cd58515067.0":"2021-09-08T14:47:37.072Z","1.12.1":"2021-09-08T15:00:06.940Z","1.13.0-canary.676.ce1456091c00199b123252da70d7bda6f669350a.0":"2021-09-10T13:57:07.425Z","1.13.0-canary.803.597904e9119cf14a64cd187ba7f662665e09448a.0":"2021-09-14T12:17:04.332Z","1.12.2-canary.703.0a3c2d6e68764f8e41eb82d87cf61236ee83b258.0":"2021-09-14T12:33:05.288Z","1.12.2":"2021-09-14T12:52:10.908Z","1.13.0-canary.803.da5178284055e4e9211d1a16c1317193d10b52c0.0":"2021-09-14T14:03:06.875Z","1.12.3-canary.801.2dd65444a455f6fdfea3f9072686abe075f52062.0":"2021-09-14T14:15:56.364Z","1.13.0":"2021-09-14T15:53:59.650Z","1.14.0-canary.812.4ec9968e433568fb14e944af3971417b3467b815.0":"2021-10-04T08:17:44.012Z","1.14.0-canary.812.d1025a0a2184be446a493c40a9b1038f41cc314c.0":"2021-10-05T14:36:08.992Z","1.14.0-canary.812.dc42ca9378d040228a532d1e00e78a3242cf0345.0":"2021-10-06T09:05:35.697Z","1.14.0-canary.812.b76de5b752a3ffaa8e663c47ce3e057300fb2c53.0":"2021-10-06T11:12:40.179Z","1.14.0-canary.812.9cc0b92d09ca66f61628e0cabf6870b2cb80608f.0":"2021-10-07T09:37:18.203Z","1.14.0-canary.812.a622d2a7270dde4969f322746df6e769f6d9ed83.0":"2021-10-07T12:05:38.512Z","1.14.0-canary.825.b93cad00110c4f0559506d574c996e65d952d58e.0":"2021-10-07T14:50:40.737Z","1.14.0-canary.819.2a17ba7a82f7971fc51534b7dce642c7d15d6d5f.0":"2021-10-07T14:51:40.941Z","1.14.0-canary.825.fe1681084f6c404d3256c216b9997cc79e3958ea.0":"2021-10-07T15:08:20.419Z","1.14.0-canary.825.97d33b99871031edc06ccadd90ff283c3d98da34.0":"2021-10-07T15:09:58.822Z","1.14.0-canary.829.5168a0e896beb170445f03e448c3c473ef8b42bc.0":"2021-10-07T20:39:59.729Z","1.14.0-canary.829.0ba8f80902ebeb5f00ee0ba8044943e3056f859f.0":"2021-10-07T21:59:22.891Z","1.14.0-canary.819.7abef9421e8e6fc03436c29eb0deb3cbe9e1791f.0":"2021-10-08T06:39:50.005Z","1.14.0-canary.829.6d36e0cc9bdbaede64eb238487cef6b7ec777ff4.0":"2021-10-08T08:40:19.018Z","1.14.0-canary.676.23971d0b4fe793802691e0c294766778511f69e5.0":"2021-10-08T08:49:58.084Z","1.14.0-canary.841.0778e27b3a8d0fa7fe627d05385d468faec59458.0":"2021-10-08T10:00:09.445Z","1.14.0-canary.829.7be613c8f1bf86ea4fd34c5de8d9c5d72f4f3d17.0":"2021-10-08T10:33:52.797Z","1.14.0-canary.825.4b69e3302464b630149e5126d297dea92bcb9319.0":"2021-10-08T12:22:50.849Z","1.14.0-canary.842.374bca91998cee0bbadc4c0cabc57f34ba14234a.0":"2021-10-08T12:39:02.941Z","1.14.0-canary.676.90f21a26cc86e650740158040b7010ece9ae73c5.0":"2021-10-08T13:11:24.736Z","1.14.0":"2021-10-08T13:21:36.649Z","1.14.0-canary.843.0cc18735b4202b9485a3687b1006bbf920cf579b.0":"2021-10-08T13:25:04.264Z","1.15.0-canary.1026.0677bd5e9d06d023ead51717c1cabc04ecf89618.0":"2021-12-30T14:19:57.904Z","1.15.0-canary.1026.44752525dc4ed2ab3f80029f7f8b4e81ef124e87.0":"2021-12-30T14:36:20.595Z","1.15.0-canary.1026.3cf3be1036272ad9dca8afc994bbf8131f29bf45.0":"2021-12-30T15:29:03.210Z","1.15.0":"2021-12-30T16:21:10.273Z","1.15.1-canary.1030.ec3e2df3dcdbb9da51b0c7ee70e49e6ceb8e0787.0":"2022-01-10T14:15:48.862Z","1.15.1-canary.1030.90499615ab0dc149155c32e50688c3948da449d0.0":"2022-01-11T14:25:17.064Z","1.15.1-canary.1030.b50246f5c3cfaf5176c75d130c074d2b66d193f3.0":"2022-01-13T12:09:16.481Z","1.15.1-canary.1040.767de126f33086cbf07a44c7cd78ba2982a1c138.0":"2022-01-13T13:24:05.429Z","1.15.1":"2022-01-13T13:30:03.326Z","1.16.0-canary.1071.c9151fae3815205ad55a3f1179f708cfd6a2e092.0":"2022-02-07T16:30:50.396Z","1.16.0-canary.1071.cd8e92ded348b99e93be9526a6ba62afe1b5617a.0":"2022-02-07T16:32:07.608Z","1.16.0-canary.1071.6d27918d4d3e976dad88c1cf93c35c27ca43a449.0":"2022-02-07T16:39:59.611Z","1.16.0-canary.1084.4a331a48c8b8d18094185b00a4357697737f37d0.0":"2022-02-14T13:03:45.788Z","1.16.0-canary.1084.83eb3b5fcf83c83a4b7ac8c3676c4311b68d9121.0":"2022-02-15T13:37:08.692Z","1.16.0-canary.1095.22081c10e97d43462671865d3b7d8ed77d9b005f.0":"2022-02-16T06:03:53.249Z","1.16.0-canary.1095.8cebcedc2d2d95d09c58a0efdf71b45cfd965aa1.0":"2022-02-16T06:18:57.018Z","1.16.0-canary.1084.310f151d902a974a935fa5f11fc7ddf38b8c281a.0":"2022-02-16T19:35:00.384Z","1.16.0-canary.1080.b80011a3264fdee31eb0e5534741d2c1247b61a5.0":"2022-02-17T06:43:19.592Z","1.16.0-canary.1079.94fe0e45b5ea1a1625883994032742cfec15bf32.0":"2022-02-17T09:40:57.368Z","1.16.0-canary.1075.cfc03dace31c7cb6c6107c724d1496d827fd1981.0":"2022-02-17T09:58:45.347Z","1.15.2-canary.1106.3832627581dd419cdf60751509a35625be54f156.0":"2022-02-17T10:01:51.328Z","1.15.2-canary.1076.f6f9000b5272fb033ab3716b0f1fa25771df39dc.0":"2022-02-17T10:21:19.177Z","1.16.0-canary.1108.f1221c960c807639cfb6f866381d38a066d40737.0":"2022-02-17T10:44:51.588Z","1.15.2":"2022-02-17T11:01:14.426Z","1.15.3-canary.1106.e6f30cb9f609a09b3c0683dd0b67ace4ef84c579.0":"2022-02-17T12:30:18.724Z","1.15.3-canary.1106.1c29dfe5d457e6e1b5ffb44e33cf928e42f74a2e.0":"2022-02-17T15:58:08.667Z","1.15.3-canary.1106.c4874ab89f4285777d721759d5db59584fa3b736.0":"2022-02-18T10:58:18.872Z","1.15.3":"2022-02-18T11:37:37.160Z","1.16.0-canary.1084.53b28dfdb2e047b4692cb3fdc75bc03f7874eab5.0":"2022-02-18T13:59:52.770Z","1.16.0-canary.1095.103999b8d667fc9bb7eac350bc17ffb2313b1d17.0":"2022-02-20T17:24:38.386Z","1.16.0-canary.1095.e5e98edf231b3d5074920c63f323ed2060e5da5d.0":"2022-02-20T17:37:42.389Z","1.16.0-canary.1095.8ad43dede2b75a5c85f80def2f0420774b7fb7db.0":"2022-02-21T17:21:40.837Z","1.16.0-canary.1084.ee10bbef179d76d259b8dd30b8bbfcf786aa110b.0":"2022-02-22T08:33:19.656Z","1.16.0-canary.1084.95285d8b65f3be61d2f8692520464b1e42fe0bf9.0":"2022-02-28T09:11:29.919Z","1.16.0-canary.1084.df28b667c46b24f81ffc616a9ee27d1999775bde.0":"2022-02-28T14:40:04.009Z","1.16.0-canary.1121.6700921bdf8c410f605f56ca5d62dfdf69d38d05.0":"2022-02-28T16:13:52.118Z","1.16.0-canary.1083.00c8c631453c339092b02e42260056aea5d341f8.0":"2022-02-28T19:21:52.322Z","1.16.0-canary.1047.3620d9610d2e0b694ab3b1b69fc935fb83e988df.0":"2022-02-28T20:15:55.346Z","1.16.0-canary.1083.0ca5258b15342bcc7a35a966113ceadbbe7dae20.0":"2022-02-28T21:11:35.097Z","1.16.0-canary.1083.5bece646bfba6da2083d59cfd7344647f345f2cf.0":"2022-03-01T07:25:13.899Z","1.16.0-canary.1079.fdc36875cebf8c751db1c308227e8aa8666c5c8a.0":"2022-03-01T08:17:29.633Z","1.15.4-canary.1122.2669fad2cc5e5449f3dbf0b9da7f80d1b371b152.0":"2022-03-01T08:17:47.269Z","1.16.0-canary.1047.17aeb7a222f749f03f64f328f07c7496b73466b6.0":"2022-03-01T09:15:40.192Z","1.16.0-canary.1121.9668e807bceb68aa6c65a39fe84f998763aaa2a3.0":"2022-03-01T09:36:56.662Z","1.16.0":"2022-03-01T09:48:21.836Z","1.15.4-canary.1122.7fc21de2ecf2cecdd09b9e43c051a290a5887557.0":"2022-03-01T09:57:57.428Z","1.17.0-canary.1095.32e535bee09652b2a12b19ece7aa2d3971b451c6.0":"2022-03-01T10:39:10.351Z","1.17.0-canary.1121.92dec2df61b77342872f5ca4df2c770fb1c14108.0":"2022-03-01T11:10:44.275Z","1.17.0-canary.1121.2ef5299a76809e25ab892f4c2b60b21f4a132580.0":"2022-03-02T10:18:27.792Z","1.17.0-canary.1121.f77f166ba7753147c68582fa09988192640a6194.0":"2022-03-02T12:37:36.484Z","1.17.0-canary.1121.55268db4b86c8f52454afbe28299083c55bd4b98.0":"2022-03-02T13:46:20.178Z","1.17.0-canary.1121.544938b9b6ef80b19e3f220744259207b85d4f09.0":"2022-03-02T14:36:02.525Z","1.17.0-canary.1121.80a6bc7e37632156027857735a987f6f3368a312.0":"2022-03-05T14:40:43.298Z","1.17.0-canary.1121.9b249f1e43cb80dd8eaf9b74f7e0484da304f5fc.0":"2022-03-22T10:41:39.090Z","1.17.0-canary.1121.ae417991372b1f51360a496e576e6d92ea36c875.0":"2022-03-24T08:33:27.796Z","1.17.0-canary.1121.7e49272d5b635e15470b05e6d81a00241dc054af.0":"2022-04-06T11:49:53.354Z","1.17.0-canary.1121.cf0ea2061dea6412c3b40a6206b7f3a4ad9a2d0e.0":"2022-04-06T16:04:13.605Z","1.17.0-canary.1121.21e811f12d17b0a558889b91bb32973ffc7cf4c8.0":"2022-04-07T12:35:59.733Z","1.17.0":"2022-04-07T13:20:26.273Z"},"maintainers":[{"email":"ipuncho@gmail.com","name":"turanchoks"},{"email":"sberdevices.frontend@gmail.com","name":"sberdevices-frontend"}],"readme":"# Plasma Tokens\n\nПакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств.\n\n

\n \"plasma-tokens\"\n

\n\n## Пример использования\n\n_NB_ — Все примеры будут приведены с использованием [styled-components](https://styled-components.com/). Но использовать `plasma-tokens` можно и без этого инструмента.\n\n```sh\nnpm i --save @sberdevices/plasma-tokens\n```\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n \n );\n};\n\nexport default App;\n```\n\n## Реализация\n\nВсе `css` переменные завернуты в `js` переменные для более удобного доступа.\nКаждая переменная имеет описание ввиде комментария. Современные `IDE` будут выводить этот комментарий ввиде подсказки.\n\nПример:\n\n```js\n/** Цвет предупреждения */\nexport const warning = 'var(--plasma-colors-warning)';\n```\n\n## Состав\n\nВ пакете реализованы несколько сущностей:\n\n- [Типографическая Система](#типографическая-система)\n- [Цветовая палитра](#цветовая-палитра)\n- [Управление темой приложения](#темы)\n\nРазберём каждую сущность подробнее:\n\n### Типографическая Система\n\nТекст – это основа любого интерфейса. Для того чтобы текст выглядел единообразно во всей экосистеме `SberDevices`, разработана данная типографическая система.\n\n#### Использование\n\n```js\nimport { typography } from '@sberdevices/plasma-tokens';\n```\n\n`typography` включает в себя следующие готовые стилевые объекты:\n\n- Hero Unit:\n\n - display1\n - display2\n - display3\n\n- Заголовки:\n\n - headline1\n - headline2\n - headline3\n - headline4\n\n- Основной текст:\n\n - body1\n - body2\n - body3\n\n - paragraph1\n - paragraph2\n\n- Вспомогательный текст:\n\n - footnote1\n - footnote2\n\n- Контролы:\n\n - button1\n - button2\n\n- Дополнительные:\n - caption\n - underline\n\nПосмотреть в живую можно в документации [типографической системы](https://plasma.sberdevices.ru/current/?path=/docs/typography--default#%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B)\n\nВсе стилевые объекты также можно импортировать по одному:\n\n```jsx\nimport React from 'react';\nimport styled from 'styled-components';\n\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\nconst App = () => {\n return (\n \n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\nЕсли запустить приведенный выше пример, можно заметить две вещи:\n\n- Текст написан не фирменным шрифтом.\n- Размер шрифта выглядит хорошо на декстопном девайсе, но будет мелковат на ТВ-платформе.\n\n#### Установка шрифта\n\nТипографическая система основана на фирменном шрифте `SB Sans Text`. Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на [CDN](https://ru.wikipedia.org/wiki/Content_Delivery_Network).\n\nДля использования типографической системы вам достаточно загрузить один `css` файл:\nЕго необходимо добавить внутрь тега `head`. Если в качестве основы web-приложения вы используете [create-react-app](https://create-react-app.dev), вам необходимо изменить файл `./public/index.html`.\n\n```html\n\n \n \n \n \n ...\n \n\n```\n\n#### Размеры\n\nЕсли посмотреть на объекты стилей которые предоставляет типографическая сетка, можно заметить что размер текста задан в единицах измерения `rem`.\n\n```js\nexport const body1 = {\n fontFamily: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n fontWeight: 500,\n fontStyle: 'normal',\n fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',\n letterSpacing: '-0.0190em',\n lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',\n};\n```\n\nЭто позволяет масштабировать весь интерфейс за счёт указания `font-size` на `html` теге.\n\nЗначение для устройств `SberBox` & `SberPortal` необходимо установить в значение `32px`.\nДля остальных поверхностей предпологается использовать значение по умолчанию: `16px`.\n\n```css\nhtml {\n font-size: 32px;\n}\n```\n\nНеобходимые значения также предоставляются в пакете `plasma-tokens`.\n\n```js\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n```\n\nПример использования со [style-components][style-components]\n\n```js\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport styled, { createGlobalStyle } from 'styled-components';\n\n// получаем значение для целевой платформы\nimport { sberBox } from '@sberdevices/plasma-tokens/typo';\n\n// получаем стилевые объекты для нашего интерфейса\nimport { body1, headline2 } from '@sberdevices/plasma-tokens';\n\nconst AppStyled = styled.div`\n padding: 30px;\n ${body1}\n`;\n\n// создаем react-компонент c глобальными стилями\nconst TypoScale = createGlobalStyle(sberBox);\n\nconst App = () => {\n return (\n \n {/* Используем react-компонент один раз */}\n \n\n

Hello Plasma

\n
\n Сил человеческих хватает до известного предела.\n
\n Кто виноват, что именно этот предел играет решающую роль?\n
\n \n );\n};\n\nexport default App;\n```\n\n#### Дополнительно\n\nТакже из пакета можно получить все возможные значения для:\n\n- `fontSizes`\n- `fonts`\n- `fontWeights`\n- `lineHeights`\n- `letterSpacings`;\n\n```js\nimport { fonts } from '@sberdevices/plasma-tokens';\n\nconsole.log(fonts);\n// –> {\n// Medium: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Bold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Semibold: \"'SB Sans Text','Helvetica','Arial',sans-serif\",\n// Regular: \"'SB Sans Text','Helvetica','Arial',sans-serif\"\n// }\n```\n\n### Цветовая палитра\n\nЦветовая палитра это вторая основная часть ощущения платформы `SberDevices`.\nЦвета можно забират из корня пакета, для каждого цвета есть коментарий описывающий его использование.\n\n```js\nimport { accent } from '@sberdevices/plasma-tokens';\n```\n\n```js\n/** Акцентный цвет призыва к действию */\nexport const accent = 'var(--theme-colors-accent, #2AC673)';\n```\n\nЦвета представляют собой [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) c заданным цветом по умолчанию.\nЭто позволяет переопределять цвета с помощью [Тем](#темы).\nВсю представленную палитру можно посмотреть в документации: https://plasma.sberdevices.ru/current/?path=/docs/colors--default\n\nТакже доступны сами значения пременных:\n\n```js\nimport { colorValues } from '@sberdevices/plasma-tokens';\n\nconsole.log(colorValues.black); // –> '#080808'\n```\n\nПример использования цветов для создания основной подложки web-приложения:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n/**\n * text - основной цвет текста\n * background - овновной цвет фона\n * gradient - градиентная заливка фона\n */\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n
\n );\n};\n\nexport default App;\n```\n\n### Темы\n\nКаждая тема соотносится с персонажем ассистента, и меняет цветовую гамму web-приложения.\n\nВ пакете предоставлены 6 тем:\n\n- `darkSber` – Тема по умолчанию,\n- `darkEva`\n- `darkJoy`\n- `lightSber`\n- `lightEva`\n- `lightJoy`\n\nПодключение:\n\n```jsx\nimport React from 'react';\n// createGlobalStyle нужен для создания глобальных стилей\nimport { createGlobalStyle } from 'styled-components';\n// получаем тему персонажа\nimport { darkJoy } from '@sberdevices/plasma-tokens/themes';\n// получаем цвета для нашего интерфейса\nimport { text, background, gradient } from '@sberdevices/plasma-tokens';\n\nconst DocStyles = createGlobalStyle`\n html {\n color: ${text};\n background-color: ${background};\n background-image: ${gradient};\n\n /** необходимо залить градиентом всю подложку */\n min-height: 100vh;\n }\n`;\n\n// создаем react-компонент для персонажа\nconst Theme = createGlobalStyle(darkJoy);\n\nconst App = () => {\n return (\n
\n {/* Используем глобальные react-компоненты один раз */}\n \n \n
\n );\n};\n\nexport default App;\n```\n\n## Готовый пример\n\nВсе описанные выше примеры можно посмотреть в [демо-приложении](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/src/App.tsx).\n\nПриложение основано на [create-react-app](https://create-react-app.dev) c использованием [typescript](https://www.typescriptlang.org/) и [styled-components](https://styled-components.com/).\n\nДля запуска приложение прочитайте [README](https://github.com/sberdevices/plasma/blob/master/examples/demo-tokens/README.md).\n","readmeFilename":"README.md","contributors":[{"name":"Виноградов Антон Александрович"},{"name":"Зубаиров Фаниль Асхатович"},{"name":"Vasiliy Loginevskiy"}],"author":{"name":"SberDevices Frontend Team","email":"sberdevices.frontend@gmail.com"},"license":"Sber Public License at-nc-sa v.2","description":"Пакет предоставляет набор _дизайн-токенов_ реализующих дизайн «Plasma» для разных устройств."}