Welcome to the home of the Synergy Design System. This project is mainly intended for usage in SICK applications to ensure a unique look and feel across applications, however you may also use it for your own projects for free as well.
The documentation is always up-to-date and can be found on https://synergy-design-system.github.io/ .
The code resides on GitHub: https://github.com/synergy-design-system/synergy-design-system .
This repository is comprised of several sub-packages.
| package | description |
|---|---|
| tokens | design tokens which contain basic design variables for colors, spacings, sizes, fonts etc. They are always in sync with the Figma library, and the base for CSS styles |
| assets | icons and logos |
| components | user interface components based on custom elements and lit |
| docs | storybook documentation showing all components and their properties in an interative environment |
| angular | angular wrappers for better DX in Angular (auto generated) |
| react | react wrappers for better DX in React (auto generated) |
| vue | vue wrappers for better DX in VueJS (auto generated) |
SDS uses a monorepo setup, using node.js as a runtime and pnpm for dependency management and build scripts. If not already installed, install and configure these tools.
pnpm install --recursiveinstalls all dependencies.pnpm buildin the root directory forces a build all packages that provide a build job.pnpm lintin the root directory will run all configured lint jobs.