{"_id":"@acronis-platform/ui-syntax","_rev":"2-17629f7c8e21e7046e0d44686f8f38cb","name":"@acronis-platform/ui-syntax","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@acronis-platform/ui-syntax","version":"1.0.1","author":{"name":"Acronis"},"license":"MIT","_id":"@acronis-platform/ui-syntax@1.0.1","maintainers":[{"name":"acronis_platform","email":"team-rnd-tools-github@acronis.com"},{"name":"yusuf_s","email":"Yusuf.Shamir@acronis.com"}],"dist":{"shasum":"52df3518cc7f894e8d6a6d8d70188e33d15b31a7","tarball":"https://registry.npmjs.org/@acronis-platform/ui-syntax/-/ui-syntax-1.0.1.tgz","fileCount":167,"integrity":"sha512-G3M+XrYlNOupcud7DxUGJ1Y1vK6EaMAhAaT1TKlfXerb+a9XgyG4SDQXbnS37bx8TlMh4mfOZoz9Oms8NFbs4w==","signatures":[{"sig":"MEYCIQDAfEC9QtRQHPrlC7cXv6sRdjsX3V5hEaNAtIVg5Av94QIhAInXCpEtfUwuKQ53HswxGYw6zDmuopjdRYvtZpxIZosG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92630168},"main":"dist/index.js","type":"module","_from":"file:acronis-platform-ui-syntax-1.0.1.tgz","scripts":{"build":"pnpm run build:tokens && pnpm run build:fonts","clean":"rm -rf dist","start":"npm run build && chokidar 'public/style.css' 'demo/src/**/*' 'tokens/**/*.json' 'bin/views/**/*' config.json sd.config.js -c 'npm run build'","copy:icons":"mkdir ./dist/assets/icons && cp ./node_modules/@acronis-platform/icons/public/*.svg ./dist/assets/icons","build:fonts":"node ./bin/buildFonts.js","build:icons":"node ./bin/buildIcons.js","build:tokens":"node ./bin/buildTokens.js"},"_npmUser":{"name":"acronis_platform","email":"team-rnd-tools-github@acronis.com"},"_resolved":"/tmp/26fe8abd8251b9d28575c4801c45087d/acronis-platform-ui-syntax-1.0.1.tgz","_integrity":"sha512-G3M+XrYlNOupcud7DxUGJ1Y1vK6EaMAhAaT1TKlfXerb+a9XgyG4SDQXbnS37bx8TlMh4mfOZoz9Oms8NFbs4w==","_npmVersion":"10.8.2","description":"This package contains the UI theme(tokens and utility styles) for the UI component library.","directories":{},"_nodeVersion":"20.19.6","_hasShrinkwrap":false,"devDependencies":{"ejs":"3.1.10","glob":"11.1.0","fs-extra":"11.2.0","stylelint":"16.2.1","js-beautify":"1.15.1","chokidar-cli":"3.0.0","style-dictionary":"4.2.0","@acronis-platform/icons":"0.11.0","@acronis-platform/configs":"0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/ui-syntax_1.0.1_1764947120493_0.9088383546545924","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-12-05T15:05:20.354Z","modified":"2026-09-01T15:47:17.654Z","1.0.1":"2025-12-05T15:05:27.414Z"},"author":{"name":"Acronis"},"license":"MIT","description":"This package contains the UI theme(tokens and utility styles) for the UI component library.","maintainers":[{"email":"team-rnd-tools-github@acronis.com","name":"acronis_platform"}],"readme":"# UI theme package\n\nThis package contains the UI theme(tokens and utility styles) for the UI component library.\n\nSource code for tokens is represented in Style dictionary format and CSS for utility classes.\n\n## What's included\n\nThe package includes the following:\n\n- CSS files with branded theme styles (light, dark color scheme and global variables)\n- SCSS files with branded theme styles\n- JavaScript files with branded theme variables\n- UI Syntax Design system Figma tokens with aliases\n- Css utility classes that can be used in the project\n\n## How to use\n\nTo use the UI theme in your project, you need to install the package first:\n\n```bash\nnpm install @acronis-platform/ui-syntax\n```\n\nThen, you can import the theme in your project:\n\n```js\n\n// Import the all tokens, utilities and theme styles\nimport '@acronis-platform/ui-syntax/css/index.css';\n// Import all css utilities\nimport '@acronis-platform/ui-syntax/styles/utilities.css';\n// Import all theme styles for the light and dark themes\nimport '@acronis-platform/ui-syntax/css/acronis/acronis.css';\n// Figma base tokens\nimport '@acronis-platform/ui-syntax/css/globals.css';\n```\n\n## Development\n\nTo build the UI theme package, run the following command:\n\n```bash\npnpm run build\n```\n\n## Tokens\n\nThe tokens are defined in the `tokens` directory. \nThe tokens are defined in the Style Dictionary format.\n\nWe suggest to use Category - Type - Item structure for tokens.\n\n```json\n{\n  \"color\": {\n    \"background\": {\n      \"primary\": { \"value\": \"{color.core.neutral.0.value}\" }\n    }\n  }\n}\n```\n\nFull taxonomy of tokens:\n\n- Prefix - **acv**\n  - Category - **color**\n    - Type - **background**, **text**, **border**\n      - Item - **button**, **input**, **card**, **table**\n        - Optional subitem - **primary**, **secondary**, **tertiary**\n            - Interactive state - **hover**, **focus**, **active**, **disabled**, **base** \n\n## Type of tokens\n\nTokens are divide into several categories:\n\n- base: tokens from figma ui syntax design system, reusable primitive values, should not be used directly\n- globals: semantic aliases for base tokens, palettes for brands, components sets, prepared for direct usage in styled components\n- brands: theme and color scheme tokens, color type mostly\n- assets: fonts and icon tokens\n\n## Utility classes\n\nThe utility classes are defined in the `styles` directory.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}